php - 单击十字时如何使用重新加载/刷新，然后jquery模态将关闭

Question

我使用相同的表单来添加和编辑数据。添加和编辑成功完成，编辑和添加后我很清爽。但我需要下面的一些解决方案

我的jquery代码如下

$(".update_vehicle_info").click(function(){
     var hdn_id = $(this).attr('data-hdn_id');
     $("#vehicle_form_div").find("#hdn_id").val(hdn_id);
     var post_url = "<?php echo base_url();?>index.php/spc_con/get_vehicle_info_data/" + hdn_id;
        $('#hdn_id').empty();
        $.getJSON(post_url, function(response){
        document.getElementById('financial_year_id').value = response.financial_year_id;
        document.getElementById('vehicle_id').value = response.vehicle_id;
        document.getElementById('brand_id').value = response.brand_id;
        document.getElementById('country_id').value = response.country_id;
        document.getElementById('reg_no').value = response.reg_no;
        document.getElementById('capacity').value = response.capacity;
        document.getElementById('running').value = response.running;
        document.getElementById('serviceable').value = response.serviceable;
        document.getElementById('condemned').value = response.condemned;
     });
     $("#vehicle_form_div").dialog("open");
 });

我有下面的屏幕截图

如果我单击编辑按钮，如果我现在不编辑并且单击“添加车辆信息”，则编辑字段值将保留，但是

当我单击“编辑”并单击“十字”而不进行编辑时，我需要。然后页面将刷新/重新加载，如果我单击“添加车辆信息”，则每个字段数据都不会保留。

如何解决，请帮帮我。

Answer 1

更新: 为您的每个 tr 提供一些唯一的 id，例如 <tr id="tr_pk_23">...</tr>其中 23 是数据库中行的主键。

<button onClick="showModalForm(this,23);">EDIT</button>

function  showModalForm(button,id){
var $tr = $(button).closest('tr');
/*
* Send ajax request to your php script /myScript.php?id=23
* Find data in database by id, and generate modal form with php, send it back to browser append to body and show it to user.
*/
}

模态形式的更新按钮必须是ajaxButton。所以 onClick 应该被分配为函数

<button onClick="saveDataAndUpdateRow(this,23);">UPDATE</button>

JavaScript:

function saveDataAndUpdateRow(button,id){
var $form = $(button).closest('form');
var data = $form.serialize();
/*
* Send data to another script, save your data in DB and generate a new <tr> with updated values
*/
var $new_tr = @ajaxresponse;
var $old_tr = $('#tr_pk_'+id);
$old_tr.after($new_tr);
$old_tr.remove();
}

请随时向我询问有关此概念的任何问题。