jQuery function unwanted first call when page loads

Question

I have a very straight forward jQuery ajax function in my 'funcs.js' file:

$('#selecDate').on('DOMSubtreeModified',function(){

  $.ajax({
               type: 'POST',
               url: '/revenue',
               data: {'name' : 'John Doe'},
               success: function(response){
                console.log(response);
                   $('th').text(response);
               },
               error: function(response){
                   console.log(response);
               },
             });
});

This is my 'funcs.js' file entire content. Why does this function being called automatically when page loads and how can i avoid it? thx

1. Wrap it in `DOMContentLoaded` handler 2. `DOMSubtreeModified` has been deprecated for several years now — German Rumm, Dec 06 '16 at 15:45
but the goal its to call ajax only when innerHTML of #selecDate changes...tried your solution and nothing happens... — Delashmate, Dec 06 '16 at 15:47

score 1 · Answer 1 · answered Dec 06 '16 at 15:40

1

You're making the request when the DOM is modified. So on page load your DOM is modified and the event triggers.

answered Dec 06 '16 at 15:40

Jerod Venema

44,124
5
66
109

i see..any idea how can i avoid the call for the first load? and why isn't it being called only when #selecDate called? thx – Delashmate Dec 06 '16 at 15:43
It's odd though. If the script is loaded before `#selectDate` exists, no handler should be attached. However, if the script is loaded after the element, the SubTree of that element doesn't change anymore, right? – Bram Vanroy Dec 06 '16 at 15:44
$('#selecDate').on('DOMSubtreeModified', function(){}) - this function will hook up an event that, by definition, is called whenever the subtree is changed. If that event triggers, your function will run, so you have to make sure that you only hook up the event when you're ready to start watching for that event to occur. – Jerod Venema Dec 08 '16 at 01:01

score 0 · Answer 2 · answered Dec 06 '16 at 15:45

That handler should probably be inside of a $(document).ready(function(){}) since it's firing from the actual DOM being loaded. If you wait until the document is ready, then it'll only fire on DOM changes as I believe you're intending it to.

$(document).ready(function(){
    $('#selecDate').on('DOMSubtreeModified',function(){
        $.ajax({
            type: 'POST',
            url: '/revenue',
            data: {'name' : 'John Doe'},
            success: function(response){
                         console.log(response);
                         $('th').text(response);
                     },
                     error: function(response){
                         console.log(response);
                     }
        });
    });
});

Are you initializing that element using a framework? For example, is it a JQuery UI Date Selector? If so you need to make sure that this is being added after that initialization is made. If the initialization is being made in another file, then you'll need to make sure that you're importing this JS script after the one with the initialization. — Sage, Dec 06 '16 at 15:53

score 0 · Answer 3 · edited May 23 '17 at 12:01

0

You might want to look into Mutation Observers as DOMSubtreeModified is deprecated.

Why is the DOMSubtreeModified event deprecated in DOM level 3?

edited May 23 '17 at 12:01

Community

1
1

answered Dec 06 '16 at 15:53

Dave Gillem

476
4
10

jQuery function unwanted first call when page loads

3 Answers3