How to implement the Delete functionality by using AJAX in following case?

Question

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}

Where's your AJAX call? And what exactly is the problem you are facing? — thatidiotguy
– thatidiotguy, Commented Dec 6, 2013 at 14:59
@thatidiotguy:I've not used AJAX yet in my code, I'm achieving the delete functionality by reloading the page. I want to do this by using AJAX. Can you please help me in this regard? — PHPLover
– PHPLover, Commented Dec 6, 2013 at 15:01

Powerriegel · Accepted Answer · 2013-12-07 16:18:22Z

My method deleted the item and then directly reloads the page. If you don't want to reload, use 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);

                }
            });
        }

});

}

Collectives™ on Stack Overflow

How to implement the Delete functionality by using AJAX in following case?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related