1

Team did a lot of modification in a web application. Sometines I found jquery code like this one :

$('#foo').doSomething();

But when I'm searching for the id="foo" in HTML, it does not exist anymore.

To help us and to prevent bugs, I want to console.log every non-present elements forward to the $() function.

Here is an example:

//I want to hide this text.
$('#foo').fadeOut(5000);
//This id #bar does not exist. 
$('#bar').fadeOut(5000);
//I want to console.log that #bar does not exist
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foobar">
I don't want to hide this text.
</div>
<div id="foo">
I want to hide this text.
</div>
<div id="bbar">
This layer is named bbar and not bar.
</div>

During dev, I want to log that #bar element called by $('#bar') does not exist. Is it possible to extend jQuery? I want to output something like that:

Selector #bbar does not exist

Jquery version 3.1 is used. I read JQuery events on non present elements, but I don't want to change each call. I want to log non present elements, by extending jQuery for example.

Community
  • 1
  • 1
Alexandre Tranchant
  • 4,426
  • 4
  • 43
  • 70
  • you would need to overload `jQuery.fn.init` which won't be trivial due to all the various cases that it handles – charlietfl Jan 15 '17 at 18:20

1 Answers1

2

You can perhaps overload the $ function as in https://jsfiddle.net/jm7LtLqe/1/

$ = function(jQuery) { 
    return function(pars) { 
        var result = jQuery(pars);
        if (result.length==0) console.log('selector has no results',result.selector);
        return result;
    }
}($);

Edit (needs ES6 Object.assign to copy properties such as $.ajax):

$ = Object.assign(function (jQuery) { 
  return function(pars) { 
    var result = jQuery(pars);
    if (result.length==0) console.log('selector has no results',pars);
    return result;
  }
}($),$);
Tommos
  • 820
  • 5
  • 14
  • good idea...doesn't work though if using multiple selectors where any one of them does exist but others don't – charlietfl Jan 15 '17 at 18:34
  • I should clarify and say it does work, but won't log anything if one match is found but others are not matched. – charlietfl Jan 15 '17 at 18:45
  • Yes, if this is required you may have to overload `jQuery.fn.init` as @charlietfl said – Tommos Jan 15 '17 at 19:08
  • This is an interesting way . And it works until I launch an ajax call. Unfortunately, I am using $.getJSON. When I add your function, errors are thrown : `TypeError: $.getJSON is not a function` . I will test it with `jQuery.fn.init`. I'm come back soon. – Alexandre Tranchant Jan 15 '17 at 19:34
  • Ah yes, there are more properties on the jQuery object, it's not only a function :). I forgot. If you can use ES6 do something like `$ = Object.assign(jQuery,$);` after declaring $ the first time – Tommos Jan 15 '17 at 19:49
  • Thanks a lot. If you change `result.selector` by pars , it works perfectly. `result.selector` is undefined. I purpose the edit and validate this answer. Thanks a lot! – Alexandre Tranchant Jan 16 '17 at 07:00