Question

我有一个菜单，其中包含从foreach循环生成的菜单项。每个菜单项都有一个事件名和一个针对该特定事件的编辑按钮，以下是生成菜单的代码：

foreach ($result as $row) {
$eventid=$row['id'];
$name=$row['name'];

echo '<li class="nav-item">';
 echo '<a class="nav-link" href="#">'.$name.'</a><button class="removebutton" eventid="'.$eventid.'" style="vertical-align:middle;" data-toggle="modal" data-target="#editevent"><span>Edit</span></button>';
 echo '</li>';
 echo '<hr />';
}
}

当用户单击“删除”按钮时，将弹出一个模式。我希望用户能够根据数据库中的$ eventid编辑该特定记录。如果可以将现有值传递到模式形式的字段上，那就更好了。

Answer 1

您可以阅读单击的按钮的eventid属性，如下面的代码所示

$(function(){
  $(document).on("click", "button.removebutton", function(){
      var eventId = $(this).attr("eventid");
      alert(eventId); // user this event id for edit purpose
      // in modal form, you can assign event id to any input or any other html element.
     // suppose you have input with id='modalEventId' then use below code
     $('#modalEventId').val(eventId);
  });
});

Answer 2

尝试一下...！

$(document).ready(function(){
 $(".removebutton").on("click",function() {
      var event_id = $(this).attr("eventid");
      console.log(event_id); //based on this id you can get event detail and edit it
 });

});

Answer 3

您可以执行以下操作来实现所需的目标。

$("button.removebutton").click(function (e) {
        e.preventDefault();
        var eventId = $(this).attr("eventid");

        //fetch the data from server

        $.ajax({
            type: "POST",
            url: "/url",
            data: {eventId:eventId},
            success: function (response) {
                //Show the popup
            }
        });

    });

Answer 4

如果您使用引导程序模态，则可以做到这一点。

您设置要传递的属性值，每当用户单击时设置模态值，然后显示模态。像这样

$(document).ready(function () {
    $("#editBtn").click(function(event) {
    let el = event.target;

    let name = el.getAttribute('data-name');
    let registered = el.getAttribute('data-registered');

    $("#name").val(name);
    $("#registered").val(registered);

    $("#editModal").modal("show");
  })
})

有效的提琴：https://jsfiddle.net/aq9Laaew/151896/

Answer 5

您可以从attr eventid获得价值，并在您的模式中打印出来，它可以是隐藏字段或文本。

$(document).ready(function () {
   $('button.removebutton').on("click", function(){
     var eventId = $(this).attr("eventid");
     $('#event_id').val(eventId);
 });
});

<input type="text" value="" id="event_id">

Answer 6

为每个通过特定ID连接到唯一模态的菜单项添加唯一ID。如下所示在菜单项链接中更改数据目标，以获取每种的特定模式。

echo '<a class="nav-link" href="#">'.$name.'</a><button class="removebutton" eventid="'.$eventid.'" style="vertical-align:middle;" data-toggle="modal" data-target="#editevent-'.$eventid.'"><span>Edit</span></button>';

在模式中，假设$ eventid变量可以从循环外部访问。.

    <div class="modal" id="editevent-<?=$eventid ?>" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                  <div class="modal-body">
        <!--Modal body text goes here....
        here will have the form with existing input values to be edited related to given $eventid(corresponding $row data).eg:
         <input type="text" class="form-control" name="name"
                                                   value=<?=$row['name]?>/>-->

      </div>
      <div class="modal-footer">
        <button type="submit" data-id="<?=$eventid;?>" class="btn btn-primary btn-update">Submit
                                        </button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

在脚本中，更新的输入值将提交到数据库

    $(document).ready(function(){
$('button.btn-update').click(function(e){
            e.preventDefault();
            var data = new FormData();
            data.append('name', $("input[name='name']").val());
            data.append('address', $("input[name='address']").val());
            data.append('email', $("input[name='email']").val());
            var id = $(this).attr('data-id');
            data.append('id', id);
            $.ajax({
                type: "POST",
                url: "url to form data submit",
                data: data,
                success: function (data) {
                    console.log('success');
                },
                error: function (reject) {
                    console.log(reject);
                }
            });
            $('#editevent-' + id).modal('toggle');
            return false;
    });
});

如何将数据传递给模态

6 个答案: