How to call a function named coffeescript function via ajax

Question

In a Rails 3.2 app I have a jquery function that renders a chart on a DOM element

#assets/scripts.coffee.erb
$(document).ready ->
  $("#chart_container").do_some_stuff

#view
<div id="chart_container"></div>

I'm in the process of ajaxifying this view to enable the user to switch the data that is presented on the chart. The problem is that the coffeescript is not triggered via the ajax response.

If I put the function within some tags on the view, everything works fine, but this is not a very 'nice' solution.

Alternatively I know that it is possible to call functions from the view.js.erb rendered by the ajax response. Something like

#view.js.erb
$('#chart_container')['myFunction']();

But my javascript knowledge is limited, and I'm having trouble working out how to name coffeescript function correctly.

I need the function to be triggered when the document is ready. But I also need to be able to call the function manually via the ajax response. How should I set this up?

(I suspect this is a very basic javascript question, and not very well asked, but I appreciate any guidance).

Billy Chan · Accepted Answer · 2013-07-02 17:50:52Z

3

You can wrap the code to a function at first

#assets/scripts.coffee.erb
$(document).ready ->
  $(document).chart_action()

$.fn.chart_action = ->
  $("#chart_container").do_some_stuff

Then call this function at your ajax response template

#view.js.erb
$(document).chart_action()

Upate Version

Thanks for @muistooshort's suggestion, it's better to use a custom namespace instead of polluting jQuery's, even in small usage.

So, refactor the above

# Custom functions for this app
class App
  chart_action: -> 
    $("#chart_container").do_some_stuff

# Normal code for initializing page
app = new App
$(document).ready ->
  app.char_action()

# view.js.erb
app.chart_action()

edited Jul 2, 2013 at 17:50

answered Jul 2, 2013 at 16:35

Billy Chan

24.8k4 gold badges56 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mu is too short Over a year ago

$.chart_action = -> ... won't make the function available on $(document), you'd need to add chart_action to $.fn or the jQuery prototype for that. I'd also have to question the wisdom of polluting the jQuery namespace with something that isn't a plugin.

Billy Chan Over a year ago

@muistooshort, yes you are right about .fn. and I do know that :) Just typed too quickly. Thank you for reminding. For namespace pollution, do you have better idea?

mu is too short Over a year ago

I'd probably use an application-specific global namespace (window.app for example) and then put the function in there, then you can app.chart_action() to call it. You should have an application-specific namespace anyway, you'll need it sooner or later in almost any non-trivial application.

Billy Chan Over a year ago

@muistooshort, nice point. I'll use this practice in the future. I've also updated the answer, please correct me if inappropriate. Thanks!

Billy Chan Over a year ago

@AndyHarvey, I think the syntax is okay and no wrap needed in erb. I don't know the reason why it doesn't work. May I suggest you to use the original jQuery function at first, then refactor to the new method later.

|

Collectives™ on Stack Overflow

How to call a function named coffeescript function via ajax

1 Answer 1

Upate Version

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Upate Version

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related