Implementing JQuery in Wordpress. Works on one page, not on another

Question

I'm working to implement a JQuery script that will allow people to enter their car's license plate, and then return a list of suitable accessories (tow bars, mainly). People can then proceed to order one of the tow bars, and the order will be sent directly to our supplier.

I got the script working on a test page, but after copy-pasting the script onto the page where the customer can find it, it suddenly isn't working anymore. I've spent over 5 hours now trying to figure out why this is, but I can't find it.

The page with the working script is: http://www.potgieter.nl/testpage/ and the page where it's supposed to go (but isn't working) is http://www.potgieter.nl/trekhaken The pages are in Dutch, but the code obviously isn't.

the script itself is:

<script src="http://www.trekhaken.nl/thirdparty/script.js" type="text/javascript"></script>

^ that goes into the head

and

    <div id="timer" class="noprint">
<div id="heading">Een momentje alsjeblieft&#8230;. <span id="seconds"></span></div>
<div id="contenttimer">
<p>wij zoeken momenteel je auto gegevens op, alsmede de bijpassende trekhaken en kabelsets.</p></div>
</div>
<div class="container">
<form id="searchForm" action="/" name="searchForm">
<p class="nomarge"><input id="kentekennormaal" class="kentekenheader" name="kenteken" size="10" type="text" value="" /><br />
<!-- klantnaam opgegeven door trekhaken.nl --><br />
<input id="klantnaam" name="klantnaam" type="hidden" value="potgieter" /><br />
<!-- // einde klantnaam --><br />
<button class="normaal" type="submit">zoek</button><br />
<!-- zoekmethode niet wijzigen --><br />
<input id="strZoekmethode" name="strZoekmethode" type="hidden" value="kenteken" /><br />
<!-- // einde zoekmethode --></p>
</form>
<p><!-- the result of the search will be rendered inside this div MUST STAY HERE --></p>
<div id="result"></div>
<p><!-- // end result info --><br />
<!-- script functions needed for cross domain info please dont touch ;-) --><br />
<script>// <![CDATA[
$("#searchForm").submit(function(event){event.preventDefault();$("#result").html('');var data=$("#searchForm").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/kenteken.php',type:"GET",crossDomain:true,data:data}).done(function(data){$("#result").html(data)})});function ganaarbestelling(){var data=$("#productform").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/bestelling.php',type:"GET",crossDomain:true,data:data}).done(function(data){$("#result").html(data)})}function maakbestelling(){var data=$("#bestelform").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/bestelling.php',type:"GET",crossDomain:true,data:data}).done(function(data){$("#result").html(data)})}function meeruitvoeringen(){var data=$("#productform").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/kenteken.php',type:"GET",crossDomain:true,data:data}).done(function(data){$("#result").html(data)})}function merkmodel() { var data = $("#searchForm").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/merkmodel.php',type: "GET",crossDomain: true,data: data}).done(function(data){$("#result").html(data);});}function merkmodelselectie(){var data=$("#merkmodelform").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/merkmodel.php',type:"GET",crossDomain:true,data:data}).done(function(data){$("#result").html(data)})}function merkgekozen(){var data=$("#merkmodelform").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/kenteken.php',type:"GET",crossDomain:true,data:data}).done(function(data){$("#result").html(data)})}
// ]]&gt;</script>
<!-- // end needed cross domain js functions --></div>

^that goes into the page body.

The license plate number can be entered into the yellow box (Dutch license plates are yellow). There's probably a super-obvious error somewhere, but I've been staring at this for so long it's all starting to blur together. Any help would be much appreciated!

Update

Using the tips and hints below, I've amended the code, and it now looks like this:

<!-- start script -->
<div id="timer" class="noprint">
<div id="heading">Een momentje alsjeblieft.... <span id="seconds"></span></div>
<div id="contenttimer">

wij zoeken momenteel je auto gegevens op, alsmede de bijpassende trekhaken en kabelsets.</div>
</div>
<div class="container"><form id="searchForm" action="/" name="searchForm">
<p class="nomarge"><input id="kentekennormaal" class="kentekenheader" name="kenteken" size="10" type="text" value="" />
<!-- klantnaam opgegeven door trekhaken.nl -->
<input id="klantnaam" name="klantnaam" type="hidden" value="potgieter" />
<!-- // einde klantnaam -->
<button class="normaal" type="submit">zoek</button>
<!-- zoekmethode niet wijzigen -->
<input id="strZoekmethode" name="strZoekmethode" type="hidden" value="kenteken" />
<!-- // einde zoekmethode -->

</form><!-- the result of the search will be rendered inside this div MUST STAY HERE -->
<div id="result"></div>
<!-- // end result info -->
<!-- script functions needed for cross domain info please dont touch ;-) -->

jQuery(function ($) {$("#searchForm").submit(function(event){event.preventDefault();jQuery("#result").html('');var data=jQuery("#searchForm").serialize();jQuery.ajax({url:'http://www.trekhaken.nl/thirdparty/kenteken.php',type:"GET",crossDomain:true,data:data}).done(function(data){jQuery("#result").html(data)})});function ganaarbestelling(){var data=jQuery("#productform").serialize();jQuery.ajax({url:'http://www.trekhaken.nl/thirdparty/bestelling.php',type:"GET",crossDomain:true,data:data}).done(function(data){jQuery("#result").html(data)})}function maakbestelling(){var data=jQuery("#bestelform").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/bestelling.php',type:"GET",crossDomain:true,data:data}).done(function(data){jQuery("#result").html(data)})}function meeruitvoeringen(){var data=jQuery("#productform").serialize();jQuery.ajax({url:'http://www.trekhaken.nl/thirdparty/kenteken.php',type:"GET",crossDomain:true,data:data}).done(function(data){jQuery("#result").html(data)})}function merkmodel() { var data = jQuery("#searchForm").serialize();$.ajax({url:'http://www.trekhaken.nl/thirdparty/merkmodel.php',type: "GET",crossDomain: true,data: data}).done(function(data){jQuery("#result").html(data);});}function merkmodelselectie(){var data=jQuery("#merkmodelform").serialize();jQuery.ajax({url:'http://www.trekhaken.nl/thirdparty/merkmodel.php',type:"GET",crossDomain:true,data:data}).done(function(data){jQuery("#result").html(data)})}function merkgekozen(){var data=jQuery("#merkmodelform").serialize();jQuery.ajax({url:'http://www.trekhaken.nl/thirdparty/kenteken.php',type:"GET",crossDomain:true,data:data}).done(function(data){jQuery("#result").html(data)})}
})(jQuery);

In addition, I'm now calling the script from functions.php

function autopotgieter_scripts() {
    wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );
    wp_enqueue_style( 'autopotgieter-style',  get_template_directory_uri() . '/css/style.css');

    wp_enqueue_script( 'autopotgieter-index', get_template_directory_uri() . '/js/index.js', array(), '20130115', true );
    wp_enqueue_script( 'autopotgieter-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

      wp_deregister_script('jquery');
      wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false, '2.1.4');
      wp_enqueue_script('jquery');

    wp_register_script('trekhaken', 'http://www.potgieter.nl/public_html/wp-content/themes/autopotgieter/js/trekhaken.js', array('jquery'), true);
    wp_enqueue_script('trekhaken');

Unfortunately, it still isn't working. What is especially confusing, is that it still works fine on potgieter.nl/testpage, but not on potgieter.nl/trekhaken

Answer 1

Don't add your JS in <head> manually - look at the source: your script is included on line 16, and jQuery is included on line 80. So jQuery isn't yet included at the time you call your script.

Users JS should always be included after all the libraries includes. Wordpress provide a way to properly handle this and all kind of dependencies with wp_enqueue_script. Use this in your theme functions.php to include properly your JS:

function theme_enqueue_script() {
    wp_enqueue_script('theme_script', get_stylesheet_directory_uri() . '/js/script.js', array('jquery'), '', true);
}

add_action( 'wp_enqueue_scripts', 'theme_enqueue_script' );

This will properly include your script.js file at the bottom of the page (to reduce display page time) and declare it dependent of jQuery.

And to prevent any error when jQuery run in safe mode, I suggest to always encapsulate your code in a closure:

(function($) {
    // safe use of $ inside this
})(jQuery);

Answer 2

Check the console. I think that you should use jQuery in no conflict mode : jQuery("#searchForm") instead of $("#searchForm") (replace every $ by jQuery)

Then put your code inside a document ready :

$(function() {
    // Code here
});

Without a document ready, your script is executed before jQuery is loaded.

Edit :

Just in case, this is how you properly load jQuery in wordpress (in functions.php)

add_action( 'wp_enqueue_scripts', 'load_jquery' );
function load_jquery() {
    wp_enqueue_script('jquery');
}

Edit 2:

And check Vard answer to load Your script properly

Answer 3

"Uncaught ReferenceError: jQuery is not defined
trekhaken:247 Uncaught TypeError: jQuery(...) is not a function
index.js:2 Uncaught TypeError: $ is not a function"

Current errors in the console. Please add the jQuery at the start of the page. You are trying to use the jQuery object in multiple places before you added the jQuery script file.