Develop Reference

No postback after user confrim in jquery dialog box

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

Asp:Button - if OnClientClick = True | False

<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
}

Perform action when user clicks yes on jquery dialog from c# codebehind

Right now i am using a message box in asp.net however i want to use jquery for the same
var DialogResult = MessageBox.Show("Do you want to create the File ?", "Start Invoicing", MessageBoxButtons.YesNo, MessageBoxIcon.Question);
if (DialogResult == DialogResult.Yes)
{
//perform some action
}
else
{
//this
}
Can this be achieved through jquery? can the text of the jquery box be changed according to what i want to execute
Please help
<script type="text/javascript">
$(document).ready(function () {
$('#cmdShowDialog').click(function (event) {
event.preventDefault();
var $dialog = $('<div>Dynamic Dialog with Buttons.</div>')
.dialog
({
title: 'Cancel',
width: 300,
height: 200,
buttons:
[{
text: "Yes",
click: function () {
$dialog.dialog('close');
}
},
{
text: "Cancel",
click: function () {
$dialog.dialog('close');
}
}]
});
});
});
</script>
<asp:Button ID="cmdShowDialog" runat="server" Text="Show Dialog" />
Have tried using this but how should i proceed...

you can do something like this...
javascript:
<script type="text/javascript">
function dialogYesNoCancel(btn1func, btn2func) {
$("#dialogMessage").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
Cancel: function () {
$(this).dialog("close");
},
No: function () {
$(this).dialog(btn2func());
$(this).dialog("close");
},
Yes: function () {
$(this).dialog(btn1func());
$(this).dialog("close");
}
}
});
};
function func1() {
$("#Button1").click();
}
function func2() {
$("#Button2").click();
}
</script>
ASPX:
<asp:Button ID="Button1" clientidmode="Static" runat="server" Text="Button" onclick="Button1_Click" />
<asp:Button ID="Button2" clientidmode="Static" runat="server" Text="Button" onclick="Button2_Click" />
CS:
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this, this.Page.GetType(), Guid.NewGuid().ToString(), "dialogYesNoCancel(func1, func2)", true);
}
protected void Button1_Click(object sender, EventArgs e)
{
//do something
}
protected void Button2_Click(object sender, EventArgs e)
{
//do something
}

ASP:UpdatePanel - Add JavaScript on Button Click

I have a asp:UpdatePanel with a asp:Button and a asp:TextBox:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="Click" ID="button" onclick="button_Click"/>
<asp:TextBox runat="server" Title="Text" ID="text" Style="margin-top: 50px;" />
</ContentTemplate>
</asp:UpdatePanel>
And the button_Click method is:
protected void button_Click(object sender, EventArgs e) {
text.Attributes.Add("title", "Box");
ClientScript.RegisterClientScriptBlock(typeof(ScriptManager), "Tooltify", "tooltipfy();", true);
}
tooltify() is a javascript function.
var tooltipfy = function () {
alert('');
$('[title]').qtip({
style: {
tip: {
corner: true,
width: 10,
height: 5
},
classes: 'ui-tooltip-rounded ui-tooltip-shadow ui-tooltip-tipsy'
},
position: {
my: 'bottom left',
at: 'top right',
adjust: {
x: -10,
y: 0
}
},
events: {
show: function (event, api) {
$('.ui-tooltip-content').addClass('ui-tooltip-center');
}
},
show: {
effect: function (offset) {
$(this).show("slide", { direction: "up" }, 500);
}
},
hide: {
effect: function (offset) {
$(this).hide("explode", 500);
}
}
});
}
The problem is the function is not executing.
How can I call JavaScript function while using asp:UpdatePanel?

You should use ScriptManger when using UpdatePanel.
protected void button_Click(object sender, EventArgs e) {
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),"Tooltify", "tooltipfy();", true);
}

I'm not in the possibility to test it now, but according to this blog you should get it to work with ScriptManager.RegisterStartupScript.

using ClientScript.RegisterClientScriptBlock is not good practice.
If your Javascript function (tooltipfy) should update some controls, you should place these controls under your asp:UpdatePanel and update them in your code behind like this:
someDiv.Style.Add("display", "inline");
someDiv.InnerHtml = Text;
otherControl.Style.Add("display", "block");

Literal control not updating

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