Using jquery colorbox to unhide a DIV to show password box in the colorbox

Question

Hello I am using colorbox and jquery form (http://colorpowered.com/colorbox/) I am simply stuck on what do next. I am trying to use jquery colorbox to unhide a DIV to show password box in the colorbox. I took out some of the relevant scripts to make the code more readable and increase my chance of receiving help.

This is the javascript in the header I use:

<script type="text/javascript">
$(document).ready(function(){
$('#password_reset').ajaxForm({
success: showResponse,
clearForm: 'true'
});

function showResponse(responseText, statusText)  {
  $('#password_reset').hide();
 $('#formStatus').html(responseText);
           };

 $().bind('cbox_open', function(){
 $('#password_reset').show();
$('#formStatus').html('');
});

$(".inline").colorbox({width:"300px", height:"250px", inline:true,
href:"#password_change"});
});

</script>

This is the link I have that is supposed to run my javascript code (above) and unhide the div below and run it into colorbox:

<a href="javascript:showResponse">Password Reset</a>

This is my hidden div:

<div style="visibility: hidden;">
<div id='password_change' style="padding:10px; background:#fff;">
<strong>Change your password</strong><br /><br />
<form id="password_reset" action="password_reset.php" method="post">
<input type="hidden" name="Method" value="updatePassword"  />
Password: <br />
<input type="password" name="password1" />
<br />
<br />
Verify Password: <br />
<input type="password" name="password2" />
<br />
<input type="submit" value="Update" />
</form>
<div id="formStatus"></div>
</div>
</div>

</body>
</html>

Hopefully someone can tell me how I can get this working as I am completely stuck.

Answer 1

Modified script as:

<script type="text/javascript">
  $(document).ready(function(){
    $('#password_reset').ajaxForm({
      target:  '#formStatus',
      success: showResponse,
      clearForm: 'true'          
    });

    $(".inline").colorbox({
      width:"300px",
      height:"250px",
      inline:true,
      href:"#password_change"
    });

  });

  function showResponse(responseText, statusText)  {
    $.fn.colorbox.close();
  }

</script>

No need to bind cbox_open
and replace:

<a href="javascript:showResponse">Password Reset</a>

with:

<a class="inline" href="#">Password Reset</a>