0

I've tried using the jQuery Terminal plugin, and at first I thought my script was ok. Then I tried uploading it to two free webhosts to test it, and I'm encountering problems where you would need to refresh the page for it to work properly. At least for the initial load that is, succeeding access of the web page assuming the web history of the browser wasn't cleared, it would then work.

It shows errors like so:

[TERMINAL]: Cannot call method 'add' of undefined

TypeError: Cannot call method 'add' of undefined at HTMLBodyElement. (/js/jquery.terminal-src.js:266:30)

at Function.m.extend.each (http://code.jquery.com/jquery-1.11.3.min.js:2:2975)
at m.fn.m.each (http://code.jquery.com/jquery-1.11.3.min.js:2:835)
at jQuery.fn.extend.oneTime (/js/jquery.terminal-src.js:265:25)
at $.extend.$.omap.focus (/js/jquery.terminal-src.js:3640:26)
at null.focus (/js/jquery.terminal-src.js:4152:36)
at js/jquery.terminal-src.js:4264:26
at make_interpreter (/js/jquery.terminal-src.js:2811:17)
at $.fn.terminal (/js/jquery.terminal-src.js:4233:13)
at HTMLDocument.<anonymous> (/js/jquery.terminal-src.js:4336:313)

[Note:I removed the link of the website for the above messages!]

It would also just output this for Safari: [TERMINAL]: 'undefined' is not an object (evaluating 'jQuery.timer.add')

After displaying above messages,the command prompt would appear, but the script for it to function wouldn't work.

I realized that the problem may be with this part of the script of the initialization: 

  command_line = $('<div/>').appendTo(self).cmd({
                    prompt: settings.prompt,
                    history: settings.history,
                    historyFilter: settings.historyFilter,
                    historySize: settings.historySize,
                    width: '100%',
                    keydown: key_down,
                    keypress: settings.keypress ? function(e) {
                        return settings.keypress(e, self);
                    } : null,
                    onCommandChange: function(command) {
                        if ($.type(settings.onCommandChange) === 'function') {
                            try {
                                settings.onCommandChange(command, self);
                            } catch (e) {
                                display_exception(e, 'onCommandChange');
                                throw e;
                            }
                        }
                        scroll_to_bottom();
                    },
                    commands: commands
                });
               if (enabled) {
                    self.focus(undefined, true);
                } else {
                    self.disable();
                }

               if (enabled) {
                    self.focus(undefined, true);
                } else {
                    self.disable();
                }

This last part that is. It seems that the "self.focus(undefined, true)" causes problems.

I'm loading the script for the 'body' part of the document like so:

 $('body').terminal(function(command, term) {

Basically, what I'm just loading is something similar to adva.io, but instead it's an online form with a bit of a storyline.

I don't really understand why I'm having problems with the initialization :( What is the "undefined" part mentioned by the error messages and the part of the init anyway?

This is the jQuery Terminal plugin link by the way: http://terminal.jcubic.pl/api_reference.php

At first I thought something was wrong with the calling of jQuery itself, like maybe the code was calling jQuery functions when jQuery itself hasn't loaded yet, but I fixed the order and tested their loadings at http://tools.pingdom.com/ and jQuery fully loads before the rest of the jQuery scripts initialize.

I also made it so such that the custom script I made is in the same script file as the jquery.terminal-src.js (after the entire of the original thing), just to ensure that my script doesn't load before it.

Valerie
  • 43
  • 2

2 Answers2

1

If you have another jquery loaded after your code then you can try to use jQuery.noConflict();

(function($) {
   $('...').terminal(...);
})(jQuery.noConflict());
jcubic
  • 61,973
  • 54
  • 229
  • 402
  • I indeed realize that the free web hosting was loading another jquery version after my page loaded! Hence the conflict. Will using jQuery.noConflict() help the "previous" code or my jquery scripts? I have to apply them to all of the functions I'm running? – Valerie Aug 31 '15 at 05:16
  • @Valerie you call `jQuery.noConflict()` only once and store the result in a variable. – jcubic Aug 31 '15 at 08:37
0

Have you tried using jquery.getScript after the loading of your page is complete? I know you said that you have checked the order of the loading using some third-party tools, but if another script is once again loading jQuery, it is possible that you will lose all the plugins attached to the jQuery variable attached up to that point.

You can check the Network tab in IE(or similar tab in other browsers) to see if this is happening.

Update:

Try the following.

$(function() {
  $.getScript( "/js/jquery.terminal-src.js")
    .done(function( script, textStatus ) { // optional
      // success code here
    })
    .fail(function( jqxhr, settings, exception ) { // optional
      // fail code here
    });

  // the rest of your code here

});
apandit
  • 808
  • 1
  • 7
  • 16
  • I did notice that the ad of the webpage was loading a 'jquery.min.js' after all my scripts were loaded. What can I do about this? I tried putting all my jqueries on the footer of the page, but they still load first before the ad. – Valerie Aug 17 '15 at 13:18
  • @Valerie you can call `var jQ = jQuery.noConflict();` before the second jQuery load and use that in your script. – jcubic Aug 24 '15 at 13:31
  • @jcubic how do I use that variable assignment? I looked at it's api, and I'm a bit confused as to how I can use it since the jquery script (the free webhost's ones) loaded after my jquery script is hidden to me. Or do I declare a jQuery.noConflict() on the jquery version I intend to use and apply it to my code, even if it loads before the webhost's ads/jquery scripts? – Valerie Aug 31 '15 at 05:17
  • @Valerie you call `jQuery.noConflict()` or `jQuery.noConflict(true)` in your code and use the variable instead of $ or jQuery so second jQuery don't touch your version. – jcubic Aug 31 '15 at 08:41