Stack Pages: How do you remove a certain/specific page from dom?


#1

I have this problem where I have to call a specific page and everytime it creates another instance, it generates undefined values which is should not be doing.

To further explain see screenshot below

This previous page that is stacked and the current pages are the same, the problem is the current page are blocking the details inside this page.

Is there a way I can remove the current page or a way to not block the current same page?

I am using stackPages: true, but if i disabled this my problem is solved, however I need the stack pages to save actions of users from previous pages.

Thanks for answering


[V3] Memory leak
#2

What do you mean by the current page are blocking the details inside this page?


#3

for example, as a rule, there are elements in ids in the first instance of the page, so the current pages all its data has been blocked, so how do you remove the first instance of the page. I’d like to make a function that detects pages if they existed already and then replace with the new current instance.


#4

http://forum.framework7.io/t/stackpage-page-problem/5010/3

for betteer explanation I asked help with this guy too.


#5

Just like when you turn of the stack pages setting in the view,
what it does is it removes the 3rd page I think in the dom but saves a session to retrieve later in order you can go back to that page, from what I understand it works like that.

I’d like to apply it like that, but with stacking pages enabled,
Since a page has element ID’s which only usable once, unique pages should appear distinctly on the dom. but if you go back to pages, all its actions should remain the same.


#6

Enabling Stackpages makes your pages still in the DOM and added class ‘Stacked’ but its not ideal if you have lots of navigations links in a menu panel. It will create more instance of a page which is creating duplicate pages in the dom.
Still, I need to use stackpages in order to save actions/sessions going back and forth in pages.


#7

Still, there is no option to remove such pages from DOM and you shouldn’t. There are many ways of doing it in right way.

First of all you may use more unique selectors and don’t use IDs at all, or something like .page#prospects.page-current.

But better and correct is not to rely on page IDs at all. For example, if you use router component, you can refer to page element like this.$el so this.$el.find('.block') will give you Blocks within current page.

Also if you use Router component or Vue or React then there is a way to preserve page state without stackPages, e.g.:

<template>
  <div class="page">
    ...
    <input value="{{name}}" @input="onNameChange">
  </div>
</template>
<script>
  var name = '';

  return {
    data: function () {
      return {
        name: name
      }
    },
    methods: {
      onNameChange: function (e) {
        name = e.target.value; // overwrite global scope var for this page component
        this.$setState({
          name: name,
        });
      },
    },
  }
</script>

#8

I see your point. Thanks vladimir.

I’m using basic javascript with jquery, I will replace it to classes, but moreover, I have to learn either react or vue then.


#9

is there any way I can do this on a simple javascript/jquery? without using vue or react

> <template>
>   <div class="page">
>     ...
>     <input value="{{name}}" @input="onNameChange">
>   </div>
> </template>
> <script>
>   var name = '';
> 
>   return {
>     data: function () {
>       return {
>         name: name
>       }
>     },
>     methods: {
>       onNameChange: function (e) {
>         name = e.target.value; // overwrite global scope var for this page component
>         this.$setState({
>           name: name,
>         });
>       },
>     },
>   }
> </script>

#10

you can
the above code get parsed by the “core” => vanilla (not vue/react)

btw, time to get rid of jquery (with all due respect)