Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In with Google Sign In with OpenID

jQuery version

I'm using a theme that requires a more recent version of jQuery than the 1.8.3 that comes with elefant, but if I use the version bundled with the theme (1.11.0) some elefant functionality fails (adding pages, dragging navigation blocks). I guess I could use 1.11.0 on the frontend and 1.8.3 on the backend, but I want to call admin/head in my layouts so that the frontend will be integrated with the backend. What's the best way to handle this?

Comments

  • I've installed 1.11.3 as well as the jQuery-migrate plugin, so I'll try digging through and seeing where things are broken. So far I've found:

    • js/jquery.verify_values.js line 94: jQuery.fn.attr('value') no longer gets properties - fixed while using jQuery-migrate
    • apps/admin/js/jquery.jgrowl.min.js:jQuery.browser is deprecated` (probably just need to upgrade jGrowl and fix the CSS after the upgrade) - also fixed while using jQuery-migrate
    • Under Navigation and Edit Toolbar, several issues. One might be solved by upgrading jQuery UI, the other requires digging deeper. These simply need to be fixed, jQuery-migrate won't help.

    There's not a perfect solution in the meantime except loading jQuery + jQuery-migrate yourself and living with the Navigation and Edit Toolbar issues, but here's how you can use your own copy in the meantime:

    1. Save both jquery-1.11.3.min.js and jquery-migrate-1.2.1.js into the js folder then run this to concatenate them both into one file:

      cat js/jquery-1.11.3.min.js js/jquery-migrate-1.2.1.js > js/jquery-1.11.3-and-migrate-1.2.1.js
      
    2. Create a conf/app.admin.config.php to set the jQuery source like this:

      ; <?php /*
      
      [Scripts]
      
      jquery_source = "/js/jquery-1.11.3-and-migrate-1.2.1.js"
      
      ; */ ?>
      

    This will load your concatenated script with both jQuery and jQuery-migrate for all pages.

  • Here's one option I found to possibly replace the drag & drop in Navigation:

    https://github.com/dbushell/Nestable

    This is if we can't just update it, but I haven't had a chance to play with it too much yet.

  • I'm trying the conf/app.admin.config.php route -- thanks!

  • Is there a workaround for the drag & drop navigation? Is it safe to edit conf/navigation.json for now?

  • I don't have a workaround for that script yet. The server-side editing of conf/navigation.json via the Navigation class is stable and can be used to programmatically edit that file (or you can carefully edit it directly), but the jQuery side of things still needs updating.

  • I spent some time today updating things to work with jQuery 1.11.3, but haven't pushed anything yet since I'm still working on the drag and drop for navigation and admin toolbar editing. I believe that's the last thing needed now to get us fully compatible with the latest jQuery now.

    Current error message:

    tree-drag-drop.js:132 Uncaught TypeError: Cannot read property 'selectedClass' of undefined
    

    Undefined in this case is an object called options that's defined by calling getOptions($(e.target)) which is just a one-liner:

    function getOptions(el) {
        return el.closest(".treeDragDrop").data("options");
    }
    

    My guess is that e.target which is passed to the handleDraggableStop() function has been lifted out of the <div class="treeDragDrop"></div> so I need to modify it to not look it up via el.closest().

    Will keep my progress updated on here.

  • Doesn't look like replacing it with $('.treeDragDrop').first ().data ('options') works. It gets rid of the error, but the dropped element just disappears now.

  • I installed jquery-browser to test (instead of jquery-migrate) since the original error has to do with $.browser. I'm getting the same error as you usually, but occasionally it works and the item is added to the navigation. If the page is added to the top of the navigation, it seems always to work. Removing items from the navigation works.

  • Why are there different versions of tree-drag-drop.js in apps/admin/js/tree-drag-drop/ and apps/navigation/js/tree-drag-drop/?

  • IIRC the original script in the navigation app was written by @betaman and @BronyBorn duplicated it and customized it for the admin toolbar editor. But it was never refactored into a common library.

  • Another option, but probably a lot of work: http://youmightnotneedjquery.com/

  • Unfortunately, we're relying on jQuery UI's draggable and droppable plugins.

    I believe I've found the issue though, although I'm not sure how to fix it yet. This line seems to be causing the issue:

    https://github.com/jbroadway/elefant/blob/master/apps/navigation/js/tree-drag-drop/tree-drag-drop.js#L243

    Right before that line, the draggable element gets added to the tree just before the marker via marker.before(draggable) so it should be fine when marker.detach() is called, but instead jQuery is removing both elements.

    I've verified that the draggable element is in no way inside the marker:

    $.contains(marker, draggable)      = false
    $.contains(draggable, marker)      = false
    draggable.parents (marker).length  = 0
    marker.find (draggable).length     = 0
    

    Once I've solved this one, fixing the admin toolbar editor should be quick and easy, then I can push a full set of changes that'll get jQuery up to the latest version :D

  • Couldn't find a solution to the marker.detach() issue, but worked around it by simply hiding the marker instead and showing it again on the next drag.

    Just pushed an update that brings jQuery up to 1.11.3 :)

  • I'd like to see drag/drop make use of the HTML5 implementation at some point in the future. HTML5 drag/drop is natively available on modern browsers anyways.

Sign In or Register to comment.