3

I need to know why it's doing this because I'm using the javascript in the script tags on my site and it's not working.

Why does my javascript not work in the script tags (switch will not switch) http://jsfiddle.net/J7L4k/2/

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script>
        $('.btn-toggle').click(function() {
    $(this).find('.btn').toggleClass('active');  

    if ($(this).find('.btn-primary').size()>0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }
    if ($(this).find('.btn-danger').size()>0) {
        $(this).find('.btn').toggleClass('btn-danger');
    }
    if ($(this).find('.btn-success').size()>0) {
        $(this).find('.btn').toggleClass('btn-success');
    }
    if ($(this).find('.btn-info').size()>0) {
        $(this).find('.btn').toggleClass('btn-info');
    }

    $(this).find('.btn').toggleClass('btn-default');

});

$('form').submit(function(){
    alert($(this["options"]).val());
    return false;
});
    </script>

    <h4>Tiny</h4>
  <div class="btn-group btn-toggle"> 
    <button class="btn btn-xs btn-default">ON</button>
    <button class="btn btn-xs btn-primary active">OFF</button>
  </div>

However it works fine when the javascript is moved to JSFiddles javascript container? http://jsfiddle.net/udKj5/3/

thanks a lot.

Improve this question
6
  • Put the script tag after the HTML (at the end of your body before the closing tag) Commented Jul 31, 2014 at 2:42
  • 3
    you need to use dom ready handler - in jsfiddle by default the script is added in a windlow.onload handler that is why it is workign Commented Jul 31, 2014 at 2:42
  • please define "not working" - tell us: what you expect to have happen, and what happens instead. Which switch are you talking about? are there any errors in the console log? you say "it's not working in the script tags" - does that mean you tried it some other way and it worked? Please give us all the information (in the question, not in the comments). Commented Jul 31, 2014 at 2:43
  • Did you notice in JSFiddle on the left there is an option onLoad? Commented Jul 31, 2014 at 2:44
  • Refer This , <stackoverflow.com/questions/18754685/…> Commented Jul 31, 2014 at 2:47

3 Answers 3

Reset to default
3

ok, so the reason why it doesn't work is that, at the time that the javascript first runs (and sets the on-click function on 'btn-toggle') there are no btn-toggle items in the page (because the page is still loading).

You need to run this stuff only after document.load

This happens by default in the jsfiddle which is why it works there. If you right-click and inspect on the jsfiddle page, you'll find it has converted your script to:

//<![CDATA[ 
window.onload=function(){
$('.btn-toggle').click(function() {
    $(this).find('.btn').toggleClass('active');  

    if ($(this).find('.btn-primary').size()>0) {
        $(this).find('.btn').toggleClass('btn-primary');
    }
    if ($(this).find('.btn-danger').size()>0) {
        $(this).find('.btn').toggleClass('btn-danger');
    }
    if ($(this).find('.btn-success').size()>0) {
        $(this).find('.btn').toggleClass('btn-success');
    }
    if ($(this).find('.btn-info').size()>0) {
        $(this).find('.btn').toggleClass('btn-info');
    }

    $(this).find('.btn').toggleClass('btn-default');

});

$('form').submit(function(){
    alert($(this["options"]).val());
    return false;
});
}//]]>

which clearly works... so try that instead

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Your Javascript is running, but it is running before the DOM initializes, and as a result, the various JQuery selectors match no elements and the code appears to do nothing.

To fix this, either wrap your code in the ondomready event handler, or move all your javascript to the very bottom of the page so that the DOM is encountered before the scripts are executed.

To wrap your code in an ondomready event hander, do this:

$(function () {

// your code here

});

The above structure can appear anywhere on the page, even at the top as you have it, and jquery will automatically run it at the appropriate time.

Improve this answer

Comments

1

This is because your code is running before the DOM elements are initialised thus the code cannot find those elements on the page. Try enclosing your code in

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

OR simply

$(function () {
    // your code here
});
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.