JQuery function stops working when moved to js file

Question

I've been developing my scripts in line and now want to start moving them to a js file. However, the first script I am moving will not work from the js file.

function listEvents(url, phash) {
    var hashlocation = phash.split('#')[1];
    if (hashlocation === undefined) {
        var page = '';
    } else {
        var page = hashlocation;
    }
    $('#events').empty().load(url + page);
}

Called from page like so;

$(window).load(function() {
    listEvents('<? echo base_url(); ?>ajax/events_ajax/',window.location.hash);
});

The js file is loaded after the jquery library in the head before anyone asks. I have cleared my cache, put cloudflare into dev mode etc, and if I load the JS file in my browser I see my function. I'm not seeing any errors in the console. What am I missing?

Ilia Ross · Accepted Answer · 2013-10-13 13:04:34Z

1

I suppose that you would need to put your code into .ready function:

$(document).ready(function() {
   $(window).load(function() {
      listEvents('<? echo base_url(); ?>ajax/events_ajax/',window.location.hash);
   });
});

Explanation:

The problem is that when you fired your code, the content has not fully been loaded, which in your case, I think is #events. It was not on the DOM yet and as a result ignored by jQuery. If you run it in you HTML file, most like you'd put your code right under <div id="events"></div> (or whatever your container is) and because it was executed afterwards, that element was found and your code worked expected way!

Read more about jQuery .ready() function

.ready() function: Specify a function to execute when the DOM is fully loaded.

edited Oct 13, 2013 at 13:04

answered Oct 13, 2013 at 12:40

Ilia Ross

13.5k11 gold badges56 silver badges89 bronze badges

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

4 Comments

Ally Over a year ago

Yes this was the problem, but it was working inline, so can you please explain why it had to be wrapped in '$(document).ready(function(){});' to make it work from external file so that I can understand this for the future. Thanks.

zamnuts Over a year ago

@IliaRostovtsev why not just get rid of the $(window).load altogether in favor of $(document).ready?

Ally Over a year ago

Thank you Ilia for the explanation.

Ilia Ross Over a year ago

@zamnuts There are bunch of other ways for achieving desired results!

zamnuts · Accepted Answer · 2013-10-13 12:40:57Z

0

My guess is your embedded PHP <? echo base_url(); ?>:

listEvents('<? echo base_url(); ?>ajax/events_ajax/',window.location.hash);

Check your network panel in your browser's dev tools, not just console. See if you're seeing any 404s.

If you were working with inline scripts, those are PHP, but after moving to a .js file, the files are no longer handled by PHP.

answered Oct 13, 2013 at 12:40

zamnuts

9,6123 gold badges42 silver badges47 bronze badges

2 Comments

Ally Over a year ago

No the php is not in the js file. It's in the page file.

zamnuts Over a year ago

@Ally, oops yea, missed that detail in your post "Called from page like so"

Collectives™ on Stack Overflow

JQuery function stops working when moved to js file

2 Answers 2

Explanation:

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Explanation:

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related