Integrating Javascript and Jquery in HTML

Question

I'm trying to integrate this javascript from the JSFiddle into the html page. The code might not be pretty ( and it's not ) but it does the trick :).

The problem is that the code works in JSFiddle but I cannot implement it in a single html document. This might be the stupidest question but I need help.

Here is the JSFiddle : http://jsfiddle.net/nhzr0kyb/

Javascript:

$('#never1').change(function () {
        if ($(this).attr("checked")) {
            $(this).siblings('#less1, #lunar1, #saptamanal1, #week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
        } else {
            $('#less1, #lunar1, #saptamanal1').attr('disabled', false);   
             $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true); 
        }
    });

$('#less1').change(function () {
    $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
});

 $('#lunar1').change(function () {
    $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
});   



  $('#saptamanal1').change(function () {
    if ($(this).attr("checked")) {
        $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', false);
    } else {
        $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
    }
});

 $("#checkbox").prop("checked", false).click(function() {
     $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
 $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
 });


      $(document).ready(function() {
          $('.mutuallyexclusive').click(function () {
              checkedState = $(this).attr('checked');
              $('.mutuallyexclusive:checked').each(function () {
                  $(this).attr('checked', false);                   
              });
              $(this).attr('checked', checkedState);
              $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);

          });
      });

      $(document).ready(function() {
          $('.checkbox1').click(function () {
              checkedState = $(this).attr('checked');
              $('.checkbox1:checked').each(function () {
                  $(this).attr('checked', false);
              });
              $(this).attr('checked', checkedState);
              $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
          });
      });

Thanks in advance, Iosif

What have you done to find out why it does not work in other pages? What exactly "does not work"? Why is some of your code inside $(document).ready(function() {...}); and other is not? — Felix Kling
– Felix Kling, Commented Jun 25, 2015 at 21:23
this is my page markup <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=<#Charset>"> <title>OpinionWorld</title> <script>  </script> <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.3/…> <link href="ssisurveys.com/OW/survey/css/OW2007.css" rel="stylesheet" type="text/css"> </head> — Iosif
– Iosif, Commented Jun 25, 2015 at 21:28

Hugo Pereira · Accepted Answer · 2015-06-25 22:04:29Z

1

To be sure that you code is the same on jsfiddle, on Frameworks & Extensions section choose "no wrap in head", that's the difference.

enter image description here

Now you can manage to on load event instead of leaving jsfiddle doing this for you.

And always add ready event to your code

$( document ).ready(function() {
  // Handler for .ready() called.
});

or

$(function() {
    console.log( "ready!" );
});

If you dont do that you some errors can occur.

answered Jun 25, 2015 at 22:04

Hugo Pereira

3963 silver badges10 bronze badges

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

1 Comment

Iosif Over a year ago

This makes sense. I've copied the code in a new JSFiddle and it didn't worked because it was on other framework and extension. In the bigger picture, I need to integrate that in a bigger html file. Would it be better if I can attach the file somewhere so you guys can see what I'm trying to do?

NewsletterPoll · Accepted Answer · 2015-06-25 21:47:42Z

0

$(document).ready(function() {	
    $('#noneAboveCheck').change(function () {
        $('#noneAbove').toggle(this.checked);
    }).change();

    $('#incarcerated, #support').change(function () {
        if ($(this).attr("checked")) {
            $('#noneAboveCheck').attr('disabled', true);
        } else {
            $('#noneAboveCheck').attr('disabled', false);
        }
    });
	
//all of the other code
	
('#never1').change(function () {
        if ($(this).attr("checked")) {
            $(this).siblings('#less1, #lunar1, #saptamanal1, #week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
        } else {
            $('#less1, #lunar1, #saptamanal1').attr('disabled', false);   
             $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true); 
        }
    });

$('#less1').change(function () {
    $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
});

 $('#lunar1').change(function () {
    $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
});   

$('#saptamanal1').change(function () {
    if ($(this).attr("checked")) {
        $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', false);
    } else {
        $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
    }
});

 $("#checkbox").prop("checked", false).click(function() {
     $(this).siblings('#week11, #week12, #week13, #week14, #week15, #week16, #week17:checkbox').not(this).removeAttr('checked');
 $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
 });


          $('.mutuallyexclusive').click(function () {
              checkedState = $(this).attr('checked');
              $('.mutuallyexclusive:checked').each(function () {
                  $(this).attr('checked', false);                   
              });
              $(this).attr('checked', checkedState);
              $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);

          });

          $('.checkbox1').click(function () {
              checkedState = $(this).attr('checked');
              $('.checkbox1:checked').each(function () {
                  $(this).attr('checked', false);
              });
              $(this).attr('checked', checkedState);
              $('#week11, #week12, #week13, #week14, #week15, #week16, #week17').attr('disabled', true);
          });
});

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
<p><input id="noneAboveCheck" type="checkbox" />None of the above</p>
<div id="noneAbove" class="hidden">
    <p><input id="incarcerated" type="checkbox" /></p>
    <p><input id="support" type="checkbox" />Blah Blah</p>
</div>

did you remember to add jquery to your html tag?
w3schools

also, like Felix Kling said put everything into one document ready function. and you only need one document ready you currently have two.
jquery api

edited Jun 25, 2015 at 21:47

answered Jun 25, 2015 at 21:30

NewsletterPoll

5542 silver badges8 bronze badges

3 Comments

Iosif Over a year ago

Yes, I've remembered to add it, as I replied to maioman. I've put all the code inside $document.ready(function() { ... all that code }); , removed the two document ready from the two functions, added in a <script type="text/javascript> </script> tag but it's still not working

NewsletterPoll Over a year ago

try the code i added. it works for me. hope it helps.

Iosif Over a year ago

I do not really see your code, but I've changed the JSFiddle ( I've put the wrong one the first time ). This is the correct JSFiddle, it works, it does what it is supposed to, but I don't know how to integrate into the whole HTML document ( yes, it is more that on the JSFiddle page ).

Iosif · Accepted Answer · 2015-06-25 23:21:18Z

0

html files ( source + test ) available

I'm out of ideas. If someone wants to look at the file and may see a way to include the code from the JSfiddle, please do. Or put a hint, or something. I'm pretty sure I'm missing something pretty simple here.

Thank you, Iosif

answered Jun 25, 2015 at 23:21

Iosif

52 bronze badges

Comments

NewsletterPoll · Accepted Answer · 2015-06-26 03:08:23Z

in order to integrate this into your HTML document you must do a couple of things.

first you must link to the jQuery library. there are a few ways you can do this but the easiest (and maybe the best) is to link to it though Google. you can do this by adding this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> right BEFORE the end of your <body></body> tag. note: there are other version of the jQuery library that you may need to use instead depending on your jQuery code. i just picked this one because it is the latest. (you can read about the other way to link to the jQuery library here
now you have to tell jQuery to run your code when the HTML document has loaded. you do this by wrapping your jQuery code in a <script></script> tag and placing it right before the end of your <body></body> tag. it must go AFTER the code you added in step one. (you could also link to an external .js file that would contain your jQuery code without the <script></script> tags. you can read more about that here.)

having said that, you may want to take a closer look at both your HTML and jQuery code. they seem a little problematic to me but with a little more research you will get there. i'm new at this too but the more i research the easier it gets. good luck from one noob to another.

by the way, i have heard a lot of better coders rip on the w3schools that i linked to but i think it is ok for the simple stuff that we are trying to learn.

Collectives™ on Stack Overflow

Integrating Javascript and Jquery in HTML

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related