2010-09-12 12 views
0

Tenter d'ouvrir une Fancybox une fois qu'un formulaire est envoyé. J'essaie aussi de faire un appel ajax à un script php ... je ne sais pas exactement où mettre ça. Voici le code. Si quelqu'un a des idées, je l'apprécierais vraiment. Comme vous pouvez probablement le dire, je n'ai aucune idée de ce que je fais avec AjaxForm.Ouvrir Fancybox (ou equiv) à partir du formulaire imput avec un href

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.2.pack.js"></script> 
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.1.js"></script> 
<script type="text/javascript" src="http://github.com/malsup/form/raw/master/jquery.form.js?v2.43"></script> 
<link href="xtras/css/style.css" rel="stylesheet" type="text/css"/> 
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.1.css" media="screen" /> 
<!--[if IE 6]><link href="xtras/css/style-ie6.css" rel="stylesheet" type="text/css" /><![endif]--> 
<!--[if IE 7]><link href="xtras/css/style-ie7.css" rel="stylesheet" type="text/css" /><![endif]--> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#signup").ajaxForm(function() { 
     alert("TEST") 
    }); 
}); 
</script> 
<title>Test</title> 
</head> 
<body> 
    <div id="container"> 
     <div id="pillar"> 
      <h1>Test</h1> 
      <form action="GET" id="signup" name="signup" > 
       <input name="email" id="email"></input> 
       <input id="submit" name="submit" type="submit"></input> 
       <a href="javascript:document.signup.submit();" >SUBMIT</a> 
      </form> 
     </div> 
    </div> 
</body> 

J'ai aussi essayé ceci:

$(document).ready(function() { 
    $("#myForm").ajaxForm({ 
     success: function(responseText){ 
      $.fancybox({ 
       'content' : responseText 
      }); 
     } 
    }); 
}); 

Quelqu'un sait où je me trompe? Merci d'avance.

+0

Voici un exemple pour facybox http://stackoverflow.com/questions/3586138/jquery-plugin-conflicts-please-assist code ici : http://plungjan.name/eetest/facy3.html – mplungjan

Répondre

0

Je l'ai adapté à partir des exemples sur le FancyBox page (tip #5) pour travailler avec le plugin Forms. IT peut fonctionner hors de la boîte ou vous devrez peut-être modifier. Cependant, si vous utilisez plutôt l'exemple moins la validation de cette page de blog qui devrait fonctionner sans faute et il fait la même chose que vous faites avec le plugin de formulaires de toute façon.

JS:

$(document).ready(function() { 
    $('a#signup').fancybox(); 
    $("#signup_form").ajaxForm({ 
     beforeSubmit: function(){ $.fancybox.showActivity();}, 
     success: function(data){ 
      $.fancybox(data); 
     } 
    }); 

}); 

HTML:

<a href="#signup_form" id="signup">Signup</a> 
    <div style="display: none;"> 
    <form action="POST" id="signup_form" name="signup"> 
     <input name="email" id="email" /> 
     <input id="submit" name="submit" type="submit" value="Sign Up" /> 
    </form> 
    </div>