I have a problem in my code when I'm using an Asp button in a jquery dialog where modal is set to "true".
Here is my code :
Js
$(document).ready(function () {
var dlg = $("#mws-jui-dialog").dialog({
autoOpen: false,
title: "Delete",
modal: true,
width: "640",
minHeight : 160,
minWidth : 170
});
dlg.parent().appendTo(jQuery("form"));
$("#btnDelete").bind("click", function (event) {
$("#mws-jui-dialog").dialog("option", { modal: true}).dialog("open");
event.preventDefault();
});
$("#btnClose").bind("click", function (event) {
$("#mws-jui-dialog").dialog("close");
event.preventDefault();
});
});
On my aspx page :
asp:Button runat="server" ID="bidon" CssClass="mws-button green" OnClick="DeleteButton_Click" Text="Yes"
And on my cs :
protected void DeleteButton_Click(object sender, EventArgs e)
{
Response.Redirect("mypage.aspx");
}
When i set modal to false it's working fine but as i've understood that modal disable items on my page, i'm looking for a way to use my asp button when modal is at true (or just a another way to fix it).
I know your question is a few months old but if I understand it correctly... In your mws-button green CSS class. Include the z-index: property and set it too 1000. This will ensure that your button sits on top of the modal bkgd.
.mws-button green
{
z-index: 1000;
}
Let me know if this helps.
Related
I am using KendoUI controls with JavaScript with MVC. I have a popup window create by "kendoWindow".
its working fine, but when i press ESC key it will automatically close.
I want to disable the ESC key so that window popup can be only closed by Cancel button or close button.
Here is my Kendo Window code.
var wndEditClient= $("#divEditClient")
.kendoWindow({
title: "Edit Client",
modal: true,
visible: false,
resizable: false,
width: 450,
actions: ["Close"]
}).data("kendoWindow");
wndEditClient.open();
Please Suggest.
I tried JavaScript keypress event and all that but does not work.
$(document).bind("keypress", function (e) {
if (e.keyCode == 27) {
e.preventDefault();
}
});
Tried this but not working.
Put this before including your first Kendo Window directive:
$(function () {
kendo.ui.Window.fn._keydown = function (originalFn) {
var KEY_ESC = 27;
return function (e) {
if (e.which !== KEY_ESC) {
originalFn.call(this, e);
}
};
}(kendo.ui.Window.fn._keydown);
});
(demo)
I have a page containing a jQuery ui tab control. That is working just fine.
The issue I have is saving the selected tab between PostBacks occuring from a DropDownList, without (offcourse) disabling those PostBacks.
I have following code on my aspx page and I receive no Javascript errors whatsoever:
<script>
var selected_tab = 1;
$(document).ready(function () {
var tabs = $("#rapportentabs").tabs({
activate: function (e, i) {
selected_tab = i.index;
}
});
selected_tab = $("[id$=selected_tab]").val() != "" ? parseInt($("[id$=selected_tab]").val()) : 0;
tabs.tabs("option", "active", selected_tab);
$("form").submit(function () {
$("[id$=selected_tab]").val(selected_tab);
});
});
</script>
<div id="rapportentabs">//containing the tabs itself</Div>
<asp:HiddenField ID="selected_tab" runat="server" />
I have following in my code behind:
protected void Page_Load(object sender, EventArgs e)
{
selected_tab.Value = Request.Form[selected_tab.UniqueID];
}
I've finally found a solution which seems to work perfectly
Just change the javascript part using direct reference to objects and use i.newTab.index() instead of i.index
The correct script should read as:
<script>
var selected_tab = 1;
$(document).ready(function () {
var tabs = $("#rapportentabs").tabs({
activate: function (e, i) {
selected_tab = i.newTab.index();
$("#selected_tab").val(selected_tab);
}
});
selected_tab = $("#selected_tab").val() != "" ? parseInt($("#selected_tab").val()) : 0;
tabs.tabs("option", "active", selected_tab);
$("form").submit(function () {
$("#selected_tab").val(selected_tab);
});
});
</script>
One option is to save the selected_tab in a localstorage and then restore it when the page loads - this will have a side affect of saving the selected tab not only when you post but also when you close the tab and reopen it.
Another option, much better IMHO, is to post the form with Ajax and this way you will not get a page refreshed at all - but this will mean you have to update whatever page changes, which may be lots of work if you have lots of server side rendering code.
I have a JQuery modal form with 4 image buttons. When the modal box opens and I click on those buttons then nothing happens. I know that when the box opens it moves outside of the form but I do not know how to get it back. I have tried several variations on the .parent().appendTo($("form")); and have changed that in many different ways with no success. Currently when I use that the box opens up but the entire screen is darkened and I cannot click on the buttons. Here is my JQuery function:
<script type="text/javascript">
$(function () {
$("#Change").dialog({
resizable: false,
draggable: false,
width: 800,
modal: true,
show: { effect: 'fadeIn', duration: 500 },
hide: { effect: 'fadeOut', duration: 300 },
autoOpen: false,
open: function (type, data) {
$(this).parent().appendTo($("form"));
}
});
$("#ui-dialog-title-dialog").hide();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
$("#openChange1").click(function () {
$("#<%=txtCardChange.ClientID %>").val("1");
$("#Change").dialog("open");
$('.ui-widget-overlay').live("click", function () {
$("#Change").dialog("close");
});
return false;
});
});
</script>
If needed here is my html to call the modal form:
<a id="openChange1" href="#" style="color: Red">Change Card</a>
The html for the modal form is just inside a simple div tag:
<div id="Change">
\\html here
</div>
So, any help would be greatly appreciated. If needed I am using Visual Studio 2012 with .NET 4.0. The code behind the buttons are in C#. Thank you for your time.
I had the same problem I solved as below:
<script type="text/javascript">
$(function () {
$("#Change").dialog({
resizable: false,
draggable: false,
width: 800,
modal: true,
show: { effect: 'fadeIn', duration: 500 },
hide: { effect: 'fadeOut', duration: 300 },
autoOpen: false,
appendTo: "form"
});
$("#ui-dialog-title-dialog").hide();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
$("#openChange1").click(function () {
$("#<%=txtCardChange.ClientID %>").val("1");
$("#Change").dialog("open");
$('.ui-widget-overlay').live("click", function () {
$("#Change").dialog("close");
});
return false;
});
});
</script>
In jQuery UI v1.10 they added an appendTo property, which seems to do the same thing as calling .parent().appendTo($("form")). The dialog appears on top of the grayed background. And Post back does work.
As you mentioned, JQuery moves the contents of the dialog to a direct child of the page body to solve several rendering issues: http://forum.jquery.com/topic/preventing-dialog-from-rearranging-dom-flow
The problem is that if you move the buttons immediately back, the 'overlay' div that is used to darken the rest of the screen and make the dialog modal (ie eat click events) prevents your button clicks from happening in the original location.
One solution is to use a clone of your Change div for the modal and bind click handlers that call click() on the original buttons.
Another option is to have the buttons call .NET's postback methods instead of letting the normal HTML form do the submit:
__doPostBack("ctl00$button_name_here");
<asp:LinkButton runat="server" id="openChange1" onclientclick="openChange1Click()" />
<script type="text/javascript">
function openChange1Click () {
$("#<%=txtCardChange.ClientID %>").val("1");
$("#Change").dialog("open");
$('.ui-widget-overlay').live("click", function () {
$("#Change").dialog("close");
});
return false;
}
</script>
Got it, thanks for the help, it steered me in the right direction.
$(function () {
$("#Change").dialog({
resizable: false,
draggable: false,
width: 400,
modal: true,
show: { effect: 'fadeIn', duration: 500 },
hide: { effect: 'fadeOut', duration: 500 },
autoOpen: false,
open: function (type, data) {
$(this).parent().appendTo("form:first");
}
}).parent().css('z-index', '1005');
$("#ui-dialog-title-dialog").hide();
$(".ui-dialog-titlebar").removeClass('ui-widget-header');
$("#Change").hide().show();
$("#openChange1").click(function () {
$("#<%=txtCardChange.ClientID %>").val("1");
$("#Change").dialog("open");
$('.ui-widget-overlay').live("click", function () {
$("#Change").dialog("close");
});
return false;
});
});
I was looking for an answer, but could not find anything helpfull yet.
I have a gridview with some data (from SQL database) and an option to delete a row. Before deleting the row I want the user to confirm the delete (pupup window). I know how to create a popup with javascript, but I don't like the apperance of that popup. I would like to make ky own "popup".
I was thinking of overlaying one panel (where I put text (Label) and some buttons (OK, Cancel)) over the panel where I have the gridview. Something like in the picture. How would I accomplish something like that?
How about using the Ajax control toolkit popup?
http://www.asp.net/ajaxlibrary/act_Popup.ashx
This seems to do exactly what you are looking for for you.
What about JQueryUI dialog with custom styling?
Use the jQuery UI dialog
Example:
<script type="text/javascript">
$(function () {
var $dialog = $("#dialog");
var $foo = $("input:submit[id$=foo]");
var confirmed = false;
$dialog.hide();
$dialog.dialog({
width: "300px",
modal: true,
autoOpen: false,
buttons: {
OK: function (e) {
$dialog.dialog("close");
confirmed = true;
$foo.click();
},
Cancel: function (e) {
$dialog.dialog("close");
confirmed = false;
}
}
});
$foo.click(function (e) {
if (!confirmed) {
$dialog.dialog("open");
}
return confirmed;
});
});
</script>
Full working example can be downloaded from here
I have a masterpage with a Login Control in it. When the Login button is clicked, I would like for a JQuery Dialog to popup if the user's membership is about to expire within 30 days, else it will just log them in as normal. I can't figure out how to do it. I wll post parts of code:
Here is the javascript:
<script type="text/javascript">
function showjQueryDialog() {
$("#dialog").dialog("open");
}
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: { "Renew Membership": function()
{ $(this).dialog("close"); } }
});
});
</script>
The login button is called ibtnLoginButton and here is part of the code:
//Grab the user profile.
UserProfiles userProfile =
UserProfiles.GetUserProfiles(txtUserName1.Text);
//Calculate the Time Span
TimeSpan timeSpan = userProfile.Expiration.Subtract(DateTime.Now);
if (timeSpan.Days < 30)
{
//Show JQuery Dialog Here
}
else
{
//Continue with Login Process.
}
how about this?
if (timeSpan.Days < 30)
{
//Show JQuery Dialog Here
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration", "showjQueryDialog()", true);
}
If, as you've said you've got this jQuery dialog to appear when clicking an asp:Button, why not just hide the button and change your javascript to just press the button once the page has loaded?
Why not always call the jquery method when the button is clicked, and then determine within the javascript method whether or not you want to show the dialogue? If not, just don't do anything. Since you're just checking whether ExpirationDate is smaller than now + 30 days, you can do that calculation just fine in javascript.
Edit:
I can't provide you with the exact solution, but here is some pseudocode to get you on your way.
First make the user profile's expiration date need available in javascript:
<script>
var userProfileExpiresOn = "<asp:Literal ID="userProfileExpiresOn" />";
</script>
Then edit your method so that it does the logic you're currently doing server-side for you:
<script>
function showjQueryDialog() {
if (userProfileExpiresOn < (now + 30 days))
$("#dialog").dialog("open");
}
</script>
You can find some documentation on how to work with dates in Javascript at W3schools.