When i click on button to show the message i get one MessageBox that's normal but when i call the Jquery Dialog for the SCOND time i get two MessageBoxs! and when i call Jquery Dialog for the third time i get three MessageBoxs! Please help me!
Here is my Code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("[id*=Call_Dialog]").click(function() {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("#ShowMessage").click(function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
})
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="MyDiv" style="display: none">
<asp:Button ID="ShowMessage" runat="server" Text="Button" />
</div>
</form>
<p>
<input id="Call_Dialog" type="button" value="button" /></p>
</body>
</html>
Thanks, but how can i call the dialog with button click?
Dialog should be initialized only once not every time you click on something and regenerate
solution is put dialog initialization outside of click and you're done
$(document).ready(function () {
$("#MyDiv").dialog({
title: "jQuery Dialog Popup",
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
$("[id*=Call_Dialog]").click(function() {
$("#ShowMessage").click(function () {
event.preventDefault();
alert('Hi');
$("#MyDiv").dialog('close');
})
})
});
to open jquery dialog : use this overload :
$("#MyDiv").dialog('open');
Related
I have the following code on page load that I use to show an error alert:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
if (Request.QueryString["message"] == "noemployees")
AlertDanger.Visible = true;
This is where the error is called. The page reloads and the error is shown.
if (payFitments == null)
{
Response.Redirect("Default?message=noemployees");
}
I have the following markup
<script type="text/javascript">
$(document).ready(function () {
window.setTimeout(function () {
$(".alert").fadeTo(1500, 0).slideUp(500, function () {
$(this).remove();
});
}, 3000);
});
-------------------------
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
×
<strong>You must have at least one employee to process</strong>
</div>
How do I show this message without having to load the default page again? Not seeing examples on the web that show this clearly.
You're using JQuery remove, which effectively deletes the alert from your DOM. So showing it again without reloading your page is not possible.
But you could use JQuery detach instead. Then you can insert it again with appendTo.
var alert = null;
function showHideAlert() {
if (alert) {
alert.appendTo("body");
alert = null;
} else {
alert = $(".alert").detach();
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<button onclick="showHideAlert();">Show/Hide alert</button>
<div class="alert">ALERT!!!</div>
</body>
Try serving a static html file and then using the alert function in Javascript. You can learn that here. Example for a button press:
<html>
<head>
<script>
function onError() {
try {
...
} catch (...) {
var error
error = "button was pressed"
alert(error)
}
}
</script>
</head>
<body>
<button id="myButton" onClick="onError()">do not click</button>
</body>
</html>
<html>
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge;" /><%-- Also Check Compatible View --%>
<%-- Put all your jQuery... Here I'm showing an example--%>
<script src="//ajax.microsoft.com/ajax/jQuery/jquery-2.1.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.setTimeout(function() {
$(".alert").fadeTo(1500, 0).slideUp(500, function() {
$(this).remove();
});
}, 3000);
});
</script>
<form id="form1" runat="server">
<asp:TextBox ID="txt" runat="server"></asp:TextBox>
<div runat="server" visible="false" id="AlertDanger" class="alert alert-danger">
× <strong>You must have at
least one employee to process</strong>
</div>
</form>
</body>
</html>
Note:- I think you have missed this... put your jQuery code inside your body tag...
I have someone done the below aspx file
Right now the button action need manually triggered by pressing "search" button, I want to achieve that button page to be automatically trigger the action itself without needing person to clicked it, how to I accomplish this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/CheckBookingApp.min.js"></script>
<script>
$(document).ready(function () {
$("#btnSearch").CheckBooking();
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="btnSearch">Search</button>
</div>
</form>
</body>
Just call your checkBooking() function inside your domready.
You can have it so the popup is displayd when the button is clicked as well.
$(document).ready(function() {
function checkBooking() {
alert('Checking booking');
}
// when the page loads
checkBooking();
//when the button is pressed
$("#btnSearch").on('click', function() {
checkBooking();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<button id="btnSearch">Check booking</button>
</form>
you can trigger a "simulated click" event by javascript $('btnSearch').trigger('click');
if you wish to incorporate a time delay you can use setTimeout()
in your example:
$(document).ready(function () {
$("#btnSearch").CheckBooking();
setTimeout(function() {
$("#btnSearch").trigger('click');
}, 5000 /* 5000ms = 5sec */);
});
First of all the button does not fire up the jquery dialog and
When the page loads, i check the console for errors and I get "Uncaught TypeError: undefined is not a function" which is pointing to $("#dialog").dialog({
Here are my codes below.
Default.aspx
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="JavaScript1.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CustomValidator runat="server" ID="cv1" ControlToValidate="fupCV" ClientValidationFunction="validate"></asp:CustomValidator>
<asp:FileUpload runat="server" ID="fupCV"/>
<asp:Button runat="server" ID="btnUpload" OnClick="btnUpload_OnClick" Text="Upload"/>
<asp:Button runat="server" ID="btnDialog" OnClientClick="return false;" Text="Open Dialog"/>
</div>
</form>
<div id="dialog" style="display: none">
This is a popup
</div>
</body>
</html>
JavaScript1.js
$(document).ready(function() {
$('#btnUpload').attr('disable', 'disable');
$("#dialog").dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable: false,
buttons: {
Accept: function () {
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$(this).dialog("close");
}
});
$("#btnDialog").click(function () {
$("#dialog").dialog("open");
});
});
.dialog() is part of jQuery UI, not jQuery
http://jqueryui.com/dialog/
I don't see jQuery UI included anywhere in your source.
you can use also for id ending something like:
$('input:submit[id$=btnDialog]')).click(function () {});
need a little help here.
I decided to transfer some of my javascript function in one .js file. Those functions are working properly in other browser EXCEPT IE.
NOTE:
Code below was store in a separate js file "my_js.js"
var dialogConfirmed = false;
function DialogConfirmation(obj, title, dialogText) {
if (!dialogConfirmed) {
$('body').append("<div id='dialog' title='" + title + "'>'" + dialogText + "'</div>");
$('#dialog').dialog
({
height: 150,
modal: true,
resizable: false,
draggable: false,
close: function(event, ui) { $('body').find('#dialog').remove(); },
buttons:
{
'Yes': function() {
$(this).dialog('close');
dialogConfirmed = true;
if (obj) obj.click();
},
'No': function() {
$(this).dialog('close');
}
}
});
}
return dialogConfirmed;
}
Usage
<asp:Button ID="btnAlert" runat="server" Text="Alert" OnClientClick="return DialogConfirmation(this, 'Popup Header', 'Popup Body Message');" onclick="btnAlert_Click" />
When clicking the button it throws and error pointing to method "Format"
**Microsoft JScript runtime error: Object doesn't support property or method 'Format'**
But checking my code doesn't use 'Format'. Any idea on the error? I'm using EI 9 on my workstation.
I have wrote the same code and itz working fine. Please try it once. Thanks.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication8.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script type="text/javascript">
var dialogConfirmed = false;
function DialogConfirmation(obj, title, dialogText) {
if (!dialogConfirmed) {
$('body').append("<div id='dialog' title='" + title + "'>'" + dialogText + "'</div>");
$('#dialog').dialog
({
height: 150,
modal: true,
resizable: false,
draggable: false,
close: function (event, ui) { $('body').find('#dialog').remove(); },
buttons:
{
'Yes': function () {
$(this).dialog('close');
dialogConfirmed = true;
if (obj) obj.click();
},
'No': function () {
$(this).dialog('close');
}
}
});
}
return dialogConfirmed;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAlert" runat="server" Text="Alert" OnClientClick="javascript:return DialogConfirmation(this, 'Popup Header', 'Popup Body Message');" />
</div>
</form>
</body>
</html>
I have moved your Javascript code to separate file and everything is working fine in IE 9. Probably you have missed the adding of the jQuery-ui.js file in your code. Please see the working code below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication8.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script src="Scripts/my_js.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAlert" runat="server" Text="Alert" OnClientClick="javascript:return DialogConfirmation(this, 'Popup Header', 'Popup Body Message');" />
</div>
</form>
</body>
</html>
I have an HTML link that opens a jQuery modal dialog which contains an iFrame. This iFrame contains a form that should close dialog after postback (Ok or Cancel).
In my postback I add a Javascript function to iFrame that closes the dialog and it works fine. However problem is, after user presses Ok or Cancel button, dialog closes and opens again! What am I doing wrong?
Here is my code:
Calling HTML page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme/south-street.css" media="screen" id="themeCSS" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function () {
$("#dlgConfirm").dialog({
autoOpen: false,
resizable: false,
modal: true,
width: 550,
height: 300,
close: function (event, ui) { alert('closed') }
})
});
function fConfirm(tId) {
alert('ddd');
$('#dlgConfirm').children().attr('src', 'ConfirmTracking.aspx?tId=' + tId)
.load(function () {
$("#dlgConfirm").dialog('open');
});
return false;
}
</script>
</head>
<body>
<div style="display: none">
<div id="dlgConfirm" title="Confirm Tracking" style="padding: 0px">
<iframe style="margin: 0px; padding: 0px" marginheight="0" marginwidth="0" src="" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
Click me
</body>
</html>
iFrame Page
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="ConfirmTracking.aspx.cs" Inherits="Chicken.ConfirmTracking" %>
<html>
<head runat="server">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
function CloseThis() {
parent.$('#dlgConfirm').dialog('close');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br />
<asp:TextBox ID="edtTrackingNo" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
<asp:Button ID="btnCancel" runat="server" onclick="Cancel_Click" Text="Cancel" />
</form>
</body>
</html>
iFrame Codebehind:
using System;
namespace Chicken {
public partial class ConfirmTracking: System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
}
protected void Cancel_Click(object sender, EventArgs e) {
ClientScript.RegisterClientScriptBlock(this.GetType(), "none", "<script>$(function(){CloseThis()});</script>");
}
}
}
I managed to trace your problem, the load in function fConfirm(tId) triggers again after closing your dialog. It seems to be a bug. A messy way to fix this is adding a global variable to your page and set it to true to show that dialog is opened via function then before opening your dialog if the variable is true open the dialog. don't foget to set your variable to false again so you can re-open dialog if it is needed.
your function will look like below:
var loadedByFunction = false;
function fConfirm(tId) {
loadedByFunction = true;
$('#dlgConfirm').children().attr('src', 'ConfirmTracking.aspx?tId=' + tId)
.load(function () {
if (loadedByFunction) {
loadedByFunction = false;
$("#dlgConfirm").dialog('open');
}
});
return false;
}