I'm a newbie to the concept of displaying loaded image until the data loads. The time to load the data is too much so till then I want to display the loader image. Can anyone help me in this regard? For your reference I'm putting below the code from the PHP file and Smarty template file(i.e. HTML). Following is my PHP code:
<?php
require_once("../../includes/application-header.php");
$objQuestionMatch = new QuestionMatch();
$request = empty( $_GET ) ? $_POST : $_GET ;
if($request['subject_id']!="")
$subject_id = $request['subject_id'];
if($request['topic_id']!="")
$topic_id = $request['topic_id'];
if($subject_id !='' && $topic_id !='')
$all_match_questions = $objQuestionMatch->GetSimilarQuestionsBySubjectIdTopicId($subject_id, $topic_id);
$smarty->assign('all_match_questions', $all_match_questions);
$smarty->display("match-question.tpl")
?>
The Smarty template code is as follows:
<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}
{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>
</form>
You cannot show loading image if you are showing data using PHP directly. However if you load the data using ajax, then you can use ajax callbacks to show and hide the preloader.