[RFC|Merged] AJAX

[Oleg]

Moving topics in quick mod broke: http://tracker.phpbb.com/browse/PHPBB3-10801

Other problems:

(00:58:11) an-: http://tracker.phpbb.com/browse/PHPBB3-10802
(01:00:44) an-: http://tracker.phpbb.com/browse/PHPBB3-10803
(01:02:49) an-: http://tracker.phpbb.com/browse/PHPBB3-10804
(01:07:34) an-: http://tracker.phpbb.com/browse/PHPBB3-10805
(01:11:17) an-: http://tracker.phpbb.com/browse/PHPBB3-10806
(01:14:53) an-: http://tracker.phpbb.com/browse/PHPBB3- ... ment-37592
(01:20:05) an-: http://tracker.phpbb.com/browse/PHPBB3-10807
(01:21:38) an-: http://tracker.phpbb.com/browse/PHPBB3-10808

Some of these I pointed out in the initial ajax pr.

[Meis2M]

a Suggestions:
use Ajax system in who is online ( users online and number of users ) in index page

54.png (33.27 KiB) Viewed 4045 times

[callumacrae]

a Suggestions:
use Ajax system in who is online ( users online and number of users ) in index page

54.png

That's unnecessary and would put quite a lot of strain on the server, so -1.

Please post anything like this in new RFCs, though.

[ecwpa]

What instances beside quick edit is AJAX considered so far? Endless pagination? User profile preview?

[nickvergessen]

Subscription and bookmarking and other confirmbox places are using ajax.

[naderman]

Individual uses of ajax should now be discussed in separate topics.

[DionDesigns]

Moving topics in quick mod broke: http://tracker.phpbb.com/browse/PHPBB3-10801

It would appear this is being caused by mcp_move.html being self-contained. Other MCP tools go through mcp_header.html and mcp_footer.html.

I'm still in "post approval" mode, and once I'm past that (how many posts do I need?), I'll say a bit more...and offer an alternative "ajaxify" method that I've been using for the past 18 months.

[DionDesigns]

Don't know if it's a bug here or not, but the inline code BBcode isn't working. It appears as though the CSS for it is missing. Anyway, now that I'm not on approval mode...

I was asked (dared?) by Oleg to provide comments about bugs in the Ascreaus AJAX code.

After taking a look at the javascript code and how it worked here, I decided to make a series of three posts. I'm going to offer all the code for an alternative "ajaxify" method that is much simpler, and, well, works. If the folks here choose to use this code, great; if not, I'll take a closer look at the "ajaxify" code and try to help with bug removal.

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. The only requirement is that jQuery 1.4 or later be loaded before the forum_fn.js file is loaded.

If anyone wants to see this in action on a phpBB 3.0.9 board, go here and register. Then feel free to 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 I believe what is implemented on that board is better than the "ajaxify" method. Also, "ajaxify" support has not been added to the UCP avatar page due to so many browsers not supporting the HTML5 FormData object.

[DionDesigns]

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:

Code: Select all

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

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

Code: Select all

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

and add the following line above it:

Code: Select all

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

You must now add the following three rules to the CSS:

Code: Select all

#lightbox {
z-index:5000;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
opacity:0.6;
filter:alpha(opacity=60);
}
#msg-ajax {
z-index:10000;
position:fixed;
padding:10px 15px;
min-height:20px;
min-width:10px;
background-color:#fff;  /* use whatever color you want */
background-repeat:no-repeat;
background-position:50% 50%;
}
#msg-ajax a {
display:none;
}

The #msg-ajax rule is customized for a "waiting" background image of up to 32x32px. is the background "waiting" image I use.

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

Code: Select all

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

And add the following two lines immediately above them:

Code: Select all

<script type="text/javascript">var goodbrowser = true;</script>
<!--[if lt IE 8]><script type="text/javascript">goodbrowser = false;</script><![endif]-->

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

Code: Select all

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

Next, add the following to the bottom of forum_fn.js:

Code: Select all

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 = 'url(images/waiting.gif)'; // change URL to your own image
	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(data) {
	var elem = document.getElementById('msg-ajax');
	elem.style.backgroundImage='none';
	var x = data.split('|', 3);
	if(!x[1] || x[1] != 'STT') {
		elem.innerHTML = data;
	}
	else {
		elem.innerHTML = x[2];
		if (x[0] == 'X') {
			setTimeout('window.location.reload()',750); // change 750 to whatever you want
		}
		else {
			setTimeout("window.location='"+x[0]+"'",1250); // change 1250 to whatever you want
		}
	}
	center_box(elem);
}
$(function() {
	if (goodbrowser) {
		$('[ddajax]').each(function() {
			if (this.href) {
				$(this).click(function(){ajaxbox_on();$.get(this.href+'&ajax=y',function(data){set_ajaxbox(data);});return false;});
			}
			else if (this.type && this.type == 'submit') {
				this.type='button';
				$(this).click(function(){ajaxbox_on();$.post(this.getAttribute('data-action')+'&ajax=y',$('#'+this.getAttribute('data-ajax')).serialize()+'&'+this.name+'='+this.value,function(data){set_ajaxbox(data);});});
			}
		});
	}
});

And finally, you must modify two templates. I'm going to use the default 3.0.9 Prosilver versions; modify other versions/styles as appropriate. The first template is confirm_body.html, and this is what it should look like:

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" />&nbsp; 
		<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){set_ajaxbox(data);})" />&nbsp; 
		<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:

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 -->

<!-- IF REDIRECT_URL -->{REDIRECT_URL}<!-- ELSE -->X<!-- ENDIF -->|STT|

<!-- 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 most likely 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 couple templates.

[DionDesigns]

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.