programmatically call a changePage on a panel

[epb]

Hi,

It's not an issue, but i have tried to do a changePage programatically to a panel page and I can't get it work although it works for a link that includes data-target="main" :

$.mobile.changePage( $("#ProductOptions"),
{
pageContainer: $("#main"),
changeHash: true,
reverse: true,
transition: "flip"
});

Any suggestions?

Thanks in advance!!!

[frequent]

Can you console.log( $("#main") ); to see whether you are really passing the object to pageContainer?

I think the "#" is the problem, because pages have id and panels have data-id. This is not the same.

I'm usually settings the panel to something like $('#myPage').closest('div:jqmData(role="panel")'), which then passes the correct object to the changepage. So in your case, either

a) give the panel a classname and set: pageContainer: $('.classname')
b) set it like this: pageContainer: $('div:jqmData(panel="main")')

Both should work. Does this help?

[epb]

Thanks for your response!

I have output $("#main") and it was taking ok because i added id="main" attributte to the panel...

I have tried your option b but does not do the changepage correctly, here is the log :
cleanup
clear active page and wrapper page
how many to clear =1
who is being cleared=wrap1
panelHash 03a $ignoreMyOwnNextHashChange=false
cleanup

Do you have a working example?

[frequent]

Ok. Tried it a few times. I can call the page allright programmatically, either by referencing a .class or #id, but after the transition the screen turns white. Try something like this:

var page = $('#somePage');
$.mobile.changePage( page, { transition:'slide', changeHash:false, fromHashChange: false, pageContainer: $('#main') });

Do you get the same?

I think I still have an error in JQM's css3TransitionHandler, where active-page class gets dropped after transitions. It should not drop active page on the wrapper page, if you are calling programmatically... I thought I had an easy solution there. I will let you know once it's working.

[epb]

Hi,

Yes, i have tried like this also and getting the same problem, the screen turns white...

Thanks for trying!

[frequent]

Hey epb,

Figured it out. I'm actually blocking changePage calls on panel transitions, so... you can call whatever you want, it won't work :-)

You need to call the panelTrans function inside the plugin like so:

$('#wrapperpageID').data('multiview').panelTrans('#details', 'main', 'main', 'link');

The options are:
#details = where to go
main = on which panel-ID
main = from which panel-ID
link = flag, so panelTrans knows whether this is a pageChange from a click or function-call.

It will need some fine tuning, but I will try to have it ready with the next commit.

Regards,

Frequent

[epb]

Hi,

Thanks very much for your response, I have tried your solution but i can't get it working.

My problem is that I want to reload one of the internal pages of the multiview, because I want to pass a new productId each team I am calling this page. Do you know the best way to do this?

Should i load that page as external page inside the multiview?

Thanks very much for your help!!
Regards

[frequent]

Hi,
my solution is not in the current version on Github. I need to finish up some things and make an update of all the files. Therefore it is not working for you. I will send you a message when I commit.

Actually I'm just sitting over something similar, like you are doing... I'm also thinking about the best way to accomplish this.

a) If you load the page externally into the panel and the user leaves again, the plugin should drop the page, so when the next item is loaded, the page will be loaded again. Nothing to do for you.

b) If you have the productID page "on board" when the wrapper page loads you would have to load the productID related stuff when calling the page and remove them again when the user leaves the page.

Without having tried, I would go for a). I will let you know how it turns out

Regards

[epb]

Hi,

Thanks very much for the effort and explanations!

I have page1.cshtml and page2.cshtml that will be loaded as external page in the page1 menu panel.

Inside page1 menu page, I have this link to load the external page:
a href="page2.cshtml" data-role="button" data-rel="external" data-target="menu" >Load external page2</a
The page is loading correctly and the hash is pointing to: .../page2.cshtml

Inside page2 menu page, I have this link to go back to page1 menu page:
a href="#menuPage" data-target="menu">Return to page1 menuPage</a
The correct menuPage of page1 is being displayed, but the hash is not being updated, it still points to .../page2.cshtml instead of .../page1.cshtml#menuPage

I am doing something wrong? Any ideas?

Thanks very much again

[frequent]

I set up a sample page which breaks both ways I'm trying = using the panel-history or using the back button :-(

I will try to fix it over the weekend along with the programmatic panelTransition call, so you can continue. Actually external page handling is pretty much the trickiest area in the plugin.

In general:
If you want to have a back button on panels, you will have to set data-hash="history" on the panel (see the demo page source code). There is also a plugin demo to show how the history works - see here. Click around and use the back buttons or use the browser back button. This works ok for internal pages, but external pages still difficult - see what happens to the URL for example.

I will let you know how it turns out.

[frequent]

@epb - new commit with JQM 1.0.1. coming up in which you can call changePage programmatically. Trying to upload tonight.

[frequent]

new commit is done. You can now changepage programmatically by calling:

$.mobile.changePage('#pageid', {transition: 'slide', pageContainer: $('div:jqmData(id="data_id_panel")') });

So. I'm closing this.

[marctrem]

Is it me or it dosent work with external pages?

[frequent]

which version are you using? multiview-JQM 1.1?

[frequent]

Here is a quick sample page. Click on the text in the left menu. This
will fire an alert and a programmatic changepage call to load external dummy2.html into the middle panel.

Check the source code on the bottom how it's done.

I'm almost done with the JQM 1.1. version of multiview - please use the version from this folder:

multiview JQM 1.1

Also note, you will need to use the JQM version in this folder, because there are a few if-clauses I need to add inside JQM to make it work.

Let me know if this helps.