soumission de formulaire jQuery/amélioration des effets?

Question

Je crée un formulaire de connexion qui est envoyé avec le plugin ajax.form de jQuery. Les effets fonctionnent, la soumission fonctionne. Mais quand vous les mettez ensemble, ils ne fonctionnent pas ...

Ceci est pour le moteur d'expression, donc les balises {if} ne sont que des conditions d'EE. Voir que le contenu change une fois que l'utilisateur est connecté - J'ai juste besoin de recharger le contenu pour que le contenu change - Je pense qu'il serait plus facile de faire un tas de réécritures .html() ... Une fois le formulaire est soumis, le contenu correct est rechargé et est cliquable, mais le "#panel" ne sera pas ré-animé.

<div id="client-login"> 
<div class="wrap"> 
<p class="work-message">We're doing some work under the hood! If things get/are funky, please excuse us!</p> 
    {if logged_out} 
    <div id="client" class="login">Client Login</div> 
    {/if} 
    {if logged_in} 
    <div id="client" class="login">Hey, {username}!</div> 
    {/if} 
</div> 
</div> 
<div id="panel"> 
    <div id="panel-content" class="wrap"> 
    {if logged_out} 
    {exp:member:login_form id="login-form"} 
    <ul> 
    <li> 
    <label><span>Username</span></label> 
    <input type="text" name="username" value="" maxlength="32" class="input" size="25" /> 
    </li> 
    <li> 
    <label><span>Password</span></label> 
    <input type="password" name="password" value="" maxlength="32" class="input" size="25" /> 
    </li> 
    <li class="login-forgot"> 
    <a href="{path='member/forgot_password'}">Forgot your password?</a> 
    </li> 
    {if auto_login} 
    <li class="checkbox"> 
    <input class='checkbox' type='checkbox' name='auto_login' value='1' /> Auto-login on future visits 
    </li> 
    {/if} 
    </ul> 
    <p> 
    <input type="submit" id="panelsubmit" name="submit" value="Submit" /> 
    </p> 
    {/exp:member:login_form} 
    {/if} 
    <div id="messages"> 
    <p></p> 
    </div> 
{if logged_in} 
    <div id="logout"> 
     <h2>What do ya wanna' do?!</h2> 
     <form id="login-form" > 

      <input type="hidden" name="ACT" value="10" /> 

      <input type="submit" value="Log Out" /> 

     </form> 
    </div> 
{/if} 

$(document).ready(function() 
{ 
$('.login').toggle(
function() 
{ 
    $('#panel').stop().animate({ 
    height: "150", 
    padding:"20px 0", 
    backgroundColor:'rgba(0,0,0,0.8)', 
}, 500); 
$('#client-login').stop().animate({ 
    backgroundColor:'rgba(0,0,0,0.8)', 
}, 500); 
}, 
function() 
{ 
    $('#panel').stop().animate({ 
    backgroundColor:'rgba(0,0,0,0.2)', 
    height: "0", 
    padding:"0px 0", 
    }, 500);  
$('#client-login').stop().animate({ 
    backgroundColor:'rgba(0,0,0,0.2)', 
}, 500); 

}); 

    $('#login-form').ajaxForm({ 
     // success identifies the function to invoke when the server response 
     // has been received; here we apply a fade-in effect to the new content 
     success: function() { 
      $("#client").remove().fadeOut("fast"); 
      $("#client-login").load("/ #client-login").fadeIn("fast"); 
      $("#panel-content").remove().fadeOut("fast"); 
      $("#panel").load("/ #panel-content").fadeIn("fast"); 

     } 
    }); 
}); 

La fonctionnalité est essentiellement là, mais la forme doit travailler même après qu'il a présenté comme il le fait avant! En outre, l'animation pour le .remove ne fonctionne pas. Je suis nouveau sur JavaScript et je ne sais pas comment l'améliorer.

Answer 1

Étant donné que vous chargez le contenu via AJAX, l'animation et la fonctionnalité qui existaient avant le rechargement ne fonctionneront plus car les effets sont uniquement liés aux éléments d'origine. Pour résoudre ce problème, vous devez relier le contenu chargé aux animations, etc.

Il y a plusieurs façons de procéder. Tout d'abord, vous pouvez simplement ré-appliquer vos fonctions d'animation au contenu chargé. Par exemple, une fois le contenu chargé, appelez une fonction qui réaffecte les animations aux nouveaux éléments. Deuxièmement, et plus facilement, vous pouvez utiliser la fonction jQuery live(). C'est la meilleure méthode à mon avis. La fonction live() lie tous les éléments actuels et futurs, au lieu de simplement lier les éléments actuels. Donc, lors de la création de votre animation, créez-la dans la fonction live(). Voici un exemple d'utilisation de http://docs.jquery.com/Events/live:

$("p").live("click", function(){ 
    $(this).after("<p>Another paragraph!</p>"); 
}); 

Answer 2

$('.login').toggle(
function() 
{ 
      $('#panel').stop().animate({ 
      height: "150", 
      padding:"20px 0", 
      backgroundColor:'rgba(0,0,0,0.8)', 
     }, 500); 
     $('#client-login').stop().animate({ 
      backgroundColor:'rgba(0,0,0,0.8)', 
     }, 500); 
    }, 
    function() 
    { 
      $('#panel').stop().animate({ 
      backgroundColor:'rgba(0,0,0,0.2)', 
      height: "0", 
      padding:"0px 0", 
      }, 500);  
     $('#client-login').stop().animate({ 
      backgroundColor:'rgba(0,0,0,0.2)', 
     }, 500); 

});

$('#login-form').ajaxForm({ 
    // success identifies the function to invoke when the server response 
    // has been received; here we apply a fade-in effect to the new content 
    success: function() { 
     $("#client-login .wrap").fadeOut('slow'); 
     $("#client-login .wrap").remove();   
     $("#client-login").load("/ #client-login").fadeIn(2000); 
     $("#panel-content").fadeOut('slow'); 
     $("#panel").load("/ #panel-content").fadeIn(2000); 
     $('#panel').animate({ 
      backgroundColor:'rgba(0,0,0,0.2)', 
      height: "0", 
      padding:"0px 0", 
      }, 500); 
     $('#client-login').animate({ 
      backgroundColor:'rgba(0,0,0,0.2)', 
     }, 500); 
    } 
}); 

Toute l'action se passe dans la « tête » div ...

Answer 3

D'accord, voici ce que je l'ai et il semble fonctionner ... Y at-il une meilleure façon de le faire?

$(document).ready(function() 
{ 
$("#client-login").css({backgroundColor:'rgba(0,0,0,0.2)'}); 
$(".login").live('mouseover', function(){ 
    $(".login").toggle(
    function() 
    { 
       $('#panel').stop().animate({ 
       height: "150", 
       padding:"20px 0", 
       backgroundColor:'rgba(0,0,0,0.8)', 
      }, 500); 
      $('#client-login').stop().animate({ 
       backgroundColor:'rgba(0,0,0,0.8)', 
      }, 500); 
     }, 
    function() 
    { 
       $('#panel').stop().animate({ 
       backgroundColor:'rgba(0,0,0,0.2)', 
       height: "0", 
       padding:"0px 0", 
       }, 500);  
      $('#client-login').stop().animate({ 
       backgroundColor:'rgba(0,0,0,0.2)', 
      }, 500); 
}); 
}); 
$(".login").live('mouseover', function(){ 

    $('#login-form').ajaxForm({ 
     // success identifies the function to invoke when the server response 
     // has been received; here we apply a fade-in effect to the new content 
     success: function() { 
      $("#client-login .wrap").fadeOut('slow'); 
      $("#client-login .wrap").remove();   
      $("#client-login").load("/ #client-login").fadeIn(2000); 
      $("#panel-content").fadeOut('slow'); 
      $("#panel").load("/ #panel-content").fadeIn(2000); 
      $('#panel').animate({ 
       backgroundColor:'rgba(0,0,0,0.0)', 
       height: "0", 
       padding:"0px 0", 
       }, 500); 
      $('#client-login').animate({ 
       backgroundColor:'rgba(0,0,0,0.2)', 
      }, 500); 
     } 
    }); 
    }); 
}); 

Answer 4

Je l'ai eu!

$(document).ready(function(){ 
    $("#client-login").css({backgroundColor: 'rgba(0,0,0,0.2)'}); 
    var speed = 300; 
    var openpanel = function() { 
      $("#client-login").stop().animate({ 
       backgroundColor: 'rgba(0,0,0,0.8)' 
       },speed); 
      $("#panel").stop().animate({ 
       backgroundColor: 'rgba(0,0,0,0.8)', 
       height: '200px' 
       },speed); 
      $('#panel').removeClass("closed"); 
     }; 
    var closepanel = function() { 
      $("#client-login").stop().animate({ 
       backgroundColor: 'rgba(0,0,0,0.2)' 
       },speed); 
      $("#panel").stop().animate({ 
       backgroundColor: 'rgba(0,0,0,0.2)', 
       height: '0px' 
       },speed); 
      $('#panel').addClass("closed"); 
     }; 
    $(".login").live("click",function() { 
     if ($("#panel").hasClass("closed")) 
     { 
      openpanel(); 
     } else { 
      closepanel(); 
     }; 
    $('#login-form').ajaxForm({ 
     // success identifies the function to invoke when the server response 
     // has been received; here we apply a fade-in effect to the new content 
     success: function() { 
     closepanel(); 
     $("#client-login").load("/ #client-login"); 
     $("#panel").load("/ #panel-content", 1000); 
     } 
    }); 
    }); 
}); 

Merci pour votre aide, James!