Controller with AJAX EJS problem

in General JavaScriptMVC » Getting Started • 1 year ago

Hi guys,

I have a controller loading JSON from an AJAX call which renders the EJS:

var self = this;
this.element.html( "//mws/student_dashboard/views/init.ejs",
ajaxCall,
function(result){
// initialize scrollable
$(".scrollable").scrollable();
$('.next').bind('click', self.loadWritingActivity);

The problem I am having is that 1: straight after the html() call the controller does not have access to the newly created HTML. Therefore I am calling the result function. (I thought .html() was asynchronous)

I then need to bind the click on the new HTML (.next) to my function, the controller doesn't automatically pick it up even though the HTML is added to its element.

And finally when the self.loadWritingActivity function is clicked :

$('.next').bind('click', self.loadWritingActivity);

I can't reference the controller. I'm sure this is not how its supposed to be done. I belive the controller is supposed to have access to the elements generated on its view.

Can someone tell me where I am going wrong or how the rendering of EJS on a view/controller is supposed to be done?

Thanks is Advance

Ronan

Replies(3)

Curtis Cu..

Re: Controller with AJAX EJS problem

1 year ago

You are right that views consume deferreds, so your callback function won't be called until the EJS and AJAX call are done and the result is in the DOM. What does your EJS template looks like?

If you are selecting an element inside this.element, you should use the Controller's find method which will search inside this.element to match your selector. It's a bit quicker and you won't select any elements outside of your controller's element.

Because $.Controller uses event delegation when binding events, you can let the controller listen to the .next click event before the DOM contains .next:

$.Controller('demo', {

...

'.next click': function(el, ev){

this.loadWritingActivity();

}

})

This also gives you the advantage of having the events unbound when the Controller is destroyed.

I've created a fiddle that replicates what you are doing with the few fixes I mentioned. If you are still having trouble, update this fiddle and reply with the link. It's much easier to debug live code.

raff77

Re: Controller with AJAX EJS problem

1 year ago

Thanks Curtis.

I have the controller listen on the element .next click event but it wasn't firing/binding after loading my ejs.

I will add to the fiddle (which is ace) when I get some time. Hectic at the moment.

Thanks for your very useful and detailed response

raff77

Re: Controller with AJAX EJS problem

1 year ago

Thanks Curtis,

worked out what my problem was. The next and prev class links were being used by the UI tools (scrollable) and it was messing with the references and delegations.

The minute I changed their names and took control of the tool via its API the controller started working as expected.

Thanks Again

Top Reply

Response title

Attachments

New to this Portal?