Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

JS function in one page, but call it from another page

Posted on 2008-06-26
11
2,541 Views
Last Modified: 2012-05-05
I'm using this JS and applying it to my app. This example work in both IE and  FireFox when I do a "test" app. *** When I apply it to my actual code, it works in IE and doesnt in Firefox.

http://www.mattkruse.com/javascript/calendarpopup/combined_source.html

--I think this is because: I have a Admin/Order/default.aspx page.  It has a content page. I put the link to JS in it. I have the textbox there as well. **In IE it's all fine.
In Firefox, i click on the calendar and nothing happens.

-- So, I want to move the 2 lines below from Admin/Orders/Default.aspx to my Admin/Default.aspx. This page has the form, the head tags. BUT call this function from my Orders/Default.aspx.

******* When I do that, I get an error that "cal" is null or undefined.

-- I have JS enabled in FireFox. I also turned off pop-up blockers.

<script type="text/javascript" language="JavaScript">
	var cal = new CalendarPopup();
	</script>  
	
	  <script language="javascript" src="../Scripts/CalendarPopup.js" type="text/javascript"></script>
  
-- I call it like this:
   <td><input  id="txtStartDate"   size="7" runat="server"  readonly="readOnly" type="text" />
                
                            <a href="#"    onclick="cal.select(ctl00_Navigation_txtStartDate,'anchor1','MM/dd/yyyy'); return false;"
                          name="anchor1" id="anchor1">select</a>
                </td>

Open in new window

0
Comment
Question by:Camillia
  • 8
  • 2
11 Comments
 
LVL 13

Accepted Solution

by:
jrram earned 250 total points
ID: 21877188
(1)
In the example above, you are trying to create an instance of the CalendarPopup() before you reference its source.  This could be the problem.  Try re-ordering your code.

Instead of:
<script type="text/javascript" language="JavaScript">
   var cal = new CalendarPopup();
</script>  
       
          <script language="javascript" src="../Scripts/CalendarPopup.js" type="text/javascript"></script>

Try:
<script language="javascript" src="../Scripts/CalendarPopup.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
   var cal = new CalendarPopup();
</script>

(2)
If this does not solve your problem, then another thing I noticed is the field name in your link "ctl00_Navigation_txtStartDate" does not equal the field on your form "txtStartDate".  Maybe when .NET generates your code they are equal and this isn't an issue, but just wanted to point this out.
0
 
LVL 7

Author Comment

by:Camillia
ID: 21877423
ok, I was getting an error that's solved by #1.  BUT still, when I go to firefox, the calendar doesnt popup.

In IE, when there's a JS error, there's an error at the botton in IE. Firefox doesnt show JS errors?

#2 is correct. ASP.Net renders it to ctl00_Navigation_txtStartDate. I put another JS alert and looked at in Firefox and it's the same as IE.

How can I debug this in Firefox??
0
 
LVL 7

Author Comment

by:Camillia
ID: 21877487
I put an alert("test") in that JS code. When I load the page, it pops up. Both in IE and in FireFox. So I know the JS is being loaded. It's when I click on "select" that the calendar needs to pop-up but it doesnt in Firefox....

 Anything i need to turn on or off??
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 7

Author Comment

by:Camillia
ID: 21877681
My test app works tho ...so I go back to my first question...can I put the JS code in another page but call it from another page?
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Calendar.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>Calendar using javascript</title>
    <script language="javascript" src="Calendar.js" type="text/javascript"></script>
    
    <script language="javascript" src="CalendarPopup.js" type="text/javascript"></script>
  
    <SCRIPT type="text/javascript" LANGUAGE="JavaScript">
	var cal = new CalendarPopup("testdiv1");
	</SCRIPT>
  
    <link href="Calendar.css" rel="stylesheet" type="text/css"> 
</head>
<body>
    <form id="form1" runat="server">    
   <asp:Label ID="lblDateSent" runat="server" Text="Posted on:" CssClass="graytextbold"></asp:Label>
        <input ID="PostedOn" runat="server" class="NormalTextBox" readonly="readOnly" type="text" />&nbsp;
        <a onclick="showCalendarControl(PostedOn)" href="#">
        <img src="calendar.gif" style="width: 20px; height: 20px" border="0" /></a>
        
        <a href="#"    onclick="cal.select(document.forms['form1'].PostedOn,'anchor1','MM/dd/yyyy'); return false;"
                          name="anchor1" id="anchor1">select123</a>
   </form>
   
   <div id="testdiv1"  style="position:absolute;visibility:hidden;background-color:white; background-color:Lime;"></div>
</body>
</html>

Open in new window

0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 250 total points
ID: 21879180
>>How can I debug this in Firefox??
Install the Firebug extension. After you restart FF, you will see an icon on the lower right-hand side of your browser. When you load the page, if there are any errors, you will see that an error exists on the lower right-hand corner. Click on it to view the details.
0
 
LVL 7

Author Comment

by:Camillia
ID: 21880302
Really? let me see what this Firebug is and where i can dowload it from.
0
 
LVL 82

Expert Comment

by:hielo
ID: 21880550
>>where i can dowload it from
Open FF, click on Tools > Add Ons

Depending on your FF version, you might see a Get Extension Link on the lower-right of the pop up window OR you may be able to search immediately for "Firebug" from the pop up window.
0
 
LVL 7

Author Comment

by:Camillia
ID: 21880598
thanks so much. Will try this tomorrow morning.
0
 
LVL 7

Author Comment

by:Camillia
ID: 21883356
Upgraded to FF 3.0 and  installed FireBug. I enabled JS debugging. I click on "select" to popup the caender. Then I clicked on the "bug" image on the bottom right hand corner.I see tabs like DOM,HTML, CSS. But nothing is displayed to be error.For example,in DOM..i see green text BUT i also see red text. Not sure if the red text is the errors or not..

In IE, I can turn on script debugging and then if I put the word "debugger" in the code, I can actually step thru the code. Let me see if FF has something like "enable script debugging".
0
 
LVL 7

Author Comment

by:Camillia
ID: 21883448

 Ok, getting close, I turned in the "console" in FireBug and now I see the error. I see 2 errors and one is related to that Javascript calendar. Let me see.
0
 
LVL 7

Author Comment

by:Camillia
ID: 21883954
Fixed,thank you both.FireBug showed what jrram mentioned above about the name of the textbox.It worked in IE but then I changed it to document.getElementById('<%=txtStartDate.ClientID%>')
and now it works in both IE and FF.

I dont know why that method of getElementById sometimes doesnt work in my other pages.
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question