Manipulating DOM on stacked pages with parameters targets first page only

Questions
1

I have an app I’m writing in which the main page may link to a detail page with parameters that then Ajax in the contents of that page (basically in the route scenario below, detail.html is just a template page and the data is live).

routes: [
    {
        path: '/',
        url: './index.html',
        pageName: 'index',
    },
    {
        path: '/detail/:id',
        url: './detail.html',
        pageName: 'detail',
    }

This works fine if it’s just index > detail, but when I have another detail page that uses the same template as detail.html, navigating to that index > detail:1 > detail:2 doesn’t load the data into the new detail:2 page, but on detail:1 (I know this because when I navigate back to detail:1 it has the :2 data on it briefly before Ajax updates it).

I suspect it may be either because the DOM manipulation I’m doing to add the data sees detail:1 still in the DOM. Or it may be how I’m triggering getting the data

$(document).on('page:init', '.page[data-name="detail"]', function (page) {
	detailInit();
});

I have console.logged the parameter ID, and it picks up on that correctly, but $(’#element’).html(‘new data’); to change the template is putting that in the wrong place.

Is it even possible to load the same page with different parameters from itself? Maybe there’s a way I can tell my script to target the page its just loaded rather than the first one in the DOM?

2

I wont tell you I fully understand your issue (I would need to sit in front of your coputer to do that) nor do I fully understand F7 internals, but this is probably the core of your problem

I suspect it may be either because the DOM manipulation I’m doing to add the data sees detail:1 still in the DOM.

In general pages are cached and they exist in the DOM so selectors see them all the time. I don’t know how to access specific cached page if it is not marked with an unique id. You would need you set an id somehow. Also to access current page you can use this selector even with classes:

var dt=$$('.page-current').find('.myclass').attr('data-my-attr-id');
1 Like
3

I found the easiest solution for this was to add my dynamic data using the jQuery .last() selector. Works a treat.