I'm using PHP, Smarty, MySql, jQuery, etc. for my website. I'm fetching large amount of data from the database and displaying this data on a webpage. This data is nothing but matching question ids. It takes long time to fetch and display the matching question ids of a selected subject's selected topic onto a webpage. Now what I want to achieve is to delete the question by clicking on a Delete icon. But this should be done by using AJAX such that the selected question_id should get deleted and the other matching question ids should get displayed. While doing this the page should not get refresh. So I have to do this by using AJAX only. Can anyone help me in this regard please? For your better understanding I'm putting below the code snippet from PHP file as well as Smarty template. I've also attached thescreenshot of the UI which displays matching question_ids. Currently I've implemented the normal delete functionality by means of jQUery Colorbox pop-up. Code from PHP file is as follows: 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;
}
?>
The Smarty template file is as follows: match-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}
