Deleting database records using jQuery AJAX is not working

Question

I am trying to delete records from database without reloading the page. In the view file I have the following code. But when I click on the delete link nothing happens. Would you please kindly help me find out where I have done wrong?

Thanks in advance.

My view file:

<script  type="text/javascript">
    $(function(){ // added
        $('a.delete').click(function(){
            $.ajax({
                var a_href = $('selector').attr('href');
                type: "POST",
                url: "<?php echo base_url(); ?>student_fee_status/payment_info_delete",
                data: "id="+a_href,
                success: function(html){
                    $("#show").html(html);
                }
            });
         return false
        });
    }); // added
</script>


<?php if(count($records) > 0) { $i = 0; foreach ($records as $row){ $i++; ?>

<span> <?php echo $row['fee_type']; ?> : <?php echo $row['fee_amount']; ?> [<a id='<?php echo "$paymentid" ;?>'  
  class='delete' href='#'>Delete</a>]</span> <br>

<?php  }} ?>

This is my Controller:

function payment_info_delete(){

    $id = mysql_real_escape_string($_POST['id']);//Some clean up :)

    $query= $this->db->delete('studentpayment2', array('pid' => $id)); 

    echo "$id";

}

use firebug to see if your request gets to the correct url, and what is returned to find out more about the error — Flo
– Flo, Commented Dec 13, 2011 at 13:36
Firebug would pick this up - check the JS Console to find out what might be going wrong — Mazatec
– Mazatec, Commented Dec 13, 2011 at 13:56

Mazatec · Accepted Answer · 2011-12-13 13:58:49Z

1

You need to put the 'var a_href...' line outside of the ajax function
You need to replace the word selector with this which refers to the currently clicked element.

var a_href = $(this).attr('href'); $.ajax({...

answered Dec 13, 2011 at 13:58

Mazatec

11.7k23 gold badges76 silver badges108 bronze badges

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

4 Comments

Anthony Grist Over a year ago

That's a very good point - I didn't even notice that the variable declaration was inside the .ajax calls options.

black_belt Over a year ago

Thank you Ash. It is now passing data and deleting the database record. If you have time would you please kindly tell me one thing.. when I click on the delete link to delete data it works fine now but it still shows the data on the view page. If I refresh the page then its gone. How can I make it gone the very moment I click on the delete link? Thanks Again

Mazatec Over a year ago

You need to add something to your success function e.g. $('a.delete').hide(); or if you want to be more specific assign the element to a variable and call hide() on that : var el = $(this); and in the success function: el.hide();

black_belt Over a year ago

Thank you very much Ash. You just taught me how to delete and hide using jquery AJAX . ANd thanks to Anthony Grist too. :)

mgraph · Accepted Answer · 2011-12-13 13:40:37Z

1

var a_href = $('selector').attr('href');
$.ajax({...

answered Dec 13, 2011 at 13:40

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

1 Comment

mgraph Over a year ago

@Srijon '$('selector')' you should change it by the right selector, i think it's '$('a.delete')'

Anthony Grist · Accepted Answer · 2011-12-13 14:07:11Z

1

As mgraph pointed out in his answer, the var a_href = $('selector').attr('href'); line is incorrect. You want to replace 'selector' with this so that you're getting the href attribute from the anchor that was clicked on.

That said, I think that's still probably wrong - surely you want to be passing back the id of the entry to delete, which seems to be stored in the id attribute of the anchor tag, rather than always passing back a # symbol?

To pass the id back instead, rather than the href, replace this: var a_href = $('selector').attr('href'); with this: var a_href = this.id;

edited Dec 13, 2011 at 14:07

answered Dec 13, 2011 at 13:51

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

3 Comments

black_belt Over a year ago

Exactly .. I want to pass the id value of the anchor tag and use it to delete data. I have tried - var a_href = $('a.delete').attr('href'); but it doesn't work. Would you please kindly tell me the how to pass the id value of my anchor tag?

Anthony Grist Over a year ago

@Srijon I've edited my answer to include what you should replace the var a_href = ... line with, try that and see if it works.

black_belt Over a year ago

Thank you very much Anthony Grist. As per Ash's suggestion I have put the 'var a_href...' line outside of the ajax function and used var a_href = $(this).attr('href'); $.ajax({... it is working perfectly now. Thanks a lot. :) –

Collectives™ on Stack Overflow

Deleting database records using jQuery AJAX is not working

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related