Loading file on JQuery dialog open

Question

I have a JQuery dialog and inside that I am loading partial view

       $("#WOdialog").dialog({
                    width: 765,
                    resizable: false,
                    closeOnEscape: true,
                    modal: true,
        close: function () {

        },
        open: function () {
              $(this).load("@Url.Action("AddWorkOrder")");
        }
      });

That partial view is regular html file and but it contains some <script></script> tags. The problem here is that my website is working locally but not when deployed. I suspect on this error

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

I know it has something to do with async keyword and loading external JS files. Searched SO and none of solutions helped me.

Answer 1

$("#WOdialog").dialog({
            width: 765,
            resizable: false,
            closeOnEscape: true,
            modal: true,
close: function () {

    },
open: function () {
      //$(this).load("@Url.Action("AddWorkOrder")");
      //Try this
      var $self = $(this);
      var url  = '@Url.Action("AddWorkOrder")';
      $.ajax({
            url: url,
            cache: false,
            async: true
        })
        .done(function( html ) {
            $self.append( html );
        });
    }
});