Same code on jsfiddle but won't run on my serv

This question already has an answer here:

How do I put codes from jsfiddle.net into my website? 1 answer

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

标签： jquery css jsfiddle

5条回答

We Are One

2楼-- · 2019-02-25 00:11

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

0人赞添加讨论(0) 举报

你好瞎i

3楼-- · 2019-02-25 00:16

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.

0人赞添加讨论(0) 举报

看我几分像从前

4楼-- · 2019-02-25 00:20

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.

0人赞添加讨论(0) 举报

爱情/是我丢掉的垃圾

5楼-- · 2019-02-25 00:21

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>

0人赞添加讨论(0) 举报

Summer. ? 凉城

6楼-- · 2019-02-25 00:25

$( 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.

0人赞添加讨论(0) 举报

Same code on jsfiddle but won't run on my serv

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间