I am trying to load partial view in a main view based on Ajax on click of a button.

The javascript doesn’t get fired. What is wrong?

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnLoad').click(function () {
            alert("i am in");
            $.ajax({
                type: 'GET',
                url: '/Role/Add',
                dataType: "html",
                success: function (content) {
                    $('#partialcontent').html(content);
                },
                error: function (e) { }
            });
        });
    });

</script>
<div style="float:right">
      
        <input id="btnLoad" type="button" value="click to add" />
</div>
<div id="partialcontent">

 </div>

The code itself looks OK as far as handling the click event. perhaps it’s the placement of the script? Or maybe it’s not rendering on the client. Do a view source on the page and make sure you see that script block in the rendered html. 

Hi Abhi,

Your code is fine. Can you show us the complete code to debug?

@model IEnumerable<RModel>

@{
    Layout = "~/Areas/Feature/Views/Shared/Administrator.cshtml";
}

<style>
    .background {
        background-color: Red;
        font-weight: 700;
    }
</style> 
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnLoad').click(function () {
            alert("i am in");
            $.ajax({
                type: 'GET',
                url: '/Feature/Add',
                dataType: "html",
                success: function (content) {
                    $('#partialcontent').html(content);
                },
                error: function (e) { }
            })
        });

        var tr = $('#tlbRoleinfo').find('tr');
        tr.bind('click', function (e) {
            $(this).addClass('background');
            var id = $(this).closest('tr').children('td:eq(0)').text();
            $.ajax({
                type: "GET",
                url: "/Feature/Edit/" + id,
                dataType: "html",
                success: function (evt) {
                    $('#partialcontent').html(evt);
                },
                error: function (req, status, error) {
                    alert("Error!Occured");
                }
            });
        });
        tr.bind('mouseleave', function (e) {
            $(this).removeClass('background');
        });
    });

</script>

<div>
    <div style="float:right">
        <input id="btnLoad" type="button" value="click to add" />
    </div>
</div>

<div>
    <div>
        <div>
            <table id="tlbRoleinfo">
                    <tr>
                        <th>Feature</th>
                        <th>Description</th>
                    </tr>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>  @Html.DisplayFor(modelitem => item.Feature)</td>
                            <td>  @Html.DisplayFor(modelitem => item.Featuredescription)</td>
                        </tr>
                    }
                
            </table>
        </div>
    </div>
    <div id="partialcontent">

    </div>
</div>

This how main view looks in which i am trying to load PartialEdit view and PartialAdd view via Ajax.

I see another error at line 38 like below

Unhandled exception at line 38, column 5 in http://localhost:49843/en/admin/Role

0x800a1391 – JavaScript runtime error: ‘$’ is undefined

you need to add a reference to the jquery script 

@model IEnumerable<RModel>

@{
    Layout = "~/Areas/Feature/Views/Shared/Administrator.cshtml";
}

<style>
    .background {
        background-color: Red;
        font-weight: 700;
    }
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#btnLoad').click(function () {
            alert("i am in");
            $.ajax({
                type: 'GET',
                url: '/Feature/Add',
                dataType: "html",
                success: function (content) {
                    $('#partialcontent').html(content);
                },
                error: function (e) { }
            })
        });

        var tr = $('#tlbRoleinfo').find('tr');
        tr.bind('click', function (e) {
            $(this).addClass('background');
            var id = $(this).closest('tr').children('td:eq(0)').text();
            $.ajax({
                type: "GET",
                url: "/Feature/Edit/" + id,
                dataType: "html",
                success: function (evt) {
                    $('#partialcontent').html(evt);
                },
                error: function (req, status, error) {
                    alert("Error!Occured");
                }
            });
        });
        tr.bind('mouseleave', function (e) {
            $(this).removeClass('background');
        });
    });

</script>

<div>
    <div style="float:right">
        <input id="btnLoad" type="button" value="click to add" />
    </div>
</div>

<div>
    <div>
        <div>
            <table id="tlbRoleinfo">
                    <tr>
                        <th>Feature</th>
                        <th>Description</th>
                    </tr>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>  @Html.DisplayFor(modelitem => item.Feature)</td>
                            <td>  @Html.DisplayFor(modelitem => item.Featuredescription)</td>
                        </tr>
                    }
                
            </table>
        </div>
    </div>
    <div id="partialcontent">

    </div>
</div>

that should do the trick

you only have to add a reference to the script in your ‘main’ view your partials will read the script from their parent. so scripts in your partial views should just work

Do i need to separately reference to the jquery script? In MVC 5 all the Jquery is in project by default.

When you have these types of problems you can press F12 in the browser and review the console window which will show Javascript and JQuery errors.  Maybe that will help you.

Hi abhi0410,

Thanks for your post.

abhi0410

Do i need to separately reference to the jquery script? In MVC 5 all the Jquery is in project by default.

Not exactly,you can add the Jquery script reference to Layout.cshtml and then add the layout to your view what you used.

Of course,you also add separately it on your view.

Hope this can be helpful.

Best Regards,

Eileen

Hi Eileen,

I have done that. I have my jquery files added to my layout.cshtml and script is in my view files.

abhi0410

Hi Eileen,

I have done that. I have my jquery files added to my layout.cshtml and script is in my view files.

you’re using another layout file:

    Layout = "~/Areas/Feature/Views/Shared/Administrator.cshtml";

check if you referenced the jquery script in there

Yes. That is my Admin layout. I have give different name for layout.cshtml.

Hi abhi0410,

Thanks for your reply.

please check if you register Jquery version in BundleConfig.cs,like this:

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

Hope this can be helpful.

Best Regards,

Eileen

Hi Eileen,

Yes it is added.

Hi abhi0410,

Thanks for your reply.

if you  have registered Jquery version in BundleConfig.cs and then you need to add this in layout

@Scripts.Render("~/bundles/jquery")

Hope this can be helpful.

Best Regards,

Eileen