How to get code written for recent JQuery version to work with JQuery 1.9.1?


#1

Hi.

I have a long and complicated code (see link below) that I need to work with JQuery 1.9.1.

Is there an online tool or something similar where the existing code could be pasted, the version of JQuery specified and the tool suggests the relevant alternative code?

If not, what other options are available to me to achieve my aim?

Thanks.

Paul, not sure if you have been following my other thread (mainly post# 21 at the link below) but I still have not managed to get our project to work (from within SharePoint)!

As you are the author of the code in question, any input you may have would be most appreciated.

Thanks.


#2

You can tell jsfiddle which version of jQuery that you want it to use. Then you can test the code, and if any problems occur you can use the browser console to learn more about the problem.

Sorry but SharePoint is something that I have no knowledge about.


#3

Hi Paul!

Thanks for your reply.

Sorry, I meant "from" post #21.

Anyway, I tried your suggestion and it seems to be working when I specify JQuery 1.9.1 in JSFiddle.

Back to questioning the IT Administrators at work!

Thanks.


#4

Sorry, my mistake. At your fiddle page (https://jsfiddle.net/kbq7ymbk/64/) it works fine at default JSFiddle settings and also, if I change 'JavaScript (No-Library (pure JS))' to any of the following:

jQuery 3.2.1 (jQuery 3.2.1)
jQuery 3.1.1 (jQuery 3.1.1)
jQuery 2.2.4 (jQuery 2.2.4)

but stops working if I change it to the following:

jQuery 2.1.3 (jQuery 2.1.3)
jQuery 1.9.1 (jQuery 1.9.1)

With 1.9.1 selected, I get the following error under the JS tab in the web console:

TypeError: url.indexOf is not a function jquery-3.1.1.js:9793:9
jQuery.fn.load() jquery-3.1.1.js:9793
_display:133

I have looked at the two versions of JQuery (3.2.1 and 1.9.1) and compared both, however, I don't know what to make of the differences in code:

3.2.1:
jQuery.fn.load = function( url, params, callback ) {
var selector, type, response,
self = this,
off = url.indexOf( " " );

if ( off > -1 ) {
    selector = stripAndCollapse( url.slice( off ) );
    url = url.slice( 0, off );
}

1.9.1:
jQuery.fn.load = function( url, params, callback ) {
if ( typeof url !== "string" && _load ) {
return _load.apply( this, arguments );
}

var selector, response, type,
    self = this,
    off = url.indexOf(" ");

if ( off >= 0 ) {
    selector = url.slice( off, url.length );
    url = url.slice( 0, off );
}

#5

That's due to jsfiddle using the onLoad event to load the script, which the older jQuery libraries give trouble with.

The most reliable solution is to change jsfiddle's JavaScript settings so that the load type is body. That loads the script from the end of the body which has been the most reliable solution for all JavaScript for years now.


#6

OK, that made it work in JSFiddle.

To load the script from the end of the body in the actual code, if it's just a case of moving the body to the top, I'll give that a try and see if it works for the actual webpage.

Thanks.


#7

Just before the </body> tag is where the script goes.

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Page title</h1>
  <p>Page content</p>
  <script src="js/script.js"></script>
</body>
</html>

#8

Edit:

a tyop had me saying <body> instead of </body>

#9

Thanks Paul; will test it at work.

A 'tyop', HAHAH.


#10

Unfortunately, moving the JS to the bottom didn't work. With version 1.9.1, the list is narrowed down as you type but clicking on an item in the list doesn't do anything. With version 3.2.1 the list doesn't narrow down at all.

Thanks for your help, Paul.


#11

That sample code has result panels for the first 4 items in the unfiltered list, which do show. The other items in the list do not have a result panel because that is sample code, and the result panels for those other items are not in the HTML code of the sample code.

Clicking on them does work when the item has an appropriate entry in the results section.

You can see the code working with jQuery 1.9.1 and loading from the end of the body, at https://jsfiddle.net/kbq7ymbk/67/


#12

Thanks Paul.

Sorry if I wasn't too clear. I meant that it didn't work in the actual html file at work, not in the fiddle. I moved the JS to the bottom of the actual HTML file (as per your post #7) but it gave the results stated in my post #10.


#13

Then the code from the jsfiddle doesn't seem to be related to the problem.

Unless you can share with us the code from the actual html file at work, there's little more that we can do to help.


#14

Thanks for your reply, Paul.

The javascript/JQuery code in the actual file is exactly the same as the one you kindly compiled, except for one minor thing. The only thing I changed was a 0 to 1 (or 1 to 0, can't remember) which I think was to allow the Close All button to appear for one div result box also, but not sure.

I will try to obtain some info regarding the SharePoint side of things and post back with any discoveries.

Thanks again.


#15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.