query parameter passing to internal/embedded pages using jQuery Mobile - jquery-mobile

I extremely need to pass parameters to internal pages like from div to another in jqm. is this feature available in jqm??? counting on ur professional answers as usual.
Thanks in advance.

I guess duplicate of How to pass and get Parameters between two Pages in Jquery Mobile? or Passing parameters to a page-id in jQuery Mobile or many more helps if you google with "jquery mobile passing parameters between pages".
still have issue with passing parameter? -> please share sample of your code which you have tried.

Related

Get Parameters of Link Clicked jQuery Mobile

I've been looking to find a way to get the url parameters of the link that was clicked in my pagebeforeshow event
$(document).on('pagebeforeshow', '#category',function(e,data){
})
With the link looking like this (you can also see I added a data attribute)
Dairy
I've read a bunch of different answers on here and tried lots of them, but I've discovered that they are looking to use the current url of the page to get the parameters. However the current page url does not have the parameters in it (as I'm using pagebeforeshow)
And then I've seen other examples where people are manually changing pages using jQuery.mobile.changePage but to me it seems like overkill having to add click listeners to my buttons and then manually pass in parameters using changePage for each of them
I have also looked at this plugin which probably would work, but I am reluctant to use a plugin for something which to me seems so simple
I just need to be able to access the url or the data-cat attribute that was clicked, but I can't seem to find an efficient way to do it without having to a click listener and then manually changing the page, surely there's a better way?
Update: jQuery Mobile 1.4.2

What's the Best Way to Implement Paging with a List using jQuery Mobile and MVC?

I am building a media library from a tutorial to get up to speed on MVC 4. I did the whole thing and now I'm re-building it using jQuery Mobile. The only piece I've yet to find simple is paging which should be easy. Can someone steer me in the direction of a nice tutorial on the subject?
We do have similar kind of Use case.
Store the Data in Session object in the form of Dictionary in this form.
On click of Next or previous button in Pagination control, fetch data from Controller, bind data to appropriate control in the UI and show data.
Make sure to show only limited data in UI. Restrict the number[max 10 per page]
Format Dictionary

jQuery Mobile POST request with multiple pages response

From the documentation, http://jquerymobile.com/test/docs/pages/page-links.html
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
Now, that seems to only apply to GET requests (i.e. via link elements). However, what is the guideline for POST requests? Right now, for the project I am currently working on, if I make a POST request with response that contains multiple N internal pages (lots of divs with data-role="page" and unique IDs), jQuery mobile only loads the first one it sees, and ignores the rest.
I am pulling my hairs out, not sure what to do to work around this. Is there a way to force jQuery mobile to do to full page reload?
Thanks a bunch in advance!
It turns out that data-ajax will work just fine inside the form tag. i.e
<form action="target.php" method="post" data-ajax="false">...</form>
Previously, I thought I had set data-ajax="false". However, it turns out that with the PHP framework (yii) I use, there is a big difference between "data-ajax" => false and "data-ajax" => "false" (former assigns to boolean type, and later is string type). Anyway, long story short, data-ajax is indeed the solution.

jQuery mobile: URL query string does not change

I'm playing around with jQuery Mobile and ran into some (for me) strange behavior.
I have a bunch of links each pointing to the same jQM page, #otherpage, but with different values for the URL query string, like #otherpage?q=foo, #otherpage?q=bar, and so on. The change to the other page works fine but the query string sticks between clicks, so if I first click the link to #otherpage?q=foo, and then goes back to the first page, all subsequent page changes to #otherpage will have q=foo, no matter what the currently clicked link's href says.
jsFiddle didn't seem to have support for jQM so I put an example here: http://cpak.se/dump/location-search-test.html
I've tried this in Chrome and Safari on Mac.
I use the query string to pass simple data between pages since I have other code hooked into the pagechange events, that is more or less unaware of what earlier code might have done. If I can't get this working I'll have to find another way to pass data around... :P
Cheers!
/Christofer
Disabling jQm seems to be the easiest solution for updating the url parameters correctly in the browser. E.g. adding data-ajax="false" in the link anchor and not using $.mobile.changePage.
<a href="#page?id=1" data-ajax="false">
In a dynamic app modify the value of href beforehand.
I've looked up for this issue because it seems a little bit weird indeed. There is a open issue about this: https://github.com/jquery/jquery-mobile/issues/2859
Atm jQuery Mobile doesn't recommend using query parameters:
We don't currently support query parameters as part of the hash
fragment, though this is something that's been discussed frequently
internally and is on the feature request list.
They advise to use a plugin like:
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
https://github.com/azicchetti/jquerymobile-router
However, there is a workaround since the data-url of the active page in the DOM DOES change, you can retrieve this with $(".ui-page-active").attr("data-url"); I've tested this on your website and it gave me all 3 uniques URLs
jQuery Mobile by default does not allow passing query-string parameters to internally linked pages. Check-out the very bottom of this documentation page (the second bullet from the bottom of the page): http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html
jQuery Mobile does not support query parameter passing to
internal/embedded pages but there are two plugins that you can add to
your project to support this feature. There is a lightweight page
params plugin and a more fully featured jQuery Mobile router
plugin for use with backbone.js or spine.js.

URL with JQuery Mobile

I am using JQuery mobile in asp.net web form website. I have the following code at the page "pageA.aspx".
View Saved Orders
When I am clicking on this link I am successfully redirected to the PageB, but the URL I am getting is
http://localhost:3244/MyFirstJQueryApp/PageA.aspx#PageB.aspx
But I want URL like this further processing, please help
http://localhost:3244/MyFirstJQueryApp/PageB.aspx
I have done it by setting target="_top" property.
Is this a good practice ?
There are a couple of mods out there (can't find the one I wanted) to remove the hash in the URL, but you have to edit the jQM framework.
You could try using the changePage() http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html and set the transition without tracking it in history option to true (I think it's true)
Here is some more documentation on navigation as well: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
mightbe able to think of another way
The idea behind jQuery Mobile is that you don't do it the way you're trying to do it! Check Dynamic pages with jQuery Mobile, which shows you how to let jQm do the work in the background by loading new data into the DOM.

Resources