Error using Jquery Plugin

arvee2003
arvee2003 used Ask the Experts™
on
HI,

I was testing one of the plugins for slide outs.

I have added the following to my head section in master page and function below it.

/* Master page */

<script src="../Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../Javascript/jquery.tabSlideOut.v1.3.js" type="text/javascript"></script>

<script type="text/javascript">
  $(function(){
     
        $('.slide-out-div').tabSlideOut({
        ...
       });
 });
 </script>
</head>

<body>
    <form id="form1" runat="server">
 <div id="header"> <uchdr:ucpshdr id="header" runat="server"   /></div>
   <div id="main">
             <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">        
            </asp:ContentPlaceHolder>
   </div>
      <div id="footer"  > <ucftr:ucpsftr id="footer" runat="server" />
      <div class="slide-out-div" id="slide-out-div"> ...</div>
</form>      
</body>
</html>

/*End Master Page */


 

/*End Master Page */

My website structure

C:\website>
–>MasterPages> //master pages
–>Javascript> // all .js files
–>Pages> // other pages
—>Default.aspx

Whenever I run the default page (inherited from master) I always get the error.
Microsoft JScript runtime error: Object expected and it points to
$(function(){
$(’.slide-out-div’).tabSlideOut({..

But where as it works in all other pages(inherited from master)

Is there is any issue with path or something else.

Any input is greatly appreciated.

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
It can be 2 things :

1 - Make sure that your .js link is in the head of your master page, but outside the content header.
2 - Your page containing master page can be in a different directory than your master page, hence not finding the reference.  You can avoid this by using Page.ResolveUrl like below.

<head runat="server">
    <title></title>
       <script type="text/javascript" src='<%= Page.ResolveUrl("~/js/jquery-1.4.2.js")%>'></script>
       <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
</head>
Commented:
Hi arvee2003,

Just checking if it solved your problem or if you still have the same issue.

Regards,
Note that references to files are resolved with reference to the path of content page and NOT the master page.
You are referencing javascript files as
             "../Javascript/jquery-1.4.2.min.js"

"../javascript/" means that there is a folder named javascript in the parent folder of the page you are running. But "javascript" folder is in the same folder as default.aspx page and not in it parent folder.

So, this is the real cause of the issue. You can fix it by replacing your <script> tags with following script tags:

<script src="<%= Page.ResolveUrl("~/Javascript/jquery-1.4.2.js")%>"></script>
<script src="<%= Page.ResolveUrl("../Javascript/jquery.tabSlideOut.v1.3.js")%>"></script>
You can copy & paste following script tags with any change:


<script src="<%= Page.ResolveUrl("~/Javascript/jquery-1.4.2.js")%>"></script>
<script src="<%= Page.ResolveUrl("~/Javascript/jquery.tabSlideOut.v1.3.js")%>"></script>

Open in new window

Author

Commented:
None

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial