Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
mccoy81

Trouble Preventing Event Submission

Recommended Posts

I have read through the book and am attempting to use some of the information for a site I am working on. Sticking with progressive enhancement I have kept the urls in the href attribute and added ids to each of my links. My problem is that when I click the link it is following that link instead of the javascript. Here is my code if you could please help me figure out what the problem is.

 
var connectLink = U.$('connectLink');

var reviewsLink = U.$('reviewsLink');

var attractionsLink = U.$('attractionsLink');

var aboutLink = U.$('aboutLink');

var toptenLink = U.$('toptenLink');

 

var content = U.$('content');

var ad = U.$('ad');

var connect = U.$('connect');

var reviews = U.$('reviews');

var attractions = U.$('attractions');

var about = U.$('about');

var topten = U.$('topten');
 
function openConnect() {

        'use strict';

        

        // Get the event object:

        if (typeof e == 'undefined') e = window.event;

        

        U.$('close').onclick = closeContent;

        

        // Close the other links if they are currently open

        if (reviews.style.visibility == "visible") {

            reviews.style.visiblity = 'hidden';

        }else if  (attractions.style.visibility == "visible") {

            attractions.style.visiblity = 'hidden';

        }else if  (about.style.visibility == "visible") {

            about.style.visiblity = 'hidden';

        }else if  (topten.style.visibility == "visible") {

            topten.style.visiblity = 'hidden';

        }

        

        // Open the connect div

        content.style.visibility = 'visible';

        connect.style.visiblity = 'visible';

        ad.style.display = 'block';

        connectLink.onclick = null;

        

        // Prevent the form's submission:

        if (e.preventDefault) {

            e.preventDefault();

        } else {

            e.returnValue = false;

        }

        return false;

    } // End of openConnect() function
 
window.onload = function() {

        'use strict';

        

        U.addEvent(connectLink), 'click', openConnect);

    };

Share this post


Link to post
Share on other sites

It looks like you have a syntax error with the following line:

U.addEvent(connectLink), 'click', openConnect);

Get rid of the right parenthesis after connectLink, and hopefully it'll work.

I recommend using the console in Chrome, or Firebug in Firefox to debug these sorts of problems.

You can quickly pull up the console in Chrome by pressing Ctrl + Alt + J.

 

Please let us know if that solves the problem.

Share this post


Link to post
Share on other sites

I made the changes but the link is still followed. I have firebug but it will not give me information on this error as when I click the link to see what if there is an error it goes to the new page and firebug clears the content because a new page as been loaded.

Share this post


Link to post
Share on other sites

I don't see an obvious JavaScript error, but I know what you mean about how the browser gets to the next page before you see the error (because the JavaScript that interrupts that process is not executed due to its error). One simple way of preventing that here is to remove the HREF value on the connectLink so that the browser won't go anywhere.

Share this post


Link to post
Share on other sites

I tried removing the href for testing purposes and firebug is giving me an error saying that "e is undefined" which doesnt make sense to me as I thought thats what was happening with this line

 

 

if (typeof e == 'undefined') e = window.event;

Share this post


Link to post
Share on other sites

If you're getting an error saying that e is undefined, then you can at least rest assured that your links aren't being followed now, right?

Also, e is undefined because you didn't add an e parameter to your openConnect function header. Please edit the function header as follows:

function openConnect(e) {

In other words, add the e.

Share this post


Link to post
Share on other sites

I figured out what the problem was for some reason I had ad.style.display set up as class in the html so I changed that to an id and it works now.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...