- Code: Select all
function set_ajaxbox() {
var elem = document.getElementById('msg-ajax');
elem.style.backgroundImage='none';
center_box(elem);
}
$(function() {
if (goodbrowser) {
$('[data-ajax]').each(function() {
if (this.href) {
$(this).click(function(){
ajaxbox_on();
$.get(this.href+'&ajax=y',function(data){
$('#msg-ajax').html(data);
set_ajaxbox();
});
return false;
});
}
else if (this.type && this.type == 'submit') {
this.type='button';
$(this).click(function(){
ajaxbox_on();
$.post(this.getAttribute('data-form')+'&ajax=y',$('#'+this.getAttribute('data-ajax')).serialize()+'&'+this.name+'='+this.value,function(data){
$('#msg-ajax').html(data);
set_ajaxbox();
});
});
}
});
}
});
Message_body.html file:
- Code: Select all
<!-- IF NOAJAX -->
<!-- INCLUDE overall_header.html -->
<div class="panel" id="message">
<div class="inner"><span class="corners-top"><span></span></span>
<!-- ELSE -->
<script type="text/javascript">
<!-- IF REDIRECT_URL -->
var y = '{REDIRECT_URL}';
setTimeout("window.location='" + y.replace(/(\?|&)ajax=y/, '') + "'", 1500);
<!-- ELSE -->
setTimeout('window.location.reload()', 1000);}
<!-- ENDIF -->
</script>
<!-- ENDIF -->
<h2>{MESSAGE_TITLE}</h2>
<p>{MESSAGE_TEXT}</p>
<!-- IF NOAJAX -->
<!-- IF SCRIPT_NAME == "search" and not S_BOARD_DISABLED and not S_NO_SEARCH and L_RETURN_TO_SEARCH_ADV --><p><a href="{U_SEARCH}" class="{S_CONTENT_FLOW_BEGIN}">{L_RETURN_TO_SEARCH_ADV}</a></p><!-- ENDIF -->
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- INCLUDE overall_footer.html -->
<!-- ELSE -->
<!-- IF SCRIPT_NAME == "search" and not S_BOARD_DISABLED and not S_NO_SEARCH and L_RETURN_TO_SEARCH_ADV --><p><a href="{U_SEARCH}" class="{S_CONTENT_FLOW_BEGIN}">{L_RETURN_TO_SEARCH_ADV}</a></p><!-- ENDIF -->
<!-- ENDIF -->
And Confirm_body.html:
- Code: Select all
<!-- IF NOAJAX -->
<!-- INCLUDE overall_header.html -->
<form id="confirm" action="{S_CONFIRM_ACTION}" method="post">
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<!-- ELSE -->
<form id="confirm" action="{S_CONFIRM_ACTION}" method="post">
<!-- ENDIF -->
<h2>{MESSAGE_TITLE}</h2>
<p>{MESSAGE_TEXT}</p>
<fieldset class="submit-buttons" style="margin-top:25px">
{S_HIDDEN_FIELDS}
<!-- IF NOAJAX -->
<input type="submit" name="confirm" value="{L_YES}" class="button2" />
<input type="submit" name="cancel" value="{L_NO}" class="button2" />
<!-- ELSE -->
<input type="button" value="{L_YES}" class="button2" onclick="$.post('{S_CONFIRM_ACTION}',$('#confirm').serialize()+'&confirm=Yes',function(data){$('#msg-ajax').html(data);set_ajaxbox();})" />
<input type="button" value="{L_NO}" class="button2" onclick="ajaxbox_off()" />
<!-- ENDIF -->
</fieldset>
<!-- IF NOAJAX -->
<span class="corners-bottom"><span></span></span></div>
</div>
</form>
<!-- INCLUDE overall_footer.html -->
<!-- ELSE -->
</form>
<!-- ENDIF -->
The current method is limited to confirm boxes and messages. This method offers the style/MOD developer the ability to "ajaxify" anything they want through use of the NOAJAX variable in templates. Error messages from form submission? No problem. Entire pages? No problem. You can see examples of these on my test board -- the registration agreement page is "ajaxified", and preview and error messages are "ajaxified" on the Contact Us page.
). Is this being fixed?
