i have these botton that when click should the Popup form show. but what happening is it's poping up for a second then gone when click what im doing wrong? I think my code is alright.
button code:
<button onclick="Openform()">Add New WorkStation</button>
javascript:
<script>
function Openform() {
document.getElementById('popupform').style.display = "block";
}
</script>
css:
.divpopup {
margin-left: auto;
margin-top: auto;
display: none;
}
the div that should popup:
<div id="popupform" class="divpopup">
<asp:TextBox ID="txtWorkStation" runat="server" placeholder="WorkStation Name"></asp:TextBox><br />
<asp:DropDownList ID="ddlWorkStation" runat="server">
<asp:ListItem Text="Active" Value="1"></asp:ListItem>
<asp:ListItem Text="InActive" Value="0"></asp:ListItem>
</asp:DropDownList><br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</div>
It's because you're using a button, and that causes a postback that resets the page.
You can add a return value that basically cancels the original postback of the button:
<button onclick="Openform(); return false;">Add New WorkStation</button>
Or use an input of type button:
<input type="button" onclick="Openform()" value="Add New WorkStation" />
Or another way of canceling the button's natural postback behavior:
function Openform() {
event.preventDefault();
document.getElementById('popupform').style.display = "block";
}
Related
I have an aspx page that contains an ASPxComboBox. When this combo is changed after the page loads the div hides/unhides fine. In my case I load existing values from the database. I need to hide/show div based on these loaded values. If I populate the dropdown with "None" I want to hide the divs. Thanks.
< script type = "text/javascript" >
function OnSizeChanged(cbSide) {
const str = cbSide.GetText().toString();
if (str.includes('None')) {
bottomtext.style.display = "block";
lblbottomtext.style.display = "block";
} else {
lblbottomtext.style.display = "none";
bottomtext.style.display = "none";
}
}
</script>
<dx:ASPxComboBox ID="cbSide" runat="server" Width="280" ValueType="System.String">
<Items>
<dx:ListEditItem Text="DXF" Value="DXF" />
<dx:ListEditItem Text="None" Value="None" />
</Items>
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnSizeChanged(s); }" />
<ValidationSettings RequiredField-IsRequired="true" Display="Dynamic">
<RequiredField IsRequired="True"></RequiredField>
</ValidationSettings>
</dx:ASPxComboBox>
<div id="lblbottomtext" runat="server">
<dx:ASPxLabel ID="lblBST" runat="server" Text="Bottom Side Text:"></dx:ASPxLabel>
</div>
<div id="bottomtext" runat="server">
<dx:ASPxMemo ID="txtBottom" runat="server" Height="71px" Width="280px"></dx:ASPxMemo>
</div>
I need to show a delete conformation box on Gridview delete. with OnClientClick confirmation box, I am showing a simple Internet explore box for delete confirmation. Is it possible to show a fancy box for this. below is my JavaScript code that exists inside the gridview code:
OnClientClick="return DeleteItem();"
Below is my Gridview
<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
<Columns>
<asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
<asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row" />
<ItemTemplate>
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" OnClientClick="return DeleteItem();" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is my Javascript function:
<script type="text/javascript">
function DeleteItem() {
if (confirm("Delete this Location?")) {
return true;
} else {
return false;
}
}
</script>
above code is showing this confirmation window:
I want to show something like this:
any help will be apprecaited.
It's not possible to add css to a confirm box. You can implement your own JavaScript popup.
Alternatively there are many plugins that can do this. One of the most popular JQuery plugins is JQuery UI dialog https://jqueryui.com/dialog/#modal-confirmation
As an as illustration for integrating JQuery UI Dialog with an ASP.NET Gridview, try something like:
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" class="button-delete" />
You don't need OnClientClick="return DeleteItem();"
The css class can be used as a reference for an onclick event.
JavaScript:
$(function() {
// Create click handler
$('.ui-search-result-table').on('click', 'button-delete', function(e) {
e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
showDialog();
});
// Create the dialog popup
function showDialog(button) {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Remove": function() {
$(button).click(); // This should click imgbtnDelete
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
});
HTML for popup
<div style="display: none;">
<div id="dialog-confirm" title="Remove Item?">
<p>Are you sure you want to remove this item?</p>
</div>
</div>
Note: This example is for illustration purposes. You will need to have a play around with your solution to get it working.
I want to show/hide div slowly using jquery when i click the button. This div will have a result from a database. I want it when it opens, to open in slow motion. I have another problem with the asp button when the div is slided down it returns to slide up again automatic. I think it is from postback. I would appreciate any help.
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
});
});
</script>
<form id="form1" runat="server">
<div runat="server" id="showdivslowly" style="width:500px; height:200px; background-color:Blue" visible="false">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
Please try the following code
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
return false;
});
});
<div id="showdivslowly" style="width:500px; height:200px; background-color:Blue; display: none;">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
Thanks,
Amit
net web application project.
I'm using ConfirmButtonExtender for confirmation.
first I want to validate all the required fields than I want to show confirm message to the user. But I can see it every time. I want to use it conditional.
This is my Code.
<asp:Button ID="UpdatebuttonUpdaterID" runat="server"
Text="Update" CssClass="create_role_button_in"
OnClick="UpdatebuttonUpdaterID_Click" ClientIDMode="Static"/>
<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender3"
runat="server" TargetControlID="UpdatebuttonUpdaterID"
ConfirmOnFormSubmit="true" BehaviorID="updateBehavior"
ClientIDMode="Static" DisplayModalPopupID="ModalPopupExtender3"/>
<asp:ModalPopupExtender ID="ModalPopupExtender3" runat="server"
TargetControlID="UpdatebuttonUpdaterID"
PopupControlID="Panel3" OkControlID="Button5"
CancelControlID="Button6" ClientIDMode="Static" >
</asp:ModalPopupExtender>
<asp:Panel runat="server" ID="Panel3" Style="display: none; width: 200px; background-color: White; border-width: 2px; border-color: Black; border-style: solid; padding: 20px;">
Do you want to send this Conversion Rate for Approval?<br />
<asp:Button runat="server" ID="Button5" Text="OK" />
<asp:Button runat="server" ID="Button6" Text="Cancel" />
</asp:Panel>
javascript code:
Sys.Application.add_load(wireEvents);
function wireEvents() {
var behavior = $find("confirmBehavior");
if (behavior != null) {
behavior.add_showing(OnClientClickApprove);
}
var updateBehavior = $find("updateBehavior");
if (updateBehavior != null) {
updateBehavior.add_showing(OnClientClickUpdate);
}
}
function OnClientClickUpdate() {
if (some condition)
return false;
}
So, If OnClientClickUpdate returns false, User should not see confirm message.
If it returns true then only User should be able to see the confirm message on UI.
You can assign a client click handler with your function in it. A little dirty, but ensures (in practice) your handler comes first in the chain and cancels further handlers:
<asp:Button ID="UpdatebuttonUpdaterID" runat="server"
OnClientClick="return OnClientClickUpdate();"
You need to rewrite the OnClientClickUpdate function like this:
function OnClientClickUpdate(sender, eventArgs) {
if (some condition)
eventArgs.set_cancel(true);
}
I want a dialog div to appear and rest page to be greyed out. I should not be able to click anything else on page.
Following is the code I am using. Somehow the code is not working. Page just refreshes on click of hyperlink.
Can anyone help ?
<script>
$(document).ready(function () {
$("#DownloadButton").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnDownload").click(function (e) {
HideDialog();
e.preventDefault();
});
});
function ShowDialog(modal) {
$("#overlay").show();
$("#dialog").fadeIn(310);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div id="overlay" class="web_dialog_overlay">
</div>
<div id="dialog" class="web_dialog">
<table>
<tr>
<td>
<asp:Button ID="btnDownload" runat="server" Text="Download" />
</td>
<td>
<asp:Button ID="btnClose" runat="server" Text="Close" />
</td>
</tr>
</table>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="DownloadButton" />
</Triggers>
<ContentTemplate>
<div class="BaseClass">
<asp:LinkButton ID="DownloadButton" runat="server">Download</asp:LinkButton>
</div>
<asp:GridView>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
If DownloadButton, btnClose & btnDownload are IDs of server control, then for getting client ID you have to use:
$("#<%=DownloadButton.ClientID%>")
instead of
$("#DownloadButton")
in you jQuery Code.
Or
If you are using ASP.Net 4.0
Use ClientIDMode="static" with your server side controls.
For Closing the Dialog:
Use link to close the model popup:
Eg.
and in you Javascript use:
$("#btnClose").click(function (e) {
HideDialog();
});
why don't you use simply anchor tag? it won't cause a postback at least, no need to use update panel.
<a id="DownloadButton" href="#">Download</a>
$("#DownloadButton").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
Otherwise Kapil Khandelwal answer is correct if you want to use server side control.
$("#<%=DownloadButton.ClientID%>")
In document ready:
jQuery("#overlay").dialog(
{
bgiframe: true,
autoOpen: false,
modal: true,
width: 800
}
);
in the click event:
$('#overlay').dialog('open');
You'll have to specify more options in the dialog declaration, I'm sure, but this approach is working fine for me.