Question

我有一个AJAX函数来从数据库中删除记录。我的问题是，一旦数据被删除，它就会停留在删除URL上。相反，我想将其重定向到我的列表页面。我该如何更改我的JavaScript代码。

我的剧本是：

  <script>
function confirm_modal(delete_url,title)
    {
        jQuery('#modal_delete_m_n').modal('show', {backdrop: 'static',keyboard :false});
        jQuery("#modal_delete_m_n .grt").text(title);
        document.getElementById('delete_link_m_n').setAttribute("href" , delete_url );
        document.getElementById('delete_link_m_n').focus();
    }
    </script>

我的带有模态的HTML页面是：

 <div id="container">
 <div id="wrapper">
  <?php
   if (isset($success_message)) {
            echo $success_message;
        } 
 ?>
 <h1>Staff List </h1><hr/>
 <div id="menu">
 <table>
 <tr>
 <th>Name</th>
 <th>Designation</th>
 <th>Delete</th>
 </tr>
 <?php if(isset($result_set)): 
  foreach ($result_set as $username): ?>
  <tr>

  <td><?php echo $username->user_name; ?></td>
  <td><?php echo $username->designation; ?></td>
  <td><a href="" class="btn btn-danger" data-toggle="modal"     onclick="confirm_modal('<?php echo "delete_staff/".$username->staff_id;? >','Account');" data-target="#myModal">Delete</a></td>
   </tr>


 <?php endforeach; 
 else: echo "No Results Available";
 endif;
 ?>
 </table>
 </div>

 <div class="modal fade" id="modal_delete_m_n"  data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content" style="margin-top:100px;">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" style="text-align:center;">Are you sure to Delete this <span class="grt"></span> ?</h4>
                </div>

                <div class="modal-footer" style="margin:0px; border-top:0px; text-align:center;">
                    <span id="preloader-delete"></span>
                    </br>
                      <a class="btn btn-danger" id="delete_link_m_n" href="">Delete</a>
                    <button type="button" class="btn btn-info" data-dismiss="modal" id="delete_cancel_link">Cancel</button>

                </div>
            </div>
        </div>
    </div>

Answer 1

在代码中处理结构。在confirm_modal()函数中，您将jQuery与Javascript混合在一起。最好保持一致。

当您替换

时

document.getElementById('delete_link_m_n').setAttribute("href" , delete_url );
document.getElementById('delete_link_m_n').focus();

与

jQuery('#delete_link_m_n').attr("href" , delete_url );
jQuery('#delete_link_m_n').focus();

该功能将成为

function confirm_modal(delete_url,title)

    // About the modal itself
    jQuery('#modal_delete_m_n').modal('show', {backdrop: 'static',keyboard :false});
    jQuery("#modal_delete_m_n .grt").text(title);

    // About the delete button
    jQuery('#delete_link_m_n').attr("href" , delete_url );
    jQuery('#delete_link_m_n').focus();

    // Prevent page refreshing
    return false;
}

作为旁注，

<?php echo "delete_staff/".$username->staff_id;? >

不应在?和>之间留出空格。

还要确保正确加载jQuery，否则控制台中会出现错误。最后一件事，这段代码中没有涉及AJAX。您只是更新href以将用户重定向到另一个页面。

使用jquery进行模态确认的页面刷新

1 个答案: