jQuery Forum

Hey everyone,

I'm trying to work with jQM and PhoneGap to write an app. Using a single-page layout is better to not have to load the whole app into the DOM right away, but leaves me with a great loss of flexibility as I have to define my header over and over again in each file. An even greater problem, though, is having to load jQuery, jQuery Mobile *and* the CSS file again everytime I open a page.

My question is if someone knows if a PhoneGap built app will cache those files or really reload them everytime? Also, what is the best practice to both keep the DOM small and keep flexibility?

If it was a pure web app, I'd just use a server-side language like PHP to dynamically create the header. Since I use PhoneGap to get a hybrid app, this method is out of the picture.

Thanks in advance!

Hi guys,

is there a way / what is the best way to make JavaScript/jQuery available in content that has been dynamically loaded using jQuery's "load" function? Of course I can just put JS Code in there, but it will be run first, so any objects (like functions or the Facebook API Connection) will not be known to code in there.

Any ideas? Thanks in advance

Hi everyone,

I'm using load() to run&display the output of a PHP script reading the last five entries of a database. Now there is also a "Show all" link to show more than just five. Especially the first time, this seems to work well. But after that, I get weird behavior:
The "Loading..." text appears (see code below), then it displays the last five results and after a few more seconds it finally also displays all the other results. After a couple more seconds, however, it just goes back to only displaying the last five.

The database code is fine, since it's PHP and therefore static once requested and it also worked before when I wasn't using jQuery. Basically, I have a div ('div_content') where I load the script output into and a div ('content_wait') that just contains the text "Loading...". I guess the rest is self-explanatory. The activateLinks() function is a "workaround" to bind jQuery to links coming to the page through the loaded script, too -- maybe there's a better way? But the main question is what causes the weird behavior and how to stop it.

My jQuery script looks like this:

1. $(document).ready(function() {
       // Loads requested internal link
       function navLoadPage(file, param) {
           var Pages = new Array('home', 'subsite1', 'subsite2');
   
           $('.div_content').hide();
           $('#content_wait').show();
          
           $('.div_content').load(Pages[file] + '.php' + param, function() {
               $('#content_wait').hide();
               $('.div_content').fadeIn(250, function() {
                   activateLinks();
               });
           });
       }
   
       // Defines onClick events for internal links
       function activateLinks() {
           $('a[href="#"]').click(function(event) {
               if ($(event.target).data('param') === undefined) {
                   var param = '';
               }
               else {
                   var param = $(event.target).data('param');
               }
          
               navLoadPage($(event.target).data('target'), param);
           });
       }
   
       // load default page
       navLoadPage(0, '');
   });
   

Thanks in advance!