18

I try to call jQuery function when ul content is changed.

Below is my code

JS

jQuery(document).ready(function($) {

        $('.ProductList').live('change', function() {
          alert('content is changed now');
        });
    });

HTML

<ul class='ProductList List Clear'>
call jquery function when content change here.
     <li></li>
     <li></li>
      <li></li>
</ul>

Suggest me some idea so I can solve it.

I am try to call function based on content change because I work on bigcoomerce customization and big commerce not allow me to access ajax function because of the limited access so I need to call function like that.

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Jalpesh Patel
  • 3,150
  • 10
  • 44
  • 68
  • http://stackoverflow.com/questions/9470931/is-there-any-on-dom-change-event – Ivan Chernykh Jul 24 '13 at 10:04
  • 2
    http://api.jquery.com/change/ `The change event is sent to an element when its value changes. This event is limited to elements, – Ron van der Heijden Jul 24 '13 at 10:10
  • 1
    The question is how your UL content change? – A. Wolff Jul 24 '13 at 10:11
  • Why so much upvotes, this question has been answered thousand times before... – A. Wolff Jul 24 '13 at 10:18
  • **
      ** content change is based on ajax response @roasted
     – Jalpesh Patel Jul 24 '13 at 10:22
  • i think no need to negative mark over here] – Jalpesh Patel Jul 24 '13 at 10:22
  • So in success callback of your ajax request, call function or trigger custom event. This is BTW what is suggested in hundred other relative duplicate topics... – A. Wolff Jul 24 '13 at 10:25
  • i am try to call function based on content change because i work on bigcoomerce customization and big commerce not allow me to access ajax function because of the limited access so i need to call fuction like that @roasted – Jalpesh Patel Jul 24 '13 at 10:28
  • 1
    @Jalpesh ha, ok, third party plugin don't allow you to override ajax request. I'd say use a global ajax method like .ajaxStop() and check there if UL content has changed – A. Wolff Jul 24 '13 at 10:30

6 Answers6

11

This is a bit late response but I share it for new devs facing same problem;

Some might suggest using MutationEvents but beware as this is being deprecated!

$('.ProductList').on('DOMSubtreeModified', function(event) {
    // dos tuff
});

The recommended way is to use MutationObserver like explained in this question but then beware that it is not supported in old browsers like IE8!

Community
  • 1
  • 1
numediaweb
  • 16,362
  • 12
  • 74
  • 110
7

Test that: {this won't work if specific ajax request is set to global false}

! function () {
    var ulContent;
    $(document).ajaxStop(function () {
        var $ul = $('.ProductList');
        if(ulContent !== $ul.html()){
            ulContent = $ul.html();
            $ul.trigger('contentChanged');
        }
    });
}();

$('.ProductList').on('contentChanged',callback);

callback is the function you want to call when content of UL changed. You should just call it directly from ajaxStop handler but usually we use a custom event.

Or use that if you don't know what previous syntax means:

 $('.ProductList').on('contentChanged',function(){alert('UL content changed!!!');});
A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • what does the ! before function() signify& who invokes the function? – user1692342 May 30 '15 at 14:46
  • 3
    @user1692342 http://stackoverflow.com/questions/3755606/what-does-the-exclamation-mark-do-before-the-function That can be usefull when you minify your code – A. Wolff May 30 '15 at 14:50
  • Thanks for the link! Wasn't aware of it. How do I check if the specific ajax request is set to global false? Could you check out the problem I am facing in http://stackoverflow.com/questions/30544027/triggering-event-on-change-of-element-in-unordered-list-in-an-iframe – user1692342 May 30 '15 at 15:11
3

<Ul> don't have change event, since user cannot change it, but if you update it's content with javascript you can call any function you have in your code after changing it

Sergio
  • 6,900
  • 5
  • 31
  • 55
3
$(document).on('DOMSubtreeModified', function (e) {
     if ($(e.target).hasClass("select2-choices")) {
          console.log("cambio");
          alert("cambio");
     }
});
Lautaro Lorenz
  • 151
  • 5
2

The ul element doesn't have onchange event like form elements.

I'm sure that the content of the li element is change by some function in your code. So the better way is to emit an event in that function and listen for that event;

May be this would help: Custom events in jquery

Community
  • 1
  • 1
Akhil Sekharan
  • 12,467
  • 7
  • 40
  • 57
-5

You can use setInterval(funcName, 1800) Check List each 1/2 second if ProductList is changed

Example jsfiddle

HTML

<ul class='ProductList List Clear'>
     <li></li>
     <li></li>
      <li></li>
</ul>

JS

    function handleProductList(){
        if(jQuery('ul.ProductList > *').size() !=="undefined"){
        var ProductListNum = jQuery('ul.ProductList > *').size();
            console.log(ProductListNum);
        }
    }

    /* Check List each 1/2 second */
    setInterval("handleProductList();", 1800);
20AMax
  • 426
  • 5
  • 7