我无法在智能模板中分配和显示数据。我收到了AJAX的数据。此外，在页面数据完全加载之前，我无法显示加载程序图像。有人可以帮我吗？ PHP代码：（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();
}
?>
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="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}
答案 0 :(得分：1)
对于装载程序图像，您可以尝试以下代码， 我在我的应用程序中使用了相同的代码。
$(document).ajaxStart(function() {$("#content").mask("Please Wait...",0,250);});
$(document).ajaxStop(function() {$("#content").unmask();});
您需要添加以下js代码。
(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);
答案 1 :(得分：0)
对于图像加载，请使用以下代码：
您需要在ajax调用中定义一个beforeSend处理程序。这个处理程序将调用，直到你从服务器收到响应...所以不需要额外的js文件来添加
替换ajax代码如下：
$.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);
}
});
注意：创建ID为“#image_loading_div”的div并将图片加载到其中并默认设置为display:none。
答案 2 :(得分：0)
对于使用PHP 的无障碍ajaxian样式页面更新，我建议使用Xajax，一个基于PHP的框架。为什么呢？
使用$objResponse = new xajaxResponse();，有许多操作客户端的方法，例如：
在客户端执行代码：
$objResponse->script("xajax_updateWall();");
清除元素：
$objResponse->clear("words","value");
在客户端显示提醒：
$objResponse->alert($sErrMsg);
查看Xajax示例
在folder example内，找到一些简单的用法示例，例如example multiply：
您为客户端AJAX请求注册了一个函数或方法，如下所示：
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");
在HTML页面中，您可以像这样调用注册函数：
... onclick="xajax_multiply(document.getElementById('x').value, document.getElementById('y').value);return false;"...
以下是处理请求的方式：
function multiply($x, $y)
{
$objResponse = new xajaxResponse();
$objResponse->assign("z", "value", $x*$y);
return $objResponse;
}
require("multiply.common.php");
$xajax->processRequest();