3

I am using Ruby on Rails 3.2.2 and the jQuery-Rails 2.0.2 gem (including the jQuery UI). I have a jQuery UI Dialog window that is open when I click on a "new comment" link present in the front-end content. When the dialog window is open it is performed a AJAX HTTP request to a my controller action that make it to render and "populate" the modal window body-content with a HTML form.

I would like to implement my view so that after the form is successfully submitted the front-end content change this way: the trigger link text change form "new comment" to "edit comment".

How can I make that? What do you advice about?

Note: The form is submitted in turn by performing a AJAX HTTP request.

Backo
  • 18,291
  • 27
  • 103
  • 170

1 Answers1

0

It all depends on how you submit that form to the server.

If the form you are submitting has set the :remote => true attribute it will be sent to the server through an AJAX call and the server will be able to do differentiate it from a regular non-ajax form request:

respond_to do |format|
  format.js  #this renders the <actionname>.js.erb file and executes it on the client
end

The jquery_ujs helper will then execute javascript code that the server returned to him.

You can just write arbitrary JavaScript code in your <actionname>.js.erb file that could look like this:

$('#trigger_link').text('edit comment');

If you are not using the remote form but rather do a normal $.ajax call you can simply hook into the success callback that jQuery provides, but I guess that's obvious.

Update:

Seems like the problem is that you don't know what link triggered the opening of the Dialog.

Usually somewhere you have a jQuery function that opens the dialog for you. When rendering the initial list that contains the trigger links I assume you have some way of differentiating them from other links on the page (maybe through a css class like .trigger).

you can then do:

$('.trigger').click(function() {
  window.trigger_link = this;
});

Note that this little snippet above does not overwrite your existing click event handler that opens the popup. It gets executed too.

So now that we keep track of the link that opened the window (the window opens on clicking the trigger link - and we always save the last clicked trigger link) we can do the following once the form has been submitted:

$(window.trigger_link).text('edit comment');

Since window.trigger_link refers to the correct link.

Tigraine
  • 23,358
  • 11
  • 65
  • 110
  • My problem is related to *"retrieving"* / *"building"* the proper CSS `id` of the trigger link (that in your answer, for instance, you named `trigger_link`) since: (1) the AJAX-rendered form is related to its own CSS `id`s (the AJAX request is handled by another controller action that has set its own CSS `id`s); (2) I have many trigger links in the same page each of which have set its own CSS `id`. – Backo Sep 12 '12 at 13:41
  • In other words, I *cannot "directly know"* (and so I cannot properly "build") the CSS `id` of the trigger link from / within the `.js.erb` template (maybe, there is some *common* way - unknown to me - in order to solve this problem...). – Backo Sep 12 '12 at 13:50
  • You could just access the button through `$('form submit').text()` .. and the container that holds the form should be known as well. so `$('form submit', $('#containerId')).text()` should work – Tigraine Sep 12 '12 at 14:09
  • The problem is *not* related to retrieving the `form` (and, more in general, the content of the dialog window), but it is related to retrieving the *trigger link* (note: the *trigger link* is not contained in the dialog window) that open the dialog window so that the link text can be edited. – Backo Sep 12 '12 at 14:19
  • Hmm.. can't you set that trigger link through jQuery when it is clicked? Add another .click handler on that link that sets a global javascript variable to it? `$('.link').click(function() { window.trigger_link = this; }` and then retrieve it upon submit and set it's value like this: `$(window.trigger_link).text()` – Tigraine Sep 12 '12 at 14:36
  • You: *"Can't you set that trigger link through jQuery when it is clicked?"*. I: Can you be a bit more clear (maybe with an example)? - You: *"Add another .click handler on that link that sets a global javascript variable to it? [...]"*. I: With "global javascript" do you mean using something like [jQuery.data](http://api.jquery.com/jQuery.data)? – Backo Sep 12 '12 at 14:42
  • Updated the answer.. and I really meant global javascript variable like in "put it on the window object and hope Crockford doesn't find you" – Tigraine Sep 12 '12 at 14:51