search

create3000 / cobweb

Cobweb is now X_ITE
https://github.com/create3000/x_ite
Other
10 stars 5 forks source link

jquery-ui stopped working #41

Closed andreasplesch closed 7 years ago

andreasplesch commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

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

create3000 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

andreasplesch commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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:

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 commented 7 years ago

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 commented 7 years ago

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:

jtara commented 7 years ago

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:

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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

create3000 commented 7 years ago

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.