2

For some reason the toggleClass function does not seem to be working.

I have a table row with a class "nodrag" - being used with tableDnD plugin:

<tr id="1" class="nodrag">
<!--Some tds and stuff-->       
</tr>

When I click a link I want to toggle the class on and off with the following code which is in the $(document).ready function:

$("#reorder").click(function(event) {
    $("#1").toggleClass("nodrag");

    if ($(this).text()=='Reorder')
    {
        $(this).text("Done reordering");
    } else {
        $(this).text("Reorder");
    }

    event.preventDefault();
});

I know the click event fires because the text of the link changes. I also know the selection of the row works because if I do something else with it like - $("#1").text("test") - that works.

It just seems to a problem with toggleClass. I've searched everywhere though and found nothing that helps me.

Thanks in advance for any help

Henry Ing-Simmons
  • 1,362
  • 5
  • 18
  • 25
  • What exactly is the problem? What happens that shouldn't or doesn't happen that should? What makes you think that `.toggleClass()` isn't working? – Anthony Grist Mar 05 '12 at 15:19
  • which version of jquery are you using ? – mas-designs Mar 05 '12 at 15:20
  • I would recommend against using an element with an id of `1`... do you have any other elements with the same id? And have you confirmed that the class is not changing as it should via Firebug or other developer tools? – kitti Mar 05 '12 at 15:20
  • 1
    what does changing the class do ? what i mean is ... is there some visual effect ? have you used a debugger to see if the class is present still ? (oh and dont use IDs of just numbers not officially supported) – Manse Mar 05 '12 at 15:20
  • 1
    Can you make a http://jsfiddle.net with some example code for us to see? We need more detail on the "". – Ricardo Souza Mar 05 '12 at 15:20
  • Yh the reason I know its not working is because if I inspect the code the class is still there. Its not just the visual effect that is missing – Henry Ing-Simmons Mar 05 '12 at 15:23
  • What do you want to do? $("#1").toggleClass("nodrag") will do nothing if the existing class itself is "nodrag". What are you toggling here? – Selvakumar Arumugam Mar 05 '12 at 15:25
  • its works perfectly. http://jsfiddle.net/C7xEN/ – DG3 Mar 05 '12 at 15:26
  • The `id` you're using, `1`, is an [invalid CSS `id` value](http://www.w3.org/TR/CSS21/syndata.html#value-def-identifier). In CSS, `id` values cannot start with a digit. (This also [used to be true in HTML](http://www.w3.org/TR/html401/types.html#type-name) up through HTML4; HTML5 [opens them up](http://www.w3.org/TR/html5/elements.html#the-id-attribute).) Since jQuery uses CSS selectors, strongly recommend sticking with CSS rules for them. But regardless, WFM: http://jsbin.com/omefig – T.J. Crowder Mar 05 '12 at 15:27
  • *"Yh the reason I know its not working is because if I inspect the code the class is still there."* **How** are you inspecting the code? If it's "view source," that's **not** the current state of the DOM, that's the markup as of when it was fetched from the server. To see the current DOM, use a proper debugger. – T.J. Crowder Mar 05 '12 at 15:29
  • Sorry guys. The problem seems to be with chromes hard refresh not doing anything which I was previously unaware of so even though id changed this it wasn't working. Does anyway know the table drag and drop plug in and how to make this work? – Henry Ing-Simmons Mar 05 '12 at 15:45

2 Answers2

1

It look like you entering stuff in you <tr> tag not in the <td> tag of the tr
I checked it work fine if you put the content inside <td> tag. See here http://jsfiddle.net/QjjGD/1/

Rizwan Mumtaz
  • 3,875
  • 2
  • 30
  • 31
  • No, he's replacing the content of some `#reorder` element he hasn't shown, not the `tr`. He's said he's putting `td` elements and such in, so this basically comes down to "works for me," which is not an answer. – T.J. Crowder Mar 05 '12 at 15:30
1

this is a live demo that is working perfect for me

http://jsfiddle.net/Yjqkn/

Give it a try and let me know what is different between this code and yours.

P.S: you should always avoid naming your IDs with plain numbers, if you are inforced to do so, prefix it with any letter(s) before the number ex:TblRow1, txt2. but it's always recommended to name your controls with meaningful words ex: txtUsername, lnkDelete, etc.

Mohammed Swillam
  • 9,119
  • 4
  • 36
  • 47