Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why is the jquery script not working?

Why is the jQuery script working in my jsfiddle but not in my page?

What I've done: Tried different versions of JQuery...made the script

So I have this test page:

Head Part

   <!-- Scripts -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
           <style>

            select #canselect_code {
                width:200px;
                height:200px;
            }
            .fr {
                float:right;
            }
            .fl {
                float:left;
            }


        </style>

        <script>
$(document).ready(function(){
            $('[id^=\"btnRight\"]').click(function (e) {
    
    $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');
    
});

$('[id^=\"btnLeft\"]').click(function (e) {

    $(this).next('select').find('option:selected').remove().appendTo('#canselect_code');

});

});
        </script>
       

</head>

Body Part

 <div>
    <select id='canselect_code' name='canselect_code' multiple class='fl'>
        <option value='1'>toto</option>
        <option value='2'>titi</option>
    </select>
    <input type='button' id='btnRight_code' value='  >  ' />
    <br>
    <input type='button' id='btnLeft_code' value='  <  ' />
    <select id='isselect_code' name='isselect_code' multiple class='fr'>
        <option value='3'>tata</option>
        <option value='4'>tutu</option>
    </select>
</div>

JSFIDDLE HERE

Now my question is: Why is the code working in JsFiddle but not in my document?

Thanks for your answers!

EDIT: Added document ready function..still does not work!

like image 827
Acelasi Eu Avatar asked Nov 07 '13 08:11

Acelasi Eu


People also ask

Why is jQuery not loading?

JQuery is a JavaScript framework and library that adds CSS-like selectors, animations and handy functions to your Web programming arsenal. When jQuery scripts fail to work on your Web server, chances are the jQuery file is missing or you did not include it correctly in your HTML code.

Why my jQuery is not working in HTML?

Be sure to import the jQuery library before your custom script is loaded. You will need to go the jQuery CDN and suss out a recent version 1 minified CDN URL. Go to the page “View all versions” (or something like that) and copy the link address of the minified version for 1.9. 3 or 1.10.

How do I run a jQuery script?

We have to add <script> tag in our HTML file as shown below. Paste the following CDN code in the head section in HTML. Example: We will use example 2 here with the jQuery CDN link in order to see the change.

How do I make sure jQuery is working?

First, you need to make sure that jQuery is included before any scripts that use it. This can be tricky if you have javascript embedded in partials. If you load jQuery in the header and all of your other script in a script block at the end of the body, you can be sure that jQuery is loaded before your other code.


1 Answers

This works fine. just insert your jquery code in document.ready function.

 $(document).ready(function(e) {   
    // your code here
 });

example:

jquery

    $(document).ready(function(e) {   

      $('[id^=\"btnRight\"]').click(function (e) {    
        $(this).prev('select').find('option:selected').remove().appendTo('#isselect_code');    
      });

      $('[id^=\"btnLeft\"]').click(function (e) {
        $(this).next('select').find('option:selected').remove().appendTo('#canselect_code');
      });

    });

html

    <div>
        <select id='canselect_code' name='canselect_code' multiple class='fl'>
            <option value='1'>toto</option>
            <option value='2'>titi</option>
        </select>
        <input type='button' id='btnRight_code' value='  >  ' />
        <br>
        <input type='button' id='btnLeft_code' value='  <  ' />
        <select id='isselect_code' name='isselect_code' multiple class='fr'>
            <option value='3'>tata</option>
            <option value='4'>tutu</option>
        </select>
    </div>
like image 180
Arul Avatar answered Sep 25 '22 03:09

Arul