Search code examples
jquerycssjsfiddle

Same code on jsfiddle but won't run on my server?

I'm so confused. I'm just trying to test out a jquery (simpleselect) and got it working fine on jquery, but then when I upload it to my server... totally doesn't work! I swear its the same code but maybe fresh eyes can help. What am I missing here?

This is the code I uploaded:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://smartieparts.com/bootstrap/includes/templates/bootstrap/css/stylesheet_jquery.simpleselect.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://smartieparts.com/bootstrap/includes/templates/bootstrap/jscript/jscript_jquery.simpleselect.min.js"></script>
    <script type="text/javascript">
      $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
    </script>
  </head>
  <body id="indexHomeBody">
    <select name="currency" id="currency-select">
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
      <option value="GBP">GBP</option>
      <option value="CAD">CAD</option>
      <option value="AUD">AUD</option>
      <option value="CHF">CHF</option>
      <option value="CZK">CZK</option>
      <option value="DKK">DKK</option>
      <option value="HKD">HKD</option>
      <option value="JPY">JPY</option>
      <option value="NZD">NZD</option>
      <option value="NOK">NOK</option>
      <option value="PLN">PLN</option>
      <option value="SGD" selected="selected">SGD</option>
      <option value="SEK">SEK</option>
      <option value="ILS">ILS</option>
      <option value="MXN">MXN</option>
      <option value="TWD">TWD</option>
      <option value="PHP">PHP</option>
      <option value="THB">THB</option>
    </select>
  </body>
</html>

And here is the JSfiddle

Note that the JSfiddle has external css and js resources that I exactly copy/pasted from the code above.

On the JSfiddle page, the drop down is formatted and has a fade effect. On my server, it is somewhat formatted and has no fade.

I've uploaded the file to my server so you can check. Link

Solution

  • Ref

    A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute. Code included inside $( window ).load(function() { ... }) will run once the entire page (images or iframes), not just the DOM, is ready.

    Wrap your code in document-ready handler.

    Specify a function to execute when the DOM is fully loaded.

    <script>
$(function() {
    // Handler for .ready() called. 
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
    });
});
</script>