Modal and link based on ninja book

JavaScript
1

I have a login link that is supposed to open a modal and then direct the visitor to a submission form once they are logged in. Here’s the link code:

<a href=“/resources/submit” class=“login”>Submit New</a>

and the jquery based on an example in the ninja book:

  $('a.login').click(function() {
    openDialog('#dialog');
  });

  $('#dialog')
  .find('.close')
  .live('click', function() {
  	closeDialog('#dialog');
  })

function openDialog(selector) {
	$(selector)
		.clone()
		.show()
		.appendTo('#overlay')
		.parent()
		.fadeIn('fast');
}
  
function closeDialog(selector) {
$(selector)
	.parents('#overlay')
	.fadeOut('fast', function() {
		$(this)
			.find('#dialog')
			.remove();
	});
}

When I put a path name in the href, the modal opens but then quickly closes itself and sends the visitor to the form. If I use href=“#” the modal opens and stays open, but when the visitor submits the form they are returned to the page they were on rather than the submission form.

I keep setting this aside and coming back to it, thinking I’ll understand what’s gone wrong here, but I still don’t. I’d like this modal to work for other links with different paths, so I don’t want to code the redirect into the js - I want to be able to control it in the link itself.

Obviously I’m missing something. Any idea what it is?

2

By default, clicking on a link makes the web browser navigate to the href. If you don’t want that to happen, the simplest way to prevent it is to make your click event handler return false. You can also see http://api.jquery.com/event.preventDefault/

3

Thanks. Adding return false to the click event handler does indeed keep the modal box visible, but I still don’t see how I can control the redirect on a link by link basis. As I mentioned, I want to reuse the same login modal.

In one case, a visitor may click on a “Submit New” link and get the modal. I want to redirect them to the submission form on submit. In another case, they may click on a “Vote Now” link, in which case they should go to another page.

Using return false returns them to the page they were on. I was hoping I could specify the page on the anchor link, but apparently not. I guess the only way is to add additional click handlers to the js and include the redirect there . . .

4

The simplest thing I can think of for you would be to store the value of the href in a global variable when the link is clicked, and then just use that as the location to redirect to if login is successful. An alternative to a global variable could be to add a hidden field to the form, and store the value of the href there.

I wouldn’t call either of them great solutions, but they’re pretty straightforward. Depending on your abilities, you might consider a redesign if you want to make improvements. For example
-detect if they’re already logged in, in which case you don’t want to intercept the clicks on the links, bothering them with a prompt.
-only redirect them if login was successful.

If you’re familiar with the scope of variables, and closures, you could make real good use of them here.

5

Thanks very much for the pointers. I may be making this more complicated than it needs to be, but I’ll look into the global var idea.