[jhall]

I've been trying to get my head around AJAX recently, and so I've been working with the built in AJAX framework lemonstand has. For the most part, it seems to be clicking, though my inexperience with it could be causing undue confusion.

Before I explain why I'd like to do this, I'd better get to the question.

That is, using the built-in AJAX framework, is it possible to update an element's InnerHTML by appending the contents of a partial, rather than simply overwriting the InnerHTML?


For example, if I have a div:

<div id="update_me"><span>Contents</span></div>

And had called sendRequest like so:

$(this).getForm().sendRequest('append_to_div',
   {update: {'update_me': 'some_partial'}}
)"

Would I be able to append the contents of 'some_partial' to the end of the div (after the span)? Or will I have to make jQuery/Mootools AJAX functions to do this?

Being able to update by appending like this would be particularly useful for adding extra rows to a table element without having to reload the contents of the entire table. If I have 50 products in the table, each in its own row, I'd like to be make an AJAX request that would add the next 50 products to the table without having to load the first 50 from again.

As I'm new to AJAX, I'd like to keep things as simple as possible. But if I need to make custom AJAX functions in a javascript library in order to do this, I should start looking into those more.



As an afterthought, is there a way I can create my own handlers for the sendRequest method without having to put them in the AJAX section of the page in the admin area? I'd like to be able to define all my custom handlers in a file inside my module and access them from any page. Would that be in the module information file?

[Aleksey]

Hi!

If you need to append data only occasionally, on a specific page, you can update a hidden element and handle the onAfterAjaxUpdate event (http://lemonstandapp...ript_framework/) to append the downloaded content to the element you want to update.

It is not impossible to implement a more flexible solution. Look into the modules/cms/resources/javascript/ls_jquery_core_src.js file. You can override methods of the window.Phpr class with a custom JavaScript file and modify the default class behavior.

Thank you

[jhall]

Aleksey, on 05 February 2012 - 05:00 PM, said:

Hi!

If you need to append data only occasionally, on a specific page, you can update a hidden element and handle the onAfterAjaxUpdate event (http://lemonstandapp...ript_framework/) to append the downloaded content to the element you want to update.

It is not impossible to implement a more flexible solution. Look into the modules/cms/resources/javascript/ls_jquery_core_src.js file. You can override methods of the window.Phpr class with a custom JavaScript file and modify the default class behavior.

Thank you

Thanks for the quick response, Aleksey.

I took a look at both ls_jquery_core_src.js and ls_mootools_core_src.js (the latter because that's the default I'm using currently). It seems that what I need to do is override the onSuccess function for each (I'm assuming if I loaded the jquery core without the mootools core, it would use that to perform AJAX calls).

As a first step, I went in and tweaked ls_mootools_core_src.js to append html rather than set it, and it worked beautifully. So now I need to figure out what the correct way of making these changes would be. What I would like to do is have the new onSuccess function look for an optional parameter passed in through the extraFields object like 'extraFields: {append_results, 1}' if it needs to append the partial to the matching element. That way, I can use the default method without making any changes to my current partials.

I'm unfortunately very unfamiliar with mootools, but I have a least some familiarity with jQuery. Could you offer advice on the steps I need to take to override these functions? I will look into this on my own, but thought I'd ask in case someone was able to help out.

Thanks again.

[Aleksey]

Hi!

Please look into this thread: http://forum.lemonst...ception-dialog/

It has some examples demonstrating how to customize jQuery front-end framework. You can find other helpful topics on this forum with Google, for example:

jquery site:forum.lemonstandapp.com

Thank you

[jhall]

Thanks for pointing me in the right direction.


I managed to get things working properly, though I ended up having to do more work with the jquery implementation than I expected. I'll post the code I have so that anyone who wants to modify the AJAX framework has a good place to start.

I'll start with Mootools. To override the appropriate functionality from 'ls_mootools_core_src.js', I had to re-implement the success and updateMultiple functions of the Request.Phpr object. Mostly this was just copying the current code, and making the small changes I needed. I wanted the function to check the extraFields object for {append_result: 1} before appending the response html to the element. Otherwise, the default behavior was used. I just threw the code below (plus the omitted portions) into a new file and included it after 'ls_mootools_core_src.js'.

Request.Phpr.implement({success: function(text)
	{
		...
			if (options.extraFields.append_result == 1)
				$(options.update).set({html: $(options.update).get('html') + response.html});
			else
				$(options.update).set({html: response.html});
		...	
	}, 
	updateMultiple: function(responseTree, responseElements, responseHtml, responseJavascript)
	{
		...
			if (this.options.extraFields.append_result == 1)
				$(updateId).set({html: $(updateId).get('html') + updateHtml});
			else
				$(updateId).set({html: updateHtml});
		...
	}
}).call(Request.Phpr);

Doing this in jQuery caused some extra headaches because the code in 'ls_jquery_core_src.js' is written in it's own closure. I would have preferred to override only the onSuccess function of the response variable inside the sendRequest function, but ended up (due to my own lack of knowledge of javascript) having to override the entire sendRequest function. I also had to copy the stripScripts function because it was in the closure, but outside the window.Phpr object.

As before, this code was put in a separate file that I include after loading 'ls_jquery_core_src.js'.

(function($) {
	var stripScripts = function(data, option) {
		var scripts = '';

		var text = data.replace(/<script[^>]*>([^\b]*?)<\/script>/gi, function() {
			scripts += arguments[1] + '\n';
			
			return '';
		});

		if(option === true)
			eval(scripts);
		else if(typeof(option) == 'function')
			option(scripts, text);
		
		return text;
	};

	Phpr.sendRequest = function(url, handler, context) {
		...

		var response = $.extend({
			...
			
			onSuccess: function(data) {
				...
					if(context.extraFields.append_result == 1)
					{			
						element.html(element.html() + html);
					}
					else
					{
						if(!context.animation(element, html))
						{
							element.html(html);
						}
					}
				...
			},
			
			...
		}, Phpr.response);
		
		...
	};
})(jQuery);

By all means, if anyone sees a better way to do this, please let me know. It's been an interesting learning experience, though.