Show a confirm box before fancybox

Question

I have an app with customers who have tasks. To create a new task for a customer you can click a add icon which opens a fancybox with the new task form displayed. This has the following coffee script:

jQuery ->
  $("a.fancyForm").fancybox
  scrolling: "no"
  titleShow: false

However, customers also must have a goal to work towards otherwise the tasks are for nought. So the relationship is really customer has many goals which has many tasks. If the customer already has some goals then the form simply asks you which goal it works towards. If the customer doesn't have a goal then I want to pop up a confirm box that asks if the user would like to make a goal now. This is the coffee script I currently have:

$("a.noGoals").click (e) ->
  e.preventDefault()
  confirm_create_goal = confirm("There is currently no Goal for this customer. Would you like to create one?")
  if confirm_create_goal
    $("a.noGoals").fancybox()
  else
    alert "You won't be able to create tasks until a goal is created!"

This brings up the confirmation box by click ok appears to do nothing. If you then try a second time it displays the confirmation box and if you click ok or cancel it displays the correct fancybox with my new goal form. How do I get this to work first time round? It seems for the first click of ok it only sets confirm_create_goal and then only opens the fancybox on the second attempt.

If I click "cancel" on the first attempt it correctly displays the alert. Second attempt I hit "ok" no fancybox. Third attempt hit "ok" get fancybox but if I hit "cancel" I get the alert and then fancybox oO

Answer 1

fancybox() should be called at page load and not in response to the click event. Calling fancybox() simply creates the fancybox and attaches the listeners, etc. It just configures it. It doesn't show it.

This is one of the reasons I didn't use fancybox because it's API is weak sauce. There is no method for manually showing it. Unless you are using fancybox 2. Here is an example of how that might work:

http://jsfiddle.net/9wAdV/1/

Answer 2

So it turns out that calling fancybox as above simply attaches it to the click event, doesn't call it. So when you click again, regardless of your confirmation box response, it displays the fancybox which is now attached to the click event.

My solution, although not sure if it's the best, is to use .on() and .off() to bind and unbind the confirmation box, then I can trigger the fancybox after $("a.noGoals").fancybox() call:

confirm_create_goal = (e) ->
  e.preventDefault()
  confirm_create = confirm("There is currently no Goal for " + $(this).data("customer") + "'s company, " + $(this).data("company") + ". Would you like to create one?")
  if confirm_create
    $("body").off "click", "a.noGoals", confirm_create_goal
    $("a.noGoals").fancybox(onClosed: ->
      $("body").on "click", "a.noGoals", ->
        alert "Create a Goal!"
    ).trigger "click"
  else
    alert "You won't be able to create tasks until a goal is created!"

$("body").on "click", "a.noGoals", confirm_create_goal

So the function confirm_create_goal pops a confirmation box which gives an alert if you hit cancel and if you click ok it unbinds itself from the link, adds fancybox and triggers the click event on the link. This opens the fancybox and everything displays correctly. Finally, I added an alert to bind to the link (in case the user closes the box and tries to make a task) reminding them to create a goal.