Why is my jQuery script not triggering in Wordpress?

Question

I have tested the below script on a demo page which is not using any CMS. The script is located in the index.php file and works just fine.

<form method="get" action="">
  <input id="label_search" type="text" value="" maxlength="40" name="inputText"/>
</form>

<script type="text/javascript">
  var options = {
      script:"includes/autosuggest.php?json=true&",
      varname:"input",
      minchars: 2,
      delay: 200,
      json:true,
      shownoresults:false,
      maxresults:15,
      timeout: 5000
  };

  var as_json = new bsn.AutoSuggest('inputText', options);
</script>

Now I want to use the same code in a Wordpress template file. But nothing is happening. Seems like the script is not triggering at all.

I'm using user friendly URL's and have set custom permalinks to /%category%/%postname%. Maybe that has something to say?

I know the bsn.AutoSuggest_2.1.3.js is running, because an "alert('hello')" test on the file is executed on page load.

What could be wrong?

This is my WP code:

sl_startpage.php:

<?php
/*
Template Name: SL - Start page
*/ 
  get_header(); ?>
  <div id="myArea">
  <?php
    include_once('includes/storeLocator/sl_header.php');
  ?>
  </div>

<?php 
  get_footer(); 
?>

This is the (simplyfied) code in sl_header.php:

  <div id="sl-header">
    <form method="get" action="">
      <input id="label_search" type="text" value="" maxlength="40" name="product_search"/>
    </form>                   
  </div>


  <script type="text/javascript">
    var options = {
     script:"includes/autosuggest.php?json=true&",
     varname:"input",
     minchars: 2,
     delay: 200,
     json:true,
     shownoresults:false,
     maxresults:15,
     timeout: 5000
    };
    var as_json = new bsn.AutoSuggest('product_search', options);
  </script>

Any suggestions anyone?

This is the plugin I use: http://www.brandspankingnew.net/archive/2007/02/ajax_auto_suggest_v2.html

Answer 1

includes/autosuggest.php?json=true&

This is the url, right? I think it will end up being relative to the file that your template generates so if the url of the autosuggest.php is at:

http://yourserver.com/includes/autosuggest.php

..and you use the template to generate the html for the following two (made-up) urls:

http://yourserver.com/frontpage/
http://yourserver.com/categories/anotherpage/

I'm pretty sure the it will be looking here for your include:

http://yourserver.com/frontpage/includes/autosuggest.php
http://yourserver.com/categories/anotherpage/includes/autosuggest.php

..when you probably want it to look at:

http://yourserver.com/includes/autosuggest.php

..so try adding a '/' to the front of your url in that JSON and see if that rectifies it.

Answer 2

Alright! After about 20 hours of research, I found the answer in a blog by Ryan Pharis. As I was suspecting, it was an easy solution.

Wordpress is using "user friendly URLS". Therefore my path ended up like this: http://www.mysite.com/includes/autosuggest.php?json=true&

The REAL path is this: http://www.mysite.com/wp-content/themes/my_theme/includes/autosuggest.php?json=true&

My script cannot be located in an external .js script, because I need to get the URL from Wordpress. So I did this:

<?php $site_url = bloginfo('template_url'); ?>

 <script type="text/javascript">
    var options = {
        script:"<?php echo $site_url; ?>includes/autosuggest.php?json=true&",

Now my script works and I'm a happy camper.