Why aren't my scripts loading , jQuery Mobile?

Question

I am developing a jQuery Mobile Website. I am using the Multi-Page structure , that means that i have all my pages in a single html file.

I have a SERIOUS problem on loading my javascripts correctly. It literally drives me crazy , as i cant understand what/why is happening.

I have a page which has a navbar with 2 horizontal buttons on it that lead to 2 different pages. Both pages , will load the facebook javascript API and dynamically show us photos from 2 different facebook pages.

My question :

Where should i put the javascript files , that call the facebook API , of every different page that i have??

If i put the javascripts in the head of my html page , NOTHING WILL EVER load.

I try to call the javascript in the end of the content div of every page.

It looks like that:

$('#xxx').on("pageshow", function() { ... }

For the 1st page that i have , the javascript will load just fine and show me the pictures.

However the 2nd one when i navigate there through the navbar , it doesnt load the javascript. It will ONLY load it IF i press refresh on this particular page.

So what i am asking for is where and how do i put my javascripts so that they execute EVERY TIME a page has loaded?

My code looks like this:

<div data-role="page" id="photosNJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
    <div data-role="header" data-id="fixedNav" data-position="fixed">
        <h1>Application Title</h1>
        <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#photosNJ" class="ui-btn-active ui-state-persist">Photos Noche Joven</a></li>
                <li><a href="#photosEJ">Photos Espacio Joven</a></li>
                <li><a href="#videos">Videos</a></li>
            </ul>
        </div> <!-- /navbar -->
    </div> <!-- /header -->
    <div data-role="content">   
        <ul data-role="listview" data-inset="true" class="albums">  
            <!-- Here the albums are created through javascript (createAlbums.js) -->
        </ul>       
        <button type="button" id="loadMoreAlbums">More Albums...</button>   
        <script type='text/javascript' src='javascript/createFbAlbums.js'></script> 
    </div> <!-- /content -->
    <!-- <div id="fb-root"></div> -->

</div>


<div data-role="page" id="photosEJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
    <div data-role="header" data-id="fixedNav" data-position="fixed">
        <h1>Application Title</h1>
        <a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#photosNJ">Photos Noche Joven</a></li>
                <li><a href="#photosEJ" class="ui-btn-active ui-state-persist">Photos Espacio Joven</a></li>
                <li><a href="#videos">Videos</a></li>
            </ul>
        </div> <!-- /navbar -->
    </div> <!-- /header -->
    <div data-role="content">   
        <ul data-role="listview" data-inset="true" class="albums2"> 
            <!-- Here the albums are created through javascript (createAlbums.js) -->
        </ul>       
        <button type="button" id="loadMoreAlbums2">More Albums...</button>  
        <script type='text/javascript' src='javascript/createFbAlbums2.js'></script>    
    </div> <!-- /content -->
    <!-- <div id="fb-root"></div> -->
</div>

The javascript files all start like this :

$('#xxx').on("pageshow", function() { ... }

Why are you NOT showing us what the createFbAlbums.js and createFbAlbum2.js files actually look like? I assume that's where you're loading the jQMobile library? — DevlshOne
– DevlshOne, Commented Aug 14, 2013 at 13:06
The code Facebook provides should, as facebook sais, be put right after opening the <body tag. Own javascript files & code are best to be put right before closing the </body>, because then the rest of the page is already loaded. — jdepypere
– jdepypere, Commented Aug 14, 2013 at 13:07
No the jquery mobile is loaded in the head of my html. I think it doesnt matter what these scripts look like. They both work well. The only problem is different. The problem is that when a page is refreshed the javascript works. When i navigate to the other page , the javascript there wont run. And via versa. If i refresh the 2nd page the second script runs well. When i navigate to the 1st one the javascript wont run. So what i am asking here is , how to make my javascript run WHEN i navigate to a page. Where shall i place it — Johny Jaz
– Johny Jaz, Commented Aug 14, 2013 at 13:09
@Arbitter this is a multi-page structure. I need to load the API 2 different times for 2 different facebook pages. But i dont think this is the problem here. — Johny Jaz
– Johny Jaz, Commented Aug 14, 2013 at 13:10
And are you sure the event is firing the second time you click something? Could you show the javascript that should trigger the event? — jdepypere
– jdepypere, Commented Aug 14, 2013 at 13:20

MartinOnTheNet · Accepted Answer · 2013-08-14 14:12:20Z

1

the following text explains well where you need to add your JS.

Source: Jquery mobile Cookbook

You need to know when using Ajax navigation, the < head > section is processed only on the first page or the main of your app. The < head > element of each of the remaining pages is ignored and only their pages div containers are executed. Thus, to ensure that your script is executed in these pages, you have to include the tag within the page's div container.

So you could do the following:

a) Add event within page div:

<div data-role="page" id="photosEJ" data-theme="a" 
    data-add-back-btn="true" data-back-btn-text="Back">
    <script>
        $('#photosEJ').on('pageshow', function() {

        });
    </script>
    <div data-role="header" data-id="fixedNav" data-position="fixed">

Or, b) Attach it to the document. This way, you do not need to set your script on each page but in the < head >

<script>
   $(document).off('pageshow').on('pageshow', '#photosEJ', function() {
   ....
   });
</script>

(optional) I normally declare off/on in case, some events trigger twice.

EDITED:

After your comments, can you do the following: In your script declare as follows:

$(document).off('pageshow').on("pageshow", '#photosNJ', function() {
    var albumPhotos = new Array();
    var albumThumbnails = new Array();
    var x=0;
    var next;
    var times=0;
    var dataLength=0;

Then in the < HEAD > set this as:

<head>
    <script type='text/javascript' src='javascript/createFbAlbums.js'></script>
</head>

see how you go...

Hope helps...

edited Aug 14, 2013 at 14:12

answered Aug 14, 2013 at 13:53

MartinOnTheNet

1448 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Johny Jaz Over a year ago

I dont understand why this is different from what i did? I do cadd event within my page div as you can see.. For example the 1st you say. Whats the difference if i place my javascript as you do , or if i give a link to another file where i have it? Then 2nh thing you say i dont understand it. Attach it to the document? Where? In the head?

Johny Jaz Over a year ago

The scripts wont run , even if i place them in the beginning of the div of the page as you suggest. I mean it runs when i run one page , but when i go to the other page it wont run. only if i refresh...I dont know if it doesnt run in general , or is because this specific javascript that i have and use the facebook api...

MartinOnTheNet Over a year ago

Hey, I just updated the second option with < head >. For some reason it did not show up first time. To your questions, try not to run a < script > SRC tag for each page. Can you try declaring as in second option within those scripts, and then add them in the < head > of the main layout?

MartinOnTheNet Over a year ago

Just edited my post. By the way the second option is also known as 'Just-In-Time' initialization, which mean we are binding events before the DOM is ready.

Johny Jaz Over a year ago

As you see i have 2 scripts. I did for both what you suggested. And then in the head i put: <script type='text/javascript' src='javascript/createFbAlbums.js'></script> <script type='text/javascript' src='javascript/createFbAlbums2.js'></script> But ALWAYS the 2nd script that i place in order works. Is like one script goes up to the other. If i change the order of the scripts , again the last one will only work!! So the problem is not what page i open first , but what script i LOAD last! Only that will work! How do i fix that?

|

Collectives™ on Stack Overflow

Why aren't my scripts loading , jQuery Mobile?

1 Answer 1

EDITED:

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDITED:

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related