Subject: [CODE4LIB] Javascript question - works in FF, but not in IE

From: Laura Harris <[email-masked]>
Date: Tue, 3 Nov 2009 13:37:38 -0500

Hello, new subscriber here...I'm trying to fix some javascript. It works as expected in Firefox, but not in Internet Explorer. FWIW, am using FF 3.0.14 and IE 7.0.6.

The code is up on pastebin here: http://pastebin.com/m20949cd1 

I'm aware that setAttribute & getAttribute are buggy in Internet Explorer, so (in an alternate version of the code) I replaced the toggle bit in function createToggleFunction with the following:

if (toggleElement.className == 'collapsibleClosed') {
		toggleElement.className = 'collapsibleOpen';
		toggleElement.src = OPEN_IMAGE;
	} else {
		toggleElement.className = 'collapsibleClosed';
                                toggleElement.src = CLOSED_IMAGE; 
	}

However, I must assume I did something wrong in the code above, because it doesn't work in Firefox. 

Any thoughts? Let me know if I need to provide more information.

Thanks,

Laura Harris
Web Services Librarian
Grand Valley State University
Allendale, MI 49401

---

From: Michael Beccaria <[email-masked]>
Date: Wed, 4 Nov 2009 21:18:01 -0500

Hey all,
I'm having some problems with some ajaxy stuff and was hoping someone
can point me in the right direction.

The project is as follows:
I'm trying to take this page
(http://lg8eg4nk4x.search.serialssolutions.com/?S=T_W_A&V=1.0&N=100&L=LG
8EG4NK4X&C=test) and grab the issn and query my server which returns
whether the issn is peer reviewed or not.

I'm using jquery. Here is the piece of my js code that cycles through
the issn numbers:
if (allHTMLTags[i].className==theClass) {
			var originalTag = allHTMLTags[i].innerHTML;
			var issn =
originalTag.replace("(","").replace(")","");
			alert('test');
	
$.getJSON("http://library.paulsmiths.edu/issnsearch/ispeerreviewed.php?i
ssn=" + issn + "&jsoncallback=?",function(json, textStatus) {
				alert("test2");
				allHTMLTags[i].innerHTML= "(" + issn +
") Peer Reviewed: " + json.peerreviewed;
			});
		}
	}
}

The problem is if I remove the "alert" items that print out "test and
"test2", the program cycles indefinitely, hits my server a million
times, and freezes my browser. With the alerts, it works as expected. I
suspect the script is running too fast and is unable to get a response
from the $.getJSON query in time before it hits the innerHTML command.
How is this usually handled in ajax stuff? I'm new to it all.
Thanks,

Mike Beccaria
Systems Librarian
Head of Digital Initiatives
Paul Smith's College
518.327.6376

---

From: Demian Katz <[email-masked]>
Date: Thu, 5 Nov 2009 07:02:28 -0500

In what context is the code running?  I haven't used jquery, so I can't give exact syntax, but other similar libraries have ways of attaching functions to events like "load" or "domready."  If your theory about the code running too quickly is correct, it might just be a matter of deferring execution until the document is loaded and ready to be manipulated.

Also, a general tip -- if you haven't already, you might find it worthwhile to test your code in a variety of different browsers.  With weird timing bugs, you'll sometimes see distinctly different failures in different browsers and get different types of feedback.  It's often helpful to compare these varying results in order to track down the cause.

- Demian
________________________________________
From: Code for Libraries [[email-masked]] On Behalf Of Michael Beccaria [[email-masked]]
Sent: Wednesday, November 04, 2009 9:18 PM
To: [email-masked]
Subject: [CODE4LIB] Jquery jsonp question

Hey all,

Mike Beccaria
Systems Librarian

---

From: Michael Beccaria <[email-masked]>
Date: Thu, 5 Nov 2009 07:45:51 -0500

Demian,
I tried calling the functions following the browser domready event and the browser load event. Same results. I'm actually just thinking about making a link that says "More Information about this title" and have it link to another page that gives the metadata from xissn. Seems like it's a bit easier and almost as effective...unless there is a solution I don't know about yet:)
Mike

________________________________

From: Code for Libraries on behalf of Demian Katz
Sent: Thu 11/5/2009 7:02 AM
To: [email-masked]
Subject: Re: [CODE4LIB] Jquery jsonp question

- Demian

Hey all,

Mike Beccaria
Systems Librarian

---

From: Andrew Ashton <[email-masked]>
Date: Thu, 5 Nov 2009 08:29:27 -0500

You're using jQuery to make the JSON call, but the rest of your syntax is
classic javascript.  Try using jQuery for the whole statement and you can
probably skip all of the looping.  Something like this might work:

$.getJSON("ispeerreviewed.php?issn=" + issn
+"&jsoncallback=?",function(json, textStatus) {
      var issnSnippet = "(" + issn +") Peer Reviewed: " + json.peerreviewed;
      $(".theClass").html(issnSnippet);
                        });

Jquery selectors[1] are really powerful (and strangely satisfying), and tend
to make life a lot simpler.

http://docs.jquery.com/Selectors

-Andy

On 11/5/09 7:45 AM, "Michael Beccaria" <[email-masked]> wrote:

> Demian,
> I tried calling the functions following the browser domready event and the
> browser load event. Same results. I'm actually just thinking about making a
> link that says "More Information about this title" and have it link to another
> page that gives the metadata from xissn. Seems like it's a bit easier and
> almost as effective...unless there is a solution I don't know about yet:)
> Mike
>  
> 
> In what context is the code running?  I haven't used jquery, so I can't give
> exact syntax, but other similar libraries have ways of attaching functions to
> events like "load" or "domready."  If your theory about the code running too
> quickly is correct, it might just be a matter of deferring execution until the
> document is loaded and ready to be manipulated.
> 
> Also, a general tip -- if you haven't already, you might find it worthwhile to
> test your code in a variety of different browsers.  With weird timing bugs,
> you'll sometimes see distinctly different failures in different browsers and
> get different types of feedback.  It's often helpful to compare these varying
> results in order to track down the cause.
> 
> - Demian

---

From: Dan BrubakerHorst <[email-masked]>
Date: Thu, 5 Nov 2009 09:23:38 -0500

Laura,

I don't have a solution for the problem at hand but I would like to suggest an alternate course of development.

When JavaScript is used to manipulate the DOM tree or add behaviours to a webpage it is almost always better to use a cross-browser library then to code it by hand.
The problems you are encountering between IE and Firefox are only amplified when a broader selection of browser and browser versions are taken into consideration.
Relying on a third party to do browser compatiblity and performance optomiztions frees up your time as a developer to focus on implementing the desired behaviour.
There are many options out there -- Prototype, Dojo, MooTools, etc. -- but jQuery is my library of choice.

I took the liberty of rewriting the webpage in question to create the behaviour you desired with a few lines of jQuery.
http://gist.github.com/227059
I commented the code thoroughly so you or anyone else new to jQuery should be able to follow what's going on and why.

For further reading on the nature and use of jQuery see:
http://docs.jquery.com/
http://api.jquery.com/

best of luck,
-dan
----------
Dan Brubaker Horst
Project / Application Developer - Hesburgh Library of Notre Dame
________________________________________
From: Code for Libraries [[email-masked]] On Behalf Of Laura Harris [[email-masked]]
Sent: Tuesday, November 03, 2009 1:37 PM
To: [email-masked]
Subject: [CODE4LIB] Javascript question - works in FF, but not in IE

Thanks,

Laura Harris
Web Services Librarian

---

From: Gabriel Farrell <[email-masked]>
Date: Thu, 5 Nov 2009 11:41:01 -0500

Thanks, Dan, I was also thinking Laura might benefit from a move to
jquery (or another JS library).  You really went the extra mile by
translating her code.  Also, I didn't know about
http://code.google.com/apis/ajaxlibs/ -- that's a great resource.

Gabriel

---

From: Karen Coombs <[email-masked]>
Date: Thu, 5 Nov 2009 13:31:54 -0600

We're working the nearly identical problem. If you want I can post the code
to the list when we've completed it.

Karen

-- 
Karen A. Coombs
Head of Libraries' Web Services
University of Houston
114 University Libraries
Houston, TX  77204-2000
Phone: (713) 743-3713
Fax: (713) 743-9811
Email: [email-masked]

---

From: Laura Harris <[email-masked]>
Date: Thu, 5 Nov 2009 18:02:26 -0500

Dan,

Thank you so much for your help and your code rewrite! I have been struggling with javascript for months in order to try to do this task, and given the prevalence of collapsible menus, I suspected that I was making things rather harder than they needed to be. I had heard about jQuery and other libraries, but it had never occurred to me to look at them for a way to do this. 

As you might have been able to tell by the link at the end of the code, I plan to use this code within our LibGuides home page in order to list the subject categories and individual guides within those categories. This is roughly what I would like it to resemble (I need to make a few changes unrelated to the code you provided):

http://libguides.gvsu.edu/content.php?pid=63144 

Our current LibGuides home page is simply an A-Z list of guides, but a few librarians from other institutions have asked me how I did that. I imagine that others may ask me how I did this, as well. Would it be acceptable to you if I posted this code on my blog (http://llyfrgellydd.info)? I only have about 60 subscribers, so it is not a huge audience, but I think that others might find your code very useful. It goes without saying that I would attribute authorship to you (and add a line to the code attributing authorship). 

Again, thank you for your help with this - it is a relief to have an elegant, cross-platform compatible solution after all this time! 

-Laura

>>> On 11/5/2009 at 9:23 AM, <[email-masked]> wrote:
> Laura,
> 
> When JavaScript is used to manipulate the DOM tree or add behaviours to a 
> webpage it is almost always better to use a cross-browser library then to code 
> it by hand.
> The problems you are encountering between IE and Firefox are only amplified 
> when a broader selection of browser and browser versions are taken into 
> consideration.
> Relying on a third party to do browser compatiblity and performance 
> optomiztions frees up your time as a developer to focus on implementing the 
> desired behaviour.
> I took the liberty of rewriting the webpage in question to create the 
> behaviour you desired with a few lines of jQuery.
> I commented the code thoroughly so you or anyone else new to jQuery should 
> be able to follow what's going on and why.
> 
> Hello, new subscriber here...I'm trying to fix some javascript. It works as 
> expected in Firefox, but not in Internet Explorer. FWIW, am using FF 3.0.14 
> and IE 7.0.6.
> 
> I'm aware that setAttribute & getAttribute are buggy in Internet Explorer, so 
> (in an alternate version of the code) I replaced the toggle bit in function 
> createToggleFunction with the following:
> 
>