jquery - Asp.net Masterpage and ContentPage JavaScript Function error -
i using masterpage upload_photo.aspx displays file upload page using colorbox. however, ever since added (code below) in masterpage colorbox doesn't display:
<script type="text/javascript"> $(function () { $("#txtautocompletesearch").autocomplete("search.aspx?searchword="); }); function clear_textbox() { if (document.aspnetform.searchfield.value == " enter search here ") document.aspnetform.searchfield.value = ""; }; </script> below 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 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 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 upload_photo.aspx code 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 assign colorbox event 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 open'); }, onload: function () { alert('onload: colorbox has started load targeted content'); }, oncomplete: function () { alert('oncomplete: colorbox has displayed loaded content'); }, oncleanup: function () { alert('oncleanup: colorbox has begun close process'); }, onclosed: function () { alert('onclosed: colorbox has closed'); } }); //example of preserving javascript event inline calls. $("#click").click(function () { $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("open window again , message still here."); return false; }); }); </script> firebug throws following error:
$("a[rel='example1']").colorbox not function http://localhost:3478/upload_photo.aspx line 19
if remove javascript function masterpage colorbox jquery works fine.
can advice me going wrong , how can correct it? appreciated.
thanks
it might because you're including jquery both in master page , in photo page. cause jquery load, initialize, run script in master page, throw out , reload, reinitialize when hits script tag jquery in upload_photo.aspx. want each javascript library load once, otherwise sorts of confusion sets in.
Comments
Post a Comment