Javascript txtbox.value='sometxt' doesn't refresh display

15 posts, 0 answers
  1. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 02 Dec 2009 Link to this post

    Hello,

    I have a TextBox which could be a RadTextBox or an asp:TextBox.
    When it is a RadTextBox and I set it's value on clientside using myBox.value="newtext", the value is not refreshed on display.
    How to force redraw independently of he fact it is rad or not.

    Thank you fr help.
    CS
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 02 Dec 2009 Link to this post

    For the RadTextBox I believe the get_value and set_value client-side functions are the way to go. You can find more information on each RadInput type and their client-side objects in this documentation article.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2009 Link to this post

    Hi,

    Thanks but if it is a normal textbox ? is set_value working ?

    CS
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 03 Dec 2009 Link to this post

    No. You should use set_value() for RadTextBox and .value for asp:TextBox.

    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2009 Link to this post

    Hello Dimo,
    Sure but how to identify a RadTextBox or a normal TextBox on the client ?
    That's all my original question.

    Something like

    if ( mytextBox.set_value)
        mytextBox.set_value(newval);
    else mytextBox.vale=newval;


    Regards
    CS
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Dec 2009 Link to this post

    Hi Christia,

    Try the following approach in order to differentiate between Telerik textbox and ASP.NET textbox.

    JavaScript:
     
    <script type="text/javascript"
        function getControl(textboxID) { 
            var text = $find(textboxID); 
            if (text == null) { 
                alert("standard textbox"); 
            } 
            else { 
                alert("Telerik"); 
            }         
        } 
    </script> 

    -Shinu.
  8. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2009 Link to this post

    Hi Shin,

    I don't think that will work, asp:TextBox will result as Telerik...

    CS
  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 03 Dec 2009 Link to this post

    Christian,

    Your question makes me believe that you have neglected to familiarize yourself with the RadTextBox HTML rendering. If this is the case, then use the provided documentation...

    http://www.telerik.com/help/aspnet-ajax/input_appearancecssfile.html
    (setion 2 - Layout of the input control)

    ... or any web inspector such as Firebug.

    There is no "correct" or "recommended" way to accomplish your task. Use your common sense and basic knowledge of HTML and Javascript operations with DOM properties. There are some easily noticable patterns that you can use to distinguish between the RadTextBoxes and asp:TextBoxes - both types of controls contain <input> elements, but everything else is different - HTML structure, CSS classes, inline styles and client ID patterns.


    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2009 Link to this post

    Hello Dimo,

    My previous answer seems to have disappeared, may by blocked by some word checker.
    In case it doesn't reach the forum, I was just saying usually I get fast and concise answer on your forums.
    May be I neglected reading the full doc but I don't neglected paying the license fees.
    Is sending back users to long documentation the task of support  in each case ?
    I am not a javascript addict, I suppose you don't know each computer language ?

    Regards
    CS
  11. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 03 Dec 2009 Link to this post

    Dimo,

    Even reading your documentation I still don't understand how I could differentiate an asp:texbox from a rad:texbox in javascript.
    I did lot of search on forums and in hlp file and still nothing.

    Thanks for a real help if available
    CS
  12. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Dec 2009 Link to this post

    Hello Christian,

    OK, here is how to do it.

    The HTML rendering of RadTextBox basically consists of several <input> elements wrapped in a container. You need to isolate the textbox, which carries the RadTextBox client control instance and skip the others. If an <input> element is neither of the three RadTextBox <input> element types, and is not a checkbox/radio button, etc., then it is an asp:TextBox.

    <span>
    <input type="text" class="riTextBox riEnabled" id="RadTextBox1_text" />
    <input type="text" id="RadTextBox1" style="visibility:hidden;width:1px;height:1px"  />
    <input type="hidden" id="RadTextBox1_ClientState" />
    </span>

    There is one more RadTextBox rendering mode, which uses a <div> and a <table> instead of a <span>, but in that case the logic is the same and I will review only the above scenario for simplicity.


    Let me know if there is anything unclear.

    By the way, I am eager to know the following things, so please tell me:

    1. Why do you use asp:TextBoxes and RadTextBoxes at the same time?
    2. What is this scenario in which are setting values to a number of controls, and you have a collection of "something", but you don't have enough information about this "something" beforehand?


    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls for ASP.NET AJAX</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <h1>Set values to random textboxes</h1>
     
    Value: <asp:TextBox ID="ValueTB" runat="server" />
    <asp:Button ID="Button1" runat="server" Text="Set" OnClientClick="return setValues()" />
     
    <script type="text/javascript">
     
    function setValues()
    {
        setUsingIDs();
        setUsingDOM();
         
        return false;
    }
     
    </script>
     
    <h2>Using IDs</h2>
     
    <p>This approach assumes that you have a collection of control IDs</p>
     
    asp:TextBox 1 <asp:TextBox ID="TextBox1" runat="server" />
    <br /><br />
    RadTextBox 1 <telerik:RadTextBox ID="RadTextBox1" runat="server" />
    <br /><br />
    asp:TextBox 2 <asp:TextBox ID="TextBox2" runat="server" />
    <br /><br />
    RadTextBox 2 <telerik:RadTextBox ID="RadTextBox2" runat="server" />
     
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
     
    function setUsingIDs()
    {
        var tbValue = $get("<%= ValueTB.ClientID %>").value;
         
        var IDs = new Array(
            "<%= TextBox1.ClientID %>",
            "<%= RadTextBox1.ClientID %>",
            "<%= TextBox2.ClientID %>",
            "<%= RadTextBox2.ClientID %>"
        );
         
        for (var j = 0; j < IDs.length; j++)
        {
            var cci = $find(IDs[j]);
            // check whether there is a Telerik textbox instance attached to this ID
            // the type name check is generally not necessary if the ID collection is valid and contains only texbox control IDs
            if (cci != null && Object.getType(cci).getBaseType().getName() == "Telerik.Web.UI.RadInputControl")
            {
                cci.set_value(tbValue);
                continue;
            }
             
            // the ID is of an asp:TextBox
            $get(IDs[j]).value = tbValue;
        }
    }
     
    </script>
    </telerik:RadCodeBlock>
     
    <h2>Using DOM elements</h2>
     
    <p>This approach assumes that you have a collection of <input> elements</p>
     
    <asp:Panel ID="Panel1" runat="server">
    asp:TextBox 3 <asp:TextBox ID="TextBox3" runat="server" />
    <br /><br />
    RadTextBox 3 <telerik:RadTextBox ID="RadTextBox3" runat="server" />
    <br /><br />
    asp:TextBox 4 <asp:TextBox ID="TextBox4" runat="server" />
    <br /><br />
    RadTextBox 4 <telerik:RadTextBox ID="RadTextBox4" runat="server" />
    </asp:Panel>
     
    <telerik:RadCodeBlock ID="RadCodeBlock2" runat="server">
    <script type="text/javascript">
     
    function setUsingDOM()
    {
        var tbValue = $get("<%= ValueTB.ClientID %>").value;
         
        var inputs = $get("<%= Panel1.ClientID %>").getElementsByTagName("INPUT");
         
        for (var j = 0; j < inputs.length; j++)
        {
            // skip checkboxes, radiobuttons, etc.
            if (!inputs[j].type || inputs[j].type != "text")
                continue;
     
            // skip RadTextBox visible input elements
            if (
                inputs[j].id != "" &&
                inputs[j].id.indexOf("_text") == inputs[j].id.length - 5 &&
                $find(inputs[j].id.replace("_text", "")) != null
            )
            {
                continue;
            }
             
            // check whether the textbox is a RadTextBox hidden input element, because
            // the RadTextBox client control instances are attached to these hidden input elements
            if (inputs[j].id != "" && $get(inputs[j].id + "_text") != null && inputs[j].style.visibility == "hidden")
            {
                // if true, then we should set the value using the RadTextBox API
                var rtb = $find(inputs[j].id);
                if (rtb)
                {
                    rtb.set_value(tbValue);
                    continue;
                }
            }
             
            // the input element is an asp:TextBox
            inputs[j].value = tbValue;
        }
    }
     
    </script>
    </telerik:RadCodeBlock>
     
    </form>
    </body>
    </html>



    Regards,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 04 Dec 2009 Link to this post

    Hello Dimo,

    The page is created by a sub assembly with a config switch : UseTelerik=true/false.

    Concerning your detailled answer, thanks.
    I just discovered I was using $get and that it was not working with Telerik.
    Then I discovered that testing if (myFindTextBox.set_value) could be ok to differntiate asp and telerik TextBox.
    Is it true and does it works for each browser.

    Regards
    CS
  14. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Dec 2009 Link to this post

    >> Then I discovered that testing if (myFindTextBox.set_value) could be ok to differntiate asp and telerik TextBox. Is it true and does it works for each browser.

    Technically, yes, but if myFindTextBox.set_value is defined as a function, this means that myFindTextBox is a client control instance. This very fact means that myFindTextBox is NOT an asp:TextBox, because they don't have client control instances. So no need to check further for set_value.


    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  15. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 04 Dec 2009 Link to this post

    P.S.

    In addition, the example I provided you is too complex for your scenario, because as far as I understand, you are NOT using both types of textboxes at the same time. Since you can find that on the server, then you can send some property to the client, so that the Javascript code is a lot simpler and without that many checks.
  16. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 04 Dec 2009 Link to this post

    Thanks Dimo,

    The if ( myTb.set_value) is Ok for me.
    Concerning serverside, I have no easy way to set a flag somewhere.

    Regards
    CS
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017