Как реализовать функцию удаления с помощью AJAX в следующем случае?

Question

Я использую PHP, Smarty, MySql, jQuery и т. Д. Для своего сайта. Я извлекаю большое количество данных из базы данных и отображаю эти данные на веб-странице. Эти данные представляют собой ничего, кроме соответствия идентификаторов вопросов. Для получения и отображения соответствующих идентификаторов вопросов выбранной темы выбранного объекта на веб-странице требуется много времени. Теперь я хочу, чтобы удалить вопрос, нажав на значок «Удалить». Но это должно быть сделано с помощью AJAX, так что выбранный вопрос_ид должен быть удален, а другие соответствующие идентификаторы вопросов должны отображаться. При этом страница не должна обновляться. Поэтому я должен сделать это, используя только AJAX. Может ли кто-нибудь помочь мне в этом отношении, пожалуйста? Для вашего лучшего понимания я помещаю ниже фрагмент кода из файла PHP, а также шаблон Smarty. Я также добавил скриншот пользовательского интерфейса, который отображает соответствующие question_ids. В настоящее время я реализовал обычную функцию удаления с помощью всплывающего окна jQuery Colorbox. код из PHP файла выглядит следующим образом: match_question.php

<?php 
$objQuestionMatch = new QuestionMatch(); 
switch($op) { 
case "delete": 
     if($request['question_id']!="") 
     $question_id = $request['question_id']; 

     if(!empty($question_id)) { 

     /*Fetch the subject_id and topic_id of the question to assign into a query string*/ 
     $question_data = $objQuestionMatch->GetSubjectIdAndTopicId($question_id); 

     $subject_id = $question_data['question_subject_id']; 
     $topic_id = $question_data['question_topic_id']; 

     $ret = $objQuestions->DeleteQuestion($question_id); 

     // if question is not deleted come back on the same page of match question ids 
     if(!$ret) 
      $return_url = "match_question.php?subject_id=".$subject_id."&topic_id=".$topic_id; 
     else 
      $return_url = "match_question.php?subject_id=".$subject_id."&topic_id=".$topic_id."&del_questions_suc=1"; 

     header("Location:".$return_url); 
     }  
     die(); 
     break; 


    } 
    ?> 

Файл шаблона Smarty выглядит следующим образом: матч-question.tpl

<div class="breadcrumb-wrap"> 

{include file='resources-sub-menu.tpl'} 

    <ul class="page-flow"> 
    <li><a href="#">Home</a><span>></span></li> 
    <li>Questions</li> 
    </ul> 
</div> 
<h1 class="c-heading"> Match Questions </h1> 
<div class="c-grad-box fnShowData"> 
    <div class="form-wrapper"> 
    <form id="view-questions-form" name="questions_filter" action="{$control_url}modules/questions/match_question.php" method="post"> 
      <input type="hidden" name="page" id="page" value="1" > 
     <div class="w50">    
     <ul> 
      <li> 
      <label>Subjects</label> 
      <div class="form-element"> 
       <select name="subject_id" id="subject_id" onchange="get_topics_by_subject(this.value, 'get_topics_by_subject_for_filter', '#topic_id'); return false;"> 
       <option value="">All</option> 
       {foreach from=$all_subjects item=subjects key=key} 
       <option value="{$subjects.subject_id}" {if $subject_id == $subjects.subject_id} selected="selected"{/if}>{$subjects.subject_name}</option> 
       {/foreach} 
       </select> 
      </div> 
      </li> 
     </ul> 
     </div> 
     <div class="w50">    
     <ul> 
      <li> 
      <label>Topics</label> 
      <div class="form-element"> 
       <select name="topic_id" id="topic_id"> 
        <option value="">All</option> 
        {foreach from=$all_topics item=topics key=key} 
        <option value="{$topics.topic_id}" {if $topic_id==$topics.topic_id} selected="selected"{/if}>{$topics.topic_name}</option> 
        {/foreach} 
        </select> 
      </div> 
      </li> 
      <li> 
      <div class="find-que-ans"> 
       <p class="custom-form"><label></label></p> 
       <input type="submit" class="c-btn submit_form" name="btn_submit" id="btn_submit" value="Match Questions" /> 
      </div> 
      </li>       
     </ul> 
     </div>   
    </form> 
    </div> 
</div> 
{if "" != $info_msg} <div class="c-msg-seccess"> {$info_msg} <a class="c-close fnClose" href="#"></a> </div>{/if} 
<br/><br/> 
<form id="delete-questions-form" name="delete-questions-form" action="{$control_url}modules/questions/match_question.php" method="post"> 
<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0"> 
    <tr class="evenRow"> 
    <th width="33%" style="text-align:center;" class="question-id">Que ID</th> 
    <th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th> 
    <th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th> 
    </tr> 
{if $all_match_questions} 
    {foreach from=$all_match_questions item=qstn key=key} 
    {if $qstn.similar_questions_ids_and_percentage} 
    <tr class="oddRow"> 
    <td class="question-id" align="center" valign="top"> 
     <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$qstn.question_id}</a>{if $qstn.question_appeared_count gt 0}-Appeared({$qstn.question_appeared_count}){/if} 
    </td> 
    <td class="question" align="center" valign="top"> 
     {foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no} 
     {if $question.question_id!=''} 
     <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$question.question_id}</a>{if $question.question_appeared_count gt 0}-Appeared({$question.question_appeared_count}){/if} 
     {if $question.question_appeared_count eq 0} 
     <a href="#deletePopContent" class="c-icn c-remove delete_question" delhref="{$control_url}modules/questions/match_question.php?op=delete&question_id={$question.question_id}&subject_id={$subjects.subject_id}&topic_id={$topics.topic_id}" title="Delete question"> Delete</a> 
     {/if} 
     {/if}<br /> 
     {/foreach} 
    </td> 
    <td class="question" align="center" valign="top"> 
     {foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no} 
     {if $question.percentage!=''}{$question.percentage}{/if}<br /> 
     {/foreach}    
    </td> 
    </tr> 
    {/if} 
    {/foreach} 
{else} 
    <tr> 
    <td colspan="2" align="center"><b>No Questions Available</b></td> 
    </tr> 
{/if} 
</table> 
</form> 
<div class="hidden"> 
    <div id="deletePopContent" class="c-popup"> 
    <h2 class="c-popup-header">Delete Question</h2> 
    <div class="c-content">   
     <h3>Are you sure to delete this question?</h3> 
     <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p> 
     <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="delete_url">Delete</a> 
    </div> 
    </div> 
</div> 
{literal} 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $(".inline_view_question_detail").colorbox({href:$(this).attr('href'),width:'auto', height:'auto'}); 

    $(".delete_question").click(function(e) { 
    var delete_url = $(this).attr('delhref'); 
    $('#delete_url').attr('href', delete_url); 
    $(".delete_question").colorbox({inline:true, width:666}); 

    $(".c-btn").bind('click', function(){ 
     $.colorbox.close(); 
    }); 
    }); 
}); 
</script> 
{/literal} 

Answer 1

Мой метод удалил его, а затем непосредственно перезагружает страница. Если вы не хотите перезагружать, используйте hide()

function handleDelete() 
{ 
var tbody = $('tbody tr'); 
$('td div.delete.order').click(function() { 
    var status = window.confirm('Do you really want to delete your article?'); 
    if (status) 
    { 
     if(! $('td div.delete.order').hasClass('confirm')) 
     { 
      id = $(this).attr('id'); 
      var data = { 
       id_delete: id, 
      }; 
      $.ajax({ 
       url: 'your PHP script url', 
       dataType: 'json', 
       type: 'post', 
       data: data, 
       success: function(data) { 
        //Item removed, now reload 
        $(this).parent().remove(); 
         window.location.reload(true); 

       } 
      }); 
     } 

}); 

}