Solved

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

Posted on 2008-06-26
11
2,544 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
[X]
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
  • 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

628 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