Reloading a div kills all js connected to that div when reloaded.

I reload a div on the successful upload of data to the database using ajax and jquery, unfortunately this makes all the other javascript (Comment approval, show more and show less etc and the form) break.

How do i stop the js from breaking on the div upload? delagate? i am using AJAX/Jquery

This is the form im uploading:

{!! Form::open((['route' => ['comments.store', $product->id], 'method' => 'POST', 'files' => 'true'])) !!}
 <div class="comment-form">
 {{ Form::label('title', 'Title (Give a short summary)') }}
 {{Form::text('title', null, ['class'=>'form-control title', 'minlength'=>'2','maxlength'=>'30'])}}
  {{Form::label('comment', 'Add comment (2000 character limit)')}}
   {{Form::textarea('comment', null, ['class'=>'form-control review'])}}
   {!!Form::hidden('user_id', Auth::user()->id, array('class' => 'userid'))  !!}
   {{Form::label('image', 'Upload image')}}
   {{ Form::file('image', null, array('class' => 'image')}}

      {{ Form::submit('Add Review', ['class' => 'btn btn-send btn-block send-review'])}}
      {!! Form::close() !!}
 </div>

JS:

$('.send-review').on('click', function(dl) {

    var form_data = new FormData( document.getElementById('form-review') );
    dl.preventDefault();
    $.ajax({
        method: 'POST',
        url: urlCreateReview,
        data: form_data,
        cache: false,
        processData: false,
        contentType: false,
        success:function(data){
            $(".tab-content").load(" .tab-content");
            $(".nav-tabs").load(" .nav-tabs");
            $('html,body').animate({
                scrollTop: $(".nav-tabs").offset().top
            });
            $('.success-msg').html('<strong>Success:</strong> Your review has been created').show();
        },
};
};

Div im reloading:

<div class="tab-content">

/// contains foreach etc with js comment approval buttons

Cronix

7 years ago

Level 67

Show the whole html, including that div (<div class="tab-content">), which is missing from what you are showing us.

If you replace the content of something, and that content had js events directly tied to the containing elements, you just deleted the events when replacing the contents.

How do i stop the js from breaking on the div upload? delagate?

yes

take the example from the docs: http://api.jquery.com/on/

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

So this is assigning a click event to all tr's that currently exist on the page, when the page is initially rendered. The events are directly tied to the tr's on the current page. Delete a tr, the event attached to it goes bye-bye. Add a new tr and it won't get assigned the event since it wasn't present when the page was initially rendered and the events attached to the tr's.

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

This ties the event to the tbody instead of the tr, but targets the tr. This is more dynamic. If you then add a new tr (or replace all of the tr's), the added tr's will inherit the click event from the tbody. It's also a lot more efficient and uses less memory since it's a single click event for the whole tbody, instead of individual click events on each tr.

1 like

Please or to participate in this conversation.