− Table of content
Although Ajax means an XML response (X in AJAX), it is commonly used with other formats.
Depending on the client waiting either responseText or responseXml
of an XmlHttpRequest object, you should use differents jelix response
types.
- for any generic XML content, you will use jResponseXml
- for json encoded content, you will use jResponseJson
- for html fragments, beware you must NOT use
jResponseHtml, butjResponseHtmlFragment(see example below). - Or, in other cases, you would use jResponseText.
In your controller, you can use jApp::coord()->request->isAjax() to verify
that the request is a true AJAX request (eg, made with XMLHttpRequest).
Sending HTML fragments ¶
You can't use jResponseHtml as it always generates a full well-formed HTML
with <html>,<head> and <body>... This is not what we want
within an AJAX transaction.
jResponseHtmlFragment will serve your needs here:
$resp = $this->getResponse('htmlfragment');
$myvariable = ...
// html to send
$resp->addContent( '<p>'.$myvariable.'</p>' );
// or with a template:
$resp->tplname ='myapp~tpl_for_ajax';
$resp->tpl->assign('variable', $myvariable);
return $resp;
Note about the use of jforms in an ajax response ¶
If you want to include a jforms form inside an ajax response, you have to remember the following.
jForms builders try to include additional CSS stylesheets and javascript files in the response. Unfortunately, AJAX responses does not support such features.
You must then include those additional scripts and stylesheets, in the
response which initiated the AJAX call. You can do it by calling the method
outputMetaContent() of the form builder.
Example of an action which display the page that will do the ajax request:
function pageshowingtheform(){
$rep= $this->getResponse("html");
$rep->title = 'show ajax form';
$form = jForms::create('sample');
$form->getBuilder('html')->outputMetaContent(null);
$tpl = new jTpl();
$rep->body->assign('MAIN', $tpl->fetch('mypage'));
return $rep;
}
The template mypage.tpl:
<script type="text/javascript">
var urlAjaxForm = "{jurl 'testapp~sampleform:showajaxform'}"
{literal}
function loadForm() {
jQuery.ajax(urlAjaxForm, {
complete: function(jqXHR, textStatus) {
$("#theform").html(jqXHR.responseText);
},
// ....
});
}
{/literal}
</script>
<button onclick="loadForm()">Load the form</button>
<div id="theform">
// will be filled after clicking on the button
</div>
The showajaxform action:
function showajaxform() {
// retrieve form data
$form = jForms::get('sample');
if($form == null){
$form = jForms::create('sample');
}
$rep = $this->getResponse('htmlfragment');
$rep->tpl->assign('form', $form);
$rep->tplname = 'sampleajaxform';
return $rep;
}
Then the template sampleajaxform used to display the form:
{form $form,'sampleform:save'}
{formcontrols}
<div>{ctrl_label '', '%s: '} {ctrl_control}</div>
{/formcontrols}
<p>{formreset} {formsubmit}</p>
{/form}
