Search jQuery

jQuery Forum

index.html won't run custom js

in jQuery Mobile • 2 months ago

On every single .html page, I have this code right before the end of the <div data-role="page" id="home" data-theme="a"> div.

$('div:jqmData(role="page")').live('pagebeforeshow',function(){

resizeItems();

});

The resizeItems function is in /js/my.js.

It works on every page EXCEPT for index.html. And even more strange, it does work on index.html when you first go to the site or refresh it, but if you use a button to get back to index.html, it just doesn't run resizeItems.

Here is an example of the nav button I'm using:

Any idea of why this could be happening? Thanks!

Replies(9)

Godsbest

Re: index.html won't run custom js

2 months ago

You probably need to enclose the code in:

$(document).bind('pageinit', function() {
//code
});

What version of jQ are you using; it doesn't sound like 1.9.1?

switzer

Re: index.html won't run custom js

2 months ago

jQuery Mobile v.1.2.0 and jQuery v.1.7.1

I tried $(document).bind('pageinit', function() { and it didn't work. :(

Godsbest

Re: index.html won't run custom js

2 months ago

.live() was deprecated in 1.7 (removed in 1.9); so you would be safer using .on(). That will make it much easier for you when you upgrade.

Do you have a link to your site?

switzer

Re: index.html won't run custom js

2 months ago

Here's a link... http://mytallahassee.info/fsunews_app

I think tomorrow, I'll just upgrade to jQuery 1.9.1 and see what happens.

Thanks!

Godsbest

Re: index.html won't run custom js

2 months ago

Your code may not trigger on the first page. By definition pagebeforeshow triggers on a "toPage":

http://view.jquerymobile.com/swipe/docs/api/events.html

pagebeforeshow

Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will receive a data object as their 2nd arg. This data object has the following properties on it:

switzer

Re: index.html won't run custom js

2 months ago

Well, I guess the question is then... how do you make code trigger on the index page? Surely there has to be SOME way to make code trigger.

Godsbest

Re: index.html won't run custom js

2 months ago

Depending on what your needs are you may find an appropriate event on the following page. You may want to explore pageinit and pagecreate:

http://api.jquerymobile.com/category/events/

watusiware

Re: index.html won't run custom js

2 months ago

You should put your script in a file linked from <head>.

There are several problems with putting in the page where you have it. For example, every time you load that page, you will add an additional registration. If you've loaded the page 10 times, now you will be called resizeItems 10 times for every page!

You're also not qualifying the page with a selector. Did you want to do this for EVERY page (which is what it does now) or only for the home page?

switzer

Re: index.html won't run custom js

2 months ago

I put resizeItems() in js/my.js. I want it to run on every single page that loads, including the homepage.

I guess part of my problem is I don't understand how each page decides when to load specific things. In the head of every page, I'm calling <script type="text/javascript" src="js/my.js"></script>. In my.js, I have resizeItems(){ code... }. At the end of my.js, I just have resizeItems() so it runs.

Maybe I'm putting the call to resizeItems() in the wrong place. Should it go in my.js or should it go in the <head> of each page? Or somewhere entirely different?

Top Reply

Response title

Attachments

jQuery Forum

index.html won't run custom js

Replies(9)

Re: index.html won't run custom js

Re: index.html won't run custom js

Re: index.html won't run custom js

Re: index.html won't run custom js

Re: index.html won't run custom js

Re: index.html won't run custom js

Re: index.html won't run custom js

Re: index.html won't run custom js

Re: index.html won't run custom js

Statistics

Tags

Actions

Related Posts