My javascript is not loaded when I am using html.begin form in the views page of MVC

Question

0.00/5 (No votes)

See more:

, +

When I am using the html.begin some of the JavaScript functions aren't being loaded. I am using partial view and I am calling the partial view page using AJAX in the main page and adding the partial view in a tab.

I have added the @Using(Html.BeginForm()) and within the beginform I placed the the html code upto the submit button.

When I add the Html.BeginForm some of the javascript functions are not loading

This is my AJAX code to call the partial view page

<script>

        $(document).ready(function () {
            var urlPath = "/AdminManagement/EditRequestPV";

            //console.log(urlPath)
            $.ajax({
                type: "POST",
                cache: false,
                url: urlPath,
                async: true,
                data: {
                    id: $("#requestid").val(),
                    isSaved: $("#savedid").val()

                },

                success: function (result) {
                    console.log("edit data");
                    $('.spinner').css('display', 'none');
                    $('.tab').css('filter', 'blur(0px)');
                    $("#datasub").html('');
                    $("#datasub").html(result);

                },
                error: function () {
                }
            });
        });

    </script>

This is my Partial view page

@using (Html.BeginForm("EditRequest", "AdminManagement", FormMethod.Post, new { id = @ViewBag.id }))
    {
<div>
Html code upto submit button
</div>
}

This is the JavaScript code in the partial view page. It is just a example part as the JS has more functions just to how the JS as example I added limited code.

<script>
$(document).ready(function () {
        getServiceTree();
        console.log("admin");
        function getServiceTree() {
            $.ajax({
                type: "POST",

                url: "/AdminManagement/GetServiceTree",
                contentType: false,
                cache: false,
                beforeSend: function () {
                },
                complete: function () {

                },
                success: function (data) {
                    //console.log("data");
                    $("#service-text").hide();
                    commonjs.initServiceDropdown(JSON.parse(data));
                }
            });
        }
function fillSubscriptionNotes() {
        sub_data = $("#request_UserNotes").val();
        if (sub_data.length >= 250) {
            $("#Subnotestext").show();
            $('input[type=submit]').attr("disabled", "disabled");
        }
        if (sub_data.length < 250) {
            //console.log("ture dta");
            $("#Subnotestext").hide();
            $('input[type=submit]').removeAttr('disabled');
        }
    }
</script>

What I have tried:

I have tried add the html.beginfrom in the main page instead in the partial view even it has same issues

Posted 29-Mar-23 0:30am

sadiq shaik 2023

Updated 30-Mar-23 0:15am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2023-03-30T00:15:00

The problem is nothing to do with the BeginForm call. It's simply that you're calling jQuery's html method, which sets the element's innerHTML property; when you do that, the <script> elements will be inserted, but not executed.

javascript - Can scripts be inserted with innerHTML? - Stack Overflow[^]

To make the scripts execute, you need some additional code:

JavaScript

success: function (result) {
    console.log("edit data");
    $('.spinner').css('display', 'none');
    $('.tab').css('filter', 'blur(0px)');
    
    $("#datasub").empty().html(result);
    
    // Execute the scripts:
    document.getElementById("datasub").querySelectorAll("script").forEach(script => {
        const clone = document.createElement("script")
        for (const attr of script.attributes) {
            clone.setAttribute(attr.name, attr.value)
        }

        clone.text = script.innerHTML
        script.parentNode?.replaceChild(clone, script)
    });
},

NB: Pay attention to the jQuery docs:

.ready() | jQuery API Documentation[^]:
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:

$( handler )
$( document ).ready( handler )
$( "document" ).ready( handler )
$( "img" ).ready( handler )
$().ready( handler )

As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.

Both of your scripts are using a deprecated syntax, which could be removed in a future version.