0

I have a Listbox and a Textbox in a Bootstrap modal. I need to update the TextBox with the selected value from the Listbox. My problem is in order to get the seleccted value from the Listbox I need to do an auto postback. The postback causes the modal to close.

Here is Full Modal Code:

 <div id="modalBillOLMapping" class="modal colored-header" style="display:none" >
    <div class="md-content">
        <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="close md-close"><i class="icon s7-close"></i></button>
        <h3 class="modal-title">
            <asp:Label ID="Label1" runat="server" Text="Field Mapping"></asp:Label>
        </h3>
    </div>   
    <div class="modal-body form" style="padding: 0px!important;">
        <asp:UpdatePanel runat="server">
            <ContentTemplate>
        <div class="panel panel-alt3 panel-transparent">
            <div class="panel-heading panel-heading-cg">
                <button runat="server" type="button" id="btnSaveOLMapping" class="btn btn-alt3" onclick="javascript:CloseModal('modalBillOLMapping');" data-dismiss="modal" onserverclick="btnSaveMapping_ServerClick"><i class="icon s7-check"></i>&nbsp;Save</button>
                <button type="button" class="btn btn-alt3 md-close"><i class="icon s7-close"></i>&nbsp;Cancel</button>
            </div>
            <div class="panel-body" style="height:300px">
                <asp:UpdatePanel runat="server">
                    <ContentTemplate>
                        <div class="row" style="padding-bottom:5px">
                            <div class="col-xs-2">
                                <asp:Label runat="server" ID="lblBillOLMapName" CssClass="text-danger"  ToolTip="Name of the current mapping">Map Name</asp:Label>
                            </div>
                            <div class="col-xs-4">
                                <asp:TextBox runat="server" ID="txtBillOLMapName"></asp:TextBox>
                            </div>
                        </div> 
                        <table style="width:100%">
                            <thead>
                                <tr><th style="width:25%">Quickbooks Field</th>
                                    <th style="width:25%">Charge Item Field</th>
                                    <th style="width:25%">Static Value</th>
                                    <th style="width:25%">Concatenated Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><asp:Label runat="server" ID="lblBillOLDocNumber" CssClass="text-danger" ToolTip="Mandatory Field - Bill reference number" Width="200px">DocNumber</asp:Label></td>
                                    <td><asp:DropDownList ID="ddlBillOLDocNumber" runat="server" AutoPostBack="false" Width="250px" ></asp:DropDownList></td>
                                    <td><asp:TextBox runat="server" ID="txtStaticBillOLDocNumber" Height="25px" Width="250px"></asp:TextBox></td>
                                    <td>
                                        <div class="input-group">
                                            <span class="input-addon input-group-btn">
                                                <asp:TextBox ID="txtConBillOLDocNumber" runat="server" Width="250px" Height="22px" ClientIDMode="Static"></asp:TextBox>

                                                    <a class="btn btn-primary dropdown-toggle toggle-menu" data-toggle="dropdown" href="#" style="height:22px">
                                                    <i class="icon s7-angle-down" style="font-size:x-large"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <asp:ListBox runat="server" ID="lbConBillOLDocNumber" ClientIDMode="Static"></asp:ListBox>
                                                    </li>

                                                </ul>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><asp:Label runat="server" ID="lblBillOLTxnDate" ToolTip="The date of the bill, if you leave out of the mapping, the current date in Quickbooks Online will be used.">Transaction Date</asp:Label></td>
                                    <td><asp:DropDownList ID="ddlBillOLTxnDate" runat="server" AutoPostBack="false" Width="250px"></asp:DropDownList></td>
                                    <td><asp:TextBox runat="server" ID="txtStaticBillOLTxnDate" Width="250px" Height="22px"></asp:TextBox></td>
                                    <td><div class="input-group" >
                                        <span class="input-addon input-group-btn">
                                        <asp:TextBox runat="server" ID ="txtConBillOLTxnDate" Width="250px" Height="22px"></asp:TextBox>
                                            <a class="btn btn-primary dropdown-toggle toggle-menu" data-toggle="dropdown" href="#" style="height:22px">
                                            <i class="icon s7-angle-down" style="font-size:x-large"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <asp:ListBox runat="server" ID="lbConBillOLTxnDate" ClientIDMode="Static"></asp:ListBox>
                                                    </li>

                                                </ul>
                                        </span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td><asp:Label runat="server" ID="lblBillOLPrivateNote" ToolTip="User entered, organization-private note about the transaction. This note will not appear on the transaction records by default.">Private Note</asp:Label></td>
                                    <td><asp:DropDownList ID="ddlBillOLPrivateNote" runat="server" AutoPostBack="false" Width="250px"></asp:DropDownList></td>
                                    <td><asp:TextBox runat="server" ID="txtStaticBillOLPrivateNote" Width="250px" Height="22px"></asp:TextBox></td>
                                    <td><div class="input-group">
                                        <span class="input-addon input-group-btn">
                                            <asp:TextBox runat="server" ID="txtConBillOLPrivateNote" Width="250px" Height="22px"></asp:TextBox>
                                            <a class="btn btn-primary dropdown-toggle toggle-menu" data-toggle="dropdown" href="#" style="height:22px">
                                            <i class="icon s7-angle-down" style="font-size:x-large"></i>
                                                </a>
                                                <ul class="dropdown-menu">
                                                    <li>
                                                        <asp:ListBox runat="server" ID="lbConBillOLPrivateNote"></asp:ListBox>
                                                    </li>

                                                </ul>
                                        </span>
                                        </div></td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineDescription" ToolTip="Description for the expense line">Line Description</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineDescription" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineAmount" ToolTip="Amount of Expense">Line Amount</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineAmount" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineCustomerRef" ToolTip="Customer name associated with the expense">Line Customer Ref</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineCustomerRef" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineAccountClass" ToolTip="Class associated with the expense">Line Account Class</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineAccountClass" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineAccountRef" ToolTip="Name of the expense account">Line Account Ref</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineAccountRef" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLVendorRef" CssClass="text-warning" ToolTip="Mandatory - Full name of the vendor">Line Account Ref</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLVendorRef" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLAPAccount" ToolTip="The Accounts Payable account the purchase is credited">AP Account</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLAPAccount" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineItemDescription" ToolTip="A descriptive text field for the item">Line Item Description</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineItemDescription" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineItemAmount" CssClass="text-warning" ToolTip="Mandatory - The TOTAL item for the line item">Line Item Amount</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineItemAmount" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineItemRef" CssClass="text-warning" ToolTip="Mandatory - The name of the item purchased">Line Item Ref</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineItemRef" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineItemClass" ToolTip="Class for the line item">Line Item Class</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineItemClass" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineItemQty" ToolTip="Number of items ordered">Line Item Qty</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineItemQty" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineItemUnitPrice" ToolTip="Unit Price of the Item">Line Item Unit Price</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineItemUnitPrice" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                <div class="row" style="padding-bottom:5px">
                    <div class="col-x-6">
                        <asp:Label runat="server" ID="lblBillOLLineItemCustomer" ToolTip="Customer associated with the item purchase">Line Item Customer</asp:Label>
                    </div>
                    <div class="col-xs-6">
                        <asp:DropDownList ID="ddlBillOLLineItemCustomer" runat="server" AutoPostBack="false" Width="350px"></asp:DropDownList>
                    </div>
                </div>
                    </ContentTemplate>
                </asp:UpdatePanel>

            </div>
        </div>

            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </div>


</div>

Here is my code behind:

    protected void lbConBillOLDocNumber_SelectedIndexChanged(object sender, EventArgs e)
    {
         txtConBillOLDocNumber.Text = lbConBillOLDocNumber.SelectedItem.Text;

    }

I need to get place the the selected text value from the Listbox into the TextBox. I do kno that I am getting the correct values because the alert in the code above shows the correct values, (but since the modal closes, I have no idea whether the Textbox is being updated.) I need the Textbox populated with the selected value of the ListBox and I need the modal to stay open. I realize that I may be approaching this all wrong, so any suggested improvements are welcome.

Rani Radcliff
  • 4,856
  • 5
  • 33
  • 60
  • Try to use ajax update panel to do your logic without postback – ElasticCode Apr 09 '18 at 22:18
  • If you mean this "" I have that but I can't get it to work. The code behind doesn't get called without Autopostback=true and the modal disappears. Perhaps I'm missing something with the Update Panel, but just surrounding the code with the UpdatePanel did nothing. – Rani Radcliff Apr 09 '18 at 22:25
  • Check my answer with UpdatePanel example – ElasticCode Apr 09 '18 at 23:29
  • If you do postback, the page will refresh and the modal will close. Make an AJAX call to web method like to keep the modal open. Else you have to open the modal again after the page is loaded. Its better to go with AJAX-web method type call. Refer: https://stackoverflow.com/questions/7770679/jquery-ajax-call-to-an-asp-net-webmethod – Chidambaram Apr 10 '18 at 10:10

2 Answers2

1

You can use AJAX UpdatePanel as below example to remove the requirement to refresh the whole page with each postback, and allowing partial rendering of a specific area for your case it will be the modal body.

HTML

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <%-- AJAX UpdatePanel section--%>
                    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
                            </asp:DropDownList>
                            <br />
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</form>

Code Behind

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Bind DropDownList1 with some testing data
        DropDownList1.Items.Add(new ListItem() { Text = "Item 001", Value = "1" });
        DropDownList1.Items.Add(new ListItem() { Text = "Item 002", Value = "2" });
        DropDownList1.Items.Add(new ListItem() { Text = "Item 003", Value = "3" });
        DropDownList1.Items.Add(new ListItem() { Text = "Item 004", Value = "4" });
        DropDownList1.Items.Add(new ListItem() { Text = "Item 005", Value = "5" });
    }
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    TextBox1.Text = DropDownList1.SelectedValue;
}
ElasticCode
  • 7,311
  • 2
  • 34
  • 45
  • Thanks for trying to help, but the modal still closes on the postback of the ListBox. – Rani Radcliff Apr 10 '18 at 00:51
  • Please post your full HTML and code behind maybe there is another issue, also there is no need for `updateSelection` JS function – ElasticCode Apr 10 '18 at 01:25
  • full code behind is 558 lines of code. I don't think you want to see all of that. I'll post all of HTML in a minute. I was in the middle of testing another solution. Thanks for your helping. – Rani Radcliff Apr 10 '18 at 01:36
  • Welcome, just any code related to the action that fire postback – ElasticCode Apr 10 '18 at 01:39
  • I added all of the code for the modal (which is a lot). Nothing much in the code behind event. If I don't put Autopostback=true the event does not fire, and if it fires, the modal closes. – Rani Radcliff Apr 10 '18 at 01:45
  • I tried your code and its working, I just added `AutoPostBack="true" OnSelectedIndexChanged="lbConBillOLDocNumber_SelectedIndexChanged"` to `lbConBillOLDocNumber` dropdown – ElasticCode Apr 10 '18 at 02:19
  • All I can think of is that something in the Master Page must be causing the issue then because it does not work for me. The modal closes immediately on postback for me with or without the UpdatePanel. Thanks for your help. I truly do appreciate your time and effort. – Rani Radcliff Apr 10 '18 at 02:32
0

Eventually figured out this problem. The issue was caused by the drop-down menu which displays the listbox. The dropdown menu was closing as soon as anything was clicked in the Listbox and basically nullified the selection and closed the modal. I had to stop propagation of the dropdown list. Once I did that, the UpdatePanel did it's job. I added an ID to the dropdown menu and used the following code to prevent it from closing when clicking on the ListBox.

            $('#myDropdown .dropdown-menu').on({
            "click": function (e) {
                e.stopPropagation();
            }
        });

I hope this helps someone else. Happy coding.

Rani Radcliff
  • 4,856
  • 5
  • 33
  • 60