ASP.Net Webform: Add HTML and javascript dynamically

Question

I need a ASP.net application which is only kind of "pageDisplayer" from content which is coming from an API. So I choose ASP.net Webform and tried the following:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PMLetterAcceptance.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:Literal runat="server" id="JavaScript"></asp:Literal>
</head>
<body>
    <form id="letterform" runat="server">
        <div>
            <%= pageContent %>
        </div>
    </form>
</body>

public partial class WebForm1 : System.Web.UI.Page
{
    protected string pageContent = "";

    protected void Page_Load(object sender, EventArgs e)
    {
       ...// here I fetch the html and javascript content from the API

       dynamic json = Json.Decode(streamReader.ReadToEnd());
        if (json.status != "OK")
            pageContent = json.error;
        else
            pageContent = json.html;
        JavaScript.Text = json.script;
    }
 }

The html content and the script are loaded correct but I cannot access DOM elements in the javascript. The javascript looks like that

(function()
{
    function processForm(e)
    {
         ... // Here I want to do some stuff before sending the form
    }

    let form = document.getElementById('letterform');
    if (form.attachEvent)
        form.attachEvent("submit", processForm);
    else
        form.addEventListener("submit", processForm);
})();

No I get the error "form is null". For me it looks like the javascript is executed before the DOM is ready. But how can I change this to make it work like expected?

Odd, because letterform is already on the page. Can you try putting the JS (literal) at the bottom of the page, before the closing body tag? Does, the JS include script tags? — wazz
– wazz, Commented May 20, 2021 at 10:13
In my eyes there is a mistake in your javascript. Your code is designed for executing when the browser reach the lines. — Reporter
– Reporter, Commented May 20, 2021 at 10:17
Oh my god. Sometimes it can be so easy. Putting it at the end of body works fine. thanks a lot — Thallius
– Thallius, Commented May 20, 2021 at 10:20
Added as answer. Can you vote for it please? I'm actually not going for the points, there's just no way to know that a question has been answered in the comments. Drives me a bit nuts checking out questions that seem to have no answer but do. — wazz
– wazz, Commented May 20, 2021 at 10:41

wazz · Accepted Answer · 2021-05-20 10:39:27Z

1

Try putting the JS (literal) at the bottom of the page, before the closing body tag. That way, the HTML will be loaded before the JS tries to find elements.

answered May 20, 2021 at 10:39

wazz

5,0885 gold badges22 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.Net Webform: Add HTML and javascript dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related