JavaScript Function Is Not Firing in Partial View In ASP.NET MVC

Question

I have added some javascript function in my partial page. But it is not firing. Need help.

Thanks in advance

@section scripts {
<script type="text/javascript">
$(document).ready(function () {


    $('#btn').click(function (event) {
        alert("Hi");
        var filterstring = $('#txtCode').val();
        $.get("/Test/Details?filterstring=" + $('#txtCode').val() + "", function (data) {
            var getHTML = $(data);
            $('#WebGrid').empty();
            $('#WebGrid').html($('#WebGrid', getHTML));
            ChkAddClass();
        });
    });


</script>
   }

Answer 1

It is not possible to use sections in a partial view , you have to move this script to main view or use a custom helper.

And also since you are using AJAX you have to use delegated events to attach an event handler.

Please read the Direct and delegated events section of .on() .

$(document).on('click', '#btn', function(){
    alert("Hi");
    var filterstring = $('#txtCode').val();
    $.get("/Test/Details?filterstring=" + $('#txtCode').val() + "", function (data) {
        var getHTML = $(data);
        $('#WebGrid').empty();
        $('#WebGrid').html($('#WebGrid', getHTML));
        ChkAddClass();
    });
});

Thanks!

Answer 2

You are closing you doc ready block after the closing script tag and you are missing );

<script type="text/javascript">
$(document).ready(function () {


    $('#btn').click(function (event) {
        alert("Hi");
        var filterstring = $('#txtCode').val();
        $.get("/Test/Details?filterstring=" + $('#txtCode').val() + "", function (data) {
            var getHTML = $(data);
            $('#WebGrid').empty();
            $('#WebGrid').html($('#WebGrid', getHTML));
            ChkAddClass();
        });
    });

});
</script>