How to assign and display data in smarty template received from AJAX?

Question

I'm not able to assign and display the data in a smarty template. I receive the data from the AJAX. Also I'm not able to show the loader image until the page-data loads completely. Can anyone help me please? PHP Code:(match_question.php)

<?php 
  require_once("../../includes/application-header.php");

 $objQuestionMatch  = new QuestionMatch();
 $op          = $request['op'];

 if($request['subject_id']!="") 
    $subject_id = $request['subject_id'];
 if($request['topic_id']!="") 
    $topic_id = $request['topic_id'];

 switch($op) { 
    case "get_match_questions":

      if($subject_id !='' && $topic_id !='') { 
        $all_match_questions = $objQuestionMatch->GetSimilarQuestionsBySubjectIdTopicId($subject_id, $topic_id);//Here I'm getting the array containing data to be assigned to the smarty template
}
      $smarty->assign('all_match_questions', $all_match_questions);
      $smarty->assign('subject_id', $subject_id);
      $smarty->assign('topic_id', $topic_id);
      $smarty->display("match-question.tpl");
      die();

}


?>

Code of match-question.tpl(Template file):

<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="view_questions_form" action="{$control_url}modules/questions/match_question.php">
      <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="button" 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/>

<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0" id="test">
  <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}
      {assign var=counter value=1}
  <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>
      {foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no}
        {if $counter gt 1}
    <tr class="oddRow"><td class="question-id" align="center" valign="top"></td>
        {/if}
    <td class="question" align="center" valign="top">

        {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 id ="{$question.question_id}" href="#" class="c-icn c-remove delete_question"  title="Delete question"> Delete</a>{/if}
        {/if}

    </td>

    <td class="question" align="center" valign="top">
        {if $question.percentage!=''}{$question.percentage}{/if}
        {assign var=counter value=$counter+1}
    </td>
  </tr>
      {/foreach}               
    {/if}
  {/foreach}
{else}
  <tr>
    <td colspan="2" align="center"><b>No Questions Available</b></td>
  </tr>
{/if}
</table>

{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
  $(".inline_view_question_detail").colorbox({href:$(this).attr('href'),width:'auto', height:'auto'});


  $("#btn_submit").click(function() {

      var subject_id = $('#subject_id').val();                
      var topic_id = $('#topic_id').val();

      $.ajax({    //create an ajax request to load_page.php
        type: "POST",
        data: {
                'request_type': 'ajax',
                'op': 'get_match_questions',
                'subject_id' : subject_id,
                'topic_id': topic_id
            },
        url: "match_question.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                   
            //$("#test").html(response); 
            //alert(response);
        }

    });
});
});    
</script>
{/literal}

Answer 1

For loader image you can try following code, i have used same code in my application.

  $(document).ajaxStart(function() {$("#content").mask("Please Wait...",0,250);});
  $(document).ajaxStop(function() {$("#content").unmask();});

You need to add following js code.

(function($){

        /**
         * Displays loading mask over selected element(s). Accepts both single
         * and multiple selectors.
         * 
         * @param label
         *            Text message that will be displayed on top of the mask
         *            besides a spinner (optional). If not provided only mask
         *            will be displayed without a label or a spinner.
         * @param delay
         *            Delay in milliseconds before element is masked (optional).
         *            If unmask() is called before the delay times out, no mask
         *            is displayed. This can be used to prevent unnecessary mask
         *            display for quick processes.
         * @param pos
         *            Position of the loading message, if undefined, auto middle
         *            will be used.
         */
        $.fn.mask = function(label, delay, pos){
              var position = 'auto';
              if(pos !== undefined && pos > 0) {
                position=pos;
              }
            $(this).each(function() {
                if(delay !== undefined && delay > 0) {
                    var element = $(this);
                    element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label, position)}, delay));
                } else {
                    $.maskElement($(this), label, position);
                }
            });
        };

        /**
         * Removes mask from the element(s). Accepts both single and multiple
         * selectors.
         */
        $.fn.unmask = function(){
            $(this).each(function() {
                $.unmaskElement($(this));
            });
        };

        /**
         * Checks if a single element is masked. Returns false if mask is
         * delayed or not displayed.
         */
        $.fn.isMasked = function(){
            return this.hasClass("masked");
        };

        $.maskElement = function(element, label, position){

            // if this element has delayed mask scheduled then remove it and
            // display the new one
            if (element.data("_mask_timeout") !== undefined) {
                clearTimeout(element.data("_mask_timeout"));
                element.removeData("_mask_timeout");
            }

            if(element.isMasked()) {
                $.unmaskElement(element);
            }

            if(element.css("position") == "static") {
                element.addClass("masked-relative");
            }

            element.addClass("masked");

            var maskDiv = $('<div class="loadmask"></div>');

            // auto height fix for IE
            if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
                maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));
                maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));
            }

            // fix for z-index bug with selects in IE6
            if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
                element.find("select").addClass("masked-hidden");
            }

            element.append(maskDiv);

            if(label !== undefined) {
                var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');
                maskMsgDiv.append('<div>' + label + '</div>');
                element.append(maskMsgDiv);

                // calculate center position
                            if (position=='auto') {
                              maskMsgDiv.css("top", Math.round(element.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px");
                            } else {
                              maskMsgDiv.css("top", position+'px');
                            }

                maskMsgDiv.css("left", Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px");

                maskMsgDiv.show();
            }

        };

        $.unmaskElement = function(element){
            // if this element has delayed mask scheduled then remove it
            if (element.data("_mask_timeout") !== undefined) {
                clearTimeout(element.data("_mask_timeout"));
                element.removeData("_mask_timeout");
            }

            element.find(".loadmask-msg,.loadmask").remove();
            element.removeClass("masked");
            element.removeClass("masked-relative");
            element.find("select").removeClass("masked-hidden");
        };

    })(jQuery);

Answer 2

For Image Loading use following code:

you need to define the a beforeSend handler in your ajax call. This handler will invoke until the you are receiving response back from the server... so there is no need of extra js file to be add

replace ajax code as below:

$.ajax({    //create an ajax request to load_page.php
        type: "POST",
        data: {
                'request_type': 'ajax',
                'op': 'get_match_questions',
                'subject_id' : subject_id,
                'topic_id': topic_id
            },
        url: "match_question.php",             
        dataType: "html",   //expect html to be returned
        beforSend: function(){
            $("#image_loading_div").show();    
        }                
        success: function(response){
            $("image_loading_div").hide();                     
            //$("#test").html(response); 
            //alert(response);
        }

    });  

Note: create div with id "#image_loading_div" with loading image into it and set display:none by default.

Answer 3

For hassle-free ajaxian style page updates using PHP, I propose to use Xajax, a PHP-based framework. Why?

• Automagically exposes registered functions or methods as JavaScript methods to the client side
• Minimal change to existing code

Using a $objResponse = new xajaxResponse(); , many ways to manipulate the client are available, for example:

Execute code at the client side:

$objResponse->script("xajax_updateWall();");

Clear an element at the client side:

$objResponse->clear("words","value");

Show an alert at the client side:

$objResponse->alert($sErrMsg);

Have a look at Xajax examples

Inside the folder example, find some simple usage samples, e.g. the example multiply:

You register a function or method for client-side AJAX requests like this:

require_once ("../../xajax_core/xajax.inc.php");

$xajax = new xajax("multiply.server.php");
$xajax->configure('javascript URI','../../');
$xajax->configure('debug', true);
$xajax->register(XAJAX_FUNCTION,"multiply");

In an HTML-page, you call the registered function like so:

... onclick="xajax_multiply(document.getElementById('x').value, document.getElementById('y').value);return false;"...

And here is how you process a request:

function multiply($x, $y)
{
    $objResponse = new xajaxResponse();
    $objResponse->assign("z", "value", $x*$y);
    return $objResponse;
}

require("multiply.common.php");
$xajax->processRequest();