时间戳

首页 > 解决方案 > 如何在php中使用ajax重新初始化引导标签输入

php - 如何在php中使用ajax重新初始化引导标签输入

问题描述

在我使用 PHP ajax 和 MySQLi 成功编辑数据后，“<code><input type="text" class="tagsinput"/>”没有正确初始化。我尝试了这段代码，它可以工作但不是正确的形式

$(document).ajaxComplete(function () {
     $(document).find('.tagsinput').tagsInput();
});

这是尚未提交的表格的图片

在此处输入图像描述

这是成功编辑数据的图片，但我想再次编辑

在此处输入图像描述

这是我的ajax调用代码

$(document).on('click', '.edit_fp_follow_up', function () {
        $fp_follow_up_id = $(this).val();
        $method = $('#method' + $fp_follow_up_id).val();

        if (confirm('Are you sure you want to edit this follow-up?')) {
            $.ajax({
                type: "POST",
                url: "action/editfpfollowup.php",
                cache: false,
                async: false,
                data: {
                    fp_follow_up_id: $fp_follow_up_id,
                    method: $method,
                    edit: 1,
                },
                success: function () {
                    $('#alert').slideDown();
                    $('#alerttext').text('Successfully updated Follow-up Schedule!');
                    setTimeout(function () {
                        $('#alert').fadeOut('slow');
                    }, 1500);

                    $(document).ajaxComplete(function () {
                        $(document).find('.tagsinput').tagsInput();
                    });

                    show_follow_up_familyplanning();
                }
            });
        }
    });

这是我的模态代码

<div class="modal fade" id="edit_fp_follow_up<?php echo $fetch1['fp_follow_up_id']; ?>" tabindex="-1" role="dialog" aria-labelledby="defModalHead" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <center>
                <div id="modallabel2" class="alert alert-danger" style="display:none;">
                    <center><span id="checkfield2"></span></center>
                </div>
            </center>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="defModalHead"><strong>Update Follow-up Visit - Family Planning</strong></h4>
            </div>
            <div class="modal-body">
                <form id="fpfollowup">
                    <fieldset>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Method/Brand</label>
                                <input type="text" class="tagsinput" id="method<?php echo $fetch1['fp_follow_up_id']; ?>" value="<?php echo $fetch1['method_brand']; ?>" data-role="tagsinput" required />
                            </div>
                    </fieldset>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" value="<?php echo $fetch1['fp_follow_up_id']; ?>" class="btn btn-success edit_fp_follow_up">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

这是我表中的代码

<div class="table-responsive">
        <table id="fpfollowuptable" class="table datatable hover">
            <thead>
                <tr class="warning">
                    <th>
                        <center>Patient ID</center>
                    </th>
                    <th>
                        <center>Patient Name</center>
                    </th>
                    <th>
                        <center>Remarks</center>
                    </th>
                    <th>
                        <center>Next Service Date</center>
                    </th>
                    <th>
                        <center>Status</center>
                    </th>
                    <th>
                        <center>Actions</center>
                    </th>
                </tr>
            </thead>
            <tbody>
                <?php
                    require '../require/config.php';
                    $query1 = $conn->query("SELECT * FROM `fp_follow_up` NATURAL JOIN `patient` WHERE `fp_follow_up`.`patient_id` = `patient`.`patient_id` ORDER BY `fp_follow_up_id` DESC") or die(mysqli_error());
                    while($fetch1 = $query1->fetch_array()){
            ?>
                <tr>
                    <td>
                        <center><strong><?php echo $fetch1['year']?><?php echo "0".$fetch1['patient_id']?></strong></center>
                    </td>
                    <td>
                        <center><strong><?php echo $fetch1['patient_name']?></strong></center>
                    </td>
                    <td>
                        <center><?php echo $fetch1['remarks']?></center>
                    </td>
                    <td>
                        <center><?php echo $fetch1['next_service_date']?></center>
                    </td>
                    <td>
                        <center>
                    <?php 
                    if ($fetch1['follow_up_status'] == 'Pending')echo "<span class='badge badge-danger animated infinite pulse' style='animation-duration:.8s;'>Pending</span>";
                    if ($fetch1['follow_up_status'] == 'Done')echo "<span class='badge badge-info'>Done</span>";
                    if ($fetch1['follow_up_status'] == 'Cancelled')echo "<span class='badge badge-warning'>Cancelled</span>";
                    ?></center>
                    </td>
                    <td>
                        <center><button class="btn btn-sm btn-info" data-toggle="modal" data-target="#edit_fp_follow_up<?php echo $fetch1['fp_follow_up_id']; ?>">UPDATE</button></center>
                    </td>
                    <?php require('../modals/edit_fp_follow_up.php'); ?>
                </tr>
                <?php
              }
             $conn->close();
            ?>
            </tbody>
        </table>
    </div>

标签： phpjqueryhtmlajaxbootstrap-tags-input

解决方案

您是否尝试过使用

<input type="text" class="tagsinput" data-role="tagsinput"/>

在这里演示：https ://codepen.io/dannibla/pen/QGLyBW

只需将 data-role="tagsinput" 添加到您的输入字段即可自动将其更改为标签输入字段。

您已经在循环中创建了模态..

<input type="text" class="tagsinput<?php echo $fetch1['fp_follow_up_id']; ?>" id="method<?php echo $fetch1['fp_follow_up_id']; ?>" value="<?php echo $fetch1['method_brand']; ?>" data-role="tagsinput" required />

然后在jquery中，尝试 

$(document).find('.tagsinput'+fp_follow_up_id).tagsInput();

推荐阅读