Now, lets get some "ajaxify" action!
In any template, if you want to have a tag "ajaxified", you must add a
data-ajax attribute to the tag. For links, you would add
data-ajax="". For
<input type="submit" tags, you would add the following:
data-ajax="(formid)" data-form="(formaction)", where
(formid) is the ID in the
<form> tag, and
(formaction) is the content of the
action= attribute in the
<form> tag.
I'll start with viewtopic_body.html, which contains examples of both types of "ajaxify" tags. Find this line:
<form method="post" action="{S_POLL_ACTION}">and change it to:
<form id="ddpoll" method="post" action="{S_POLL_ACTION}">Now find this line:
<dd class="resultbar"><input type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>and change it to:
<dd class="resultbar"><input type="submit" data-ajax="ddpoll" data-form="{S_POLL_ACTION}" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>Poll submission has now been "ajaxified". Let's do the same with the Delete button. Find this line:
<!-- IF postrow.U_DELETE --><li class="delete-icon"><a href="{postrow.U_DELETE}" title="{L_DELETE_POST}"><span>{L_DELETE_POST}</span></a></li><!-- ENDIF -->and change it to:
<!-- IF postrow.U_DELETE --><li class="delete-icon"><a data-ajax="" href="{postrow.U_DELETE}" title="{L_DELETE_POST}"><span>{L_DELETE_POST}</span></a></li><!-- ENDIF -->Note how the two types of tags are modified to add "ajaxify" support. Here's a more involved example that demonstrates how to use the
NOAJAX variable in a template to provide additional "ajaxify" support. For demonstration I'll choose the
ucp_profile_profile_info.html file. Add the following line at the very top:
Now find this line:
<!-- IF ERROR --><p class="error">{ERROR}</p><!-- ENDIF -->And replace it with:
<!-- ENDIF -->
<!-- IF ERROR --><p class="error">{ERROR}</p><!-- ENDIF -->
<!-- IF not NOAJAX -->
<fieldset class="submit-buttons">
<br /><input type="button" value="OK" class="button2" onclick="ajaxbox_off()" />
</fieldset>
<!-- ELSE -->
Now find this line:
<input type="submit" name="submit" value="{L_SUBMIT}" class="button1" />And change it to:
<input data-ajax="ucp" data-form="{S_UCP_ACTION}" type="submit" name="submit" value="{L_SUBMIT}" class="button1" />Finally, add this line to the bottom of the file:
You have now "ajaxified" the UCP "Edit Profile" page. But wait! There's more!
All error messages have been "ajaxified" as well. You can see this in action here by clicking on the
Profile link in the
User Controls dropdown menu.
Using the above as a guide, it should be easy to add "ajaxify" support to the remaining UCP support files (except avatar).
NOTE: if you want to "ajaxify" the
ucp_profile_signature.html file, you will need to add a line to the
includes/ucp/ucp_profile.php file. In the
case: 'signature': block, find this line:
$message = $user->lang['PROFILE_UPDATED'] . '<br /><br />' . sprintf($user->lang['RETURN_UCP'], '<a href="' . $this->u_action . '">', '</a>');
And immediately above it, add this line:
meta_refresh(3, $this->u_action);
is there a way to optimize it?