1

I am working on a new site with jQuery mobile.

Have a few specific questions. Please provide specific, appropriate answers. Am very much confused as jQuery Mobile uses an Ajax based navigation from page to page.Assume that the pages that I refer to are in separate files.

  1. How should we organize the Javascript files. Should there be a single javascript file that should be on the home page. Or, how should we load page-specific javascript. I feel bit hesitant to put javascript inside the body tag for loading it.

  2. What is the right way to pass the parameters from one page to another.Though there are multiple discussions on this. There is not any convincing answer.

  3. How should we organize the CSS files as well. Very much confused as to have a single file for the entire site.

I don't want to disable ajax based navigation as it might affect the performance.Thanks in Advance. Hope there will be some healthy discussion on this.

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
user694688
  • 593
  • 1
  • 15
  • 32

1 Answers1

3

My observation will come from the point where ajax is still on and you don't want to put your javascript/css inside a page BODY.

  1. When ajax is on only first page is loaded into the DOM, in every other page only BODY will be loaded (no point in having several HEAD's inside a DOM).

    Because of this your javascript must be placed inside a first HTML. Now it doesn't matter if you want to use 1 js file or several of them, as long as they are initialized inside a first HTML.

    I have another article dedicated to this so take a look: Why I have to put all the script to index.html in jQuery Mobile

  2. I will only show you link to my other answer regarding this topic, there you will find several solutions with examples, search for a chapter "Data/Parameters manipulation between page transitions" : jQuery Mobile: document ready vs page events

  3. Everything I said for javascript also reflects here. It doesn't matter how much css files you use as long as they are initialized inside first HTML file.

EDIT :

I am always ready for a healthy discussion. ;)

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • 1
    Thanks Gajotres. SO, I will arrange all the scripts in one js file. But, how should we load page specific scripts. Is it like this?$(document).on('pageshow', '#YourPageID', function(){ }); – user694688 May 08 '13 at 06:06
  • 2
    You are correct. But I would advise you to use pageinit instead. Pageshow will trigger every time page is visited while pageinit acts as document ready. Also with pageinit you will not have problems with multiple event binding. All this is described in one of a links in my answer. – Gajotres May 08 '13 at 08:12