How to make $.load() execute scripts that get returned in HTML via AJAX?

Question

I am making an AJAX call and get back a partialView. In this partialView I have script that I want to execute. After searching on the Internet I found that I need to use "eval" in order to make this work. After this I found that the $.load() method does this for me.

However it is not working for me.

My code:

View:

<div class="col-md-12" id="headerContainer">
    <div class="col-md-4 col-xs-12 itemContainerHeader">
        <h4> Namn</h4>

    </div>
    <div class="col-md-4 col-xs-12 itemContainerHeader">
        <h4> Epost</h4>
    </div>
    <div class="col-md-4 col-xs-12 itemContainerHeader">
        <h4> Nummer</h4>
    </div>
</div>

@foreach (var c in Model.Customers)
{
    <div class="col-md-12 col-xs-12 containerListItem">

        <div class="col-md-4 col-xs-12">
            @(c.FirstName + " " + c.LastName)
        </div>
        <div class="col-md-4 col-xs-12">
            @c.Email
        </div>
        <div class="col-md-4 col-xs-12">
            @c.PhoenNumber
        </div> 
    </div> 
}

@section Scripts {
    <script type="text/javascript">
            $.scissors.customers.init();
    </script>
}

The init method do not get executed when loading the page with AJAX:

  getView: function (url, callback, options) {
    var settings = {
        target: "#contentContainer"
    }

    $.extend(settings, options);

    $.LoadingOverlay("show");

    $(settings.target).empty().load(url, function (data) {

        if (callback)
            callback();
        $.LoadingOverlay("hide");
    });
}

jQuery documentation for $.load():

Script Execution

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed. An example of both cases can be seen below:

Here, any JavaScript loaded into #a as a part of the document will successfully execute.

1 $( "#a" ).load( "article.html" );

What am I missing?

Answer 1

This script:

$.scissors.customers.init();

only gets executed if the main view has loaded the library globally. ie the library at head section of the page:

<script src='jquery.js'></script>
<script src='scissors.js'></script>

if scissors.js is available in the global scope then your script will get executed when you .load() .

Answer 2

After a while I figured this out.

The problem was the razor syntax here:

@section Scripts {
    <script type="text/javascript">
            $.scissors.customers.init();
    </script>
}

I made an AJAX call and returned a partialView and when the new HTML gets appended to the DOM the browser did not know how to read the razor syntax.

I simply removed the razor syntax like this and it worked:

<script type="text/javascript">
        $.scissors.customers.init();
</script>

However I want to point out that this was/is not a best practice soloution. I have a function getView that also accepts a callback parameter and it is better practice to call the init function in the callback like so:

     $.scissors.worker.getView("/Customer/GetCustomer", function () {
            $.scissors.customers.customerCard.edit.init();
        }, options);