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
Related
I have a jquery UI dialog on my page. It contains nothing more than a single asp FileUpload control:
<asp:FileUpload runat="server" ID="fuAttachment" />
The dialog has 1 button "OK". Those button simply closes the dialog
$("#attachment-dialog").dialog({
height: 300,
width: 400,
modal: true,
resizable: false,
autoOpen: false,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
When pressing the save button on my page. Which is an asp.net button the method SaveAttachement is called.
The problem is that fuAttachment.HasFile (the fileupload control) keeps returning false.
If I move the fileupload control outside of the jQuery UI dialog. HasFile = true.
But the control should be inside the dialog. There's no updatepanel inside the specific page.
The problem is happening because the dialog is outside of the form.
jQuery UI Dialog has an appendTo parameter that will ensure the dialog is part of the form.
$("#attachment-dialog").dialog({
appendTo: "form",
height: 300,
width: 400,
modal: true,
resizable: false,
autoOpen: false,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
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 ???
<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
}
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
Page:
<body>
<form id="frmLogin" runat="server">
<asp:Button ID="btnClick" OnClientClick="openConfirmDialog();" OnClick="PopulateLabel" runat="server"/>
<div id="divDialog"></div>
<asp:Label ID="lblText" runat="server"></asp:Label>
</form>
</body>
JS
<script type="text/javascript">
$(document).ready(function() {
$("#divDialog").dialog({autoOpen: false,
buttons: { "Ok": function()
{
$(this).dialog("close");
},
"Cancel": function()
{
$(this).dialog("close");
}
}
});
});
function openConfirmDialog()
{
$("#divDialog").dialog("open");
}
C#
protected void Page_Load(object sender, EventArgs e)
{
lblText.Text = "";
}
protected void PopulateLabel(object sender, EventArgs e)
{
lblText.Text = "Hello";
}
This code opens me a dialog box with Ok and Cancel button but it do not wait for user activity and post the page immediately and the label gets populated. I need to call the c# function based on user activity. If user clicks "Ok" label should get populated and if user clicks "Cancel" it should not call the c# function. How do I achieve this?
First, to prevent the page from immediately posting back to the server, you need to cancel the default behavior of the click event by returning false from your handler:
<asp:Button ID="btnClick" runat="server" OnClick="PopulateLabel"
OnClientClick="openConfirmDialog(); return false;" />
Next, you need to perform the postback yourself when your Ok button is clicked:
$("#divDialog").dialog({
autoOpen: false,
buttons: {
"Ok": function() {
$(this).dialog("close");
__doPostBack("btnClick", "");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
Note that the first argument to __doPostBack() is the name of the control (its UniqueID in ASP.NET terminology). Since the button is a direct child of the <form> element, we can hardcode its id in the __doPostBack() call, but things will get more complicated if it resides in a container hierarchy. In that case, you can use ClientScript.GetPostBackEventReference() to generate the appropriate call to __doPostBack().
EDIT: Since your page does not contain any postback-enabled control, __doPostBack() won't be defined on the client side. To work around that problem, you can use a LinkButton control instead of a Button control.
Added another button and used the jQuery click() event to trigger new button's click event which will in turn trigger the respective event handler in C#