Including a javascript file?

Question

I'm having a little trouble including a javascript file. I have the following code block on my page, and I want to move it to a separate file called cart.js. The problem is, whenever I move all my script to that file it stops working on my page. I have tried wrapping the entire code block on a document ready but that didn't work. I'm a loss on how to include this.

EDIT: I found my error thanks to the advice of looking at the console. Turns out, leaving a call to jquery in the cart.js was causing the issue.

current_fin = "none";
current_mat = "Pine";
current_col = "Red";
current_size = "36";
jQuery(document).ready(function($) {
  $("#dropdownthree").hide();
});

// Pass the current selection into a variable to use.
function getMaterial() {// function checks material and if plastic hides/shows boxes
  var mat = document.getElementById("dropdownone");
  current_mat = mat.options[mat.selectedIndex].text;
  if (current_mat == "Plastic") {
    var col = document.getElementById("dropdownthree");
    current_fin = col.options[col.selectedIndex].text;
    $("#dropdowntwo").hide();
    $("#dropdownthree").show();
  } else {
    var fin = document.getElementById("dropdowntwo");
    current_fin = fin.options[fin.selectedIndex].text;
    $("#dropdownthree").hide();
    $("#dropdowntwo").show();
  }
  $.post('php/productajaxtemp.php', {
    ourMaterial: current_mat,
    ourFinish: current_fin,
    ourSize: current_size
  }, function (data) {
    $("#price").html(data).show();
  });
}

function getFinish() {
  var fin = document.getElementById("dropdowntwo");
  current_fin = fin.options[fin.selectedIndex].text;
  $.post('php/productajaxtemp.php', {
    ourMaterial: current_mat,
    ourFinish: current_fin,
    ourSize: current_size
  }, function (data) {
    $("#price").html(data).show();
  });
}

function getColor() {
  var col = document.getElementById("dropdownthree");
  current_col = col.options[col.selectedIndex].text;
  $.post('php/productajaxtemp.php', {
    ourMaterial: current_mat,
    ourFinish: current_col,
    ourSize: current_size
  }, function (data) {
    $("#price").html(data).show();
  });
}

function getSize() {
  var sz = document.getElementById("dropdownsize");
  current_size = sz.options[sz.selectedIndex].text;
  $.post('php/productajaxtemp.php', {
    ourMaterial: current_mat,
    ourFinish: current_col,
    ourSize: current_size
  }, function (data) {
    $("#price").html(data).show();
  });
  getMaterial();
}

The associated HTML is

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js/cart.js"></script>

<form action="cart.php" id="form" method="POST">
  <select name="size" id="dropdownsize" onchange="getSize()">
    <option>36</option>
    <option>48</option>
    <option>60</option>
    <option>72</option>
  </select>
  <select name="material" id="dropdownone" onchange="getMaterial()">
    <option>Pine</option>
    <option>Oak</option>
    <option>Walnut</option>
    <option>Plastic</option>
  </select>
  <select name="finish" id="dropdowntwo" onchange="getFinish()">
    <option>None</option>
    <option>Finished</option>
  </select>
  <select name="color" id="dropdownthree" onchange="getColor()">
    <option>Painted Red</option>
    <option>Painted Green</option>
    <option>Painted Blue</option>
    <option>Painted yellow</option>
    <option>Painted white</option>
    <option>Primer white</option>
  </select>
  <input type="submit" value="Add To Cart">
</form>

Did you check that there is no error (in the console) and that the script is executed (add console.log('hi')) at its end ? — Denys Séguret
– Denys Séguret, Commented May 14, 2013 at 18:57
is your .js file realy located one directory below in js folder? — Saic Siquot
– Saic Siquot, Commented May 14, 2013 at 19:01
I figured it thanks to looking at the console, turns out leaving: <script src="jquery.js"</script> was causing the error. — Peter Jewicz
– Peter Jewicz, Commented May 14, 2013 at 19:04
u can use Hosted CDN for this than local .. royal.pingdom.com/2012/07/24/best-cdn-for-jquery-in-2012 — Milson
– Milson, Commented May 14, 2013 at 19:09

sdespont · Accepted Answer · 2013-05-14 19:06:32Z

2

Depending the JS script you are using, you can't just copy paste your JS code in a file.

Try to include your JS code inside an anonymous function like this in your file :

(function() {
    //Your JS
})();

By this way, the JS code will be executed after the file loading and will be usable.

edited May 14, 2013 at 19:06

answered May 14, 2013 at 18:59

sdespont

14.1k9 gold badges61 silver badges99 bronze badges

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

Collectives™ on Stack Overflow

Including a javascript file?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related