Geek Answers Handbook

Jquery mobile - loading content in a div

JQuery Mobile works by “grabbing” a page and loading content and entering it on the page.

This seems to create a problem when I try to inject other content on the page.

I have my index.html and then the page2.html file. I set up jquery mobile in the usual way, wrapping the contents of each page in a div like this:

<div id="container" data-role="page"> // my content <a href="page2.html">go to page 2</a> </div>

when the user goes to page 2, he performs a good slide effect. The URL in the location bar looks like this: index.html # page2.html

jquery mobile enters the content of the page using anchors and applies a transition. good, so everything works fine until the next part.

On page2.html, I have a section that loads some external data and enters it into a div.

 <a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a> <div id="target"></div> <script src="js/code.js"></script> <script src="js/loader.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.ajaxtrigger').trigger('click'); }); </script>

The problem I am facing is that when I enable transitions in jQuery mobile, this script does not work. It will not load data in a div. bummer.

Does anyone know what I need to do to get it to run and load content into this div?

+4
source share
4 answers

You are trying to use $(document).ready(function(){ $('.ajaxtrigger').trigger('click'); }); to capture the click / click on page2 in index.html and then paste the data on page2.html?

If so, this will not work as you cannot transfer data between pages this way. Try specifying page2.html main div id #page2 and use the pagebeforeshow method (http://jquerymobile.com/test/#/test/docs/api/events.html)

 $('div#page2').live('pagebeforeshow',function(event, ui){ $('div#page2 div#ajax_loaded_content').load('url_to_load_from.php'); });
0
source

I have a similar problem (as mentioned in a comment above) and I just figured it out (at least for me). When jQuery Mobile loads the next page through ajax, it saves the previous page in the DOM so that the back button works correctly. The problem is that if you use javascript on the second page to refer to any DOM element (in particular, by identifier), you should consider that the elements from the previous page are still in the DOM. Since identifiers are intended to be unique, document.getElementById() not so reliable and therefore $("#myDiv") is not.

What I just started doing is referencing DOM elements by class name (for example, $(".myDivClass") ), since css classes are not intended to be unique, and this seems to do the trick. A side effect is that any changes you make to javascript will be made to all hidden pages, but it does its job. Another idea that comes to my mind when I type this is to give each <div data-role="page"> unique identifier and now the request elements using $("#myUniquePage #myInnerDiv") instead of $("#myInnerDiv") .

Hope this helps.

0
source

Try the following:

 $('page2.html').bind('pageshow', function() { $('.ajaxtrigger').trigger('click'); });
0
source

Another option would be to create a unique identifier for the DOM element that you want to manipulate every time the page is loaded, so you have no problem with duplicate identifiers that Adam describes. I did this in C # (with Razor syntax), for example:

 @{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); } @section header { <div id="@headerAutoGenSym"></div> <script type="text/javascript"> $(function () { $(document).bind("pageinit", function () { $.get( '@Url.Action("myAjaxURL")', function (data) { $('#@headerAutoGenSym').append(data); } ); }); }); </script> }
0
source

More articles:


All Articles