7
#1
phpBB3 AJAX
Posted April 21st 2012, 8:57pm
I was asked (dared?) by the phpBB3.1 (Ascreaus) Release Manager to provide comments about bugs in the Ascreaus AJAX code. After taking a look at the javascript code and how it worked on the phpBB Area51 board, I decided to offer this code to the Ascreaus developers. I also decided to make this series of posts here.

The next post will contain the base code which adds "ajaxify" support to a phpBB3 board. It will be followed with a post that shows how to activate the functionality in a few templates.

If members want to see this in action here, you can vote in a poll, create a test post and then delete it, and make some changes in the User Control Panel. Two notes: There is no "ajaxify" support in the posting area because what is implemented here for posting is IMO better than the "ajaxify" method. Also, "ajaxify" support has not been added to the UCP avatar page due to IE and Opera not supporting the HTML5 FormData object.
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
5
#2
phpBB3 AJAX (Part II)
Posted April 22nd 2012, 3:23pm
Here are the modifications required to add "ajaxify" support in phpBB3.

In includes/functions.php, the template variable assignment in the meta_refresh() function should look like this:

	$template->assign_vars(array(
'META' => '<meta http-equiv="refresh" content="' . $time . ';url=' . $url . '" />',
'REDIRECT_URL' => str_replace('&', '&', $url),
'REDIRECT_TIME' => ($time > 100) ? $time : false,
));

And in the long list of common variables, find the top line:

		'SITENAME'						=> $config['sitename'],

and add the following line above it:

		'NOAJAX'			=> (request_var('ajax', '') == '') ? true : false,

Now, in overall_header.html, find the first occurrence of the following two lines in the <head> tag:

<script type="text/javascript">
// <![CDATA[

And add the following lines immediately above them:

<style type="text/css">
#lightbox {
z-index:5000;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
filter:alpha(opacity=50);
}
#msg-ajax {
z-index:10000;
position:fixed;
padding:10px 15px;
min-height:20px;
min-width:270px;
background-color:#fff; /* use whatever color you want */
background-repeat:no-repeat;
background-position:50% 50%;
box-shadow: 0 0 10px #000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[
var goodbrowser = true;

function center_box(box) {
box.style.top = String(($(window).height() - $(box).outerHeight()) / 2) + 'px';
box.style.left = String(($(window).width() - $(box).outerWidth()) / 2) + 'px';
}
function ajaxbox_on() {
var x = document.getElementById('msg-ajax');
center_box(x);
x.style.backgroundImage = './adm/images/progress_bar.gif'; // change URL to whatever you want
x.style.display = 'block';
document.getElementById('lightbox').style.display = 'block';
}
function ajaxbox_off() {
document.getElementById('lightbox').style.display = 'none';
var x = document.getElementById('msg-ajax');
x.style.display = 'none';
x.innerHTML = '';
}
function set_ajaxbox() {
var x = document.getElementById('msg-ajax');
x.style.backgroundImage='none';
center_box(x);
}
$(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();
});
});
}
});
}
});
// ]]>
</script>
<!--[if lt IE 8]><script type="text/javascript">goodbrowser = false;</script><![endif]-->

Now add the following two lines immedately after the <body> tag:

<div id="lightbox" style="display:none" onclick="ajaxbox_off()"></div>
<div id="msg-ajax" class="panel" style="display:none"></div>


And finally, you must modify two templates. I'm going to use the default 3.0.11 Prosilver versions; modify other versions/styles as appropriate. If you don't want to modify the two templates, the following ZIP file contains pre-modified versions, along with an AJAXified version of the login_body.html template.

dd_ajax.zip
2.57 KiB  |  Downloaded 1104 times

The first template is confirm_body.html, and this is what it should look like:

<!-- 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 second is message_body.html, and this is what it should look like:

<!-- IF NOAJAX -->

<!-- INCLUDE overall_header.html -->

<div class="panel" id="message">
<div class="inner"><span class="corners-top"><span></span></span>

<!-- ELSE -->

<style type="text/css">#msg-ajax a{display:none}</style>
<script type="text/javascript">
<!-- IF REDIRECT_URL -->
var y = '{REDIRECT_URL}';
setTimeout("window.location='" + y.replace(/(\?|&)ajax=y/, '') + "'", <!-- IF REDIRECT_TIME -->{REDIRECT_TIME}<!-- ELSE -->1250<!-- ENDIF -->);
<!-- ELSE -->
setTimeout('window.location.reload()', 750);
<!-- 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 -->

You now have AJAX functionality built into phpBB3, and it will most likely work with every version back to 3.0.0. Those using garbage browsers, meaning IE7 or earlier, will have AJAX functionality disabled. The next post will describe how to activate the AJAX functionality in a few templates.
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
3
#3
phpBB3 AJAX (part III)
Posted April 22nd 2012, 4:30pm
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:

<!-- IF NOAJAX -->

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:

<!-- 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 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);
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
3
#4
phpBB3 AJAX (Part IV)
Posted April 22nd 2012, 7:24pm
This final post in the series will show how to "ajaxify" the Quick-mod tools.

Please log in to view this content.
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 11th 2012, 3:24pm
may I ask where are Split Topic, Merge Topic, Move Posts, and View Logs templates ?
φ
Posts: 209
Joined: September 10th 2011, 11:00pm
Location: SC, USA
Likes Given: 8
Likes Received: 8
1
#6
phpBB3 AJAX
Posted September 11th 2012, 3:49pm
I believe they are mcp_topic.html, mcp_post.html, and mcp_logs.html. If you're going to "ajaxify" the remaining Quick-mod tools, make sure to take the user's screen size into account, because these four options require as much screen size as possible. This is why I decided they were better off being displayed on their own...
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 12th 2012, 4:07pm
What does NOAJAX do ?
φ
Posts: 209
Joined: September 10th 2011, 11:00pm
Location: SC, USA
Likes Given: 8
Likes Received: 8
phpBB3 AJAX
Posted September 12th 2012, 4:18pm
Presumably its a Boolean template variable. True if the request was not an AJAX request.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
1
#9
phpBB3 AJAX
Posted September 12th 2012, 4:50pm
Zero said:
What does NOAJAX do ?

If you look in the second post of this topic, you'll find this:

		'NOAJAX'			=> (request_var('ajax', '') == '') ? true : false,

The NOAJAX variable lets a template know whether ajax=y has been appended to a URL. It is then up to the template(s) to decide what should be presented on that page.

I must add that phpBB3.1 will include AJAX Lightbox support, though it will have fewer features than what is offered in this topic. It's currently bloated and buggy, though I suspect/hope that one of these two issues will be fixed before release. The other...egos won't allow it to be fixed. ;)
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 19th 2012, 2:37pm
what is the different between this and jquery ajax ? And it only works on FORM ?
φ
Posts: 209
Joined: September 10th 2011, 11:00pm
Location: SC, USA
Likes Given: 8
Likes Received: 8
phpBB3 AJAX
Posted September 19th 2012, 8:19pm


which file?
φ
Posts: 103
Joined: July 19th 2012, 8:17pm
Location: Pennsylvania
Likes Given: 9
Likes Received: 8
phpBB3 AJAX
Posted September 19th 2012, 10:45pm
It honestly doesn't matter which CSS file, but for consistency purposes, probably content.css.
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 19th 2012, 10:58pm
Zero said:
what is the different between this and jquery ajax ? And it only works on FORM ?

What's being added to includes/functions.php is a way to pass along information to a template that lets it know whether the page is being displayed, or being delivered to an AJAX request.

The topic displays on the homepage are a good example of this, as I'd mentioned in another topic of yours. By adding &ajax=y to the URL, the viewforum_body.html template will only output the HTML for the topics, and none of the extraneous information must would otherwise be filtered from an AJAX response.
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 19th 2012, 11:58pm
Dion said:
It honestly doesn't matter which CSS file, but for consistency purposes, probably content.css.

thanks!

one another thing, with the ajaxify poll, when your poll is cast, there's no way to cancel out the message that your poll is cast except to refresh the page...it's supposed to be like that, right?
φ
Posts: 103
Joined: July 19th 2012, 8:17pm
Location: Pennsylvania
Likes Given: 9
Likes Received: 8
phpBB3 AJAX
Posted September 20th 2012, 12:05am
Hmm...I need to check into that, because the page SHOULD refresh after casting a vote. I think I'll set up a poll here and see what happens.

EDIT: here's a poll: viewtopic.php?t=8680

I changed it to allow people to change their vote, so you can test it out as much as you want. The screen DOES refresh after a vote is cast. I'm on the road at the moment and don't have easy FTP access, so I can't check the templates to see what I did. When I get home tomorrow, I'll post the FORM and INPUT tags I used in the viewtopic_body.html template.
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 20th 2012, 11:47am
It seems that since I've added this ajax, my board has gone really, really slow at loading :( is there a way to optimize it?
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
phpBB3 AJAX
Posted September 20th 2012, 2:54pm
OK, here are the FORM and INPUT tags used on this site to enable AJAX for casting votes:

<form id="poll" method="post" action="{S_POLL_ACTION}">

<input data-ajax="poll" data-form="{S_POLL_ACTION}" type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" />
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 20th 2012, 2:56pm
Ryan said:
It seems that since I've added this ajax, my board has gone really, really slow at loading :( is there a way to optimize it?

Is it the board at devforums.co.uk? If so, I don't notice much in the way of a slowdown.

I DO notice, however, that you chose to copy jQuery to your site and load it from there. I would very strongly suggest that you instead use the line I posted above to load jQuery. It will then be loaded from one of Google's blinding-fast edge cache servers, which I guarantee is faster than loading from your host's servers. ;)
φ
Posts: 1573
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 356
phpBB3 AJAX
Posted September 20th 2012, 5:16pm
It was the line of code that had to be put above 'SITENAME'. I added it below a bit more and it stopped loading slow! I also had an old instant meta refreshing in one of my includes as well, it doubled the page below lol
φ
Posts: 237
Joined: October 29th 2011, 11:00pm
Location: england, united kingdom, stoke on trent
Likes Given: 20
Likes Received: 4
phpBB3 AJAX
Posted September 20th 2012, 10:00pm
Dion said:
OK, here are the FORM and INPUT tags used on this site to enable AJAX for casting votes:

<form id="poll" method="post" action="{S_POLL_ACTION}">

<input data-ajax="poll" data-form="{S_POLL_ACTION}" type="submit" name="update" value="{L_SUBMIT_VOTE}" class="button1" />


I guess I use those instead of

<form id="ddpoll" method="post" action="{S_POLL_ACTION}">

<dd class="resultbar"><input type="submit" data-ajax="ddpoll" data-form="{S_POLL_ACTION}" name="update" value="{L_SUBMIT_VOTE}" class="button1" /></dd>
φ
Posts: 103
Joined: July 19th 2012, 8:17pm
Location: Pennsylvania
Likes Given: 9
Likes Received: 8

Who is online

Users browsing this forum: No registered users and 1 guest