Need to change this JQuery code to check for element existence prior to processing

Question

I have the following code:

            <script type="text/javascript">
            $(function () {
                $('#js-news').ticker({
                    speed: 0.10,
                    htmlFeed: false,
                    fadeInSpeed: 600,
                    titleText: 'DASHBOARD ALERTS',
                    direction: 'ltr',
                    displayType: 'reveal',
                    controls: false
                });
            });
        </script>

I would like to alter it such that it only fires if #js-news is present. In older IE V10 browsers I am getting the error: "Element does not exist in DOM", and the relevant pages do not have the js-news element. Newer browser seem to cope, but not IE7,8,9.

Thoughts on code alteration appreciated.

Thanks.

How is `ticker` written that id does work on non-existing elements? O_O — Bergi, May 07 '14 at 16:52
This looks like jQuery News Ticker, and if you open that js file and look at line 22, it checks that it has been passed elements. It will log a message in the console otherwise, stating "Element does not exist in DOM!" (or alert if console is not available). — Reinstate Monica Cellio, May 07 '14 at 16:58
Sorry some of the question did not show due to less than character. I am using the JQuery Ticker. I have to admit that it may not be the culprit. What is the best way to identify the missing DOM element? — SamJolly, May 07 '14 at 17:14
Methods on `jQuery.fn` are generally expected to call `.each` internally so that they work with selections of any given size. It appears that this plugin was written poorly. — zzzzBov, May 07 '14 at 17:15
@SamJolly: The point is that you shouldn't have to identify the existence of an element in a properly written plugin. It should just fail silently. Giving an `alert()` is horrendous. Personally, I'd never use code that did something that silly. — cookie monster, May 07 '14 at 17:15
...it [looks like](https://github.com/rhodimus/jQuery-News-Ticker/blob/master/includes/jquery.ticker.js#L419) the plugin has a `debugMode`, which is enabled by default, but they don't put this behavior behind that flag. You may just be better off modifying the source to set `debugMode` to `false` by default, and changing `if ($(this).length == 0) {` to `if (opts.debugMode && $(this).length == 0) {` — cookie monster, May 07 '14 at 17:16
Or do this: `if (!window.console) window.console = {log:function(){}};` just to shut it up. I definitely wouldn't check for existence first. — cookie monster, May 07 '14 at 17:21
The interesting bit about this is that it does fail silently in the most modern browsers like IE10,IE11 and all FF and Chrome I have tested. So something quirky in IE6,7,8.... is setting this off — SamJolly, May 07 '14 at 17:28
Sorry what is this "console" business? I am a little new on this stuff, sorry for the basic question. — SamJolly, May 07 '14 at 17:34
See [how to](http://www.creativebloq.com/javascript/javascript-debugging-beginners-3122820) [**debug** JavaScript](https://developers.google.com/chrome-developer-tools/docs/javascript-debugging). — Felix Kling, May 07 '14 at 17:40
@cookiemonster, I used your snippet and it worked, in conjunction with A.Wolff's comment. Seems a bit of a workaround, but it works. Add it as an answer and then I can mark it up. I did used it conjunction with Milind's answer.. — SamJolly, May 07 '14 at 17:40

score 12 · Accepted Answer · edited May 23 '17 at 12:09

First, as @Archer pointed out in the comments above, this plugin is not coded properly. The idiomatic jQuery plugin will fail silently when its method is invoked on a jQuery object with no elements.

As seen from the code here, this plugin either runs the console.log() or an alert() if the console doesn't exist when there's no element:

if ($(this).length == 0) {
    if (window.console && window.console.log) {
        window.console.log('Element does not exist in DOM!');
    } else {
        alert('Element does not exist in DOM!');    
    }
    return false;
}

This is pretty bad. The plugin does have a debugMode that can be disabled, but it wouldn't help because that flag isn't used here. To modify the source, you could change the first line above:

if (opts.debugMode && $(this).length == 0) {

And then be sure to set debugMode:false in your settings.

--

But how this ultimately affects IE is that it doesn't have a console object defined when the dev tools are closed (and never in IE6/7), so a simple solution would be to make sure that object is defined with a NO-OP function.

if (!window.console) {
    window.console = {
        log: function() {}
    };
}

Now it will find the console and invoke the empty function in IE instead of firing the alert().

There are other methods on the console object that should probably be filled in too, but the log() is the most common.

If you're so inclined, it may not be a bad idea to file a bug report with the developer. It seems that the project hasn't been updated in the last 2 years, so I don't know if it'll help, but it couldn't hurt.

What a stunning answer. Most helpful. Thank you. – SamJolly May 07 '14 at 23:12 — SamJolly, May 07 '14 at 23:12

score 6 · Answer 2 · answered May 07 '14 at 16:51

6

Add the condition to check the length:

if($('#js-news').length){
  $('#js-news').ticker({
                speed: 0.10,
                htmlFeed: false,
                fadeInSpeed: 600,
                titleText: 'DASHBOARD ALERTS',
                direction: 'ltr',
                displayType: 'reveal',
                controls: false
  });
}

answered May 07 '14 at 16:51

Milind Anantwar

81,290
25
94
125

6

Doesn't make sense for me. Properly written jQuery plugin will not do anything if `this` object has no elements selected. – VisioN May 07 '14 at 16:54
1

looks like plugin is not handling that part correctly. – Milind Anantwar May 07 '14 at 17:17

Need to change this JQuery code to check for element existence prior to processing

2 Answers2