locked
Adding ajax controls from client script? RRS feed

  • Question

  • User-1639243222 posted

    Consider this javascript code:

    <html><head></head><body>

    <script type="text/javascript">

    function Add()
    {
    var input = document.createElement('input');
    input.setAttribute('type', 'text');

    var addArea = document.getElementById('addArea');
    addArea.appendChild(input);
    }

    </script>

    <a href="javascript:Add();">Add</a>

    <div id="addArea">
    </div>

    </body></html>
     
    This code generates a textbox on the client side whenever the add-link is clicked. Is there any way I can add for example a masked edit behavior from the ajax control toolkit to this client generated textbox? (I used native javascript above to keep the example simple and easy to try out)
    Sunday, November 23, 2008 11:03 AM

Answers

  • User1335925338 posted

    Hi,

    What your request is feasible. We can build a simple application which contains the TextBox and the MaskedEditExtender, and this two controls is dragged from the Tool Tab box. Run the application, and debug this page using VS by referring this page: http://asp.net/ajax/documentation/live/Overview/ASPNETAJAXDebuggingAndTracingOverview.aspx. Then, we will find the generated code of the MaskedEditExtender in the running client page, which seems like this: 

    Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.MaskedEditBehavior, {"ClearTextOnInvalid":true,"ClientStateFieldID":"MaskedEditExtender2_ClientState","CultureAMPMPlaceholder":"AM;PM","CultureCurrencySymbolPlaceholder":"$","CultureDateFormat":"MDY","CultureDatePlaceholder":"/","CultureDecimalPlaceholder":".","CultureName":"en-US","CultureThousandsPlaceholder":",","CultureTimePlaceholder":":","InputDirection":1,"Mask":"99.99","MaskType":2,"id":"MaskedEditExtender2"}, null, null, $get("txtDollars"));
    });
    Now, let’s add the similar client code in the client pageLoad function.

    Note that if we use the MaskedEditValidator, something may be different to the above code, but we can also get the generated code of the Validator and add it at the client side.

    Have my suggestion helped?

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 26, 2008 5:47 AM

All replies

  • User1335925338 posted

    Hi,

    What your request is feasible. We can build a simple application which contains the TextBox and the MaskedEditExtender, and this two controls is dragged from the Tool Tab box. Run the application, and debug this page using VS by referring this page: http://asp.net/ajax/documentation/live/Overview/ASPNETAJAXDebuggingAndTracingOverview.aspx. Then, we will find the generated code of the MaskedEditExtender in the running client page, which seems like this: 

    Sys.Application.add_init(function() {
    $create(AjaxControlToolkit.MaskedEditBehavior, {"ClearTextOnInvalid":true,"ClientStateFieldID":"MaskedEditExtender2_ClientState","CultureAMPMPlaceholder":"AM;PM","CultureCurrencySymbolPlaceholder":"$","CultureDateFormat":"MDY","CultureDatePlaceholder":"/","CultureDecimalPlaceholder":".","CultureName":"en-US","CultureThousandsPlaceholder":",","CultureTimePlaceholder":":","InputDirection":1,"Mask":"99.99","MaskType":2,"id":"MaskedEditExtender2"}, null, null, $get("txtDollars"));
    });
    Now, let’s add the similar client code in the client pageLoad function.

    Note that if we use the MaskedEditValidator, something may be different to the above code, but we can also get the generated code of the Validator and add it at the client side.

    Have my suggestion helped?

    Best regards,

    Zhi-Qiang Ni

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 26, 2008 5:47 AM
  • User-1639243222 posted

    Hello...

    Well, I don't want to do it when the page loads, but rather when a user clicks a link/button to add another input element to the current page...

    Saturday, November 29, 2008 1:41 PM
  • User1335925338 posted

    Hi ,

    Have you noticed that this code is to create a client behavior of the MaskedEditedExtender? 

    $create(AjaxControlToolkit.MaskedEditBehavior, {"ClearTextOnInvalid":true,"ClientStateFieldID":"MaskedEditExtender2_ClientState","CultureAMPMPlaceholder":"AM;PM","CultureCurrencySymbolPlaceholder":"$","CultureDateFormat":"MDY","CultureDatePlaceholder":"/","CultureDecimalPlaceholder":".","CultureName":"en-US","CultureThousandsPlaceholder":",","CultureTimePlaceholder":":","InputDirection":1,"Mask":"99.99","MaskType":2,"id":"MaskedEditExtender2"}, null, null, $get("txtDollars"));
    So, why not add this code into your client event handler of the button click event, i.e. the ‘Add()’ function?

    Note that we need to add some dummy extender from the ToolBox to enable the AjaxControlToolklt class can be used.

    Please refer to my sample code: 

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestNumAndLetter.aspx.cs"
        Inherits="SoluTest_Mask.TestNumAndLetter" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <a href="javascript:Add();">Add</a>
            <div id="addArea">
            </div>
            <%--The dummy extender--%>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server">
            </ajaxToolkit:Accordion>
        </div>
        <%--the behavior file to reference--%>
    
        <script src="/ScriptResource.axd?d=DVq30UoYqtXZAGHUf6n0o5JTe91VihYxAmc2PsKndAuRW1fkaYZ--KfF7aacnFWXhAmyLfq9m5ZSEMf-M78Ptc1STZQ79su8H3IfObEkp0Q1&t=ffffffffa267b753"
            type="text/javascript"></script>
    
        <script src="/ScriptResource.axd?d=DVq30UoYqtXZAGHUf6n0o5JTe91VihYxAmc2PsKndAuRW1fkaYZ--KfF7aacnFWX3wp1ODtpOK2_rmc3AKzPpeMiDaL1FU-d0WvFwG0U22c1&t=ffffffffa267b753"
            type="text/javascript"></script>
    
        <script type="text/javascript">
    
            function Add() {
                var TextBox = document.createElement('input');
                TextBox.setAttribute('type', 'text');
                TextBox.setAttribute('name', 'TextBox');
                TextBox.setAttribute('id', 'TextBox');
    
                var span = document.createElement('span');
                span.setAttribute('id', 'span1');
                span.setAttribute('innerHTML', 'Input Number please:');
    
                var MaskedEditExtender = document.createElement('input');
                MaskedEditExtender.setAttribute('type', 'hidden');
                MaskedEditExtender.setAttribute('name', 'MaskedEditExtender_ClientState');
                MaskedEditExtender.setAttribute('id', 'MaskedEditExtender_ClientState');
    
                var addArea = $get('addArea');
                addArea.appendChild(span);
                addArea.appendChild(TextBox);
                addArea.appendChild(MaskedEditExtender);
    
                addMaskedEditExtender();
            }
    
            function addMaskedEditExtender() {
                $create(AjaxControlToolkit.MaskedEditBehavior, { "ClientStateFieldID": "MaskedEditExtender_ClientState", "CultureAMPMPlaceholder": "AM;PM", "CultureCurrencySymbolPlaceholder": "$", "CultureDateFormat": "MDY", "CultureDatePlaceholder": "/", "CultureDecimalPlaceholder": ".", "CultureName": "en-US", "CultureThousandsPlaceholder": ",", "CultureTimePlaceholder": ":", "Mask": "999", "id": "MaskedEditExtender6" }, null, null, $get("TextBox"));
            }
        
        </script>
    
        </form>
    </body>
    </html>
    Have it helped?

    Best regards,

    Zhi-Qiang Ni

    Sunday, November 30, 2008 11:28 PM
  • User-781338610 posted

    Hi,

     

    Im creating a text input box:

    var pl=document.getElementById("div1");
    var box=document.createElement("input");
    box.type=
    "text";
    box.style.fontSize=
    "8pt";
    box.style.border="0.5pt solid #3366ff";
    box.style.fontFamily=
    "verdana";
    box.id =
    "date_treatment_commenced";
    pl.appendChild(box);
     

    Is it possible to at the Ajax CalendarExtender to this new item??? 

    Thanks for any help.

    Fiorano

    Thursday, April 30, 2009 10:46 AM
  • User1335925338 posted

    Hi Fiorano,

    Please refer to my code in this reply:

    http://forums.asp.net/p/1305995/2565829.aspx#2565829

    Best regards,

    Zhi-Qiang Ni

    Sunday, May 3, 2009 10:22 PM