All geek questions in one place

Same code on jsfiddle but wont work on my server?

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

This is the code I downloaded:

<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 JSfiddle

Please note that JSfiddle has external css and js resources which I exactly copy / paste from the above code.

On the JSfiddle page, the dropdown format is formatted and has a fading effect. On my server, it is somewhat formatted and has no effect.

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

+3
source share
5 answers

Link

You cannot safely manipulate the page until the document is ready. jQuery defines this ready state for you. The code included inside $( document ).ready() is only executed after the Document Object Model (DOM) page is ready to execute JavaScript code. The code included inside $( window ).load(function() { ... }) will run after the whole page (images or frames) is ready, and not just the DOM.

Wrap your code in a document handler .

Specify the 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>
+5
source

Set the finished document

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

You cannot safely manipulate the page until the document is ready. jQuery defines this ready state for you. The code is included inside $ (document) .ready () will only run after the Document Object page. The Model (DOM) is ready to execute JavaScript code. The included code inside $ (window) .load (function () {...}) will run as soon as the entire page (images or frames), and not just the DOM.

More on this

+2
source

The script in the head tag knows nothing about your DOM at runtime. You must move <script> before closing the </body> (after loading the DOM), o wrap your code in a document-ready handler:

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

Moving a script before closing the </body> better than IMHO.

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

In addition, you check the console window: you can see that some files are not loading. Correct them and everything will work well.

enter image description here

+1
source

The script you wrote just fires before any of the elements was loaded. This way jQuery does not find #currency-select , since it does not exist yet. To solve this problem, you have two ways:

1) Run this script after the onLoad event is fired. You can do it with jQuery like this

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

2) You can move the script tag immediately before the closing </body> tag </body> Thus, scripts are processed after the page elements. And this will be the proposed option for all your scripts.

+1
source

Source: https://habr.com/ru/post/1338915/

More articles:


All Articles