Argthtjtr

I have created a very simple jQuery .widget plugin that I am able to use:

<script type="text/javascript">

    (function( $ ) {

        $.fn.widget = function () {

            return this.each(function () {

                let $this = $(this);

                $this.load($this.attr("data-widget-source"), function (response, status, xhr) {

                    if (status == "error") {

                        const msg = "Sorry but there was an error: ";

                        $("#error").html(msg + xhr.status + " " + xhr.statusText);

                    }

                });

            });

        };

    }(jQuery)); 



    $(document).ready(function () {

        $('.widget').widget();

    });

But when I try to use it in a code that have been loaded using .load, it seems to disappear:

$("#mymodal").load("/widget/29/", function(response, status, xhr) {

    if (status === "success"){                       

        M.FormSelect.init(document.querySelectorAll('select') , {});

        // Redirect submit event

        $("#slot_create_form").submit(function(e) {

           ajax_submit(e)

               .done(function( data, textStatus, jqXHR ) {

                   console.log("Slot from widget Form  data received: ");

                   console.log(data);

                   $('.widget').widget(); // Here fails 



           }).fail(function( jqXHR, textStatus, errorThrown ) {

                   console.log("Form ajax error received: ");

                   console.log(errorThrown);

           });

   });

}

It fails with an error

TypeError: $(...).widget is not a function

As @Taplar pointed, The code injected by the $("#mymodal").load() was a full THML page that have its own reference to JQuery. This was reloading JQuery and therefore deleting the plugin.

The issue was corrected using a conditional extends in Django and providing a simpler version of the page without scripts:

{% extends request.no_frame|yesno:"frameless.html,frame.html,frame.html" %}

This request attribute is set by a middleware:

class NoFrameMiddleware:

    def __init__(self, get_response):

        self.get_response = get_response

        # One-time configuration and initialization.



    def __call__(self, request):

        # Code to be executed for each request before

        # the view (and later middleware) are called.

        if "frame" in request.GET:

            request.no_frame = {'frame': request.GET["frame"].lower() == 'false'}



        response = self.get_response(request)



        # Code to be executed for each request/response after

        # the view is called.

        return response

And the load call look like this:

$("#mymodal").load("/widget/29/?frame=False")

The frame.html is the regular page and the frameless.html is a page without headers or anything that disturbs the host page