Solved

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

Posted on 2008-06-26
11
2,543 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
javascript and jquery question 4 46
Conformation code 4 35
How does GeoJson relates to Leaflet and Mapbox? 4 48
Jquery syntax 12 29
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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

734 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