如何使用单一形式编辑ajax中的数据？

I am working on a project which uses codeigniter framework. I am able to display all data from database into a table. What I did is loop the result and every row has its edit link. Now, the problem is everytime I load the page, all edit links are forms loaded at the same time. For example, when I have more than a hundred data from the DB, hundred edit forms also looping which I think not good for the system because of its heaviness. What I plan is to use a single form and just pass the data using ajax. Can anyone know how to do it? I just need some guidance. Thanks in advance.

我正在开发一个使用codeigniter框架的项目。我能够将数据库中的所有数据显示到表中。我所做的是循环结果,每行都有其编辑链接。现在,问题是我每次加载页面时,所有编辑链接都是同时加载的表单。例如,当我有来自数据库的一百多个数据时,一百个编辑表单也会循环,我觉得这对系统来说不好,因为它很重。我计划使用单个表单并使用ajax传递数据。谁能知道该怎么做?我只需要一些指导。提前致谢。

EXAMPLE CODE:

<?php foreach ($users as $key => $value): ?>
<tr>
 <td><?php echo $value['first_name'] ?></td>
 <td><?php echo $value['last_name'] ?></td>
 <td>
  <a href="#" data-toggle="modal" data-target="#update_user_modal<?php echo    $value['id'] ?>" id="view-profile" title="Click to view">
   <i class="icon-doc"></i>
  </a>
 </td>
</tr>
<?php endforeach ?>

3 个解决方案

#1

Here is my approach to this problem:
you keep one form in a modal and in your edit link attach a onclick event in jquery which will push data to your modal form . then trigger the modal open inside click event function .I have just show a demonastration not complete solution .

这是我解决这个问题的方法:你将一个表单保存在一个模态中,并在你的编辑链接中附加一个onqulick事件在jquery中,它会将数据推送到你的模态表单。然后触发模态打开里面的点击事件功能。我只是展示了一个不完整的解决方案。

in your edit section do below

    <td>
     <a href="#" data-toggle="modal" 
class = "some-action-class"
                data-target="#update_user_modal"
                data-userID="<?php echo $value['id'] ?>"
                data-userFname="<?php echo $value['first_name'] ?>"
                data-userLname="<?php echo $value['last_name'] ?>" 
                id="view-profile" 
                title="Click to view">
            <i class="icon-doc"></i>
           </a>
   </td>

here the JS code:

这里的JS代码:

$(".some-action-class").on('click', function () {
    //here push data to modal form input element like below
    var inputOne = document.getElementById('someInputId') ; //in you modal form      
    var userID = $( this ).data( "userID" );
   //set clicked row value to modal 
   inputOne.val(userID);
   //do like above for other fields 

    $('#update_user_modal').modal('show');//modal opens with updated value 
});

hide the modal when done editing:

完成编辑后隐藏模态:

#2

You can have a modal with a form and then call it with Ajax.

你可以有一个带有表单的模态,然后用Ajax调用它。

First add a class to your td so that we can pull out its value. Also, I've added a icon to click on for editing

首先在你的td中添加一个类,以便我们可以提取它的值。另外,我添加了一个图标来点击进行编辑

<tr>
 <td class="first_name"><?php echo $value['first_name'] ?></td>
 <td class="last_name"><?php echo $value['last_name'] ?></td>
 <td>
  <a href="#" data-id="<?php echo $value['id'] ?>" data-toggle="modal" data-target="#update_user_modal" id="view-profile" title="Click to view">
   <i class="icon-doc"></i>
   <i class="icon-edit"></i>
  </a>
 </td>
</tr>

Now, call your form with Ajax(maybe a BS modal) but first we need to get the values of the row you are trying to change:

现在,使用Ajax(可能是BS模式)调用您的表单,但首先我们需要获取您要更改的行的值:

$(document).on('click', '.icon-edit', function(){
    // get values required for editing
    var id = $(this).attr("data-id");
    var first_name = $(this).closest('tr').find('.first_name').text();
    var last_name = $(this).closest('tr').find('.last_name').text();

   // Do Ajax call
    $.ajax({
      url:"path/to/form.php?id=" + id + "&first_name=" + first_name + "&last_name=" + last_name,
      success:function(data){
        //append form to your DOM
        $('element').html(data);
      },    
    })
});

Now in your PHP script and HTML form, you can set a the input value and with it isset()you can identify if its a edit or add. Take a look at this:

现在,在PHP脚本和HTML表单中,您可以设置输入值,并使用isset()可以识别它是编辑还是添加。看看这个:

<form method="POST">
    <input name="first_name" value="<?php isset($_GET['first_name']) ? $_GET['first_name'] : "" ; ?>">
    <input name="last_name" value="<?php isset($_GET['last_name']) ? $_GET['last_name'] : "" ; ?>">
    <input type="submit" name="submit">
</form>

<?php 

if(isset($_POST['submit'])){

    if(isset($_GET['id'])){
        // Do query to update
    }else{
        // Do query to create   
    }

}

?>

Or you can just to a Ajax call to update/create a user.

或者您可以通过Ajax调用来更新/创建用户。

#3

You are using the model popup for the update as you have written in the data-target and you have created model per record.

您正在使用模型弹出窗口进行更新,因为您已在数据目标中编写并且已为每条记录创建模型。

But You can do like this. You can create only one model popup like #update_data and on click of that Edit link create the ajax call and get the data using record_id and fill that data in model. Then open that model and for update also you can create ajax to update the record for the selected record_id.

但你可以这样做。您只能创建一个模型弹出窗口,如#update_data,单击该编辑链接创建ajax调用并使用record_id获取数据并在模型中填充该数据。然后打开该模型并进行更新,您还可以创建ajax来更新所选record_id的记录。

on success you can update the row of the list data.

成功后,您可以更新列表数据的行。