<asp:Button ID="Invoice" runat="server" Text="Create Invoice" OnClientClick="CreateInvoice_Click()" OnClick="CreateInvoice_Click1"/>
<script type="text/javascript" language="javascript">
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
},
Cancel: function () {
//code needed here
$(this).dialog("close");
}
}
});
}
</script>
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure?</p>
So user presses the 'Create Invoice' button, pop up appears allowing the user to select 'Create' or 'Cancel'.
The 'CreateInvoice_Click' function is run on code behind if the user clicks 'create' or 'cancel'. What I want to know (which needs to go inside the 'cancel' function') how do I say ignore the OnClick="CreateInvoice_Click1" if cancelled is clicked.?
Thanks for any replies
if you want to prevent the server side function from execution you simply need to return false in your client side function.
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
},
Cancel: function () {
//code needed here
$(this).dialog("close");
return false;// that's all what you need
}
}
});
}
Seems like you are tryign to recreate something javascript does with a built in function.
function confirmation() {
var answer = confirm("Leave tizag.com?")
if (answer){
alert("Bye bye!")
window.location = "http://www.google.com/";
}
else{
alert("Thanks for sticking around!")
}
}
Taken from http://www.tizag.com/javascriptT/javascriptconfirm.php
you should try manually calling the serverside click event by using javascript;
checkout the code inside Create and Cancel button;
<script type="text/javascript">
$('#test').on('click', function(e){
e.preventDefault();
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
// manually calling serverside click event
$('#buttonHidden').click();
},
Cancel: function () {
//code needed here
$(this).dialog("close");
// don't call it manually here and thus it won't fire the serverside click event
}
}
});
});
</script>
// your button here to call javascript
<button id="test" runat="server">Create Invoice</button>
// the hidden button just to hold the CreateInvoice_Click1 which is fired from fireClick()
<asp:Button ID="buttonHidden" runat="server" Style="display: none" OnClick="CreateInvoice_Click1" />
your code behind;
protected void CreateInvoice_Click1(Object sender, EventArgs e)
{
//your server side code
}
<asp:Button ID="Invoice" runat="server" Text="Create Invoice" OnClientClick="return Create_Invoice()" OnClick="CreateInvoice_Click1"/>
<script type="text/javascript" language="javascript">
function Create_Invoice() {
$("#dialog-confirm").dialog({
resizable: false,
height: 180,
modal: true,
buttons: {
Create: function () {
$(this).dialog("close");
return true;
},
Cancel: function () {
//code needed here
$(this).dialog("close");
return false;
}
}
});
}
<p id="dialog-confirm"><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>Are you sure?</p>
your code behind;
protected void CreateInvoice_Click1(Object sender, EventArgs e)
{
//your server side code
}
Related
I am newsiest on jQuery. I need to show the dialog box to get the user response. If the use click confirm, I need to update the database on sever. I found the example jQuery dialog Confirm-JSFiddle and followed the code. However, after the user click confirm, it is not postback to server. Would someone tell me how to fix it.
There is my jQuery script code:
$(document).ready(function() {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true
});
});
$(function() {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons : {
"Confirm" : function() {
$(this).dialog("close");
return true;
},
"Cancel" : function() {
$(this).dialog("close");
return false;
}
}
});
$("#Button1").on("click", function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});
There is the code on vb.net
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
Dim i As Integer = 0
End Sub
There is the button on aspx page
<asp:button id="Button1" runat="server" text="test" visible="true" />
You're just need one step to do postback by using appendTo function to bind with target form:
$("#Button1").on("click", function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
$("#dialog-confirm").parent().appendTo($("form:first"));
});
<asp:Button id="Button1" runat="server" text="test" visible="true" OnClick="Button1_Click" />
Of course, if you're using dynamic client ID (without ClientIDMode="Static" attribute at asp:Button), you need to use ClientID instead of button's server ID:
$("#<%= Button1.ClientID %>").on("click", function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
$("#dialog-confirm").parent().appendTo($("form:first"));
});
Or you can embed appendTo into dialog setting (with jQuery 1.10 and above):
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons : {
"Confirm" : function() {
$(this).dialog("close");
return true;
},
"Cancel" : function() {
$(this).dialog("close");
return false;
}
},
appendTo: "form" // append this setting
});
If appendTo doesn't work with your page, try __doPostBack method (but not guaranteed to work with all browsers):
__doPostBack('<%= Button1.UniqueID %>', '');
Similar issues:
jQuery UI Dialog with ASP.NET button postback
jQuery modal form dialog postback problems
I've got a page that opens a modal (Page1.aspx).
That modal is another aspx page (Page2.aspx).
How can I declare in the opener page (or any other way), that a modal button, executes a button click in Page2.aspx.
I've tried to put:$('#ButtonOK').click(); (as it's the buttons id), but on the parent page it isn't recognized.
How can I execute that click?
Many thanks.
MY CODE, PAGE1:
function createModal(f,w,h) {
var dialogWidth = w;
var dialogHeight = h;
$('#dialog').dialog({
autoOpen: false
, bigframe: false
, modal: true
, width: dialogWidth
, height: dialogHeight
, autoResize: true
, closeOnEscape: true
, position: { my: "center", at: "center", of: window.top }
, open: function (event, ui) {
$('#dialog').css('overflow', 'hidden'); //this line does the actual hiding
}
,buttons: {
Ok: function () {
$("input[id$='ButtonOK']").trigger('click');
},
Cancelar: function () {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
$("#iframe").attr('src', f);
return false;
}
function PermMV(usr) {
createModal('new.aspx?usr=' + usr,350,450);
}
<div id="dialog" style="display: none;">
<iframe id="iframe" width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" align="middle"></iframe>
</div>
PAGE 2:
<div id="acrescenta2" title="Perm">
<asp:TextBox ID="txtuser1" name="txtuser" runat="server" Text="" CssClass="consprodtxt" />
<asp:Button ID="ButtonOK" runat="server" OnClick="ButtonOK_Click" OnClientClick="ButtonOK_Click" Text="OK" CssClass="btnmv" />
</div>
Hope that helps.
You need to use IFrame Like This,
<div class="modal-body" id="modal_dialog">
<iframe style=" width:100%; height: 100%;" id="ifrm" src="yourExternalPage.aspx" runat="server">
</iframe>
And Open This Div as a Dialogue using JQuery,
<script type="text/javascript">
$("#BtnClick").live("click", function () {
$("#modal_dialog").dialog({
title: "jQuery Modal Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
return false;
});
</script>
1<>Simple jQuery Modal Popup Window Example in ASP.Net
2<>Modal popup using jquery in asp.net
$(document).on("click","element",function(args){
//...
});
Try it
Try this:
$("#ButtonOK").trigger('click');
I need to refresh the parent page once close the dialog, on other pages it is worked fine but in my page an error occurred !!!
This is the function on button click "btnAddCvg"
function showDialog() {
$("#dialog").dialog("open");
$("#modalIframeId").attr("src", "AddCoverage.aspx");
return false;
}
$(document).ready(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
height: 600,
width: 950,
buttons: {
'Close': function () {
$('#dialog').dialog('close');
}
},
beforeClose: function (event, ui) {
// __doPostBack("panel1");
}
});
});
i have on the same page an update panel :
<asp:UpdatePanel ID="panel1" runat="server" OnLoad="UpdatePanel1_Load">
</asp:UpdatePanel>
and in the code behind:
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
grid_list_quotes.DataBind();
}
what should i do ???
$(document).ready(function () {
$('.abc').click(function () {
var status = $("#<%=ddlstatus.ClientID%>").val;
if (status == "Prepared") {
var _Action = confirm('Do you really want to cancel this payment ? All pending money will be available in the retention account of the contractor ');
if (_Action) {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
return true;
}
else {
return false;
}
}
});
});
I get the OK button when I run this javascript but I want to add a cancel button as well. Plus i am calling this from c# code behind
You can try using jQuery UI Dialog:
<div id="dialog" title="Confirmation Required">
Do you really want to cancel this payment? All pending money will be available in the retention account of the contractor.
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".abc").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
var status = $("#<%=ddlstatus.ClientID%>").val();
$("#dialog").dialog({
buttons : {
"Ok" : function() {
if (status == "Prepared") {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
}
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
DEMO: http://jsfiddle.net/rCVrc/
EDIT:
Quoting Nick's answer here, you can use the ScriptManager.RegisterStartupScript() method, like this:
ScriptManager.RegisterStartupScript(this, GetType(), "modalscript",
"$(function() { $('#dialog').dialog({
buttons : {
'Ok' : function() {
if (status == 'Prepared') {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
}
window.location.href = targetUrl;
},
'Cancel' : function() {
$(this).dialog('close');
}
}
}); });", true);
"If you're not using a ScriptManager/UpdatePanels, use the equivalent ClientScriptManager version.
It's important to remember to wrap your code in a document.ready handler (IE has the most issues without it), so your elements (in my example, id="dialog") are in the DOM and ready."
This is a long shot, but does using window.confirm() give any improvement over confirm() ?
confirm() should do the trick. Check this link. http://www.w3schools.com/js/tryit.asp?filename=tryjs_confirm
I am using a plugin called uploadify to show file upload progress to users. The uploadify script calls default.aspx (asynchronously). In the Page_Load method of the default.aspx I run validation checks on the other form data that was passed through it.
If a validation check fails I like to display an error message using a literal control and then exit. The problem is the literal control is not being updated with the validation error messages.
Updated
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HttpContext context = HttpContext.Current;
if (context.Request.Files["Filedata"] != null)
{
if (context.Request["Name"] == null)
{
litValidationErrors.InnerHtml = "Please enter a name";
return;
}
}
}
}
<script type="text/javascript">
$(document).ready(function ()
{
$('#file_upload').uploadify({
'uploader': '/Plugins/Uploadify/uploadify.swf',
'script': '/default.aspx',
'cancelImg': '/Plugins/Uploadify/images/cancel.png',
'folder': '/FileUploads',
'auto': false,
'onComplete': function (event, ID, fileObj, response, data)
{
var uploadifyResponse = $("#<%= litValidationErrors.ClientID %>", $(response));
if (uploadifyResponse.length > 0)
{
$("#<%= litValidationErrors.ClientID %>").css("display", "inline").text(uploadifyResponse.text());
}
}
});
$('#MainContent_superSubmit').click(function ()
{
var jsonFormData = {
'Name': $('#MainContent_txtName').val(),
'Password': $('#MainContent_txtPassword').val()
};
$('#file_upload').uploadifySettings('scriptData', jsonFormData);
$('#file_upload').uploadifyUpload();
});
});
</script>
<html>
.....
<asp:Button ID="superSubmit" runat="server" Text="Button" />
<span id="litValidationErrors" runat="server" style="display: none; color: #ff0000;"></span>
</html>
Change the litValidationErrors control from Literal to the span with runat="server", remove Visible="false" and hide it by setting style="display: none;". Also, add the onComplete event handler to the uploadify:
$(function () {
$('#file_upload').uploadify({
'uploader': '/Plugins/Uploadify/uploadify.swf',
'script': '/WebForm1.aspx',
'expressInstall': '/Plugins/UploadifyexpressInstall.swf',
'cancelImg': '/Plugins/Uploadify/images/cancel.png',
'folder': '/App_Data/FileUploads',
'auto': false,
'onComplete': function (event, ID, fileObj, response, data) {
var uploadifyResponse = $("#<%= litValidationErrors.ClientID %>", $(response));
if (uploadifyResponse.length > 0) {
$("#<%= litValidationErrors.ClientID %>").css("display", "inline").text(uploadifyResponse.text());
}
}
});
});
Add callback function to your script that will update the text of literal control