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.
Related
I have a quick question...I have a masterpage and is there anyway that I can target the contentarea without having to use hyper links? I have tried using buttons and link buttons but it never worked. The reason why is because I want to have button states and I'm not sure how to go about doing this.
I have added an image to the link
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Tabbet.aspx"ImageUrl="~/Icons/Icon_english_a.png">HyperLink</asp:HyperLink>
and my code behind to try and show any state
void btn()
{
HyperLink1.Attributes.Add("onmousedown", "src='Images/logo.png'");
}
when I click on the image, the image is not changing to a down state.
Thanks
yes I have solution you should try following way:
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=Hyperlink1.ClientID%> img").hover(function () {
$(this).attr("src", "/Images/logo.png");
}, function () {
$(this).attr("src", "/Icons/Icon_english_a.png");
}).mousedown(function () {
$(this).attr("src", "/Images/logo.png");
}).mouseup(function () {
$(this).attr("src", "/Icons/Icon_english_a.png");
});
});
</script>
I have a div that contains an Asp checkboxlist and is opened by jquery ui dialog . I need to manage the postback too, so I add
.parent().appendTo($("form:first"));
The problem is that when dialog is opened all DOM is disabled, it seems that modal:true is extended to all DOM
this is aspx code :
<script type="text/javascript">
$(function () {
$("#modalDialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Salva": function () {
$("[id*=btn_save]").click();
},
"Annulla": function () {
$(this).dialog("close");
}
},
close: function () {
}
});
$("#modalDialog").parent().appendTo($("form:first"));
});
</script>
<div id="modalDialog" >
<asp:CheckBoxList ID="ckb_eventi" runat="server" DataTextField="NOME" DataValueField="ID_CASSA">
</asp:CheckBoxList>
</div>
<asp:Button ID="btn_save" runat="server" Text="Salva" style = "display:none" OnClick = "btn_save_Click" />
I solved using jquery ui dialog option :
appendTo: "form:first"
instead of using
$("#modalDialog").parent().appendTo($("form:first"));
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
});