Michael Derzhavets

Of course we want this episode! :)

Thank you, Chris, it is working! And thank you for pointing me that it is necessary to find out what is JS scopes, which appeared to be very useful information. :)

Can you please help me implement this approach into my code? I barely understood half of your proposal. :))

Good! It seems to have the problem solved!

Only one issue appeared, probably I just miss something in syntax. Now I'm not succeeding in getting data-url from the element (although url is inserted in element's data-url correctly). I'm doing it this way. Is something wrong here?

$(document).on 'click', "[data-behavior='proposal-link']", (event) => (
  event.preventDefault()
  link = $(this).data("url")
  alert link
  $.ajax(
    url: link
    dataType: "JSON"
    method: "GET"
    success: @showProposals
  )
);

Not exactly. On click function seems to be working, it is sending alerts and successful ajax requests. The function (@showProposals) that should be called from handling click isn't being fired from ajax:success, despite that it worked the same way in setup function.

But I assume that you are right about origin of the problem: that I'm handling click on dynamically rendered element, and trying to call the function to re-render this elements.

Hi Everyone

Using the UJS approach Chis showed in the NavBar notifications screencasts, I'm trying to implement something similar, and having very strange issue that I can't even imagine what's the reason of.

Here is the thing. When loading page I'm doing setup to get json data from controller and put it in the content:

setup: -> (
  $.ajax(
    url: "/show_proposals"
    dataType: "JSON"
    method: "GET"
    success: @showProposals
  );
);

Then in @showProposals I'm generating elements and references to listen them:

showProposals: (data) => (
  proposers = $.map data.proposers, (proposer) ->
    "<li><a href='#' data-url='#{proposer.url}' data-behavior='proposal-link'>#{proposer.name}</a></li>"
  $("[data-behavior='show-proposers']").append(proposers)
);

So now I need to handle 'proposal-link' click to send ajax request to the same controller, but with some different options, render new json file and perform @showProposals again. This is how I do that (as well in the "setup" function):

$(document).on 'click', "[data-behavior='proposal-link']", (event) -> (
  event.preventDefault()
  link = $(this).data("url")

  $.ajax(
    url: link
    dataType: "JSON"
    method: "GET"
    success: @showProposals
  )
);

And this is where the strange things happening. The link is generated correctly, request sent, right json file rendered and ajax return success (checked with placing alert on ajax success). But however I try, it DOES NOT call @showProposals again. And I can't find any reasonable explanation why is it happening.

One more strange thing. When I'm placing alert to ajax success, first it's showing alert, and only after rendering json file. But maybe this is fine.

Do you have any ideas? Thank you in advance!

Hi Chris,

Thank you for that screencast, it was very clear and useful.

Also I am pleased to learn using UJS from this example. So now when I'm trying to realise some similar function I'm bumping into strange issue that I can't resolve. Maybe you can advise something on this? Probably nothing special here, but I'm not successful in finding solution.

Here is the thing. I'm using that same approach as you proposed, sending GET request to the controller to render JSON file and then use it's data to fill in the markup.

$.ajax(
url: "/show_proposals"
dataType: "JSON"
method: "GET"
success: @showProposals
)

Then in @showProposals method I'm not only inserting data, but also generate references to listen this item:

showProposals: (data) => (
proposers = $.map data.proposers, (proposer) ->
"<li>#{proposer.name}</li>"
)

Then I need to handle click and send special request to the same controller to render new JSON and repeat the same procedure from @showProposals:

$(document).on('click', '.proposal-link', ( (event) ->
event.preventDefault()
link = $(this).data("url")
$.ajax(
url: link
dataType: "JSON"
method: "GET"
success: @showProposals
)));

So here I have a strange problem. Everything works fine, link is received from element, request sent to the same controller, JSON file rendered and ajax returns success. But whatever I try, it DOES NOT call @showProposals method again.

Do you have any ideas what could it be? Maybe I should make another references to listen rendered items?

Thank you in advance!!