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 :)
Related
I created a crystal report which works fine. I now want to display it in a bootstrap popup modal
but I always get an empty modal or it works fine with a gridview.
I would like to know how to fix this problem? thank you for helping me
Hello and thank you for your answers here is the code;
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ModalpopupTest.WebForm1" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%# Register Assembly="CrystalDecisions.Web, Version=13.0.4000.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" Namespace="CrystalDecisions.Web" TagPrefix="CR" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
.Modalbackground
{
background-color:black;
filter: alpha(opacity=40);
opacity:0.4;
}
.modalPopup{
background-color:#ffffff;
width:100%;
border:3px solid #0DA9D0;
height:75%;
}
.modalPopup .header{
background-color:#2fbdf1;
height:30px;
color:white;
line-height:30px;
text-align:center;
font-weight:bold;
}
.modalPopup .footer{
padding:3px;
}
.modalPopup .button{
height:2px;
color:white;
line-height:23px;
text-align:center;
font-weight:bold;
cursor:pointer;
background-color:red;
border:1px solid #5c5c5c;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Button runat="server" ID="btnOpen" OnClick="btnOpen_Click" Text="Show Popup" CssClass="btn btn-primary" CausesValidation="false" />
<ajaxToolkit:ModalPopupExtender ID="mdpImprimer" PopupControlID="pImprimer" TargetControlID="lblmdpIndex" CancelControlID="btnClose" PopupDragHandleControlID="headerdiv" runat="server" BackgroundCssClass="Modalbackground"></ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pImprimer" CssClass="table-responsive" runat="server">
<div id="headerdiv" class="header"></div>
<div class="mb-3" style="overflow:scroll;width:100%;height:75%">
<div class="modal-body card-body bg-default-gradient modal-fullscreen">
<CR:CrystalReportViewer ID="cr" runat="server" AutoDataBind="true" />
</div>
</div>
<div id="footerdiv" class="footer">
<asp:Button ID="btnClose" runat="server" Text="Fermer" />
</div>
</asp:Panel>
<asp:Label ID="lblmdpIndex" runat="server" Text="Label" ForeColor="White"></asp:Label>
</form>
<script src="Scripts/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
and c# code
private void BingReport()
{
try
{
d.connecter();
d.da = new SqlDataAdapter("SELECT FORMAT([Dates],'dd-MM-yy') as [Dates],d.[Designation] as Agence,c.Designation as Depot,b.[Reference] as reference,b.Designation as Produit,e.Nom as Client,[Numpiece],[TRANSPORTEUR],[Chauffeur],[VEHICUL],[QUANTITE],[PU] from [dbo].[VenteClients] a inner join [dbo].[article] b on b.Idarticle=a.Idarticle inner join [dbo].[Depot] c on c.IdDepot=a.IdDepot inner join [dbo].[Agences] d on d.IdAgences=a.IdAgences inner join [dbo].[Clients] e on e.[IdClients]=a.IdClients where [Numpiece]='80279' and c.Designation='SCDP DOUALA'", d.con);
DataSet ds = new DataSet();
d.da.Fill(ds, "Editbonlivraison");
d.deconnecter();
ReportDocument crystalReport = new ReportDocument(); // creating object of crystal report
crystalReport.Load(Server.MapPath("~/EDITIONBONS.rpt")); // path of report
crystalReport.SetDataSource(ds); // binding datatable
cr.ReportSource = crystalReport;
mdpImprimer.Show();
}
catch (Exception ex)
{
}
}
protected void btnOpen_Click(object sender, EventArgs e)
{
BingReport();
}
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>
function newedito() {
var localTime = new Date();
var year = localTime.getFullYear();
var month = localTime.getMonth() + 1;
var date = localTime.getDate();
var hours = localTime.getHours();
var minutes = localTime.getMinutes();
var seconds = localTime.getSeconds();
var x = document.getElementById('drdned').value;
var y = document.getElementById('txtned1').value;
var z = document.getElementById('txtned2').value;
var v = "Date : " + date + "-" + month + "-" + year + " Time : " + hours + ":" + minutes + ":" + seconds;
PageMethods.Ned(x, y, z, v, OnCallSumComplete, OnCallSumError);
function OnCallSumComplete(result) {
document.getElementById('updater').innerHTML = result;
}
function OnCallSumError() {
document.getElementById('updater').innerHTML = "Error";
}
}
<script src="Scripts/Site.js" language="javascript" type="text/javascript"></script>
when i put above written javascript in my aspx page everything works fine but when i put that function code in external Site.js file page method gets called but OnCallSumComplete() and OnCallSumError() doesn't work they are not changing the html of div('updater').
here result is a string which is either "success msg" or "exception msg".
help me please.
whole aspx file is very large to show here, this is the div in which div of id="updater" is included.
<div id="popUpDiv" style="display:none; border:10px solid rgba(0, 0, 0, .8); box-shadow: 0px 0px 200px 200px Black; position:fixed; top:10%; left:20%; right:20%; height:80%; min-width:60%; z-index: 10002;">
<div id="control" style=" background-color:rgba(0, 0, 0, .8); color:White; height:4%;">
<div style="color:#01A9DB; float:left; font-weight:700;">OWPOST-ECLIPSE</div>
<div style="position:static; right:0px; top:0px; float:right;">
<a style="color:White;" href="#" onclick="togglePopUp('popUpDiv'); return false;">EXIT</a>
</div>
</div>
<div id="updater" style=" background-color:White; overflow:scroll; height:96%;">
</div>
</div>
this is a popup div which is shown on click of button having a form that is shown in it using ajax from server side, on click of submit button function newedito() should submit all data to pagemethod Ned() that will add data to database but when i put the js code in external file the data gets added to database but the return string is not shown by the method newedito().
i should tell you that i am having lot of forms so i prepared their html and saved them in database and i show the form 'updater' div as required and called by javascript functions.
please help.
i am including the Site.js in my master page.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>THE OPEN WEB POST</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
font-size:x-large;
color: #FFFFFF;
}
.style2
{
text-decoration: none;
color:White;
}
.style3
{
color: #01A9DB;
}
#mynew
{
}
</style>
<script src="Scripts/Site.js" language="javascript" type="text/javascript"></script>
</head>
<body>
<form id="mynew" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
</asp:ScriptManager>
<div class="page" style="width: 100%; min-width:960px;">
i think this part of master page may help you.
Try registering your script via Script Manager as below. I am guessing the path to the script file is not resolved properly in your page.
<asp:ScriptManager ID="SM1" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Site.js" />
</Scripts>
</asp:ScriptManager>
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.