JS, jQuery not working when I refresh part of page with Ajax

Question

I have some JS files included in my page that are simple for displaying blocks on click ant etc..

On another part of page, I have a button. When I click it an ajax call is made that returns some values that I display on the page. To display it, I'm reloading part of page like this:

$(document).ready(function () {
    $(document).on('click', '.add', function (e) {
    $this = $(this);
    $.ajax({
        type: 'POST',
        url: 'add',
        dataType: 'JSON',
        data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
        success: function (data) {
          if(data.success == false){
           alert('error')
          }else{
            $('.test').load(" .test");
            $('.sidebar').load(" .sidebar");
            $('.top').load(" .top");
           }
        }
    });
});

This reloads part of page, displays values and etc..

However, after the ajax call is made, the JS stops working. When I click my buttons, nothing happens. No errors or anything.

I think it has to do with the ajax when I refresh part of twig and it messes up the previously loaded JS files. But what can I do in that situation? Somehow refresh the loaded JS files? How?

any event is not working for that specific area, which is return by ajax right? — DsRaj
– DsRaj, Commented Jun 3, 2016 at 11:54
You should have an init() function to reset all the js events handlers. And call the function after each ajax() success response. So: init() -> ajaxCall() -> init(); Because your dom is being changed after each ajax request. — Nacho M.
– Nacho M., Commented Jun 3, 2016 at 11:55
jquery.load expects a url and you are giving class selector. This wont work, look for console, there might be some error. — rishabh dev
– rishabh dev, Commented Jun 3, 2016 at 11:59

Mister M · Accepted Answer · 2016-06-03 11:53:39Z

4

You have to attach event listener on button starting from the container which doesn't get reloaded by Ajax request, like this:

//#mainCont is a container that doesn't get reloaded by Ajax

$("#mainCont").on("click", ".yourBtn", function(){
        //do something
});

answered Jun 3, 2016 at 11:53

Mister M

1,6894 gold badges18 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jax Teller · Accepted Answer · 2016-06-03 12:18:04Z

As said @Nacho M, you need to reinit listener from the loaded element, so you hsould have something like this :

function init() {
    $(document).on('click', '.yourclass', function (e) {
     //your content
    }

     // add every button who needs to be reloaded.
}

Init them on loading page first :

$("document").ready(function() {
init();
})

And on success of Ajax call :

$.ajax({
    type: 'POST',
    url: 'add',
    dataType: 'JSON',
    data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
    success: function (data) {
      if(data.success == false){
       alert('error')
      }else{
        $('.test').load(" .test");
        $('.sidebar').load(" .sidebar");
        $('.top').load(" .top");
        init();
       }
    }
});

Collectives™ on Stack Overflow

JS, jQuery not working when I refresh part of page with Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related