Topic: ajax response correct but no update[solved]

I have a view like this:

<div id="new_ticket_form">
      <%= render :partial => 'form' %>
</div>

A javascript to observe a select list:

<script>
    function handleChange() {
        $('loading').setStyle({'display': 'inline'});
        new Ajax.Request('/tickets/new', {
            method: 'post',
            parameters: {account_id: $('ticket_account_id').value},
            onSuccess: function() {
                $('loading').setStyle({'display': 'none'});
            }
        });
    }
    document.observe("dom:loaded", function() {
        $('ticket_account_id').observe('change', handleChange);
    });
</script>

the controller tickets/new

  respond_to do |format|
        format.html # new
    format.js { render :action => "new_update_list", :layout => false }
  end

and the js.erb file

$("new_ticket_form").update("<%= escape_javascript(render(:partial => "form")) %>");

With this code, ajax is executed and my list updated. However the response contains escaped html/js and any additional ajax call is never triggered again

If I remove the escape_javascript function:

$("new_ticket_form").update("<%= render(:partial => "form") %>");

The ajax is executed, onChange and onSuccess both show/hide the loading screen, but the list is not updated.
Looking in firebug, I get the response I need inside .update("right response from controller");
but it's never updated live on the screen.

Changing the line with:

$("new_ticket_form").update("aaaaaa");

Does render "aaaaaa" inside my new_ticket_form div when I change the select list

An idea why the line above doesn't update my div?

Last edited by sefo (2010-12-31 05:13:21)

Re: ajax response correct but no update[solved]

I think it's because you're triggering off of dom:loaded, I don't  think AJAX calls will trigger dom:loaded, only the first time the dom is loaded by the browser will that event fire.

Last edited by BradHodges (2010-12-30 12:25:19)

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: ajax response correct but no update[solved]

Any idea what should I use instead?

Only using Element.observe is never being fired.

    document.observe("dom:loaded", function() {
        $('ticket_account_id').observe('change', handleChange);
    });

Re: ajax response correct but no update[solved]

You're doing things that I normally do via JQuery, JRails and Rails JavaScript helpers. 

For example,

new Ajax.request

I never go near that,  I let Rails JavaScript helpers handle that for me!

back up and describe what you want to do from the top down.

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.

Re: ajax response correct but no update[solved]

Alright,

*In a view, I have a select list attached to an onChange event using the observe method above.

*The event handler sends a post request to my controller and gets a response through a js.erb using respond_to.

*If the request is successful, I want to update a <div> in the same view as the select.

What I have at the moment is this script:

<script>
    function handleChange() {
        $('loading').setStyle({'display': 'inline'});
        new Ajax.Request('/tickets/new', {
            method: 'post',
            parameters: {
                account_id: $('ticket_account_id').value
            },
            onSuccess: function(data) {
                //$('new_ticket_form').innerHTML = data.responseText;
                $('loading').setStyle({'display': 'none'});
            }
        });
    }
    document.observe("dom:loaded", function() {
        $('ticket_account_id').observe('change', handleChange);
    });
</script>

Along with this .js.erb file

$("new_ticket_form").update("<%= render(:partial => "form") %>");

If I keep everything like that, events are fired correctly as well as "onSuccess".
That is, I can see the loading screen appear and disappear.

The problem is that my div is not updated AFTER I fired the first event.
For example, I select an option, the request is made and my div is updated.
Then if I try to select another option, the loading screen appears and disappears, but the list is not updated.

In firebug, during the first event, I get a response like:

$("new_ticket_form").update("New content for my div");

if onSuccess I uncomment the line:

$('new_ticket_form').innerHTML = data.responseText;

The response is the same as above, except that in my view I actually see the string "$("new_ticket_form").update("
and event don't trigger anymore.

Re: ajax response correct but no update[solved]

Bah, forget it, I replaced everything to use jquery and it works... bye prototype!