What's the best way to do ajax while preserving the MVC pattern?

[eluser]m_ologin[/eluser]
Hello community,

I have a page that has 5-6 divs that can be individually loaded through Ajax. Through a prototype ajax.request(), the server echoes back the HTML code for the division and the client refreshes the divs.

Here's my question : What's the best practice for preserving the MVC pattern on the server side concerning the HTML code it throws out?

For now, my models return database data to the controller who creates a really long var containing the HTML code. My problem is that I end up with a lot of HTML code in my controller class...

[eluser]pistolPete[/eluser]
Don't you use views?

[eluser]m_ologin[/eluser]
I do! but how can I just "echo" a view??

[eluser]jedd[/eluser]
[quote author="m_ologin" date="1237065207"]I do! but how can I just "echo" a view??[/quote]

Hang on - where do you want to echo the view? If it's back into a variable, look at the [url="http://ellislab.com/codeigniter/user-guide/libraries/loader.html"]third parameter for load->view[/url]

If I understand your approach correctly, you'll probably have lots of mini-methods in your controller. (I'm thinking about having an AJAX controller somewhere for doing just these kinds of responses. But I fear some code duplication may result.)

[eluser]Colin Williams[/eluser]
Not sure what keeps you from just loading a view normally. When you want to echo the product of a view, you actually don't pass a third param. The only difference between an Ajax request and a regular browser request is the format of the response. This has no impact on the MVC pattern. MVC actually facilitates this format switching. Not really sure how one intuits a challenge.

[eluser]jedd[/eluser]
I meant .. that if he's trying to have a controller zap back some responses and those responses are coming from mini-views that he's got .. then the controller can do the load->view( , , true) thing to stop the immediate output, and do whatever magic is required up front to get that code to the AJAX caller.

Does this make more sense?

[eluser]m_ologin[/eluser]
Well, after giving it a lot of thought, I am not going to send any HTML code. I'll have my view fill up the divs with default data and only receive processed json data through the ajax call. I'll then update the divs through client-side javascript. That way, there is less data sent accross, it should be faster.

Thanks for your replies

[eluser]Colin Williams[/eluser]

and do whatever magic is required up front to get that code to the AJAX caller

What "magic" do you envision? The controller shouldn't really need to worry about "magic" in regards to display. Actually, with something like Ajax, there is usually less to respond with, and so potentially less "magic" to worry about. Also, getting "that code to the AJAX caller" just means echoing it.

Also, to your solution, m_ologin, I despise having to parse data into HTML in JS. It just gets ugly.

[eluser]m_ologin[/eluser]
Well, the only problem I see with it is having to use eval()... But my data should be sanitized so I shouldn't worry too much about it.

This is what it ends up looking like:

[code]
var myAjax = new Ajax.Request('../request/generic_info/'+idQuizz,
{
method: 'post',
onComplete: function(xhr){
if (xhr.status == 200){
// Todo : create js object and pass this to constructor instead?
eval("info=" + xhr.responseText);
$('lblDateCreated').inner HTML = info.date_created;
$('lblDateModified').inner HTML = info.date_modified;
[...]
} else { ... }
}
}[code]

[eluser]Colin Williams[/eluser]
eval is the least of your worries. Lots of ill going on in that small snippit of code