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>
   }

@Shariful_Islam have you check in browser? is there any error you get? — Sid, Jul 24 '14 at 12:03
I checked it in crome developer tools. but function is not firing — Shariful_Islam, Jul 24 '14 at 12:06
Had this exact problem. My problem is when I clicked on a table row inside of a partial (modal/dialog) I wanted to call a function. I figured it would be best to keep the function with the partial for readability. This process worked fine with other partials, but one partial in particular it would just not call the function (defined in the same partial) assigned to the onclick event.. No console errors or anything. Put a debugging breakpoint to verify not being called. It would only call if I took out, " var serialNumberStr = $(rowInstance).data('value');" otherwise ignored it. — eaglei22, Jan 17 '17 at 16:26
I only was able to fix this by moving the function to the view rather than partial. Odd thing is it worked fine for other partials this exact same way, and worked if I took out that line. It's probably some weird bug.. But without console errors it's hard to determine what is happening. — eaglei22, Jan 17 '17 at 16:27

score 4 · Accepted Answer · edited May 23 '17 at 11:53

4

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!

edited May 23 '17 at 11:53

Community

1
1

answered Jul 24 '14 at 12:05

Saranga

3,178
1
18
26

I tried it like that. But its not working. Even in page source I did not find my javascript. – Shariful_Islam Jul 24 '14 at 12:10
It is not possible to use sections in a partial view, I updated my answer. – Saranga Jul 24 '14 at 12:15

score 2 · Answer 2 · answered Jul 24 '14 at 11:55

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>

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

2 Answers2