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 () {});
Related
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');
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;
}
I am using a Masterpage for my upload_photo.aspx which displays the file upload page using colorBox. However, ever since i added (code below) in the Masterpage colorBox doesn't display:
<script type="text/javascript">
$(function () {
$("#txtAutoCompleteSearch").AutoComplete("search.aspx?searchword=");
});
function clear_textbox() {
if (document.aspnetForm.searchField.value == " Enter Your Search Here ")
document.aspnetForm.searchField.value = "";
};
</script>
Below is the mastpage code:
<%# Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!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>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="Css/menu_style.css" rel="stylesheet" type="text/css" />
<link href="styles/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load('jquery', '1.3.2');</script>
<script src="styles/js/jquery.autocomplete.js" type="text/javascript"></script>
<script src="styles/js/jquery.dimensions.js" type="text/javascript"></script>
<script src="styles/js/jquery.highlight-3.yui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtAutoCompleteSearch").AutoComplete("search.aspx?searchword=");
});
function clear_textbox() {
if (document.aspnetForm.searchField.value == " Enter Your Search Here ")
document.aspnetForm.searchField.value = "";
};
</script>
</head>
<body>
<form id="masterPageForm" runat="server">
<div id="pagewidth">
<div id="Header">
<asp:Label ID="userName" runat="server" Text="" style=" color: Maroon; font-size: large; z-index: 103; left: 805px; position: absolute; top: 132px"></asp:Label>
<asp:LoginStatus ID="LoginStatus1" runat="server" ForeColor="White"
LogoutPageUrl="~/Default.aspx" LogoutText="Logout" CssClass="logOut"
BackColor="#454545" Font-Bold="True" Font-Names="Arial Black"
Font-Size="Small" />
<%--<asp:Image ID="logoHeader" runat="server" CssClass="rounded-corners" ImageUrl="~/img/logo.png"/>--%>
<asp:HyperLink ID="hlLogo" runat="server" ImageUrl="~/img/logo.png" NavigateUrl="~/home.aspx"></asp:HyperLink>
<%--style="width: 1000px; height: 120px; margin-top: 10px;" />--%>
<div style="top: 61px; left: 476px; position: absolute; height: 37px; width: 526px; font-size: medium; font-style: italic; color: #CCFF99; font-weight: bolder; z-index: 103;">
<input id="txtAutoCompleteSearch" name="searchField" class="tb11" type="text" onfocus="clear_textbox()" value=" Enter Your Search Here "/>
<asp:ContentPlaceHolder id="Heading" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="background">
<asp:menu id="NavigationMenu" CssClass="NavigationMenu"
staticdisplaylevels="2" DynamicHorizontalOffset="1"
staticsubmenuindent="1px" MaximumDynamicDisplayLevels="4"
orientation="Horizontal"
DynamicPopOutImageUrl="~/img/right-arrow.gif"
StaticPopOutImageUrl="~/img/drop-arrow.gif"
datasourceid="MenuSource"
runat="server" Height="30px">
<staticmenuitemstyle ItemSpacing="10" CssClass="staticMenuItemStyle"/>
<statichoverstyle CssClass="staticHoverStyle" />
<StaticSelectedStyle CssClass="staticMenuItemSelectedStyle"/>
<DynamicMenuItemStyle CssClass="dynamicMenuItemStyle" />
<dynamichoverstyle CssClass="menuItemMouseOver" />
<DynamicMenuStyle CssClass="menuItem" />
<DynamicSelectedStyle CssClass="menuItemSelected" />
<DataBindings>
<asp:MenuItemBinding DataMember="siteMapNode"
NavigateUrlField="url" TextField="title"
ToolTipField="description" />
</DataBindings>
</asp:menu>
</div>
<asp:TreeView ID="NavigationTreeView" runat="server" Visible="false" DataSourceID="MenuSource" />
<div id="e">
<asp:SiteMapPath ID="SiteMapPath1" runat="server"
RenderCurrentNodeAsLink="true"
CssClass="currentNodeStyle"
PathSeparator=" >> " Visible="False">
<PathSeparatorStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
<CurrentNodeStyle ForeColor="#333333" CssClass="currentNodeStyle" />
<NodeStyle ForeColor="#7C6F57" CssClass="currentNodeStyle" />
<RootNodeStyle ForeColor="#5D7B9D" CssClass="currentNodeStyle" />
</asp:SiteMapPath>
</div>
<asp:Panel ID="AccessKeyPanel" runat="server">
</asp:Panel>
<asp:SiteMapDataSource id="MenuSource" runat="server" StartFromCurrentNode="false" ShowStartingNode="true" />
<div id="tabDiv">
<asp:ContentPlaceHolder id="mainBody" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
© Copyright Family Photo Online System</div>
</div>
</div>
</form>
<script type="text/javascript">
function navigateTo(url) {
window.location = url;
}
</script>
</body>
</html>
Below is the upload_photo.aspx code for the javascript:
<script src="alerts/impromptu/jquery.js" type="text/javascript"></script>
<script src="alerts/impromptu/jquery-impromptu.2.6.min.js" type="text/javascript"></script>
<link href="alerts/impromptu/impromptu.css" rel="stylesheet" type="text/css" />
<link href="colorBox/colorbox.css" rel="stylesheet" type="text/css" />
<script src="colorBox/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="colorBox/jquery.colorbox.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//Examples of how to assign the ColorBox event to elements
$("a[rel='example1']").colorbox();
$("a[rel='example2']").colorbox({ transition: "fade" });
$("a[rel='example3']").colorbox({ transition: "none", width: "75%", height: "75%" });
$("a[rel='example4']").colorbox({ slideshow: true });
$(".example5").colorbox();
$(".example6").colorbox({ iframe: true, innerWidth: 425, innerHeight: 344 });
$(".example7").colorbox({ width: "47%", height: "100%", iframe: true });
$(".example8").colorbox({ width: "50%", inline: true, href: "#inline_example1" });
$(".example9").colorbox({
onOpen: function () { alert('onOpen: colorbox is about to open'); },
onLoad: function () { alert('onLoad: colorbox has started to load the targeted content'); },
onComplete: function () { alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup: function () { alert('onCleanup: colorbox has begun the close process'); },
onClosed: function () { alert('onClosed: colorbox has completely closed'); }
});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function () {
$('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
Firebug throws the following error:
$("a[rel='example1']").colorbox is not a function
http://localhost:3478/upload_photo.aspx
Line 19
If I remove the Javascript function from the Masterpage the colorBox jQuery works fine.
Can anyone advice me where I am going wrong and how i can correct it? Any help would be appreciated.
Thanks
It might be because you're including jquery both in the master page and in the photo page. This will cause jQuery to load, initialize, run the script in your master page, then throw it all out and reload, reinitialize everything when it hits the script tag for jQuery in the upload_photo.aspx. You only want each javascript library to load once, otherwise all sorts of confusion sets in.
I'm using jQuery UI 1.8.7 (a custom build created on the jQuery UI site that only contains the dialog widget).
I'm also using the jQuery Validate 1.6 plug-in (or rather trying to).
My jQuery UI markup/code is pretty stock stuff:
<div id="create-snapshot" title="Create new snapshot?">
<p style="text-align:left">
<span>Name: <input id="snapshotName" name="snapshotName" /></span><br /><br />
<b>Snapshot type:</b><br /><br />
<input type="radio" id="snapshotType"
name="snapshotType" value="0"
checked="checked" />Snapshot just the disks.<br />
<input type="radio" id="snapshotType"
name="snapshotType" value="1" />Snapshot both disks and memory.
</p>
</div>
$("#create-snapshot").dialog({
autoOpen: false,
resizable: false,
width: 500,
height: 250,
modal: true,
buttons: {
"Create": function () {
// ...do ajaxy stuff...
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
// Hook up Create Snapshot
$("body").delegate("a[id='create']", "click",
function () {
$("#create-snapshot").dialog('open');
return false;
}
);
The order of the <script> tags is:
jquery-1.4.4.min.js
jquery-ui-1.8.7.custom.min.js">
jquery.validate.min.js
What I'm finding is that when I include jquery.validate.min.js it kills the Create Snapshot event handler. If I remove it, the jQuery modal dialogue opens just fine.
I've checked for errors the Firebug/Chrome dev tools but nothing jumps out.
Why would this be happening?
UPDATE:
Having a quick look about version 1.6, it has a known bug with newer versions of jQuery library (using same method name), check out this link. You have to upgrade your validation plugin
have you tried updating the validation plugin? I guess you are using an older version of this plugin?
This code is executing just fine on my machine (with validate 1.7):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../../css/smoothness/jquery-ui-1.8.7.custom.css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="../../js/jquery.validate.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
$(document).ready(function() {
$("#create-snapshot").dialog({
autoOpen: false,
resizable: false,
width: 500,
height: 250,
modal: true,
buttons: {
"Create": function () {
// ...do ajaxy stuff...
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
// Hook up Create Snapshot
$("body").delegate("a[id='create']", "click", function () {
$("#create-snapshot").dialog('open');
return false;
});
});
</script>
</head>
<body>
Create Snapshot
<div id="create-snapshot" title="Create new snapshot?">
<p style="text-align:left">
<span>Name: <input id="snapshotName" name="snapshotName" /></span><br /><br />
<b>Snapshot type:</b><br /><br />
<input type="radio" id="snapshotType"
name="snapshotType" value="0"
checked="checked" />Snapshot just the disks.<br />
<input type="radio" id="snapshotType"
name="snapshotType" value="1" />Snapshot both disks and memory.
</p>
</div>
</body>
</html>