Use jQuery only for one script (not interfering with other JS code)

Question

I have a problem, I have written some jQuery scripts:

$(document).ready(function () {
  $('#sshin').keyup(function () {
    var query = $(this).val();
    if(query != '') {
      $.ajax({
        url: "search.php",
        method: "POST",
        data: {query: query},
        success: function (data) {
          $('#sshout').fadeIn();
          $('#sshout').html(data);
        }
      });
    }
  });
  $(document).on('click', 'article', function () {
    var text = $('#sshin').val();
    text = text.substring(0, text.lastIndexOf(',') + 1);
    text += $(this).text();

    var uniq = text.match(/\b\w+\b/g).filter(function (el, idx, a) {
      return idx === a.lastIndexOf(el);
    });

    text = uniq.join(',');

    $('#sshin').val(text);
    $('#sshout').fadeOut();
  });
});

Of course in the index.html file I included the jQuery library and my JS code. Everything worked perfectly fine when I tested it without being included from another file.

My problem is now that my index.html is being included by another file (which I can't change at all) and apparently interferes with other JS, e.g. JQuery Code..

Is it possible to just use the jQuery library I included only for this script or or do you have any other ideas?

If you need any other information let me know.

Error Output:

slim.js:3 
Uncaught TypeError: $(...).live is not a function
at chooseLinkContainer (slim.js:3)
at HTMLDocument.<anonymous> (slim.js:3)
at k (slim.js:2)
at Object.fireWith [as resolveWith] (slim.js:2)
at Function.ready (slim.js:2)
at HTMLDocument.D (slim.js:2)

jquery-1.10.2.js:8672 
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

piwik.js:58 
Uncaught Error: A siteId must be given to add a new tracker
at K.addTracker (piwik.js:58)
at Object.addTracker (piwik.js:66)
at piwik.js:69
at piwik.js:69
at eval (eval at <anonymous> (jquery-1.10.2.js:612), <anonymous>:3:10)
at eval (<anonymous>)
at jquery-1.10.2.js:612
at Function.globalEval (jquery-1.10.2.js:613)
at init.domManip (jquery-1.10.2.js:6281)
at init.append (jquery-1.10.2.js:6047)

Error Messages after i removed my Jquery Reference:

slim.js:2 Synchronous XMLHttpRequest on the main thread is deprecated
because of its detrimental effects to the end user's experience. 
For more help, check https://xhr.spec.whatwg.org/.




piwik.js:58 
Uncaught Error: A siteId must be given to add a new tracker
at K.addTracker (piwik.js:58)
at Object.addTracker (piwik.js:66)
at piwik.js:69
at piwik.js:69
at eval (eval at <anonymous> (slim.js:2), <anonymous>:3:10)
at eval (<anonymous>)
at slim.js:2
at Function.globalEval (slim.js:2)
at HTMLScriptElement.<anonymous> (slim.js:2)
at Function.each (slim.js:2)

I'd suggest you write it in Javascript, if you don't depend on jquery, this kind of thing can't happen. — Fyntasia, Jan 06 '17 at 10:39
Is it possible that you include the errors you are getting when you include the `index.html` in the other file, or at least some indication about what parts of JS and jQuery are overlapping? — Pineda, Jan 06 '17 at 10:42
It also depends on _how_ you are including the `index.html` file in the other file — Pineda, Jan 06 '17 at 10:43
what do you mean by "included in another file?" referenced in an iframe? asynchronously loaded by script? — Ayyash, Jan 06 '17 at 10:51
It's included over PHP and only the body tag will be included in the website — Damon, Jan 06 '17 at 10:58
you may use javascript to load jquery in your code using this [solution](https://www.sitepoint.com/dynamically-load-jquery-library-javascript/) — Aminur Rashid, Jan 06 '17 at 11:00

score 2 · Answer 1 · edited May 23 '17 at 11:53

2

Problem is that You are using two versions of jQuery, one old one with live method which was removed in newest versions. Your jQuery is overwriting the previous one, but question is if jQuery exists then it is real need to add it again?

Few possible solutions:

1.Just remove second jQuery source ( leave there older with live method ) and add script after jQuery is appended to page, good place is somewhere in end of html tag.

2.If solution 1 not work use noConflict for added version ( right after it is appended to page ):

    var myJq = $.noConflict(true);
    function ( $ ){
      //your code
    }(myJq);

The second solution give possibility to use $ sign inside local function scope without conflict with other files, in global scope newest jQuery will be in myJq variable.

Some more helpful information about using multiple jQuery on one page - Can I use multiple versions of jQuery on the same page?

3.Remove second jQuery like in solution 1 and add Your code inside window.onload callback - it will be for sure after all scripts are loaded to page.

window.onload = function() {

  //code
};

edited May 23 '17 at 11:53

Community

1
1

answered Jan 06 '17 at 10:54

Maciej Sikora

19,374
4
49
50

i'm sorry to say but nothing of that worked ..:// i still get the error messages and yea.. – Damon Jan 06 '17 at 11:50
After i removed the second JQuery Library Linking, i still get errors(less but still errors) and this warning message `Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience` – Damon Jan 06 '17 at 12:05
If so that only means the error will exists also if You will remove everything You have done, so this must be different problem there - independent from Your code. – Maciej Sikora Jan 06 '17 at 12:07
If i remove my script(which is attached above), the errors are not there, so it has to do something with my code – Damon Jan 06 '17 at 12:08
"After i removed the second JQuery Library Linking" - You removed your added linking or that one which was there? You need to remove that one added by You. – Maciej Sikora Jan 06 '17 at 12:12
Yeah the one i added is removed, sorry my english isn't the best – Damon Jan 06 '17 at 12:13
Can You paste error messages which appear after removing it - "i still get errors(less but still errors) a" – Maciej Sikora Jan 06 '17 at 12:19
It's in the post now – Damon Jan 06 '17 at 12:23
@Damon sorry but Your jquery code can't have any influence on this error, it is something else here but I don't have a clue. – Maciej Sikora Jan 06 '17 at 12:49
I thought the same but it kind of has to do with that..but still thanks for the help – Damon Jan 06 '17 at 12:50

Use jQuery only for one script (not interfering with other JS code)

1 Answers1