bcsteeve bcsteeve - 1 year ago 37
jQuery Question

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:

<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">
fadingDuration: 500,
containerMargin: 100,
displayContainerInside: "document"
<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>

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

Hey @Bergi why would you dig up a year old ALREADY ANSWERED question and mark it is a duplicate?

Answer Source


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.

$(function() {
    // Handler for .ready() called. 
        fadingDuration: 500,
        containerMargin: 100,
        displayContainerInside: "document"