Using textbox text in javascript

Question

I am working with Twitter widgets with the following script-

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="button" value="Run Function" onclick="test();" />   
<script>

function test() {

    new TWTR.Widget({
        version: 3,
        type: 'profile',
        rpp: 8,
        interval: 30000,
        width: 315,
        height: 340,
        theme: {

            shell: {
                background: '#333333',
                color: '#ffffff'


            },
            tweets: {
                background: '#000000',
                color: '#ffffff',
                links: '#4aed05'

            }
        },
        features: {
            scrollbar: false,
            loop: false,
            live: false,
            behavior: 'all'

        }
    }).render().setUser(document.getElementById('TextBox1').value).start();
}

When using the function test(); in the button click it is ocming up with the error -

Error: Unable to get value of the property 'value': object is null or undefined

So it seems like it is not getting to the value at -

(document.getElementById('TextBox1').value)

I am not sure why it is null if the text box has a value and then the script is run on the button click?

Can you provide your html as well? Is there a textbox with the html id "TextBox1"? — AJ.
– AJ., Commented Jun 11, 2012 at 9:37
Is that not defined at the top of the example at - <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> ? — Ebikeneser
– Ebikeneser, Commented Jun 11, 2012 at 9:47
When I view the source of the page, id="MainContent_TextBox1" is the text box is the id however when I search of that element I still get the same error. — Ebikeneser
– Ebikeneser, Commented Jun 11, 2012 at 10:23
Sorry you are right. I totally skipped the ASP tags. If the page is available publicly, can you provide a link? Your ASP interpreter might be modifying the output HTML — AJ.
– AJ., Commented Jun 11, 2012 at 10:27

endoalir · Accepted Answer · 2012-06-11 23:34:05Z

2

When you specify an element in ASP.NET like this:

<asp:TextBox ID="TextBox1" runat="server">

You end up with an input box that has an ID with a generated name! Take a look for yourself, view source on the page, and you'll see that your input box "TextBox1" actually has an ID that looks like "ctl00_form1_TextBox1" or some jazz like that. So of course your getElementById call won't find any element with an ID of "TextBox1" - because there isn't one. Fortunately you can change this behavior. Just add a "ClientID" attribute, like so:

<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static">

With that, your input box really will have the id "TextBox1", and you'll be able to get the value of it the way you were attempting to.

EDIT

So, the above doesn't apply to the problem in this question, apparently. What's happening is that the twitter widget thing is weird and makes it awkward if you want to use a dynamic ID.

When the twitter widget runs, it uses document.write() calls to construct the widget. So, if your web page is already there, document.write will just overwrite the page. The best thing I can think of to do is to load it in an iframe, then copy what was loaded in the iframe to wherever you want it on the page.

Rather than creating a separate page just to load the widget in an iframe, I tried to construct an iframe page dynamically. In the end, I came up with the below, which appears to work in Firefox 13, but doesn't work in IE 8, and I haven't tested it in later versions of IE. Possibly this method could be tweaked so as to load the widget in completely separate page generated by the server - or you could even just load it in an iframe and then place the iframe on the page in the place you want it to appear.

Anyway, after making all this I now hate the twitter widget. It's completely stupid. Why does it have to use document.write? Why can't it play nice and construct DOM objects so that other kids can play too? Whatever. Here's what I got, and I'll leave it at that:

<%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false"
    CodeFile="Default.aspx.vb" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="//widgets.twimg.com/j/2/widget.css" rel="stylesheet" type="text/css">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type="text/javascript" charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script type="text/javascript">

    function fn(usr) {
        var ifr = document.createElement("iframe");
        document.body.appendChild(ifr);
        ifr.style.visibility = "hidden";

        ifr.contentWindow.document.write("<script type=\"text/javascript\" charset=\"utf-8\" src=\"http://widgets.twimg.com/j/2/widget.js\"></" + "script>");
        ifr.contentWindow.document.write("<script>" + fn2.toString() + ";</" + "script>");
        ifr.contentWindow.document.write("<script>fn2('" + usr + "')</"+"script>");
        ifr.contentWindow.document.close();

        t = setInterval(function () {
            if (ifr.contentWindow.document.readyState == "complete") {
                clearInterval(t);
                setTimeout(function () {
                    try {
                        var frame_styles = ifr.contentWindow.document.getElementsByTagName("style");
                        for (i = 0; i < frame_styles.length; i++) {
                            var newstyles = document.createElement("style");
                            newstyles.innerHTML = frame_styles[i].innerHTML;
                            document.body.appendChild(newstyles);
                        }
                    } catch (ex) { }

                    document.getElementById("sloc").innerHTML = ifr.contentWindow.document.body.innerHTML;

                }, 1000);
            }
        }, 50);

    }

    function fn2(usr) {
        new TWTR.Widget({
            version: 2,
            type: 'profile',
            rpp: 4,
            interval: 30000,
            width: 250,
            height: 300,
            theme: {
                shell: {
                    background: '#333333',
                    color: '#ffffff'
                },
                tweets: {
                    background: '#000000',
                    color: '#ffffff',
                    links: '#4aed05'
                }
            },
            features: {
                scrollbar: false,
                loop: false,
                live: false,
                behavior: 'all'
            }
        }).render().setUser(usr).start();
    }

</script>

<input type="text" id="txtfield" />
<asp:Button ID="Button1" Text="Click" OnClientClick="fn(document.getElementById('txtfield').value);return false;" runat="server" />
<div id="sloc"></div>

</asp:Content>

edited Jun 11, 2012 at 23:34

answered Jun 11, 2012 at 10:36

endoalir

3813 silver badges9 bronze badges

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

6 Comments

Ebikeneser Over a year ago

I have now added 'ClientIDMode="Static"' and it still comes up with the same error...

endoalir Over a year ago

Oh, maybe I got the wrong value for ClientIDMode. Really, look at the HTML source of the page and see the ID of that element. It's going to be different. Try ClientIDMode="Inherit"

Ebikeneser Over a year ago

When setting it to static, the id is equal to 'TextBox1' which suggests your technique is correct however it is still coming back as null?

Ebikeneser Over a year ago

Excellent answer @endoalir, your hard work is much appreciated. It is odd that this seems to be the most straightforward method for it to work but hey.

Ebikeneser Over a year ago

is there any reason why the css is not working for this? Along with the loop so when new tweets come in? It is static with out dynamic updating.

|

Sarfraz · Accepted Answer · 2012-06-11 08:58:46Z

1

I am not a .NET guy but using TextBox1.Text is supposed to be for the server-side code eg ASP.NET. Since you are using it in JavaScript (client-side), you should do this instead:

render().setUser(document.getElementById('TextBox1').value).start();

answered Jun 11, 2012 at 8:58

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

1 Comment

Ebikeneser Over a year ago

This has been useful. However it is not finding the 'value' I will edit my question.

Collectives™ on Stack Overflow

Using textbox text in javascript

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related