Adding Javascript to a WP page

So do you see the <div class="container-fluid"> div or script tags at all?

One thing you have done incorrectly is the JavaScript. You used the wp_enqueue_script function (step #2), which is perfect. That automatically adds the JavaScript to your footer.

But this part in #3 is unnecessary:

<script type="text/javascript"><!--//--><![CDATA[//><!--
 instant_icon_widget();
 //--><!]]></script>

That won’t do anything useful.

Basically, the wp_enqueue_script function you used in step #2 automatically adds the JavaScript file to the wp_footer() function. This MUST be in your footer.php file, otherwise the JavaScript file won’t be included correctly.

I’m confused as why you say that the wp_enqueue script function I used in step #2 adds the javascript file to the footer? I have placed this code in the theme’s functions.php file.

I do not see anything after the “Instant Icons, Your Blog Helper” title until it reaches the footer I have (which I do see).

If the part in #3 is unnecessary:

<script type="text/javascript"><!--//--><![CDATA[//><!--
 instant_icon_widget();
 //--><!]]></script>

then how do I tell the template page to actually execute the javascript function on that page? That’s what I thought I was doing there. Perhaps that’s the problem?

Coleen
Coleen

Sorry for not doing this properly. I’ve made changes and I seem to be closer, but it’s still not working. So let me try again to get help.

This is what I’ve done…
1) I’ve created instant_icon_script.js file that contains just the javascript code functions. One of those functions is “checkProduct”.
2) I’ve created a instant_icon_style.css file that contains the styling for the page.
3) I’ve added these lines to the function.php file of my theme:

//Instant Icons
function add_instant_icon_script() {
	wp_register_script('instant_icon_script', get_template_directory_uri() . '/js/instant_icon_script.js', false);
	wp_enqueue_script('instant_icon_script');
}
add_action( 'wp_enqueue_scripts', 'add_instant_icon_script' );

function add_instant_icon_style() {
	wp_enqueue_style('instant_icon_style', get_template_directory_uri() . '/css/instant_icon_style.css');
}
add_action( 'wp_enqueue_scripts', 'add_instant_icon_style' );

Then on the page that I want this javascript to execute on, I’ve loaded the html coding which looks like this:

<div class="stampinup">
   <form method="post">
      <div class="formarea">
         <div class="fieldbox">
	    <label for="productnumbers">Enter Stampin' Up product numbers</label>
	    <textarea name="productnumbers" id="productnumbers"></textarea>
	 </div>
	 <div class="fieldbox c">
	   <button id="addproducts" onclick="return checkProductID();">Add Products</button>
           <button id="clearproducts" onclick="return clearProducts();">Clear</button>
         </div>
      </div>
   </form>

   <div id="stampinup_errors_box"></div>

   <div id="stampinup_results">
	<h3>Preview</h3>
	   <div id="stampinuppreview"></div>
	<h3>Copy this code</h3>
	   <textarea id="widgetcode"></textarea>
   </div>
 </div>

You can see the call to the javascript checkProductID(); when the “Add Products” button is clicked. However nothing happens when the button is clicked, the javascript isn’t being executed at all.

I also tried creating a page template with the same HTML code and use it for the page and I get the same results – nothing.

Where have I gone wrong?
Thanks,
Coleen

I’ve determined that I have set up the javascript properly in WordPress and that my javascript is actually being executed. But it’s got something that WordPress doesn’t like in it (this script works fine outside of WordPress). Can anyone shed insight into what WordPress doesn’t like?

function grabData(id,rv) {
 var xmlhttp = (window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"));
 xmlhttp.onreadystatechange = function() {
   if (xmlhttp.readyState == 4) {
   if (xmlhttp.status == 200) {
    res = JSON.parse(xmlhttp.responseText);
    for (i = 0;i < res[0].length;++i) {
     items.push(res[0][i]);
    }
    errors = [];
    for (i = 0;i < res[1].length;++i) {
     errors.push(res[1][i]);
    }
    drawItems();
    drawPreview();
    drawErrors(errors);
   } else {
    console.log('Error: '+xmlhttp.status);
   }
  }
 }
 xmlhttp.open("GET", "stampinup.php?a="+encodeURIComponent(rv), true);
 xmlhttp.send();
 document.getElementById("productnumbers").value = "";
}

I’m getting into the else statement which writes a 404 error to the console.log

Here is the call to grabData:

function checkProductID(){
	alert('entering checkProductID');
 grabData("stampinuppreview",document.getElementById("productnumbers").value);
 return false;

Thanks,
Coleen

It turned out that the problem was that this code is going out to another website to get data. I needed to add to my .htaccess
header set Access-Control-Allow-Origin "*"
To allow it to get data from an external site.
Coleen

Issue resolved