3

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

Petter Friberg
  • 19,652
  • 9
  • 51
  • 94
bcsteeve
  • 879
  • 9
  • 19

5 Answers5

5

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>
Satpal
  • 126,885
  • 12
  • 146
  • 163
  • Thanks! I feel silly because I read this same answer about someone else's problem but it didn't register that I was having the same problem. So why's it work in JSfiddle? – bcsteeve Jul 29 '15 at 07:46
  • @bcsteeve, fiddle doesn't work at my end, but there is option of left hand side like _onDomready_ You have used _onload_ – Satpal Jul 29 '15 at 07:50
  • Ahh, OK. Now I understand what that's for. Thanks. – bcsteeve Jul 29 '15 at 08:14
2

Set document-ready

$( document ).ready(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
});

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.

Read more about it

Luís P. A.
  • 8,664
  • 2
  • 20
  • 31
2

Script in head tag doesn't know anything about Your DOM when executed. You should move <script> before closing </body> tag (after DOM is loaded), o wrap Your code in document-ready handler:

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

Moving script before closing </body> tag is better IMHO.

Bogdan Kuštan
  • 4,901
  • 1
  • 16
  • 29
1
$( document ).ready(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
      });
});

Additionally, is you check the console window: you can see that some files are not loading. Correct them and everything will work fine.

enter image description here

Ayush
  • 321
  • 1
  • 10
  • Good catch, and sorry about that. In my haste, I had a typo on the absolute paths (I used relative but put in absolute for posting here). I've fixed it and you can see it changes nothing, by itself. This comment is only about the non-loading files, not the document wrapper. – bcsteeve Jul 29 '15 at 07:43
1

The script you wrote simply fires before any of the elements have been loaded. This way jQuery doesn't find #currency-select as it doesn't exist yet. To solve this you have two ways:

1) Execute this script after the onLoad event has been triggered. You can do it with the jQuery like this

$(function() {
    $("#currency-select").simpleselect({
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"
    });
});

2) You can move your script tag right before the closing tag </body> This way the scripts are handled after the elements of the page. And this one would be a suggested option for all your scripts.

wiktus239
  • 1,213
  • 1
  • 9
  • 29