Question

I’m working on a calendar and want to disable a link after a form is submitted.

The calendar consists of links (with rel="box") which open a lightbox with a reservation form. Once the form is filled in, i want to disable the according link by setting the rel to rel="noshow".

The script first should check the rel attribute of the link. If it is rel="box" a lightbox is openend, when it’s empty the normal destination will be followed and when it’s rel="noshow" nothing should happen..

I currently have the following code, which opens a lightbox and follows the normal destination when desired but the whole rel="noshow" part won’t seem to work…

 $("a").click(function(){
  if(this.rel == "noshow"){
   this.preventDefault();
   return false;
  }else if(this.rel == "box"){
   [..]
   $("#closeBox").click(function(c) {
    c.preventDefault();
    var parentCell = $("#date"+linkID[1]+linkID[2]+linkID[3]);
    var childLink = parentCell.children();
    parentCell.css("background-image","url('reserved-green.jpg')");
    childLink.attr("rel","noshow");
    alert(childLink.attr("rel"));
   });
   [..]

When the form is closed the alert() says noshow but when i click on the link it just follows the href value

What am i doing wrong here?

Answer 1

This is happening because you’re hitting a JavaScript error.

When you call this.preventDefault();, this is a reference to the link, not the event object. So if you wanted to send this event, you’d need to adjust your click event signature to include the event first.

$("a").click(function(event){
  if(this.rel == "noshow"){
    event.preventDefault();
    return false;
  }
});

Although really, the .preventDefault() call is unnecessary. The return false statement will properly block the click in those instances.