Jquery append MVC PartialView with scripts

Question

I have javascript function which appends PartialView into div. Everything works fine, except that PartialView contains some <script></script> scripts. And those dynamically appended functions are not found by jQuery - Uncaught ReferenceError: getIDc4 is not defined .

My JS function

var url = '@UrlHelper.GetFullUrl("Inventories/GetFilterRow")'; //this returns partial view
        $.ajax({
            type: 'POST',
            data: { aRef: aRef },
            url: url,
            success: function(data) {
                $('.filter').append($(data)[0]);
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = url;
            }
        });

and partial view

...
@{
    int id = Model != null ? Model.Id : 1;
}

<div id="@Html.Raw("FilterCondition" + id)">
...
...
...

    @{
        string getIdcFunction = string.Format("getIDc{0}", id);
    }
    <script>
        @{
            @:function  
                @getIdcFunction<text>() {
            var grid = $("@Html.Raw("#field"+id)").data("kendoDropDownList");
            var item = grid.value();
            return { IDc: item };
        }
            </text>
        }
    </script>

</div>

How can I get those dynamically appended functions get working?

When I generate the partial view by using on page loading with

@Html.Partial("GetFilterRow", new {Id = 1})

everything works fine. The only problem is when this view is appendend via jquery and ajax. Then those functions are not found.

Thanks for help.

Answer 1

You have a couple options that I am aware of. Option one is to include your script in the main view and set the onclick or whichever event you're trying to call to call that function.

For example, in your main view have:

function floorSelect(clickedFloor) {
         doStuff;
         }

And in your partial view have:

    <ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectFloor">
                @For i As Integer = 0 To Model.ListOfFloors.Count - 1
                    @<li role="presentation"><a id="ddListSelectFloor" class="ddListSelectFloor" 
                     onclick="floorSelect(this)" role="menuitem" tabindex="-1">
                     @Model.ListOfFloors(i)</a>
                        </li>
                    Next
                </ul>

Notice the onClick which calls the script from the main view.

Option number 2 is to attach the script via id (you can probably do this to the class as well)

Like this:

@For i As Integer = 0 To Model.ListOfDisplayTypes.Count - 1
                If Model.ListOfDisplayTypes(i).Equals("DatePicker") Then
                @<div class="row">
                    <div class="col-md-4">
                        <b>@Model.ListOfFields(i): </b>
                    </div>
                    <div class="col-md-4">
                        <input class="search" id="@Model.ListOfCategoryAttributeIDs(i)" type="text" placeholder="@Model.ListOfFields(i)">
                    </div>
                    <script>
                        jQuery("input[id='@Model.ListOfCategoryAttributeIDs(i)']").datepicker();
                    </script>
                </div>
                End If
            Next

Answer 2

1.Put the scripts in the partial view into scripts.js file. 2.After you append the partial view into the div use $.getscripts('path of scripts.js') .