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.

Never put scripts in partials. Put them in the main view or layout — user3559349
– user3559349, Commented Oct 22, 2015 at 19:36
yes, but I need it in this case... Is there any workaround to get this working? — Maarty
– Maarty, Commented Oct 22, 2015 at 19:39
Why do you think you need it? What is it that you are trying to do? — user3559349
– user3559349, Commented Oct 22, 2015 at 19:42
well I need to generate the function with names like name1, name2, name3 ... the reason is that, the external component, which I use, doesn't support function parameters for callback, so I can't just call name(id), I can only specify the name of the function, so thus for every component I create a new function.... it is ugly but I don't see other workaround — Maarty
– Maarty, Commented Oct 22, 2015 at 19:47
Does the external component contain a reference back to the original element? Perhaps you could use jQuery $.data() to set custom data on each element and then retrieve it in your callback? Edit: you could also try moving the script outside of the <div> tag and give it type="text/javascript". jQuery should automatically parse script tags. Take a look at Microsoft's jQuery.unobtrusive-ajax.js for an example of how they handle Ajax.ActionLink. Scripts in Partial Views using this method are parsed and executed just fine. — Michael Gagne
– Michael Gagne, Commented Oct 22, 2015 at 20:47

user4103496 · Accepted Answer · 2015-10-22 19:52:09Z

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

J Santosh · Accepted Answer · 2015-10-23 05:49:31Z

0

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').

edited Oct 23, 2015 at 5:49

J Santosh

3,8223 gold badges25 silver badges44 bronze badges

answered Oct 23, 2015 at 5:36

Sriman Saswat Suvankar

6431 gold badge7 silver badges16 bronze badges

1 Comment

J Santosh Over a year ago

good idea . but this will not work because OP is writing JS in razor . check the OP once , you can see text tags. so it is not just JS, it is something like dynamic JS code

Collectives™ on Stack Overflow

Jquery append MVC PartialView with scripts

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related