$(...).sortable is not a function when in JQuery callback

Question

With this HTML (twig) :

 <li class="ipsFieldRow">
    <ul id="customSortable">
        {% for plugin in plugins %}
        <li id="{{plugin.name ~ '-sort'}}">{{plugin.name}}</li>
        {% endfor %}
    </ul>

        <script>
 //Put Here Works Fine

         $("#customSortable").sortable();
         $("#customSortable").disableSelection();

 //Put in a document ready causes the '$(...).sortable is not a function' error.

        $(document).ready(function() {
              $("#customSortable").sortable();
                $("#customSortable").disableSelection();
        });
        </script>

 <li

The problem is described through the two comments in the code. Simply put, .sortable works perfectly when simply inlined into the HTML yet in any jquery callback, it results in the sortable is not a function error. The main reason why this is an issue for me is I want to call sortable('toArray') in a button click callback for server interaction.

As seen through the image, the common issue of the includes being in the wrong order is not the issue here.

Try to put the js which define `sortable` to last. I think the `$` object was overrided. — Terry Wei, Jul 03 '18 at 01:54
@SLaks your probably correct, considering I'm writing a widget for a forum software, so alot is out of my hands regarding if they decide to include jquery later. Is there any foolproof way to get around this? — , Jul 03 '18 at 01:57
Have you tried [deferring the load of JQuery-ui?](https://stackoverflow.com/q/5852767/8371135) — Rodrigo Ferreira, Jul 03 '18 at 02:11

score 0 · Accepted Answer · answered Jul 03 '18 at 02:18

You should wrap your code in an IIFE to give yourself an isolated scope.

You can then save a local reference to your jQuery instance, so you'll be unaffected by future changes to the global window.$.

If you installed jQuery yourself (as opposed to relying on an existing copy), you may also want to call .noConflict().

$(...).sortable is not a function when in JQuery callback

1 Answers1