locked
Modalpopup RRS feed

  • Question

  • User702049738 posted

    Hello expert;

    this is for learning purpose. how can one pass the date to TextBox1 in the modalpopup. I want TextBox1 to contain e.Day.Date.ToString("yyyy-MM-dd").  I saw the posting on the forum below. All help is appreciated.

    http://forums.asp.net/t/1318336.aspx

    see code below


    <head runat="server">
    <title>Untitled Page</title>
    <style>
    .modalBackground
    {
    background-color: Gray;
    filter: alpha(opacity=60);
    opacity: 0.6;
    }
    .modalPopup
    {
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
    <script type="text/javascript">
    function popupModal(value)
    {


    $get('<%=Label1.ClientID %>').innerText=value;
    $find('programmaticModalPopupBehavior').show();
    }
    </script>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender"></asp:Calendar>
    update at <%=DateTime.Now %>
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="OKButton" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>

    <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
    <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup" BehaviorID="programmaticModalPopupBehavior"
    TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="programmaticPopup" CancelControlID="CancelButton"
    BackgroundCssClass="modalBackground" DropShadow="True" RepositionMode="RepositionOnWindowScroll">
    </ajaxToolkit:ModalPopupExtender>
    <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" Style="background-color: ##FFFFCC;
    display: none; height: 125px; width: 225px; padding: 10px">
    this is
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
    <asp:Button ID="OKButton" runat="server" Text="OK" OnClick="OKButton_Click" />
    <asp:Button ID="CancelButton" runat="server" Text="Cancel" />


    </asp:Panel>
    </form>
    </body>
    protected void OKButton_Click(object sender, EventArgs e)
    {
    //do on server
    programmaticModalPopup.Hide();
    }

    protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {
    e.Cell.Attributes["onclick"] = "popupModal('"+e.Day.Date.ToString("yyyy-MM-dd")+"');";

    }

    Wednesday, January 6, 2016 3:18 AM

Answers

All replies

  • User1724605321 posted

    Hi olybobo,

    If you want to pass date to textbox , you could modify the code as follows :

                function popupModal(value) {
    
                    $get('<%=Label1.ClientID %>').innerText = value;
                    $get('<%=TextBox1.ClientID %>').innerText = value;
                    $find('programmaticModalPopupBehavior').show();
                }

    Best Regards,

    Nan Yu

    Wednesday, January 6, 2016 5:30 AM
  • User702049738 posted

    Hi Nan;

    Thanks but what if you have a dropdownlist called ddls. Can it be done because I tried it in this manner and it isn't working, see modified code below.

    <head runat="server">
    <title>Untitled Page</title>
    <style>
    .modalBackground
    {
    background-color: Gray;
    filter: alpha(opacity=60);
    opacity: 0.6;
    }
    .modalPopup
    {
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
    }
    </style>
    </head>
    <body>
    <form id="form1" runat="server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
    <script type="text/javascript">

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    <asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender"></asp:Calendar>
    update at <%=DateTime.Now %>
    </ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="OKButton" EventName="Click" />
    </Triggers>
    </asp:UpdatePanel>

    <asp:Button runat="server" ID="hiddenTargetControlForModalPopup" Style="display: none" />
    <ajaxToolkit:ModalPopupExtender runat="server" ID="programmaticModalPopup" BehaviorID="programmaticModalPopupBehavior"
    TargetControlID="hiddenTargetControlForModalPopup" PopupControlID="programmaticPopup" CancelControlID="CancelButton"
    BackgroundCssClass="modalBackground" DropShadow="True" RepositionMode="RepositionOnWindowScroll">
    </ajaxToolkit:ModalPopupExtender>
    <asp:Panel runat="server" CssClass="modalPopup" ID="programmaticPopup" Style="background-color: ##FFFFCC;
    display: none; height: 125px; width: 225px; padding: 10px">
    this is
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

     <asp:DropDownList ID="ddls" runat="server">

    <asp:Button ID="OKButton" runat="server" Text="OK" OnClick="OKButton_Click" />
    <asp:Button ID="CancelButton" runat="server" Text="Cancel" />


    </asp:Panel>
    </form>
    </body> 
    protected void OKButton_Click(object sender, EventArgs e)
    {
    //do on server
    programmaticModalPopup.Hide();
    }

    protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)
    {

    string temp2 = "A"
    e.Cell.Attributes["onclick"] = "popupModal('"+e.Day.Date.ToString("yyyy-MM-dd")+ temp2 + "');";

    }

    function popupModal(value, value2) {
    
                    $get('<%=Label1.ClientID %>').innerText = value;
                    $get('<%=TextBox1.ClientID %>').innerText = value;
     $get('<%=ddls.ClientID %>').innerText = value2;
    $find('programmaticModalPopupBehavior').show(); }
    Wednesday, January 6, 2016 3:57 PM
  • User1724605321 posted

    Hi olybobo,

    You could set the dropdownlist value by :

    $("#mydropdownlist").val("thevalue");

    For more details , please refer to below link :

    http://stackoverflow.com/questions/292615/how-can-i-set-the-value-of-a-dropdownlist-using-jquery

    Best Regards,

    Nan Yu

    Thursday, January 7, 2016 3:00 AM
  • User702049738 posted

    hi;

    is there a way to do it without jquery

    Thursday, January 7, 2016 3:40 AM
  • User1724605321 posted

    Hi ,

    Seems your problem is solved in this thread: http://forums.asp.net/p/2081830/6007375.aspx?Re+javascript+setting+and+getting+dropdownlist

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 8, 2016 3:02 AM