如何使用 php 中的 ajax 重新初始化引導標簽輸入

Question

在我使用 PHP ajax 和 MySQLi 成功編輯數據后，“ <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>

Answer 1

您是否嘗試過使用

<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();