Triggering a custom JS function on a DIV update via hobo_ajax_response ?

[Tim Griffin]

Hi all;

I'm just looking for any suggestions before I do my over override of hobo_ajax_response.

On a page, I have a <DIV> element that gets updated by a web_method. I'd like to trigger a javascript function when the content of that DIV changes. a DIV element doesn't support a built-in changed event, but I can bind my own and then trigger it when needed:

$('#div-image-controls').bind('contentchanged', function() {

  // do something when the div content has changed

});

From my web_method, I need to trigger this 'contentchanged' event at the time that hobo_ajax_response is being prepared. 

I thought about passing my own JS to hobo_ajax_response and simply tacking it onto the 'page' string created by hobo_ajax_response:

     /hobo/lib/hobo/controller.rb:96

  page << "#{function}(#{dom_id.to_json}, #{part_content.to_json})\n"

This isn't optimal, since it means I have javascript code within my controller's web_method, and I'm overriding a core Hobo method. 

Is there an easier way that I can't see?

Many thanks,

Tim

[Tim Griffin]

Yep, always happens. Shortly after posting, I realized I could do this:

    hobo_ajax_response( :postamble => "; $('#div-image-controls').trigger('contentchanged');" )

Tim

[Tim Griffin]

Hah! 

I was close, but needed a few changes.

Firstly I had to use the newer (jQuery 1.7+) ".on()" event handler:

   $('#div-permanent-image-controls').on('contentchanged', '#div-image-controls', function(){ alert('do stuff'); })

Secondly, I discovered I had to attach the event handler to DOM element that was always on the page (e.g. a parent element of <div-image-controls>). I hadn't realized that as soon as ajax refreshes the <div-image-controls> element, its event handler disappears! So, I needed to use a "delegated event" as described in jQuery's .on documentation, attaching the handler to an encompassing parent element (and larger div).

So my divs:

<div id="div-permanent-image-controls"> 

  <div part="div-image-controls"> 

   ... stuff in the div to be updated ... 

  </div>

</div> 

My handler:

jQuery(document).ready(

  function() {

    $('#div-permanent-image-controls').on('contentchanged', '#div-image-controls', function(){ alert('do stuff'); })

  }

);

And the call from the controller's web_method:

    hobo_ajax_response( :postamble => "$('#div-image-controls').trigger('contentchanged');" )

Tim

[Ignacio Huerta]

Nice events work Tim.

I suppose you already know it, but with Hobo 2.0 you can also add Ajax
callbacks when you prepare an ajax form/button:

<form updates="#table, #list" success="run_this_after_success()">

Regards,
Ignacio



El 15/12/13 16:27, Tim Griffin escribi�:

> Hah!
>
> I was close, but needed a few changes.
>
> Firstly I had to use the newer (jQuery 1.7+) ".on()" event handler:
>
> $('#div-permanent-image-controls').on('contentchanged',
> '#div-image-controls', function(){ alert('do stuff'); })
>
> Secondly, I discovered I had to attach the event handler to DOM element

> that was /*always*/ on the page (e.g. a parent element of

> <div-image-controls>). I hadn't realized that as soon as ajax refreshes
> the <div-image-controls> element, its event handler disappears! So, I
> needed to use a "delegated event" as described in jQuery's .on

> <http://api.jquery.com/on/> documentation, attaching the handler to an

> --
> You received this message because you are subscribed to the Google
> Groups "Hobo Users" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to hobousers+...@googlegroups.com.
> To post to this group, send email to hobo...@googlegroups.com.
> Visit this group at http://groups.google.com/group/hobousers.
> For more options, visit https://groups.google.com/groups/opt_out.

--
Ignacio Huerta Arteche
http://www.ihuerta.net
Tel�fono: 0034 645 70 77 35
Email realizado con software libre

[Tim Griffin]

Thanks, Ignacio. 

No I didn't know that. Nice feature, though - and sure simplifies my solution. 

But, had I used that feature, I'd not have had cause to dig into Hobo!

Always nice to have more than one way to pull something off.

Regards,

Tim

On Tue, Dec 17, 2013 at 12:03 PM, Ignacio Huerta <ign...@ihuerta.net> wrote:

Nice events work Tim.

I suppose you already know it, but with Hobo 2.0 you can also add Ajax
callbacks when you prepare an ajax form/button:

  <form updates="#table, #list" success="run_this_after_success()">

Regards,
Ignacio

El 15/12/13 16:27, Tim Griffin escribió:

Teléfono: 0034 645 70 77 35

Email realizado con software libre

--
You received this message because you are subscribed to a topic in the Google Groups "Hobo Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/hobousers/mzf9BSjmymg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to hobousers+...@googlegroups.com.