Comment empêcher la clôture de jQuery FancyBox immédiatement après l'envoi?

Question

Je charge un formulaire d'inscription en ligne dans un FancyBox de jQuery. Cependant après avoir soumis le formulaire, la boîte se ferme immédiatement alors qu'il y a des commentaires que je veux montrer à l'utilisateur dans le FancyBox lui-même. Ce retour est généré côté serveur et est imprimé dans le FancyBox.

Comment est-ce que je peux faire la fermeture de la boîte seulement quand il n'y a plus aucun retour? Je pensais utiliser ajax juste pour actualiser le FancyBox lui-même et pas la page entière après l'actualisation. Mais je ne peux pas comprendre comment ajax $ .ajax ({type, cache, url, data, succès}); fonctionne ... Aussi, il semble qu'il n'y ait pas de réaction de la 'soumettre lier' dans le javascript.

J'espère que quelqu'un peut m'aider avec ce problème. Je colle mon code ci-dessous. Si des questions, s'il vous plaît demander ..

Thx à l'avance!

C'est le javascript:

<script type="text/javascript"> 
     $(document).ready(function() { 
      $("#various1").fancybox({ 
       'transitionIn'  : 'none', 
       'transitionOut'  : 'none', 
       'scrolling'   : 'no', 
       'titleShow'   : false, 
       'onClosed'   : function() { 
        $("#registration_error").hide(); 
       } 
      }); 
     }); 

     $("#registration_form").bind("submit", function() { 


      if ($("#registration_error").val() != "Registration succeeded!") { 
       $("#registration_error").show(); 
       $.fancybox.resize(); 
       return false; 
      } 

      $.fancybox.showActivity(); 

      $.ajax({ 
       type  : "POST", 
       cache  : false, 
       url   : "/data/login.php", 
       data  : $(this).serializeArray(), 
       success  : function(data) { 
        $.fancybox(data); 
       } 
      }); 

      return false; 
     }); 

Ceci est le formulaire en ligne que je montre dans le FancyBox:

<div style="display: none;"> 
     <div id="registration" style="width:227px;height:250px;overflow:auto;padding:7px;"> 
     <?php echo "<p id=\"registration_error\">".$feed."</p>"; ?> 
     <form id="registration_form" action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post"> 
      <p> 
       <label for="username">Username: </label> 
       <input type="text" id="login_name" name="username" size="30" /> 
      </p> 
      <p> 
       <label for="password">Password: </label> 
       <input type="password" id="pass" name="pw" size="30" /> 
      </p> 
      <p> 
       <label for="repeat_password">Repeat password: </label> 
       <input type="password" id="rep_pass" name="rep_pw" size="30" /> 
      </p> 
      <p> 
       <input type="submit" value="Register" name="register" id="reg" /> 
      </p> 
      <p> 
       <em></em> 
      </p> 
     </form> 
     </div> 
    </div> 

Answer 1

je la partie ajax du fancybox ..

$.ajax({ 
        type  : "POST", 
        cache  : false, 
        url   : "data/register.php", 
        data  : $(this).serializeArray(), 
        success  : function(data) { 
         data = $.parseJSON(data); 

        if (data.feedback == "Registration succeeded!") { 
         $.fancybox("Welcome, "+data.name+"! You can now log in."); 
         $.fancybox.resize(); 
        } 
        else{ 
         $("#registration_error").html(data.feedback); 
        } 
       } 
      }); 

Dans le fichier register.php, j'ai vérifié si les données étaient correctes ou non et j'ai fait quelques commentaires. J'ai mis les commentaires dans register.php dans un objet JSON que je pourrais utiliser dans l'option 'succès' de l'ajax dans ma page principale (voir ci-dessus). Si le feedback était positif, j'ai créé le fancybox, sinon j'ai placé le feedback dans un div #registration_error dans mon formulaire d'inscription.

Le code de mon fichier register.php ressemble à ceci:

$feed = ""; 

// Put post vars in php vars 
$username = $_POST[username]; 
$password = $_POST[pw]; 
$rep_password = $_POST[rep_pw]; 

// Check if php vars are not empty and check if the username doesn't exist in my user.class 
if(!empty($username) && !empty($password) && !empty($rep_password)) 
{ 
    $user = new User(); 

    $user->Username = $username; 
    $user->Password = $password; 
    $user->Password2 = $rep_password; 

    try 
    { 
     $user->Save(); 
     $feed .= "Registration succeeded!"; 
    } 
    catch(Exception $e) 
    { 
     $feed = $e->getMessage(); 
    } 
} 
else 
{ 
    $feed = "Please fill in all the fields!"; 
} 

// Feedback for fancybox 
$output = array(); 

$output['name'] = $username; 
$output['feedback'] = $feed; 

// Send JSON 
$output = json_encode($output); 
print $output; 

Espérons que cela vous aidera!

GRtz!

Answer 2

Je l'ai fait ce à tout moment.

J'ai fondamentalement déclenché un lien qui ouvre un formulaire si $ _POST ['xxx'] est défini.

La première fonction jquery ouvre une forme si un élément id = formulaire est cliqué. La deuxième fonction va triger l'élément id = triger_form qui ouvrira le même formulaire.

$(document).ready(function() { 

$("a#form").fancybox({ 
    'hideOnContentClick': false 
}); 
$("a#triger_form").fancybox().trigger('click')({ 
    'hideOnContentClick': false 
}); 

});

if($_POST['refer_submit'] == TRUE) { 

echo ''; }

Answer 3

pour un iframe ouvert fancybox, voici le code imprimé après l'submition:

<script type='text/javascript'> 
    $(document).ready(function(){ 
    parent.document.location.reload(); 
    parent.jQuery.fancybox.close(); 
    }); 
</script>