jquery-ui stopped working #41

andreasplesch · 2017-08-23T00:14:11Z

This page uses jquery outside of X3DCanvas and it works with 3.3:

https://rawgit.com/andreasplesch/Library/45e56e81ebaafc376de420c0fe0aba760ba981b2/Tests/uses_jquery.html

(with cobweb_dom https://rawgit.com/andreasplesch/cobweb_dom/2d0335188c97cba30c5872e88898293a576215c3/tests/jqueryui_cobweb.xhtml
)

but it does not work with the current master:

https://rawgit.com/andreasplesch/Library/b063a2ff06917df8ffde30f1582e5b0d6d4bc8d6/Tests/uses_jquery.html

(with cobweb_dom https://rawgit.com/andreasplesch/cobweb_dom/dc19614a6f98b2b2a210bb468e7f8c37a302abab/tests/jqueryui_cobweb.xhtml )

I have no clue why.

create3000 · 2017-08-23T17:46:15Z

This could be because Cobweb used jQuery v2.x and there was no chance in the current configuration with package management JAM to update jQuery. I decided to switch to NPM as package management system and restructured the project much. I used this occassion also to rename Cobweb into Excite X3D and created the new project https://github.com/create3000/excite. Excite X3D uses jQuery v3.2.1 now. I am still preparing the launch of Excite X3D but you can already use and test it. This means jQuery UI must be compatible with the jQuery version.

URL's are:
https://rawgit.com/create3000/excite/master/dist/excite.css
https://rawgit.com/create3000/excite/master/dist/excite.js

Best regards.

andreasplesch · 2017-08-23T19:00:13Z

This uses the latest query (3.2.1) and jquery-ui(1.12.1) but has the same problem

https://rawgit.com/andreasplesch/Library/a76eb070978c3cdde7b3ae47c68c158a61db6f3c/Tests/uses_jquery.html

The problem seems to be that the page script is executed before jquery is loaded:
Uncaught TypeError: $(...).slider is not a function at uses_jquery.html:36

Somehow the loading sequence must have changed with npm and the restructuring. I tried a couple of ways (body onload, script tag order) to force loading jquery before the page script but without success. Perhaps the page ui script has to go inside the X3D callback now although it is otherwise unrelated to X3D.

andreasplesch · 2017-08-23T19:17:54Z

https://rawgit.com/andreasplesch/Library/03c9b9d9a2fcb479892267c25c970f5d70a0119f/Tests/uses_jquery.html

uses jquery inside the X3D callback but ui is also not available.

create3000 · 2017-08-25T09:48:52Z

Investigated the HTML file and send you now a working file. Although jQuery is included again it could be left away.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Slider functionality</title>
 
		<!-- First  include Excite X3D -->
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/create3000/excite/master/dist/excite.css"/>
      <script type="text/javascript" src="https://cdn.rawgit.com/create3000/excite/master/dist/excite.js"></script>
	
		<!-- Must  include jQuery UI after Excite X3D -->
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"/>
      <script src = "https://code.jquery.com/jquery-latest.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
X3DCanvas {
   width: 768px;
   height: 432px;
}
      </style>

      <!-- Javascript -->
      <script>
$(function()
{
	// Create the sliders
	$(".slider") .slider ({ min: 0, max: 255, step: 1, value: 128, slide: function(e, ui)
	{
		var newCol = $("#redSlider") .slider('option', 'value') + ", "
		             + $("#greenSlider") .slider('option', 'value') + ", "
		             + $("#blueSlider") .slider('option', 'value');

		$("#ctrlContainer").css("background", "rgb("+newCol+")");
	}});
});
      </script>
   </head>
   
   <body>
      <X3DCanvas url='  "https://cdn.rawgit.com/create3000/Library/master/Examples/LogoPieces/index.x3d"  '>
         <p>Your browser may not support all features required by Cobweb!</p>
      </X3DCanvas>
      <div id="ctrlContainer">
        <p>Change the color of the cube using the RGB sliders, which updates the "diffuseColor" attribute of the Material node using jQuery.</p>
        <div id="sliderContainer">
            <ul>
                <li><label>Red</label><div id="redSlider" class="slider"/></li>
                <li><label>Green</label><div id="greenSlider" class="slider"/></li>
                <li><label>Blue</label><div id="blueSlider" class="slider"/></li>
            </ul>
        </div>
      </div>  
   </body>
</html>

andreasplesch · 2017-08-25T14:57:18Z

Thanks, that works:
https://rawgit.com/andreasplesch/Library/302b4644e663546b7a201eb9df79be5469ed6b17/Tests/uses_jquery.html

But jquery-ui 1.12.1 (the latest) does not work for some reason:
https://rawgit.com/andreasplesch/Library/a8d614533f8935c4f501722531fc2816ea63eaa0/Tests/uses_jquery.html

Do you know why it is necessary now to use jquery-ui from within a jquery callback ?

$(function() {
 //use jquery-ui
});

It seems less comfortable than it was for 3.3,
Well, just something to be aware of.

andreasplesch · 2017-08-25T15:21:56Z

Switching down to jquery-ui 1.10.4 also works for the cobweb_dom example

https://rawgit.com/andreasplesch/cobweb_dom/36b3a9c3bcf8490c4ba58cff42b8bb0293de8dea/tests/jqueryui_cobweb.xhtml

and

https://rawgit.com/andreasplesch/cobweb_dom/ea776abaaa727a0bf8ff970de9965812234261c1/tests/html5/jqueryui_cobweb.html

No other changes were necessary.

andreasplesch · 2017-08-25T19:29:56Z

Out of curiosity, I found that jquery-ui 1.10.4 is in deed the latest version which works and 1.11.0 the first which does not. The only hint in the changelog at http://jqueryui.com/changelog/1.11.0/ is perhaps the addition of AMD support via UMD wrappers but I do not understand enough about modules and npm to find out more.

create3000 · 2017-08-26T05:19:17Z

Using jQuery UI or jQuery within the main callback ensures that the document is loaded. Writing $(function () { ... }); is equal to set an onload handler in the body tag.

create3000 · 2017-08-26T05:21:39Z

Maybe should file a bug to jQuery UI if it is otherwise not working, need some test first.

andreasplesch · 2017-08-26T15:45:58Z

Ok. I posted a question to their forum

http://forum.jquery.com/using-jquery-ui

http://forum.jquery.com/topic/jquery-ui-1-11-0-together-with-jquery-packaged-library

Perhaps better to use other UI libraries anyways.

jtara · 2017-08-26T17:17:35Z

Don't use jquery-latest! It is no longer the "latest". It is an obsolete version that is not likely to work well with modern browsers. And current jQuery UI doesn't work with it.

Please burn whatever documentation told you to do that. Always check the freshness date on books, tutorials, and blogs!

If you go to the official jQuery site, you will find nothing that suggests you ought to load jquery-latest.

Load a SPECIFIC VERSION of jQuery. It is a bad practice to assume that the "latest" version of a library is appropriate for you project. jquery-latest was never intended to be used for production (it was intended for the convenience of developers for using during development), but you know about developers and reading instructions. (They don't!) a FEW YEARS ago, jQuery Foundation decided to address the error they'd made in this imperfect way. (Continuing to offer jquery-latest, but freezing the version.)

Here's an explanation of why it is still maintained on the CDNs - so as not to "break the Internet".

Don't use jquery-latest.js

If Cobweb includes jQuery itself, and "steals $" you will have further steps to take. But at least use a jQuery that works with the jQuery UI you are using.

jQuery UI 1.10 is unlikely to work well with modern browsers. Using ancient JS library versions is seldom a solution, unless you can lock-down your users to ancient browsers (like the U.S., Navy...)

andreasplesch · 2017-08-26T18:28:33Z

https://rawgit.com/andreasplesch/Library/a76eb070978c3cdde7b3ae47c68c158a61db6f3c/Tests/uses_jquery.html

is trying to use the cobweb provided jquery which is v.3.2.1 along with jquery-ui 1.12.1

Could you exand on the further steps which could be taken, please ?

jtara · 2017-08-26T19:37:04Z

jQuery UI 1.12.1 will work with jQuery 1.7 or later. It will not work with jquery-latest, since that is an ancient jQuery 1.11.1.

To instantiate jQuery UI widgets, you need to wait for:

DOM ready (your page has loaded fully) otherwise, jQuery can't find your non-existent nodes.
jQuery loaded
jQuery UI loaded

Under normal circumstances, loading scripts synchronously in <head> and enclosing your code in $(document).ready(){}) accomplishes that.

If you (or Cobweb) are using some asynchronous loader, it is up to you to research how to achieve the above conditions. Usually, such loading schemes will have their own callback equivalent to $(document).ready() which will insure the scripts have first been loaded.

Additionally, it should be obvious that jQuery need to be loaded prior to jQuery UI. Again, if some asynchronous scheme is used, you need to insure that the load order using whatever means that scheme requires.

jtara · 2017-08-26T19:44:39Z

Did you look at the console? You have an error in your cobweb load.

Uncaught error: mismatched anonymous define() module.

Hard to diagnose, since you are loading a minified cobweb.

But I notice that it loads AFTER your call to .slider() so if it has jQuery built-in, your code can't possibly work. (Question: does minified Cobweb actually expose jQuery? Or was it mangled-away?)

I guess there is some asynchronous loading going on here. You need to take it up with the Cobweb folks.

Don't load scripts in body!

During debugging, don't load minified scripts, it only makes it difficult to see what is going on.

And jQuery UI can't possible work with jQuery commented-out.

Please go to jQuery UI website and FOLLOW THE INSTRUCTIONS for basic jQuery UI usage. Get it working first without Cobweb. Scripts loaded in <head>. $(document).ready({...}); around your slider instatiation.

andreasplesch · 2017-08-26T21:24:32Z

Thanks, for looking into this.
Yes, I noticed the console error message but I could not further analyse it and was hoping that this is a known, common problem with libraries which use jquery internally via require and npm building.
Here are a couple of fiddles:

without cobweb
https://jsfiddle.net/1936oo8n/
with cobweb (master)
https://jsfiddle.net/1936oo8n/2/
The issue only appeared after a change in cobweb going from yam to npm for building, and updating internal jquery to 3.2.1. Before the change it worked:
with cobweb 3.3
https://jsfiddle.net/1936oo8n/3/
I am not sure if cobweb makes its internal jquery available but I believe so since there must be some interaction.
This issue is an attempt to work with the cobweb folks to address this. There may be no straightforward solution. That is ok, just something to be aware of.

jtara · 2017-08-26T21:42:05Z

Your issue really has nothing to do with either Cobweb or jQuery or jQuery UI.

If you are using some module packager or asynchronous loading or what-not, you need to learn how to use them.

I'd suggest you:

get your UI working first without Cobweb. That should be easy. Just follow the instructions on the jQuery site. jQuery Learning Center will get you going in the right direction if you are unfamiliar. It is an excellent resource.
Get Cobweb going without jQuery UI.
STOP AND READ THE INSTRUCTIONS. For jQuery. For jQuery UI. For Cobweb. And for jsFiddle.

When you make Fiddles, leave out parts that have nothing to do with the issue you are illustrating. And for gosh sakes, use the Tidy button. It takes one click.

I've fixed your first Fiddle.

jQueryUI slider example

(I do realize it "worked" before I changed it. But if you don't follow conventions, you are going to make it difficult for anybody to help you.)

jtara · 2017-08-26T21:54:55Z

I made you a new Fiddle with JUST cobweb 3.3.

https://jsfiddle.net/g00Lgdtt/

If you add /show, you can then easily use browser inspection tools. Use the tools in every desktop browser to inspect/debug:

https://jsfiddle.net/g00Lgdtt/show/

It is trivial to determine that Cobweb doesn't expose jQuery, at least in the minified version from their CDN.

Just type jQuery on the Javascript console. It is undefined.

Please just follow a disciplined approach, testing one thing at a time.

I'd suggest you make a test with the unminified version, then with minified/unminified of the latest build.

Or anybody here who is familiar with Cobweb can probably answer if it exposes jQuery, or you can just go to the Cobweb site and read the instructions.

Cobweb github says NOTHING about jQuery. I don't know why one would assume that it exposes it or even uses it.

jtara · 2017-08-26T22:16:35Z

Cobweb master ONLY (no sliders, no jQuery UI):

https://jsfiddle.net/rezjLgpd/
https://jsfiddle.net/rezjLgpd//show

jQuery is not defined.

However, $ (normally used as alias to jQuery) IS defined.

I can't guess if it is jQuery, or something else that somebody decided to call $.

It's probably a bad idea for libraries to steal $, given the prevalence of jQuery. It only makes things difficult for developers.

You can load your own jQuery, but will need to use jQuery(...) instead of $(...) or wrap your UI code in a self-executing function that passes jQuery as a parameter and $ as the argument name.

As well, the Cobweb CSS file you linked is missing, 404 error.

And I get a message:

Your browser may not support all features required by Cobweb!

I am using Chrome 60.0.3112.101

This illustrates why it is so important to test one thing at a time.

jtara · 2017-08-26T22:56:26Z

Works:

https://jsfiddle.net/80f8vmvy/

Cobweb is going to make 99% of developers hate them by adopting $ for their own use, though. Hopefully it is a bug/oversight.

andreasplesch · 2017-08-27T03:01:45Z

Wow, why hold back ? Yes, hopefully it is. Thanks again, closing.

create3000 · 2017-08-27T16:11:09Z

The master version of Excite X3D will not expose any global variable to the JavaScript window object except the X3D function object. This means if you want to use jQuery you have to include your own version which is probably always desired. Internally Excite X3D calls jQuery.noConfict(true) after load. Now, jQuery can be included before or after Excite X3D.

andreasplesch changed the title ~~jquery stopped working~~ jquery-ui stopped working Aug 25, 2017

andreasplesch closed this as completed Aug 27, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery-ui stopped working #41

jquery-ui stopped working #41

andreasplesch commented Aug 23, 2017 •

edited

create3000 commented Aug 23, 2017

andreasplesch commented Aug 23, 2017

andreasplesch commented Aug 23, 2017 •

edited

create3000 commented Aug 25, 2017

andreasplesch commented Aug 25, 2017 •

edited

andreasplesch commented Aug 25, 2017

andreasplesch commented Aug 25, 2017 •

edited

create3000 commented Aug 26, 2017

create3000 commented Aug 26, 2017 •

edited

andreasplesch commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

andreasplesch commented Aug 26, 2017

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

andreasplesch commented Aug 26, 2017

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017

andreasplesch commented Aug 27, 2017

create3000 commented Aug 27, 2017

Navigation Menu

jquery-ui stopped working #41

jquery-ui stopped working #41

Comments

andreasplesch commented Aug 23, 2017 • edited

create3000 commented Aug 23, 2017

andreasplesch commented Aug 23, 2017

andreasplesch commented Aug 23, 2017 • edited

create3000 commented Aug 25, 2017

andreasplesch commented Aug 25, 2017 • edited

andreasplesch commented Aug 25, 2017

andreasplesch commented Aug 25, 2017 • edited

create3000 commented Aug 26, 2017

create3000 commented Aug 26, 2017 • edited

andreasplesch commented Aug 26, 2017 • edited

jtara commented Aug 26, 2017 • edited

andreasplesch commented Aug 26, 2017

jtara commented Aug 26, 2017 • edited

jtara commented Aug 26, 2017 • edited

andreasplesch commented Aug 26, 2017

jtara commented Aug 26, 2017 • edited

jtara commented Aug 26, 2017 • edited

jtara commented Aug 26, 2017 • edited

jtara commented Aug 26, 2017

andreasplesch commented Aug 27, 2017

create3000 commented Aug 27, 2017

andreasplesch commented Aug 23, 2017 •

edited

andreasplesch commented Aug 23, 2017 •

edited

andreasplesch commented Aug 25, 2017 •

edited

andreasplesch commented Aug 25, 2017 •

edited

create3000 commented Aug 26, 2017 •

edited

andreasplesch commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited

jtara commented Aug 26, 2017 •

edited