Scripts for PartialView MVC3 Not Loading

Question

I am using ASP MVC3 for which i am using a partial view but the issue is am not able to load the scripts into the same. Below is an code for which i have tried:

<script type="text/javascript">
    $('#bodytag').load(function () {
        alert('Load was performed.');
    });
</script>
<div class="acc-expand-bkg" id="bodytag">
    <div class="submenu_dropdown clearfix">
        <div class="filter_bar clearfix">
            <div class="left" style="margin-left: 10px;">
                <label style="width: auto; margin-top: 7px;">
                    Standard:</label>
                @Html.DropDownList("teamDetailId", ViewBag.TeamNames as SelectList, null, new { id = "teamDetailId" })
            </div>
        </div>
    </div>
</div>

The above partial view is not getting loaded with the script. I tried with document.ready neither it worked for it. Can you please tell me the work around for the same.

Thank you in advance

Answer 1

Try like this:

<script type="text/javascript">
    alert('Load was performed.');
</script>

But normally scripts should not be placed inside partial views. They should not be mixed with markup. Normally scripts belong to separate javascript files. So a better approach would be to define a javascript function in a separate file:

function doSomething() {
    alert('Load was performed.');
}

and then invoke this javascript function once you load the partial view using AJAX:

$.ajax({
    url: 'some url',
    type: 'post',
    success: function(result) {
        $('#someId').html(result);
        // the partial view was injected into the DOM => now we could
        // invoke our function:
        doSomething();
    }
});

Answer 2

The load function is used to load content from server using ajax and update the inner content of the specified html element. You have to pass the server url as the first argument to the method.

$('#bodytag').load('ajax/test.html', function() {
  alert('Load was performed.');
});

You have to put the script block below the html.