i'm having a problem with jqueryMobile popup widget.
HTML (via jquery mobile Site):
<a id="testId" href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.</p>
</div>
besides that on the page is an MVC3 Pager:
#Html.PagedListPager(Model.Items, page => Url.Action("ListA", "List", new { page }))
all the scripts are loaded, jqyerymobile is loaded (checked using $.mobile)
the test scenario:
i open a page:
List/ListA
and click on a link to show the dialog. - Works
i change the page of the paged List, so my URL changes to
List/ListA?page=2
i click on the show dialog link - nothing.
i go back to page 1 of the paged list, click show popup, Nothing.
But:
when i enter a page URL like List/ListA?page=2 and load the page from scratch ( like a new tab, or window) , the popup works on this page, until pagesList page change.
when on step 2 i force the reload of the page by using Ctrl+R / Crtl+F5 (depending on the browser) it starts to work on this page.
tried also all combinations of
$('#..').popup('open')
.popup('close'), etc,
It all points me to thinking, that some part of initiation like creating jquerymobile widgets fails on pages with &page=something.
the markup is all there, selectors correctly select the popup element, but open simply doesn't work.
Or maybe when the page is reloaded on a different paged List position, some objects remain in the browsers context what prevents them from being re-created on new page, hence some valid, but not working references.. i don't know.
Can anybody provide me with come clue, to why this is happening?
jquery mobile version: 1.3.1
Related
In facebook feed or Pinterest gallery, when a user click on the content, jQuery will load the content and appended it to the current page as a modal (the url of browser will also changed according to a.href, even though there's no page reload). However, if the user launch a new page with the very same url, he is going to see a page with different layout (as opposed to the modal's) but the same content.
How do I accomplish this? (a click will load content onto a modal, while launch url as new window will display content on a new page with different layout)
I am new to angularjs. I have a requirement which says that a flash page needs to appear before the main page is displayed which would look something like this,
Only on click of the button, I should be able to navigate to the main page. Please note that I need to be displaying a HTML page and not alert.
I am using JQuery mobile 1.4.2 and Django 1.6 for the backend. This is my problem:
I have a total of 3 very simple pages linked to 3 distinct Django views:
Page A -> Search form.
Page B -> Results page (gets the POST from A and displays the results as a <table>)
Page C -> Shows a customized page based on what was clicked on page B.
(i.e. http://example.com?id=a44)
Every page has a navigation bar which contains a back button. The problem is that when I'm on page C and then press the back button (either the navbar's or the browser's native one), the system calls GET on page B instead of going back in browser history. This can create all sorts of problems.
I also have no custom css in neither of the 3 pages. This is how I implement the navbar's back button:
BACK
Please note that if I put data-ajax="false" on the form of page A the problem goes away but at the cost of the jquery transitions. Is there a way I can "fix" this and keep the transitions?
Thanks in advance.
I'm creating a mobile app using jquery mobile and cordova. I've successfully loaded a dynamic listview from a json ajax call. My issue is that when I navigate to another page, then press the back button, the original page's listview does not load and there is nothing where it should be. If I refresh the page, the listview appears. Rather than refresh the whole page every time I navigate to this page, how would I refresh just the listview?
I've tried refreshing the listview both when the DOM and the window have loaded, and before both, and using $(document).on("pagebeforeshow", "#pagenamehere", function() {}); to no avail.
To be more specific, I have two pages with listviews. The navigational steps go as follows:
1. load page 1: listview shows
2. navigate to page 2: its listview does not show
3. press back: page 1 listview shows
4. navigate to page 2: its listview still does not show
5. refresh page 2: its listview DOES show
6. press back: page 1's listview does NOT show
This process should make it clear that the listview only loads when the url is directly input or reloaded; for some reason navigation between pages (different html files) breaks this.
If you have script inside the head tag of the second page and this page is loaded through Ajax, then the script won't execute.
Try to move your script from the head tag inside the second page's div (<div data-role="page" id="mySecondPage">) or create a JS file and load it on the first page's load. Relevant example here
jQuery Mobile uses Ajax to perform pages transitions so during the transition jQuery Mobile will only inject the contents of the response's body element (or more specifically the data-role="page" element). Nothing in the head of the page will be used (except the page title).
In conclusion, any scripts and styles referenced in the head of a page won't have any effect when a page is loaded via Ajax. They will execute if the page is requested via HTTP and that's why your listview is loaded after a full page refresh.
Most of the example sites (like below) that JQM link to use a common navigation system, I'll use this site as an example:
http://www.takemefishing.org/mobile/
When linking to another page that isn't already in the DOM, they use the ajax navigation for example, on the homepage they link to 'Fish Species' with a href of
#/mobile/fish-species.
On click, this actually loads the page into the DOM via ajax from /mobile/fish-species which only contains the <div data-role="page" id="fish-species">... content here ...</div>
Then the address bar is updated to /mobile/#/mobile/fish-species.
If you go directly to /mobile/#/mobile/fish-species (e.g. by using the refresh button or a direct link), it loads the homepage with all the CSS, JS etc etc, and then via ajax loads /mobile/fish-species into the DOM seemlessly.
This structure/system seems to be the common method used on JQM sites, for example Walt Disney and Standford University.
My question is how are they making this magic happen? I suspect JQM is doing almost all of the work, and there is just some config option or flag that I am missing.
Here's what I've tried
I have a basic JQM homepage /mobile/index.html with the DOCTPYE, <head> section with CSS, JS etc etc included, and a link to another page page2.html:
<li>Page 2</li>
Page 2 is similar to the 'Fish Species' page whereby it just containts the:
<div data-role="page" id="page2.html">... content here ...</div>
Now, when I click the link on the homepage, page2.html is loaded into the DOM via ajax and shown. The problem is the addressbar shows:
/mobile/page2.html
If I then click the browsers refresh button, or navigate directly to /mobile/page2.html, of course the browser just loads page2.html containing only the page <div> and no head section or CSS/JS included.
What am I missing to get the link to show #/mobile/page2.html in the address bar when loaded, and then if refreshed I want to load the homepage then pull page2 in via ajax, just like the example sites do?
I am using the latest JQM at http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js
Jquery Mobile will interpret navigation to the address #address as navigation to the page named address
This means that you can define in your single index.html two pages, for instance
<div data-role="page" id="index.html">link to JQM page2</div>
<div data-role="page" id="page2.html">... content here ...</div>
Clicking on the link in the first page will load the content of the second page and update the location displayed in your browser's address bar accordingly.
This is the standard JQM approach, used for instance in the stanford website you linked to.
The Disney and Fish websites look like they are doing things slightly differently as they apparently dynamically generate the target page by binding to the pagechange event, analyzing the target address and acting accordingly. You can see more details on dynamically generating pages in the jquery mobile docs.