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-action="(formaction)", where
(formid) is the ID in the
<form> tag, and
(formaction) is the content of the
action= attribute in the
<form> tag. If there is no ID in the
<form> tag, you must add one.
I'll start with viewtopic_body.html, which contains examples of both types of "ajaxify" tags. Find this line:
- Code: Select all
<form method="post" action="{S_POLL_ACTION}">
and change it to:
- Code: Select all
<form id="ddpoll" method="post" action="{S_POLL_ACTION}">
Now find this line:
- Code: Select all
<dd class="resultbar"><input type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
and change it to:
- Code: Select all
<dd class="resultbar"><input type="submit" data-ajax="ddpoll" data-action="{S_POLL_ACTION}" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
With these changes, poll submission has now been "ajaxified". Let's do the same with the Delete button. Find this line:
- Code: Select all
<!-- 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:
- Code: Select all
<!-- 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:
- Code: Select all
<!-- IF NOAJAX -->
Now find this line:
- Code: Select all
<!-- IF ERROR --><p class="error">{ERROR}</p><!-- ENDIF -->
And replace it with:
- Code: Select all
<!-- 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:
- Code: Select all
<input type="submit" name="submit" value="{L_SUBMIT}" class="button1" />
And change it to:
- Code: Select all
<input data-ajax="ucp" data-action="{S_UCP_ACTION}" type="submit" name="submit" value="{L_SUBMIT}" class="button1" />
Finally, add this line to the bottom of the file:
- Code: Select all
<!-- ENDIF -->
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 on
my board if you register as a member.
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:
- Code: Select all
$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:
- Code: Select all
meta_refresh(3, $this->u_action);
Adding "ajaxify" support in the editors is as simple as adding the proper
data-ajax="ID" data-action="ACTION" phrase to the post submit
<input> tag (and adding an ID to the quick reply form).
If this method is of interest, I'll add a post which adds "ajaxify" support to the Quick-mod tools.
is the background "waiting" image I use.