Ad

Successful AJAX Request Breaks JQuery Funtion

- 1 answer

First of all I have read about Event Delegation in several stackoverflow posts and articles like this: Understanding Event Delegation, and it makes sense, it just isn't working in this instance. I am working on a Rails 3 application. I have a nested form using the simple_nested_form gem that submits a new record via ajax and upon success, renders a partial containing new record(s) and the form on a #show template. The design requires: The user arrives on the page and can see the records (if there are any) and a button to Enter/Edit Timecard. The button will toggle between showing the records or the form, but not both. This works fine. The user clicks the button, is presented with the form, then adds, updates or deletes a record. They click submit, the ajax updates the page, but now the Enter/Edit Timecard button no longer works. The following is edited for brevity.

The partial rendered in the show template

<div id="update-timecard-area">
  <div id="timecard-partial">
    <%= render partial: 'timecards'%>
  </div>
</div>

The contents of the partial

<div id="timecard-display-area">
 # Display records
</div>

<div id="timecard-form-area" >
  # The from
</div>

<div>    
  # Link that when clicked either displays the form or the records but not both
  <a target="_blank" rel="nofollow noreferrer" href="#" id="toggle-timecard-form" class='btn btn-default btn-sm'>Enter/Edit Timecard</a>
</div>

Relevant SCSS that hides the form on initial page load

#update-timecard-area {
  #timecard-form-area {
    display: none;
  }
}

Function that hides/shows parts of the form

$( document ).ready(function($) {
  $("#timecard-partial").on( "click", "a#toggle-timecard-form", function(e) {
    e.preventDefault();

    if ($("#timecard-display-area").is(":visible")){
        $("#timecard-display-area").hide();
        $("#timecard-form-area").show();
    }
    else if ($("#timecard-form-area").is(":visible")) {
        $("#timecard-display-area").show();
        $("#timecard-form-area").hide();
    }
  });
});
Ad

Answer

That's because you're performing your event bindings on those specific elements and those elements are replaced when you re-render the partial.

I'd suggest encapsulating all of your binding code into a function then calling that after the partial is rendered.

For example:

function setup($) {
    $("#timecard-partial").on( "click", "a#toggle-timecard-form", function(e) {
        e.preventDefault();

        if ($("#timecard-display-area").is(":visible")){
            $("#timecard-display-area").hide();
            $("#timecard-form-area").show();
        }
        else if ($("#timecard-form-area").is(":visible")) {
            $("#timecard-display-area").show();
            $("#timecard-form-area").hide();
        }
    });
}

$( document ).ready(setup);

Then you can call setup() whenever the partial is rendered.

Ad
source: stackoverflow.com
Ad