Question

I have two buttons that popup the same Modal window, but display a different tab inside the Modal window. In each tab is a form with a number of inputs. My issue is getting the Focus() on the first form input in either of the two tabs inside the Modal.

This is what I have so far (I have left out some unnecessary code):

CoffeeScript:

# Triggers when a modal tab is shown
$ ->
  $('a[data-toggle="tab"]').bind 'shown', (event) =>
    $(this).closest('input').focus()

    # Further info:
    # event.target = activated tab. alert event.target returns 'http://localhost:3000/#tab-1'
    # event.relatedTarget = previous tab. alert event.target returns 'http://localhost:3000/#tab-2'

HTML:

<a href="#modal" id="tab-1-btn">Tab 1 Button</a>
<a href="#modal" id="tab-2-btn">Tab 2 Button</a>

<div class="modal" id="myModal">

  <div class="modal-body">

    <ul class="nav nav-tabs" id="tabs">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
    </ul>

    <div class="tab-content" id="tabs">

      <div id="tab-1" class="tab-pane">
        <form id="tab-1-form">
          <input name="tab-1-input" />
        </form>
      </div>

      <div id="tab-2" class="tab-pane">
        <form id="tab-2-form">
          <input name="tab-2-input" />
        </form>
      </div>

    </div>

  </div>
</div>

References:

• Modal: http://twitter.github.com/bootstrap/javascript.html#modals
• Tabs: http://twitter.github.com/bootstrap/javascript.html#tabs

I am open to jQuery or Javascript solutions too, I will convert them to CoffeeScript myself if necessary.

Any help would be greatly appreciated, thank you.

Answer 1

Below is my final CoffeeScript solution, thanks to mg1075 for the help above:

# Global variable to store tab info
inputTarget = ""

# Toggle login & sign up forms and focus cursor to top input on each
$ ->
  $('#tab-1-btn').click ->
    $('#tabs a[href="#tab-1"]').tab('show')
    inputTarget = "input#tab-1-input"

$ ->
  $('#tab-2-btn').click ->
    $('#tabs a[href="#tab-2"]').tab('show')
    inputTarget = "input#tab-2-input"

# Focus on top input when tab changed
$ ->
  $('a[data-toggle="tab"]').bind 'shown', (event) =>
    currentTabClass = event.target.className + "input" # = tab-1-input
    $("input#" + currentTabInputID).focus()

# Focus on top input when modal is shown
$ ->
  $('#myModal').bind 'shown', (event) =>
    $(inputTarget).focus()