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

doPostBack + beforeclose on dialago

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

Javascript function is not working on asp:button Click event, where a test alert function works.!

I am trying to create an alert as described in this site http://needim.github.com/noty/
and here is the code
<head runat="server">
<title>Test</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/noty/jquery.noty.js"></script>
<script type="text/javascript" src="js/noty/layouts/top.js"></script>
<link rel="stylesheet" type="text/css" href="buttons.css" />
<script type="text/javascript" src="js/noty/themes/default.js"></script>
</head>
<body>
<div class="container">
<div id="customContainer">
</div>
</div>
<script type="text/javascript">
function generate(type, layout) {
var n = noty({
theme: 'defaultTheme',
text: 'Do you want to continue?',
buttons: [
{
addClass: 'btn btn-primary',
text: 'Ok',
onClick: function ($noty) {
// this = button element
// $noty = $noty element
$noty.close();
noty(
{
text: 'Record deleted !',
type: 'success',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(true); },
onClose: function () { },
afterClose: function () { }
}
});
}
},
{
addClass: 'btn btn-danger',
text: 'Cancel',
onClick: function ($noty) {
$noty.close();
noty(
{
text: 'Record not deleted !',
type: 'warning',
callback:
{
onShow: function () { },
afterShow: function () { TakeValue(false); },
onClose: function () { },
afterClose: function () { }
}
});
}
}
]
});
}
function TakeValue(result) {
if (result == true) {
document.getElementById("Hidden1").value = "true";
alert(document.getElementById("Hidden1").value);
} else {
document.getElementById("Hidden1").value = "false";
alert(document.getElementById("Hidden1").value);
}
}
function generateAll() {
generate('information', 'top');
}
</script>
<form id="form" runat="server">
<input id="Hidden1" type="hidden" value="false"/>
<asp:Button ID="Button2" runat="server" Text="Press" OnClientClick="return generateAll();" />
<input id="Button1" type="button" value="button" onclick="return generateAll();" />
</form>
</body>
I have placed two buttons ,one is HTML button while the other is of asp:Button,
The whole scenario just works fine when I use the HTML button ,but the page is not displaying the similar behavior in case of asp:Button click, I have placed a test function in JavaScript to test the OnClientClick event of the asp:Button and that worked fine,but I don't know why this alert is not getting called, I think there is some problem with the Noty JS.
Kindly give feed back
thanks.

As jbabey said in the comments:
an asp:button will cause a postback when clicked by default. you need to return false from the onclientclick, right now you are returning undefined since generateAll has no return.
Since you're using jQuery, I'd go one step further and not directly set the click attribute. Instead, set it using jQuery:
<script>
$(document).ready(function() {
$('#Button1').click(generateAll);
});
...
function generateAll(e) {
generate('information', 'top');
// This will prevent the default action of submitting the form.
e.preventDefault();
}
</script>

Could you please add UseSubmitBehavior="false" attribute to the asp:button.
<asp:Button ID="Button2" runat="server" Text="Press" UseSubmitBehavior="false" OnClientClick="return generateAll();" />
I hope this will resolve your issue. Please let me know whether it helped you or not.

Jquery MultiSelect auto postback

I am using a jQuery multiselect dropdown in ASP.NET I need to get all the selected values, but I am getting only the last selected value from the dropdownlist on the server side after postback.
Script:
<script type="text/javascript">
$(document).ready(function () {
$('.department).multiselect({
show: ["bounce", 5], hide: ["blind", 1],
close: function () {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function (index, item) {
values.push($(item).val());
});
$("input[id*=selectedValues]").val(values.join(","));
document.getElementById("<%=hdnDepartment.ClientID %>").value = values;
}
})
.multiselectfilter();
});
</script>
<asp:HiddenField ID="hdnDepartment" runat="server"></asp:HiddenField>
<asp:HiddenField ID="hdnEmployee" runat="server" />
<asp:DropDownList ID="ddlDepartment" runat="server" Width="150px" CssClass="department" onselectedindexchanged="ddlDepartment_SelectedIndexChanged" AutoPostBack="True">
</asp:DropDownList>

Try joining the values and then writing it to a hidden field..
$('[id*=hdnDepartment]").val(values.join()) ;
//OR
document.getElementById("<%=hdnDepartment.ClientID %>").value = values.join();
Also looks like you are losing the vent once the postback occurs. So you need to reattach it once the postback is done .. Try this.
<script type="text/javascript">
$(document).ready(function () {
PostBack();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(PostBack);
});
function PostBack(){
$('.department).multiselect({
show: ["bounce", 5], hide: ["blind", 1],
close: function () {
debugger;
var values = new Array();
$(this).multiselect("getChecked").each(function (index, item) {
values.push($(item).val());
});
$("input[id*=selectedValues]").val(values.join(","));
document.getElementById("<%=hdnDepartment.ClientID %>").value = values;
}
})
.multiselectfilter();
}
</script>