I have a question I can't click the dropdown button in ajax:comboBox in a modal popup
<asp:Panel ID="panel1" runat="server">
<div class="modal fade" id="setup" tabindex="-1" role="dialog" aria-labelledby="ModalTitle" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="head4">Title HEAD modal</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-7 col-xs-7 col-7 col-md-7">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
</Triggers>
<ContentTemplate>
<ajaxToolkit:ComboBox ID="modelistInject" runat="server" AutoCompleteMode="SuggestAppend" >
</ajaxToolkit:ComboBox>
<asp:Button runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
when I click button from <asp:Button runat="server"/> It will show dropdown button
when I do not click it, it does not display a dropdown button.
Related
I had written code for modal popup but its not working, I am new to .net so i don't know how its work so please help me in that.. On clicking add button i want to open modal popup but its not working.
<script type="text/javascript">
$(function () {
$("#btn_add_new").click(function () {
$('#UsersModal').modal('show');
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Button ID="btn_add_new" runat="server" Text="Add New" CausesValidation="False" CssClass="button" data-target="#UsersModal"
/>
<div class="modal fade" id="UsersModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title" id="ModalTitle">
New User</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="col-sm-3">
<asp:Label ID="lbluname" Font-Size="Large" runat="server" Text="Username"></asp:Label>
</div>
<div class="col-sm-5">
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
</div>
<br />
<div class="col-sm-3">
<asp:Label ID="Label1" Font-Size="Large" runat="server" Text="Username"></asp:Label>
</div>
<div class="col-sm-5">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<asp:CheckBox ID="chkRememberMe" Text="Remember Me" runat="server" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" Text="Save" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Content>
You could just use a html button like this:
<button type="button" class="btn btn-primary" CssClass="button"
data-toggle="modal" data-target="#UsersModal">Add New</button>
Your javascript is not required to open the modal.
The modal opens fine on my test page using your modal code.
I am trying to get a modal box to show. Whenever I click the button, it fades but the modal box does not show. Does anyone know the problem with my code?
asp:Button ID="searchMRF" UseSubmitBehavior="false" runat="server" CssClass="btn-primary active" Text="Search MRF No." Height="31px" Width="139px" data-toggle="modal" data-target="#TestModal" />
<%-- MODAL --%>
<div id="TestModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<%-- MODAL CONTENT --%>
<div class="modal-content">
<div class="modal-header">
<asp:Button ID="close1" class="close" Text="x" runat="server" />
<asp:Label class="modal-title" runat="server" Text="TESTING"></asp:Label>
</div>
<div class="modal-body">
<asp:Label runat="server" class="modal-lg"></asp:Label>
</div>
<div class="modal-footer">
<asp:Button ID="close2" runat="server" Text="Close" />
</div>
</div>
</div>
</div>
I am quite new to ASP.NET so forgive me if I have the functionality wrong.
I am working with Bootstrap and have a button within a tab and UpdatePanel which fires a Modal.
The Modal sits behind the screen and blacks out and I can't quite work out why.
If I take the UpdatePanel out, it works. I need the UpdatePanel because it is in a tab with an action CheckBox which without the UpdatePanel sends the user back to the first tab.
<div class="tab-pane fade" id="neworder">
<asp:UpdatePanel ID="up_New_Order" runat="server">
<ContentTemplate>
<div class="checkbox">
<asp:CheckBox ID="cb_Auto_Fill" runat="server" Text="Auto fill last order" CssClass="checkbox" AutoPostBack="true" OnCheckedChanged="cb_Auto_Fill_CheckedChanged"></asp:CheckBox>
</div>
<div class="col-md-6">
<!-- New Order -->
<asp:panel class="row form-group has-feedback" id="Panel2" runat="server">
<label for="inputName" class="col-lg-4 control-label">Ordered By</label>
<div class="col-lg-8">
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:TextBox CssClass="form-control" ID="tb_Ordered_By" placeholder="Customer name" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel5" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">PO No/Agency</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Po_Number" placeholder="PO No/Agency Ref" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel13" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Payment Type</label>
<div class="col-lg-8">
<asp:DropDownList ID="ddl_Payment_Type" runat="server" CssClass="form-control dropdown"></asp:DropDownList>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel14" runat="server" Visible="false">
<label for="inputSubject" class="col-lg-4 control-label">Upload</label>
<div class="col-lg-8">
<input type="file"
style="visibility:hidden; width: 1px;height:1px"
id='${multipartFilePath}' name='${multipartFilePath}'
onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' -->
<input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event -->
<span class="badge badge-important" ></span>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel11" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Order Notes</label>
<div class="col-lg-8">
<asp:TextBox id="tb_Order_Notes" cssClass="form-control" TextMode="multiline" Columns="50" Rows="3" runat="server" />
</div>
</asp:panel>
</div>
<div class="col-md-6">
<!-- New Order -->
<asp:panel class="row form-group has-feedback" id="Panel7" runat="server">
<label for="inputName" class="col-lg-4 control-label">Copy Contact</label>
<div class="col-lg-8">
<asp:Label ID="Label2" runat="server"></asp:Label>
<asp:TextBox CssClass="form-control" ID="tb_Copy_Contact" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel8" runat="server">
<label for="inputName" class="col-lg-4 control-label">Copy Supply</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Supply" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel9" runat="server">
<label for="inputEmail" class="col-lg-4 control-label">Copy Tel</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Tel" runat="server"></asp:TextBox>
</div>
</asp:panel>
<asp:panel class="row form-group has-feedback" id="Panel10" runat="server">
<label for="inputSubject" class="col-lg-4 control-label">Copy Email</label>
<div class="col-lg-8">
<asp:TextBox CssClass="form-control" ID="tb_Copy_Email" runat="server"></asp:TextBox>
</div>
</asp:panel>
<div class="row form-group">
</div>
<div class="row form-group">
<div class="col-lg-12">
<asp:Button Text="Create Order" ID="btn_Create_Order" CssClass="btn btn-primary btn-block" OnClick="btn_Create_Order_Click" runat="server" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
The modal sits just above my closing tag for Content and I call it with:
protected void btn_Create_Order_Click(object sender, EventArgs e)
{
lblModalTitle.Text = "Modal Title";
lblModalBody.Text = "Modal Body.";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal().appendTo('body');", true);
upModal.Update();
//pnlAlertBox.Visible = true;
}
Here is the modal (I am reusing it so I know it does work).
<!-- Bootstrap Modal Dialog -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
I tried your code in my sample project and the bootstrap modal works correctly. I am using jquery 2.1.3
It could be that the jquery version you are using is causing the problem.
I can display a Modal when using an ASP.Net button (while using the solution given here: Display Bootstrap Modal from Asp.Net Webforms)
My problem is that the Modal doesn't display when I add ASP.Net Validation to the form. Any idea why this might be?
This is the Modal:
<!-- Success Modal -->
<div class="modal fade" id="modSuccess" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title">
<asp:Label ID="lModalTitle" runat="server" Text=""></asp:Label></h4>
</div>
<div class="modal-body">
<asp:Label ID="lModalBody" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">
Close</button>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
This is one of the Validation blocks:
<div class="form-group">
<label>
Year of Birth*</label>
<asp:TextBox class="form-control" ID="tYOB" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvYOB" runat="server" ControlToValidate="tYOB" Display="None" ErrorMessage="Year of Birth is required" ValidationGroup="Choice"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="rfvYOBValidatorCalloutExtender" runat="server" TargetControlID="rfvYOB" Enabled="True">
</asp:ValidatorCalloutExtender>
<asp:RegularExpressionValidator ID="revYOB" runat="server" ControlToValidate="tYOB" Display="None" ErrorMessage="Year of Birth must be a 4 digit Year" ValidationExpression="^\d{4}$" ValidationGroup="Choice"></asp:RegularExpressionValidator>
<asp:ValidatorCalloutExtender ID="revYOB_ValidatorCalloutExtender" runat="server" TargetControlID="revYOB" Enabled="True">
</asp:ValidatorCalloutExtender>
</div>
And here is the button:
<div class="form-group">
<asp:Button class="btn btn-success" ID="btnInsert" runat="server" CausesValidation="True" Text="Insert Choice" ValidationGroup="Choice" />
</div>
And here is the CodeBehind:
Protected Sub btnInsert_Click(sender As Object, e As System.EventArgs) Handles btnInsert.Click
'This inserts the Choice
Try
With CInfo
'More code here
.insert()
End With
lModalTitle.Text = "Choice Entered"
lModalBody.Text = tChoice.Text & " has been successfully entered"
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "modSuccess", "$('#modSuccess').modal();", True)
upModal.Update()
Catch ex As Exception
'Catch Code
End Try
End Sub
I am trying to show pop-up on clicking Button named "Lunch Break", it works fine when am using normal Bootstrap button button control.
But i want use asp:Button control to show same pop-up but pop-up does appears on clicking on that button, it just refresh the page.
aspx code :
<asp:Button ID="btnLunchBreak" runat="server" Text="Lunch Break" CssClass="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" />
<div class="modal fade panel panel-primary" id="myModal" tabindex="-1" runat="server" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<div class="modal-dialog panel panel-primary ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="gridSystemModalLabel" style="color: red">Lunch Break</h2>
</div>
<div class="modal-body">
<div class="container-fluid">
<br />
<br />
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Button ID="btnLunchStart" runat="server" CssClass="btn btn-success" Text="Start" OnClick="btnLunchStart_Click" />
<asp:Button ID="btnLunchStop" runat="server" CssClass="btn btn-success" Text="Stop" OnClick="btnLunchStop_Click" />
</div>
<div class="col-md-4"></div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<asp:Label ID="lbl_LTimer" runat="server" CssClass="h3" ForeColor="Blue"></asp:Label><br />
<asp:Label ID="lbl_Lhour" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Hr :"></asp:Label>
<asp:Label ID="lbl_LMin" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="Min :"></asp:Label>
<asp:Label ID="lbl_LSec" runat="server" Visible="false" CssClass="h4" ForeColor="Black" Text="sec"></asp:Label>
<br />
<asp:Label ID="lbl_LHr" runat="server" CssClass="h3" Font-Bold="true" Font-Size="20" ForeColor="red"></asp:Label>
<br />
<br /> <br /><br /><br /><br /><br />
<asp:Label ID="lbl_Lbrkresp" runat="server" Visible="false"></asp:Label>
<asp:Timer ID="Timer3" runat="server" Interval="1000000" OnTick="Timer3_Tick">
</asp:Timer>
</div>
<div class="col-md-4"></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
am not familiar with bootstrap may be am doing it in wrong way. Suggest any solution
You can try to set the attribute UseSubmitBehavior to false.
Thus, ASP will not render a submit, but a simple button instead.
Hope that helps! =)