CODEWITHSUNDEEP
phpjavascriptjquery
X10nD
X10nD

Reputation: 22030

Ajax deleting checkbox delete the first one or the previous one, not the required - jquery

I am trying to delete a category from the below html code. When I click the previous one deletes or the first one.

--HTML CODE--

<div id="catlist" name="catlist" style=" color:#fff; font-family:arial; font-size:12px;">

<input type="checkbox" value="<?php echo $row_cat['cat']; ?>" class="checkboxcat" id="<?php $ctn = $row_cat['cat']; echo $ctn; ?>"  name="catcheckbox" style="border:#cccccc 1px solid; background-color:#fff;">

<span class="cattext" id="<?php echo $ctn; ?>"><?php echo $ctn; ?></span>

<span class="CatDelete" id="<?php echo $ctn; ?>" style="position:relative; left:10px; color:#c3c3c3; font-size:10px; cursor:pointer;">Delete</span>

</div>

--JS CODE--

$(".CatDelete").live('click',function() {

var valu = $('.checkboxcat').closest('input').find('checkbox').val();

var dataString = 'CatDelVal='+valu;
    $.ajax({     type: "POST",     
        url: "cat_delete.php",     
        data: dataString,     
        success: function(){       
    $('.success').fadeIn(1000);     }     });      
    return false;   


});


The issue is here: 
**var valu = $('.checkboxcat').closest('input').find('checkbox').val();**

When I click on delete that particular category must be deleted, but not happening any idea why?

[update] http://jsfiddle.net/7RrNN/

Upvotes: 0

Views: 155

Answers (3)

X10nD
X10nD

Reputation: 22030

Thanks for your time. I have no idea why it was not working. I just recoded and it worked fine. Probably the simplicity was the idea. not sure.

Upvotes: 0

BuddhiP
BuddhiP

Reputation: 6451

I believe your JS code should change like this: (use on instead live, as live is deprecated)

$(".CatDelete").on('click', function() {

var valu = $(this).siblings('.checkboxcat').val();

var dataString = 'CatDelVal='+valu;
    $.ajax({     type: "POST",     
        url: "cat_delete.php",     
        data: dataString,     
        success: function(){       
    $('.success').fadeIn(1000);     }     });      
    return false;   
});

PHP Code should also change like this I believe

<span class="CatDelete" id="<?php echo $ctn; ?>" data-id="<?php echo $row_cat['cat']; ?>" style="position:relative; left:10px; color:#c3c3c3; font-size:10px; cursor:pointer;">Delete</span>

Upvotes: 1

Bergi
Bergi

Reputation: 664297

You have three elements with the same id on your page, which is invalid - an ID must be unique.

Not sure what $('.checkboxcat').closest('input').find('checkbox') was supposed to do, but: There's hardly any element inside an <input>, so you won't need to get the closest input parent element. Also, there are no <checkbox> elements in HTML. Did you mean the following?

$('input:checkbox.checkboxcat')

Upvotes: 1

Related Questions