Controls don't render properly after dynamically adding them to the DOM

[Jamar]

Hello, I'm attempting to dynamically add controls using a partial view. The controls properly render upon loading the page;however, upon clicking a button which triggers an ajax call to a partial view to render additional controls, the controls return as normal html input controls and are not styled properly.

Would you be able to help me? I've inserted code and screenshot to illustrate what I'm encountering.

View:

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.EJS().DatePicker("datepicker").Placeholder("Date Performed").Render()

        @Html.EJS().TimePickerFor(model => model.StartTimeOfWorkout).Width("200px").Placeholder("Start Workout Time").Render()

        @Html.EJS().TimePickerFor(model => model.EndTimeOfWorkout).Width("200px").Placeholder("End Workout Time").Render()

        <div class="col-md-12">

            <button type="button" id="add_drill" class="btn btn-default">Add Drill</button>

        </div>

        <div class="table-responsive-sm">

            <table class="table table-striped" id="drill_workout">

                <thead class="drillWorkoutItem">

                    <tr>

                        <th scope="col">Drill Name</th>

                        <th scope="col">Sets</th>

                        <th scope="col">Reps</th>

                        <th scope="col">Delete</th>

                    </tr>

                </thead>

                @foreach (var drillWorkoutViewModel in Model.DrillWorkoutViewModels)

                {

                    @*@Html.Partial("DrillWorkoutPartial", drillWorkoutViewModel, ViewData)*@

                    @Html.Partial("DrillWorkoutPartial", drillWorkoutViewModel)

                }

            </table>

        </div>

        @Html.HiddenFor(m => m.Id)

        @Html.AntiForgeryToken()

        <div class="col-md-12">

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-default" />

            </div>

        </div>

    </div>

}

<script>

    $("#add_drill").on("click", function (e) {

        e.preventDefault();

        $.ajax({

            url: '../Workouts/AddDrillWorkout'

            , success: function (partialView) {

               // $('#drill_workout> .drillWorkoutItem:last-child').append(partialView);

                $("table tbody").append('tr'+ partialView + 'tr');

            }

        });

    });

    $("table").on("click", ".delete_it", function () {

        $(this).parents("tr").remove();

    });

</script>

Partial View:

@{

@using (Html.BeginCollectionItem("DrillWorkoutViewModels"))

{

@Html.EJS().DropDownListFor(model => model.DrillValue).DataSource(@Model.DrillList).Render()

@Html.EJS().TextBoxFor(model => model.Sets).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

@Html.EJS().TextBoxFor(model => model.Reps).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Auto).Render()

}

}

Screenshot:

https://photos.app.goo.gl/RAWi7FSKDkos4vKt7

[Sureshkumar P]

Hi Jamar, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement with shared code. You have missed to evaluate the appended html after appending to the partial view. We suggest you evaluate the appended html to get rid of your issue. 

 

Kindly refer the below code block. 

 

<div id="wrapper"></div> 

 

<button type="button" id="add_drill" class="btn btn-default">Add Drill</button> 

 

<script> 

    $("#add_drill").on("click", function (e) { 

        e.preventDefault(); 

        $.ajax({ 

            url: '../Workouts/AddDrillWorkout' 

            , success: function (partialView) { 

               // $('#drill_workout> .drillWorkoutItem:last-child').append(partialView); 

                $("#wrapper").append(partialView); 

                // evaluate the html element by using eval method 

                eval(document.getElementById('wrapper').querySelector('script').innerHTML); 

 

            } 

        }); 

    }); 

 

    $("table").on("click", ".delete_it", function () { 

        $(this).parents("tr").remove(); 

 

    }); 

</script> 

 

 

 

 

Note: Need to Evaluate scripts manually and must add script manager in partial page also. 

 

If still you have faced the same issue. Then please share the issue reproducing sample to resolve your issue at earliest. 

 

Regards, 

Sureshkumar P 

[Jamar]

Hello,

After implementing your suggestion, I'm encountering the same issue.

View:

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

@Html.EJS().DatePicker("datepicker").Placeholder("Date Performed").Render()

        @Html.EJS().TimePickerFor(model => model.StartTimeOfWorkout).Width("200px").Placeholder("Start Workout Time").Render()

        @Html.EJS().TimePickerFor(model => model.EndTimeOfWorkout).Width("200px").Placeholder("End Workout Time").Render()

        <div class="col-md-12">

            <button type="button" id="add_drill" class="btn btn-default">Add Drill</button>

        </div>

        <div class="table-responsive-sm">

            <table class="table table-striped" id="drill_workout">

                <thead class="drillWorkoutItem">

                    <tr>

                        <th scope="col">Drill Name</th>

                        <th scope="col">Sets</th>

                        <th scope="col">Reps</th>

                        <th scope="col">Delete</th>

                    </tr>

                </thead>

                @foreach (var drillWorkoutViewModel in Model.DrillWorkoutViewModels)

                {

                    @*@Html.Partial("DrillWorkoutPartial", drillWorkoutViewModel, ViewData)*@

                    @Html.Partial("DrillWorkoutPartial", drillWorkoutViewModel)

                }

            </table>

        </div>

        @Html.HiddenFor(m => m.Id)

        @Html.AntiForgeryToken()

        <div class="col-md-12">

            <div class="form-group">

                <input type="submit" value="Create" class="btn btn-default" />

            </div>

        </div>

    </div>

}

<script>

    $("#add_drill").on("click", function (e) {

        e.preventDefault();

        $.ajax({

            url: '../Workouts/AddDrillWorkout'

            , success: function (partialView) {

               // $('#drill_workout> .drillWorkoutItem:last-child').append(partialView);

                $("table tbody").append('tr'+ partialView + 'tr');

               eval(document.getElementById('drill_workout').querySelector('script').innerHTML);

      

            }

        });

    });

    $("table").on("click", ".delete_it", function () {

        $(this).parents("tr").remove();

    });

</script>

[Sureshkumar P]

Hi Jamar, 

 

As we mentioned earlier, please add the script manager in the partial view page for rendering the Syncfusion components properly since we could not see this information in the attached code snippet.  

 

@Html.EJS().ScriptManager()  

 

Still issue persists, please share any issue replicating sample or modify the sample with reported issue that will help us to check and proceed further at our end. Else, we can setup a web meeting to check the issue at your environment.  

 

Regards, 

Sureshkumar P.