Jquery code breaking the rest of my code

Question

I have some Jquery that I've added to a load of other Jquery (which all works fine) but it's breaking the rest of my code. There's an error in there somewhere but I just can't work out where!

//Retrieve the customization summary area:
var summary = $('#customise-area-3 p');

//Use jQuery to select all the checkboxes with the name hardware that are checked.
$('input[type=checkbox][name=hardware\[\]]:checked').each(function(k,v) {
    //Retrieve the value of the checkbox.
    var checkboxValue = v.val();

    //Add the checkbox value to the summary area:
    summary.innerHTML += checkboxValue + '<br />';
});

This is within Wordpress so all the rest of my Jquery is in the style of:

jQuery(document).ready(function( $ ) 
{
    $("#customise").click(function()
    {
        $(".entire_product").hide();
        $(".customise").show();
    });
});

To get the code working within the Wordpress environment I've done the following:

jQuery(document).ready(function( $ ) 
{
   var summary = $('#customise-area-3 p').get(0);

   $('input[type=checkbox][name="hardware[]"]:checked').each(function(k,v) {
    //Retrieve the value of the checkbox.
    var checkboxValue = v.val();

    //Add the checkbox value to the summary area:
    summary[0].innerHTML += checkboxValue + '<br />';
});
});

Although this stops the rest of my code from breaking, it doesn't actually do anything. I.e add the selected checkbox value to the summary.

What do you mean by "breaking"? Are you getting a run-time error, or does the code not work as you expect? If the latter, please explain exactly how it is working. — RB.
– RB., Commented Feb 6, 2013 at 9:23
1.should be var summary = $('#customise-area-3 p').get(0);, modify the innerHTML of a jquery object is meaningless. 2. [type=checkbox] is unnecessary. 3. why name=hardware\[\]? do you have any run-time error message, or a jsfiddle demo? — Rain Diao
– Rain Diao, Commented Feb 6, 2013 at 9:30
@RB. What I mean by breaking is that all the jquery accordians, scrollers etc on the page stop working when I put the code in the question in. — Rob
– Rob, Commented Feb 6, 2013 at 10:20

Adil · Accepted Answer · 2013-02-06 09:30:40Z

1

You are incorrectly using \ slash in selector and you are using innerHTML on jQuery object which is wron

Change

$('input[type=checkbox][name=hardware\[\]]:checked')

To

$('input[type=checkbox][name="hardware[]"]:checked')

You better use wild card if you need to check name that starts with hardware

$('input[type=checkbox][name^=hardware]:checked')

Change

summary.innerHTML += checkboxValue + '<br />';

To

summary[0].innerHTML += checkboxValue + '<br />';

edited Feb 6, 2013 at 9:30

answered Feb 6, 2013 at 9:23

Adil

148k25 gold badges217 silver badges207 bronze badges

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

3 Comments

Rob Over a year ago

I've updated my question with code. That code blocks stops the rest of the jquery from breaking but the code doesn't actually do anything now. I guess that's another question.

Adil Over a year ago

It would be better of you put a new question with all the required html and explanation for what you want to achieve, as this question does not have enough information.

Rob Over a year ago

Ok here is my new question: stackoverflow.com/questions/14727451/… p.s more than happy for you to update the answer with the working code in my updated question so I can mark as complete.

Qpirate · Accepted Answer · 2013-02-06 09:24:08Z

0

your line

//Add the checkbox value to the summary area:
    summary.innerHTML += checkboxValue + '<br />';

is trying to set the innerHTML of an object, that looks to be where your code is breaking

you should use

summary.html(checkboxValue + '<br />');

there may be other errors like that in there. but that is the only one i can see

answered Feb 6, 2013 at 9:24

Qpirate

2,0881 gold badge31 silver badges42 bronze badges

2 Comments

Rob Over a year ago

I think Wordpress is mangling the code, whenever I put this related code in, every other jquery element stops working (accordians, scrollers etc).

Qpirate Over a year ago

well then if that is the case then try summary.get(0).innerHTML but always make sure that summary.length<>0 otherwise you will get an error

Collectives™ on Stack Overflow

Jquery code breaking the rest of my code

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related