jquery in external file – problems

[dschneid]

Hello,

I have recently begun implementing jquery into my site and after awhile it started to get a bit unruly and I wanted to put everything in an external file.

For example, I had the following code in my header:

$(function(){

$(".question").live("click", function(){

$(this).next().slideToggle();

});

});



$(function(){

$("#display").live("click", function(){

$(".answer").show('slow');

});

}); 

This worked just fine on all browsers. I then went to put it in an external js file:

which has it as

(function($){

faq = function() {

$(".question").live("click", function(){

$(".answer").slideToggle();

$(this).next().slideToggle();

});

})(jQuery);

NOTE: I removed the second part just because I was trying to identify the problem with something similar…no such luck.

Then I call it like this:

$(document).ready(function(){

faq();

});

Doesn’t work.

This should be really simple syntax change – anyone?

[Mottie]

You could just continue with the first example and add the following to the external file – I’ve combined the document ready blocks:

jQuery(function($){

$(".question").live("click", function(){

$(this).next().slideToggle();

});



$("#display").live("click", function(){

$(".answer").show('slow');

});

}); 

Just so you know, using the live event isn’t the most efficient method of monitoring events. In the latest version use on.

[dschneid]

Thanks I have done that so it now looks like:

jQuery(function($){
faq = function (){
$(“.question”).on(“click”, function(){
$(this).next().slideToggle();
});

$(“#display”).on(“click”, function(){
$(“.answer”).show(‘slow’);
});
}
});

And then I call it in the header like this:

It seems to work fine in firefox but not in other browsers such as chrome :(

[Mottie]

Just use exactly what I have in the last post… no extra code is needed in the header.

[dschneid]

mmm OK

I have put EXACTLY what you stated in the last post, unfortunately while it seems to work in firefox it still does not with chrome (or likely other browers)

ideas?

Thanks!

[dschneid]

I will say though that when you hover over the relevant area the cursor changes to the hand, indicating that it wants to do something, it just doesnt lol

[dschneid]

Im not sure but when I open up web developer tools in chrome and look at scripts I do not see the general.js file, meaning it didn’t load I suppose?

[dschneid]

BTW when I put this into jslint it came back with several errors, though i don’t know how material any of these are…

Error:
Problem at line 1 character 1: ‘jQuery’ was used before it was defined.

jQuery(function ($) {

Problem at line 2 character 3: Missing ‘use strict’ statement.

$(“.question”).on(“click”, function () {

Problem at line 2 character 3: Expected ‘$’ at column 5, not column 3.

$(“.question”).on(“click”, function () {

Problem at line 3 character 5: Expected ‘$’ at column 9, not column 5.

$(this).next().slideToggle();

Problem at line 4 character 3: Expected ‘}’ at column 5, not column 3.

});

Problem at line 6 character 3: Expected ‘$’ at column 5, not column 3.

$(“#display”).on(“click”, function () {

Problem at line 7 character 5: Expected ‘$’ at column 9, not column 5.

$(“.answer”).show(‘slow’);

Problem at line 8 character 3: Expected ‘}’ at column 5, not column 3.

});

[Mottie]

The code is fine, it has 2 spaces instead of a tab for indenting.

Now what does the HTML look like in your page header?

[dschneid]

The header is really convoluted because there are so many plugins etc. I considered posting it but then I figured it would just be gibberish. Just in case I will post it below.

I believe what is going on is that chrome and likely the other browsers are not loading general.js. I am not sure why, something to do with cross browser functionality. Then again, many other files that have the same format seem to load fine.

Perhaps it needs to be loaded dynamically?

Here is the header (I just got this off of firebug)

[Mottie]

Ummm wow… you know script tags need an open AND a closing tag

Also you’re using both Prototype along with jQuery, so you need to set no conflict mode:

[dschneid]

Yes I understand that, because I took this from firebug it rolls up the script into a + so you don’t see the – they all have them though.

As for the no conflict mode, I am not exactly sure where you see that jquery.js is being called – are you refering to?

In that case that is just being taken from an external website, so i'm not positive how I would edit it....

Thanks again!

[Mottie]

You don’t edit jQuery itself. You just need to add an extra bit of code immediately after jQuery loads

Here is the reference

[dschneid]

Many thanks for feedback thus far, unfortunately I am still not getting it.

The jquery source is not called directly in header.php.

It is actually called in functions.php through the function wp_head() which is located in header.php.

I am not so sure I can include the jquery no conflict script here because it is a .php file, correct me if I am wrong.

The file specific text looks like

function my_init() {

if (!is_admin()) {

wp_deregister_script('jquery');

wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', false, '1.7.2', true);

wp_enqueue_script('jquery');

}

}

add_action('init', 'my_init');

I have tried removing it from functions.php by commenting it out and placing it smack in the header so I could add the noconflict clause, but then the whole thing breaks down, probably because jquery is required for some plugins earlier in the code but it does not show up.

[Mottie]

Hmm, well can you add the jQuery no conflict code before you run any jQuery scripts? Like just before your first jQuery(document).ready().

[Author]

Posts