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.
Related
In my application i need to have drop down with multi selection along with all in that drop down for doing that i had used the code in the below link
http://www.codingfusion.com/Post/Dropdownlist-with-checkboxes-in-asp-net and along with this multi selection i also should have date picker for text boxes for which i had used the code in this link
https://www.aspsnippets.com/Articles/DateTimePicker-control-for-ASPNet-TextBox-Example.aspx
the problem is if i have drop down with multi selection date picker is not working and if date picker is working multi selection is not working how can i solve this issue.can anyone help me out
Date picker code
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%=TextBox1.ClientID %>").dynDateTime({
showsTime: true,
ifFormat: "%Y/%m/%d %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: false,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
<asp:TextBox ID="TextBox1" runat="server" ReadOnly = "true"></asp:TextBox>
<img src="calender.png" />
Multi selection code
<asp:listbox runat="server" id="lstBoxTest" selectionmode="Multiple">
<asp:listitem text="Red" value="0"></asp:listitem>
<asp:listitem text="Green" value="1"></asp:listitem>
<asp:listitem text="Yellow" value="2"></asp:listitem>
<asp:listitem text="Blue" value="3"></asp:listitem>
<asp:listitem text="Black" value="4"></asp:listitem>
</asp:listbox>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.sumoselect.min.js"></script>
<link href="sumoselect.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(<%=lstBoxTest.ClientID%>).SumoSelect({ selectAll: true });
});
</script>
<style type="text/css">
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #444;
font-size: 13px;
}
p, div, ul, li {
padding: 0px;
margin: 0px;
}
</style>
protected void btnGetSelectedValues_Click(object sender, EventArgs e)
{
string selectedValues = string.Empty;
foreach (ListItem li in lstBoxTest.Items)
{
if (li.Selected == true)
{
selectedValues += li.Text + ",";
}
}
Response.Write(selectedValues.ToString());
}
You can try this working example of both datepicker and multiselect as per you want. I have tested in my local
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>asdasd</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="https://www.aspsnippets.com/demos/361/Scripts/jquery.dynDateTime.min.js" type="text/javascript"></script>
<script src="https://www.aspsnippets.com/demos/361/Scripts/calendar-en.min.js" type="text/javascript"></script>
<link href="https://www.aspsnippets.com/demos/361/Styles/calendar-blue.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%=TextBox1.ClientID %>").dynDateTime({
showsTime: true,
ifFormat: "%Y/%m/%d %H:%M",
daFormat: "%l;%M %p, %e %m, %Y",
align: "BR",
electric: false,
singleClick: false,
displayArea: ".siblings('.dtcDisplayArea')",
button: ".next()"
});
});
</script>
<%--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>--%>
<script src="http://hemantnegi.github.io/jquery.sumoselect/javascripts/jquery.sumoselect.js"></script>
<link href="http://hemantnegi.github.io/jquery.sumoselect/stylesheets/sumoselect.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$(<%=lstBoxTest.ClientID%>).SumoSelect({ selectAll: true });
});
</script>
<style type="text/css">
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #444;
font-size: 13px;
}
p, div, ul, li {
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<form runat="server">
<asp:TextBox ID="TextBox1" runat="server" ReadOnly="true"></asp:TextBox>
<img src="calender.png" />
<br />
<br />
<br />
<asp:ListBox runat="server" ID="lstBoxTest" SelectionMode="Multiple">
<asp:ListItem Text="Red" Value="0"></asp:ListItem>
<asp:ListItem Text="Green" Value="1"></asp:ListItem>
<asp:ListItem Text="Yellow" Value="2"></asp:ListItem>
<asp:ListItem Text="Blue" Value="3"></asp:ListItem>
<asp:ListItem Text="Black" Value="4"></asp:ListItem>
</asp:ListBox>
</form>
</body>
</html>
I'm trying to resize a div with a button click, using javascript and jquery. This is all in an asp.net web form. I have little experience with javascript and practically none with jquery. This is the code I have so far with help from other SO members. Besides it not working, I know there's something wrong because the alerts are not being displayed.
Any help is appreciated.
<head id="Head1" runat="server">
<title>Data Display</title>
<script type="text/javascript">
function toggleGridContent() {
var id = "#gridViewContainer";
if ($(id).hasClass("small")) {
alert("found");
$(id).attr("class", "large");
} else {
alert("not");
$(id).attr("class", "small");
}
}
</script>
<style type="text/css">
.small {
height: 200px;
overflow: hidden;
}
.large {
height: auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<input type="button" onclick="toggleGridContent()" value="toggleGridContent" />
<div class="small" id="gridViewContainer" style="border: 1px solid red">
<asp:GridView ID="GridViewNsbAll" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:BoundField DataField="subgroup" HeaderText="subgroup"></asp:BoundField>
<asp:BoundField DataField="count" HeaderText="count"></asp:BoundField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
You have to add a reference to the jQuery library. If you have it in your web site you can use something like this:
<script type="text/javascript" src="jquery.js"></script>
Easier would be to link to the latest hosted version
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
here is my code,which is wokring fine when i use it simply in a aspx file, but when i keep the same code in a aspx file with master page, it not working.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>
<!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">
<style>
#imagePreview {
width: 250px;
height: 250px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#FileUpload1").on("change", function () {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test(files[0].type)) {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
$("#imagePreview").css("background-image", "url(" + this.result + ")");
}
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<br />
<br />
<center>
<fieldset style="width:35%">
<legend>Preview Image before upload</legend>
<table>
<tr><td>Upload Image:</td><td>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
<tr><td></td><td><table><tr><td>
<asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
<tr><td></td><td> </td></tr>
</table>
</fieldset>
</center>
</div>
</form>
</body>
</html>
i am getting output correctly as below when i use without Masterpage
when i use with master page
i am getting below, not coming properly
can any body help me to fix it? what change i need to do when i use the same code with master page ?
masterpage code adding below
<%# Page Title="" Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style >
#imagePreview {
width: 250px;
height: 250px;
float:left;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
//display: inline-block;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#FileUpload1").on("change", function () {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test(files[0].type)) {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
$("#imagePreview").css("background-image", "url(" + this.result + ")");
}
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<br />
<br />
<center>
<fieldset style="width:35%">
<legend>Preview Image before upload</legend>
<table>
<tr><td>Upload Image:</td><td>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
<tr><td></td><td><table><tr><td>
<asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
<tr><td></td><td> </td></tr>
</table>
</fieldset>
</center>
</asp:Content>
You're not using ContentPlaceholder properly. It should be left empty in your master page, and then filled in on the content pages.
Master page:
<%# Page Title="" Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<!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">
<asp:ContentPlaceHolder ID="head" Runat="server">
</asp:ContentPlaceHolder>
<style>
#imagePreview {
width: 250px;
height: 250px;
background-position: center center;
background-size: cover;
-webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
display: inline-block;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#FileUpload1").on("change", function () {
var files = !!this.files ? this.files : [];
if (!files.length || !window.FileReader) return;
if (/^image/.test(files[0].type)) {
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onloadend = function () {
$("#imagePreview").css("background-image", "url(" + this.result + ")");
}
}
});
});
</script>
</head>
<body>
<br />
<br />
<center>
<fieldset style="width:35%">
<legend>Preview Image before upload</legend>
<table>
<tr><td>Upload Image:</td><td>
<asp:FileUpload ID="FileUpload1" runat="server" /><br />
<asp:Label ID="lblmessage" runat="server"></asp:Label></td></tr>
<tr><td></td><td><table><tr><td>
<asp:Image ID="imagePreview" runat="server" /></td></tr></table></td></tr>
<tr><td></td><td> </td></tr>
</table>
</fieldset>
</center>
<asp:ContentPlaceHolder ID="MainContent" Runat="server"></asp:ContentPlaceHolder>
</body>
</html>
Child page:
<%# Page Language="VB" MasterPageFile="~/Receptionist.master" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
// Page specific content
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="server">
// Page specific content
</asp:Content>
I am trying to use Jquery dialog box, but I am getting Object doesn't support property or method 'dialog' error. Would appreciate any guidance. Is the dialog function deprecated now. I am using jquery-1.5.2.min.js. Here is my code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<style type="text/css">
body {
font: normal normal normal 10px/1.5 Arial, Helvetica, sans-serif;
}
.ui-dialog-osx {
-moz-border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
border-width: 0 8px 8px 8px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var Button1 = $("#Button1");
var Button2 = $("#Button2");
var Panel1 = $("#Panel1");
var dil = $("#dialog");
Button1.click(function (e) {
//Panel1.slideDown();
e.preventDefault();
$("#dialog").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function () {
$(this).dialog("close");
}
}
})
});
Button2.click(function (e) {
Panel1.slideUp();
e.preventDefault();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />
<br />
<br />
<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" Style="display: none;"
BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
Hello World!
</asp:Panel>
</div>
<div id="dialog" title="Important information">
<span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float: left; margin: 0 7px 0 0;"></span></span>
<div style="margin-left: 23px;">
<p>
We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
<br />
<br />
Our hotel will reopen at 11th of January 2011.<br />
<br />
Another line which demonstrates the auto height adjustment of the dialog component.
</p>
</div>
</div>
</form>
</body>
</html>
You may have made a slight error here:
<script src="Scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
I expect you meant to include jQuery, and then the script containing the dialog extension (possibly jQuery UI, or a packaged up subset of it).
So change your script tags to...
<script src="Scripts/jquery-v.v.v.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-v.v.v.min.js" type="text/javascript"></script>
You are including two versions of jquery on the same page and you forgot to include jquery-ui :)
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;
}