I'm new in jquery-Ajax. To add record to mysql and show this bottom of the form I'm using Jquery. this is my code:
$(document).ready(function() { $('#preloader').hide(); $('#preloader') .ajaxStart(function(){ $(this).show(); }) .ajaxStop(function(){ $(this).hide(); }); /*********************************************** INSERT DATA **************************************************/ $('form.insert').submit(function (e) { e.preventDefault(); /*update problem solved*/ for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); var data = $('form.insert').serializeArray(); /*update problem solved*/ $('#response').empty(); var insert = $(this).serialize(); $.ajax({ type: "POST", url: "./salvare.php", data: insert, cache: false, dataType: 'json', success: function(data) { if(data.status === 'error'){ $('#response').hide().html(data.answer).css({"color" : "#ff0000", "font-size":"15px", "float":"left"}).fadeIn(1000); } if(data.status === 'success'){ $("input[type='text']").val(""); /*clear problem solved*/ CKEDITOR.instances.editor1.setData(''); CKEDITOR.instances.editor2.setData(''); CKEDITOR.instances.editor3.setData(''); /*clear problem solved*/ $('#response').hide().html(data.answer).css({"color" : "#00CC33", "font-size":"15px", "float":"left"}).fadeIn(1000); $('#manage tr:first').after(data.row); return false; } }, error: function(){ $("#response").hide().html("<font color='red'>There was an error submitting the form. Please try again.</font>").fadeIn(1000); } }); return false; }); /*********************************************** INSERT DATA **************************************************/ /*********************************************** REMOVE DATA **************************************************/ //$('#dresponse').empty(); $('table#manage td a.delete').click(function (e) { e.preventDefault(); var del_id = $(this).attr('id'); var parent = $(this).parent().parent().parent(); if (confirm('Do you want to delete post №' + del_id)) { $.ajax({ type: "POST", url: "./della.php", data: "pagedelete="+del_id, cache: false, dataType: 'json', success: function(data) { if(data.status === 'success'){ parent.fadeOut('slow', function() {$(this).remove();}); } } , error: function(){ $("#fbresponse").hide().html("<font color='red'>There was an error submitting the form. Please try again.</font>").fadeIn(1000); } }); return false; } else { alert("ok") return false; } }); /*********************************************** REMOVE DATA **************************************************/ });
I can add record, but can't delet record without refresh page.
This is the HTML
<table border='1' width='100%' class='zxq' id='manage'> <tr> <th width='1%'>id/proper</th> <th width='15%'>cat</th> <th width='40%'>name</th> <th width='5%'>edit</th> <th width='5%'>delete</th> </tr> <tr id='191'> <td>191/0.00</td> <td>00</td> <td>name0</td> <td><center><a href='../../modifica.php?pageedit=191' class='pageing edit'>edit</a></center></td> <td id='191'> <center> <a href='#del' class='pageing delete' id='191'>delete</a> </center> </td> </tr> <tr id='192'> <td>192/0.00</td> <td>00</td> <td>name1</td> <td><center><a href='../../modifica.php?pageedit=192' class='pageing edit'>edit</a></center></td> <td id='192'> <center> <a href='#del' class='pageing delete' id='192'>delete</a> </center> </td> </tr> <tr id='193'> <td>193/0.00</td> <td>00</td> <td>name2</td> <td><center><a href='../../modifica.php?pageedit=193' class='pageing edit'>edit</a></center></td> <td id='193'> <center> <a href='#del' class='pageing delete' id='193'>delete</a> </center> </td> </tr> </table>Please help me solve this problem.
http://stackoverflow.com/questions/14800036/table-row-add-and-remove