I have an issue in implementing the JQuery dialog with asp.net form. When I click on #hlChangePassword nothing happens. This is my code below:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#hlChangePassword').click(function () {
var dlg = jQuery('div#ChangePass').dialog({
width: 500,
height: 500,
modal: true,
buttons: {},
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
}
});
dlg.parent().appendTo(jQuery("form:first"));
});
});
</script>
html
<asp:HyperLink ID="hlChangePassword"
runat="server" NavigateUrl="#">Change Password</asp:HyperLink>
<div id="ChangePass" style="display:none;">
//The content
</div>
I don't know what is the problem. Please help me.
User event.preventDefault(); to prevent the post back as follows
jQuery(document).ready(function () {
jQuery('#hlChangePassword').click(function (event) {
var dlg = jQuery('div#ChangePass').dialog({
width: 500,
height: 500,
modal: true,
buttons: {},
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
}
});
dlg.parent().appendTo(jQuery("form:first"));
event.preventDefault();
});
});
As hlChangePassword is a server control so it will post back. to overcome this you should use event.preventDefault.
Also you are using id selector which can change at run-time due to master page or user-control. So use server id or static id for the link as follows if you are using asp.net 4.0 or above as follows
ClientIDMode="Static"
<asp:HyperLink ID="hlChangePassword" ClientIDMode="Static"
runat="server" NavigateUrl="#">Change Password</asp:HyperLink>
Bingo...
script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">
add above line it wont work without ui.js.
I wanna call this jquery function in ASP.NET on button click event
var doRedirect = function() { location.href='http://www.example.com' };
$("#button1").click(function() {
$("#label1").show();
window.setTimeout("$('#label1').fadeOut('slow', doRedirect)", 10000);
});
If your jQuery is inline, you can do the following:
var doRedirect = function() { location.href='http://www.example.com' };
$("#<%=button1.ClientId%>").click(function() {
$("#<%=label1.ClientId%>").show();
window.setTimeout("$('#<%=label1.ClientId%>').fadeOut('slow', doRedirect)", 10000);
});
If it isn't inline (i.e. in a file), you will need to get the client control Id's you want to use in a different way, for example wrapping them in a div with an ID and selecting them through the div:
<div id="myId">
<asp:Label runat="server" id="label1" />
<asp:Button runat="server" id="button1" />
</div>
var doRedirect = function() { location.href='http://www.example.com' };
$("#myId input").click(function() {
$("#myId span").show();
window.setTimeout("$('#myId span').fadeOut('slow', doRedirect)", 10000);
});
Note that I am using the output HTML element types as the descendant in the jQuery selector.
Asp.Net 3.5 / WebForms (no ajax)
I am trying to update a delete confirm box with jquery & UIBlock. Old code looks something like this...
<asp:LinkButton OnClientClick="return confirm('Are you sure you want to delete?')" runat="server" ID="DeleteButton" OnClick="DeleteButton_OnClick">Delete</asp:LinkButton>
What is the best practice to postpone and then continue a postback with jquery & asp.net? I haven't found a clean way/example/guidance on this. Dave Ward (encosia.com) has some examples w/ UIBlock but none of them uses UIBlock as a confirmation / modal popup.
Thanks for any help/pointers.
Answer
<a href="#" id="delete">
<span>Delete?</span>
</a>
<div id="question" style="display:none; cursor: default">
<h1>Are you sure you want to delete?</h1>
<asp:LinkButton runat="server" Text="Yes" OnClick="DeleteButton_OnClick"></asp:LinkButton>
<span>No</span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#delete').click(function(ev) {
ev.preventDefault();
$.blockUI({ message: $('#question'), css: { width: '275px'} });
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
You can do something like this :
$('#DeleteButton').bind('click', function() {
// if confirmation button inside the form is pressed ..
$('#confirm_button').bind('click', function() {
// redirect to the page where it resolves the request
window.location = "http://www.site.com/?delete";
// or use ajax call
$.ajax({
// the request to delete
});
// this one in case you choose to make ajax request
$.unblockUI();
});
$.blockUI({
// form setted with display:none; in css to be trigged when delete button is clicked
// css here is an example
message: $('#delete_form'),
css: {
border: 'none',
padding: '15px',
width: '400px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
color: '#fff'
}
});
// cancel button inside the form, when clicked, dismiss form
$('#cancel').click($.unblockUI);
// if user clicks outside the form, it dismisses the form as well
$('.blockOverlay').click($.unblockUI);
});
I am trying to use confirmation dialog from jQuery UI.
I ran into this problem: how to trigger correctly the dialog and at the same time prevent trigger OnClick event specified at button until user click on Yes or No buttons at dialog?
In the example below are two ways how to popup confirmation. Lower one
works well. It's a classic JavaScript confirm dialog. When I try to use the jQuery UI dialog, it displays a dialog but allows it to run the event assigned at OnClick (here by using Command, but I suppose there is no difference. Hope I am not wrong.). The piece is taken from the ASP.NET Repeater control btw.
<li>
<asp:LinkButton ID="lbtnRenew" runat="server" Text="Renew" CssClass="ContextMenuItem"
CommandName="Renew" CommandArgument="<%# Container.ItemIndex %>"
OnClientClick="javascript: openModalDiv('dialogRenew');" /></li>
<li>
<asp:LinkButton ID="lbtnRemove" runat="server" Text="Remove" CssClass="ContextMenuItem"
CommandName="Remove" CommandArgument="<%# Container.ItemIndex %>"
OnClientClick="return confirm('Are you sure that you want to delete package?');" /></li>
This is the JavaScript I used so far:
function openModalDiv(divname) {
$('#' + divname).dialog({
bgiframe: true,
resizable: false,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Ok: function() {
$(this).dialog('close');return true;
},
Cancel: function() {
$(this).dialog('close');return false;
}
}
});
}
I am missing something, but don't know what. How do I solve this problem?
Thanks for any tip.
P.S. if you need add some additional information let me know.
You need to configure your modal dialog and then attach an onclick event handler in the document.ready handler. Also since you're using asp.net server controls, the id generated in the html will contain the naming container so you won't be able to select using #lbtnRenew selector mentioned above. The actual generated ID will be something like ctl00_...lbtnRenew. You can use alternate jquery selectors to get just the last part of the id or name as follows
$(function() {
// configure modal dialog
$('#dialogRenew').dialog({
bgiframe: true,
resizable: false,
modal: true,
autoOpen: false,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
Ok: function() {
$(this).dialog('close');return true;
},
Cancel: function() {
$(this).dialog('close');return false;
}
}
});
// attach onclick event handler to open dialog
// $= selector for elements with attribute ending in text
$("submit[name$=lbtnRenew]").click(function(event) {
event.preventDefault();
$('#dialogRenew').dialog('open');
});
});
then you can remove the onclientclick inline javascript for your linkbutton
Remove the onClientClick and use jQuery to add the event, then you can use preventDefault...
$("#lbtnRenew").click(function(e) {
e.preventDefault(); //stops OnClick event
//jscript code here
});
I've created a jQuery UI Modal form, and I want that form to trigger a postback, but I'm having difficulty getting it to work.
I know there are quite a few articles based on using the SimpleModal plugin, and I have tried to adapt these and override the _doPostback function, but with no joy.
I think the problem is within the call to my __doPostBack function and what the parameters should be. Is that the case?
Here's my form
<form id="summaryForm" runat="server">
<div id="dialog" title="Quick Booking">
<p>Select user from list or enter name in box</p>
<fieldset>
<p><label>Is machine going out of the office?</label></p>
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="Yes" ID="optYes" class="radio" runat="server" />
<asp:RadioButton TextAlign="Left" GroupName="outOfOffice" Text="No" ID="optNo" class="radio" runat="server" Checked="true" />
<label for="dropLstUser">User:</label>
<asp:DropDownList ID="dropLstUser" runat="server" />
<input type="text" name="txtUser" id="txtUser" value="" class="text" />
<label for="txtStartDate">Start Date:</label>
<input type="text" id="txtStartDate" name="txtStartDate" class="datepicker" />
<asp:HiddenField ID="assetField" runat="server" />
<%--<button onclick="performPostBack('summaryForm')">Postback</button>--%>
</fieldset>
</div>
//--------------------------------
Here is the JavaScript code:
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true,
buttons: {
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm",null);
}
}
});
});
function newDoPostBack(eventTarget, eventArgument)
{
alert("postingback");
var theForm = document.forms[0];
if (!theForm)
{
theForm = document.aspnetForm;
}
if (!theForm.onsubmit || (theForm.onsubmit() != false))
{
document.getElementById("__EVENTTARGET").value = eventTarget;
document.getElementById("__EVENTARGUMENT").value = eventArgument;
theForm.submit();
}
}
</script>
After creating your dialog simply move the dialog back into your form. Example:
$("#divSaveAs").dialog({bgiframe:false,
autoOpen:false,
title:"Save As",
modal:true});
$("#divSaveAs").parent().appendTo($("form:first"));
This worked for me. Postback works find.
Be aware that there is an additional setting in jQuery UI v1.10. There is an appendTo setting that has been added, to address the ASP.NET workaround you're using to re-add the element to the form.
Try:
$("#dialog").dialog({ autoOpen: false, height: 280, width: 440, modal: true, appendTo:"form" });
"AppendTo" option works to me.
$("#dialog").dialog({ ..., appendTo:"form" });
See: http://api.jqueryui.com/dialog/#option-appendTo
Many thanks for the post of csharpdev!
The following code did it for my page:
$("#photouploadbox").dialog({
autoOpen: false,
modal: true,
buttons: { "Ok": function() { $(this).dialog("close"); } },
draggable: false,
minWidth: 400 });
$("#photouploadbox").parent().appendTo($("form#profilform"));
One cheeky hack I have used is to create a normal .NET button along with textboxes, etc. within a div on the page, using jQuery get the HTML for that div, add it to the dialog, and then remove the HTML within the original div to avoid id duplication.
<div id="someDiv" style="display: none">
<p>A standard set of .net controls</p>
<asp:TextBox ID="textBoxl" runat="server" CssClass="required email"></asp:TextBox>
<input id="button1" type="button" value="Confirm" onclick="SomeEvent();" />
</div>
And the script:
var html = $("#someDiv").html();
$("#dialog").append(html);
$("#someDiv").remove();
$("#dialog").dialog({
bgiframe: true,
height: 300,
modal: true
});
I managed to solve the problem - probably not the best way but here's what I did.
The dialog wouldn't postback because jQuery UI takes the submit button out of the form and appends it to the bottom of the body tag, so when you try to postback the button it doesn't know what it's posting.
I got round this by modifying the jQuery UI code by changing this:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.body)
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
To this:
uiDialog = (this.uiDialog = $('<div/>'))
.appendTo(document.forms[0])
.hide()
.addClass(
'ui-dialog ' +
'ui-widget ' +
'ui-widget-content ' +
'ui-corner-all ' +
options.dialogClass
)
It is not ideal to modify the source library, but it's better than nothing.
It works as expected when I used
$("#divDlg").dialog("destroy");
instead of
$("#divDlg").dialog("close").appendTo($("#Form1")).hide();
When we append to the Form and reopen the dialog, I had issues with layouts and z-index.
'Close': function() {
alert("closing");
$(this).dialog("close");
__doPostBack = newDoPostBack;
__doPostBack("aspnetForm", null);
}}});});
The __doPostBack function takes the control which is causes the postback and an argument if required. Your JavaScript examples and your markup do not seem to match up. For example, where I have quoted above, you reference aspnetForm, change this to the ID of the form and try again.
Make sure that the ID you use for client script is the same as the client ID of the ASP.NET control at runtime. If a control resides in a INamingContainer then it will have a unique id based on its parent container, so YourControlID will become YourINaminContainerID_YourControlID.
Let us know the outcome.
I can get this working if I have one of each. One div, one script, and one link. In my case, the dialog is allowing the user to leave a "note" per database record. I don't have any buttons on my dialog, just the default upper right "x" to close the dialog.
But I'm trying to get this to work within a ColdFusion query loop.. Multiple records, with each having their own dialog button, associated script, and div. I'm changing the IDs dynamically so they're all unique (that is, appending a _XX where XX is primary key of record to all the ids).
When I expand to this model, having multiple dialogs, scripts, divs.. If I open each dialog to edit the corresponding "note" for that record, it will only save the LAST one. Should I be doing the .parent().appendTo on a button click vs. automatically? Somewhere it's getting confused.
If I don't open any dialog (don't make any changes via dialog) and run a dump on the form results, I see all dialog fields coming through on the post as expected.
When I look at the raw HTML produced... All the IDs are unique and are called appropriately. I was thinking I was getting collision on a conflicting name/id somewhere, but it all looks good on that front.
My script:
<script type="text/javascript">
// Increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "##dialog#getALLFacilityEquipOrders.order_id#" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode",
width: 500,
resizable: false
});
$('.countable2').jqEasyCounter({
'maxChars': 2000,
});
// Dialog Link
$('##dialog_link#getALLFacilityEquipOrders.order_id#').click(function(){
$('##dialog#getALLFacilityEquipOrders.order_id#').dialog('open');
return false;
});
//hover states on the static widgets
$('##dialog_link#getALLFacilityEquipOrders.order_id#, ul##icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$("##dialog#getALLFacilityEquipOrders.order_id#").parent().appendTo($("form##allequipedit"));
});
</script>
My div:
<div id="dialog#getALLFacilityEquipOrders.order_id#"
title="Notes For #getALLFacilityEquipOrders.cLicenseNumber# - Order ID: ORD-#getALLFacilityEquipOrders.order_id#"
style="display:none;">
<cfquery datasource="#a_dsn#" name="getOrderNotes">
select notebody
from QIP_EquipOrders_Notes
where fk_order_id = #getALLFacilityEquipOrders.order_id#
</cfquery>
<fieldset class="qip_menu">
<label><b>Enter/Edit Notes:</b></label>
<textarea class="countable2"
id="notebody_#getALLFacilityEquipOrders.order_id#"
name="notebody_#getALLFacilityEquipOrders.order_id#"
rows="10"
cols="75">#getOrderNotes.notebody#</textarea>
</fieldset>
</div>
My button:
<a href="##"
id="dialog_link#getALLFacilityEquipOrders.order_id#"
class="ui-state-default ui-corner-all"
><span class="ui-icon ui-icon-newwin"></span>Notes</a>
To remove the animation glitch while appending dialog to form, below is the strategy.
open: function (event, ui) {
var dg = $(this).parent();
setTimeout(function () { dg.appendTo("form"); }, 1000);
});