Solved

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

Posted on 2008-06-26
11
2,536 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Compare site how does it work 4 51
JavaScript Scope issue 4 20
onOpen 14 41
Different Delete Messages 7 17
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now