[RFC|Merged] AJAX

These requests for comments/change have lead to an implemented feature that has been successfully merged into the 3.1/Ascraeus branch. Everything listed in this forum will be available in phpBB 3.1.
Post Reply
User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: [RFC|Merged] AJAX

Post by DionDesigns » Sun Apr 29, 2012 11:06 pm

Here are replacement files/functions that "untangle" the "spaghetti code". Javascript functions:

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" />&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){$('#msg-ajax').html(data);set_ajaxbox();})" />&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 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.

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: [RFC|Merged] AJAX

Post by DionDesigns » Sun Apr 29, 2012 11:27 pm

t_backoff wrote:I apologize if this has been mentioned before (I tried looking, but couldn't find it). Does this include "mark topics/forums read"? I ask because if I click that and then click the link to return to where I was, the topics get marked as read. However, if I let it sit there and let it go away on it's own (not clicking the link), the topics may get marked as read, but the icon does not change colors. You can test this here.
Moderators should check whether the same issue exists when using the quick-mod tools...

Oleg
Posts: 1150
Joined: Tue Feb 23, 2010 2:38 am
Contact:

Re: [RFC|Merged] AJAX

Post by Oleg » Tue May 01, 2012 3:21 am

What do ajax parameter and noajax do again?

http://www.dion-designs.com/noscript.php - yeah. And then you have a js-animated something-or-other in the header. Nice.

I could not find the registration link at all. Maybe it's hidden by my width adjustments?

The appearing animation of topic list on the index page is a perfect example of throwing usability and common sense under the bus to show that yes, you can make flashy things.

It looks like your board is some sort of an area51 mirror-ish but the UI (my personal opinion) is so bad I could barely spend 5 minutes on your site. Sorry.

I tried the contact us form (previewed an empty form) and showing the error message in a popup that cannot be closed by clicking outside of it is not an improvement on non-ajax interfaces. The message probably should be rendered inline somewhere.

Thus the specific implementation you did on your site does not excite me in the least. Maybe it's alright for showing what you are capable of but I wouldn't want any part of it on any site that I visit with a goal in mind. The goal being anything from reading joke of the day to getting meaningful work done.

Now, to the code you posted here;

0. I don't see any error handling in the code you posted in your last post. Obviously that would have to be added.

> I don't believe in cluttering up the database with configuration options, which is the method used by phpBB.

I am talking only about proper separation of layers and maintainable architecture. It is not necessary to have every setting be acp-configurable (although we mentioned something about:config-like for configuring things we don't want to build UI for). It *is* necessary to have, for example, every constant be defined once and in an appropriate location such that it can be easily modified by us or by board owners for any reason.

> I don't think you understand how NOAJAX works. It will only activate if ajax=y is appended to a URL.

No, I don't. Please explain how it works using prose. I'm not reading more code to find out.

> By having the "ajaxify" support in the templates as opposed to javascript functions, it will be style-independent, though the cost will be initially adding that support in the Ascraeus templates, and forcing style developers to update their pre-Ascraeus templates if they want a style/theme to have "ajaxify" support in Ascraeus.

"Style-independent" means as long as the style has appropriate elements appropriately positioned the same js code will work with multiple styles.

Obviously you can shift the burden of implementing ajax to styles. This is probably not what we want.

> 4. I agree about inline styles, but when reading data from an AJAX GET/POST request, it is not possible to use event listeners in that data without creating true spaghetti code.

I have no idea what you mean here at all, but I can assure you that there are no circumstances in which one has no choice but to write spaghetti code. I had this argument with the current ajax implementation and I'd rather not go through it again. If you think spaghetti code is mandatory for any reason you are going to do the same thing we already have.

> My method goes one step further. If, for example, the user submits a form which contains an error, the error is displayed in a lightbox.

My guess is I would want the errors to be displayed inline.

> On my board, you will see error messages in a lightbox.

Tried that, I will take our inline messages over your popup any day. Maybe if you make the popup close on a mouse click outside of it and escape key I will consider your UI usable, but as soon as there are multiple messages being displayed your UI is again inferior to showing them inline. When messages are displayed inline the user can fix one at a time and still see the rest of them. By using a modal popup you are forcing the user to remember the complete message list.

When I entered both subject and message and pressed enter while in subject the form submitted. I'm guessing you are handling click events instead of form submits.

Preview in a popup is equally unacceptable. How can you edit and look at the preview at the same time?

Oleg
Posts: 1150
Joined: Tue Feb 23, 2010 2:38 am
Contact:

Re: [RFC|Merged] AJAX

Post by Oleg » Tue May 01, 2012 3:26 am

For improving the ajax architecture, my guess would be to start with MVC. E.g. backbone.js. See what they do, how they do it, and how we can do something like that. Js MVC frameworks are all the rage these days.

The current implementation is basically a bunch of procedural code stuffed into a jquery shell. Any implementation which is also a bunch of procedural code stuffed into a jquery shell is, in my opinion, unlikely to offer a meaningful improvement. The code should demonstrate some kind of more modern development techniques (OOP, MVC, etc.).

User avatar
callumacrae
Website Team
Website Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC|Merged] AJAX

Post by callumacrae » Tue May 01, 2012 5:20 am

Oleg wrote:For improving the ajax architecture, my guess would be to start with MVC. E.g. backbone.js. See what they do, how they do it, and how we can do something like that. Js MVC frameworks are all the rage these days.
Only by people who don't really understand JS. JavaScript is hacky enough without randomly trying to use MVC in it, it just isn't designed for that.
Made by developers, for developers!
My blog

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: [RFC|Merged] AJAX

Post by DionDesigns » Tue May 01, 2012 6:50 am

Oleg wrote:http://www.dion-designs.com/noscript.php - yeah. And then you have a js-animated something-or-other in the header. Nice.

I could not find the registration link at all. Maybe it's hidden by my width adjustments?

The appearing animation of topic list on the index page is a perfect example of throwing usability and common sense under the bus to show that yes, you can make flashy things.

It looks like your board is some sort of an area51 mirror-ish but the UI (my personal opinion) is so bad I could barely spend 5 minutes on your site. Sorry.
My choice of board design has nothing to do with my proposal here (though thanks for trashing the design of a board whose purpose is to demonstrate features). The code I posted here works just fine if javascript is turned off, but on my board I've chosen to require it being on. The only way you wouldn't see the Register button (which is part of a login box) is if you were using a system with a screen width significantly smaller than the 990px minimum I've set for the board, and you didn't bother to scroll horizontally to see it.
Oleg wrote: > On my board, you will see error messages in a lightbox.

Tried that, I will take our inline messages over your popup any day. Maybe if you make the popup close on a mouse click outside of it and escape key I will consider your UI usable, but as soon as there are multiple messages being displayed your UI is again inferior to showing them inline. When messages are displayed inline the user can fix one at a time and still see the rest of them. By using a modal popup you are forcing the user to remember the complete message list.

When I entered both subject and message and pressed enter while in subject the form submitted. I'm guessing you are handling click events instead of form submits.

Preview in a popup is equally unacceptable. How can you edit and look at the preview at the same time?
The popups CAN be removed from the screen using the Esc key...apparently you didn't try it.

I never bothered to disable the onkeypress event for INPUT tags on the posting page, so the form being submitted with the Enter key was a bug. I'll have that fixed shortly, and I appreciate your pointing it out.

If you prefer the default for error message display to be inline, that's fine. Same goes for Preview. I thought that was clear, but you seem to be missing what I'm saying here.

My method offers CHOICE. One can choose to "ajaxify" elements, or one can choose to not do so. Perhaps a style author thinks inline error messages and post previews are outdated and would prefer them to be "ajaxified". With my method, they can modify the templates to add that support. If a style author wants to get rid of the outdated-and-buggy pop-up window for new PM notifications, they can modify the overall_header and ucp_pm_popup templates to instead "ajaxify" the notification.

The basic concept is simple. A page is submitted with ajax=y appended to the URL. The page_header() function in functions.php uses request_var('ajax', '') to check for its existence, and it creates a global NOAJAX template variable that is true if request_var() returned an empty string, and false if it returned a non-empty string. Templates can then use the NOAJAX variable to customize output for "ajaxified" pages. This method solves the design-based problems you're currently experiencing, and it doesn't require any bloated coding frameworks to accomplish that.

Since you are now in "attack the messenger" mode, it's time for me to thank you for looking at what I've posted, and I hope that my "outside-the-box" method may be of some use to your project.

Oleg
Posts: 1150
Joined: Tue Feb 23, 2010 2:38 am
Contact:

Re: [RFC|Merged] AJAX

Post by Oleg » Tue May 01, 2012 9:11 pm

My overall conclusions are in my previous post, which you have not replied to at all.

Everything else are details in design and implementation that do not significantly affect the big picture.

Again, I spent a significant amount of time reviewing the diff that became the current ajax implementation and I'm not seeing qualitative improvements over it in your proposal. If you haven't followed that discussion since its beginning you may think that some of the points you bring up are new but in actuality I have already debated them to death, some without success, and I'd rather not do that again.

As I am only one developer you are free to get other developers' opinions on what can or should be done with respect to ajax in particular and everything in general.

User avatar
tmbackoff
Registered User
Posts: 180
Joined: Sat Jun 12, 2010 3:25 am

Re: [RFC|Merged] AJAX

Post by tmbackoff » Mon May 14, 2012 7:31 pm

t_backoff wrote:I apologize if this has been mentioned before (I tried looking, but couldn't find it). Does this include "mark topics/forums read"? I ask because if I click that and then click the link to return to where I was, the topics get marked as read. However, if I let it sit there and let it go away on it's own (not clicking the link), the topics may get marked as read, but the icon does not change colors. You can test this here.
This is still a problem. I'm unable to verify how this affects quick mod tools (no need for them when I've been here :D ). Is this being fixed?

User avatar
callumacrae
Website Team
Website Team
Posts: 1046
Joined: Tue Apr 27, 2010 9:37 am
Location: England
Contact:

Re: [RFC|Merged] AJAX

Post by callumacrae » Mon May 14, 2012 9:42 pm

Yep, there's a ticket in the tracker and I'm going to do it when I get some free time.
Made by developers, for developers!
My blog

User avatar
Meis2M
Registered User
Posts: 410
Joined: Fri Apr 23, 2010 10:18 am
Contact:

Re: [RFC|Merged] AJAX

Post by Meis2M » Mon May 28, 2012 4:48 pm

possible to add AJAX log out confirm box?

Post Reply