2009-06-01 33 views
0

我正在製作一個與jQuery ajax.form插件一起提交的下拉式登錄表單。效果起作用,提交工作。但是,當你把它們放在一起,他們不工作...jQuery表單提交/效果改進?

這是爲表達式引擎,所以{if}標籤只是EE條件。看到用戶登錄後內容發生了變化 - 我只是需要重新加載,以便內容發生變化 - 我認爲做一堆.html()重寫會更容易... 表單已提交,正確的內容將重新加載並且可點擊,但「#panel」不會重新生成動畫。

<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"); 

     } 
    }); 
}); 

功能基本上是存在的,但是表單需要與之前一樣提交後才能工作!另外,.remove的動畫不起作用。我是JavaScript新手,我不知道如何改進。

回答

5

由於您正在通過AJAX加載內容,因此在重新加載之前存在的動畫和功能將無法工作,因爲效果僅與原始元素綁定。要解決此問題,您需要將加載的內容重新綁定到動畫等。

有幾種方法可以做到這一點。首先,您可以將您的動畫功能重新應用於加載的內容。例如,內容加載完成後,調用一個將動畫重新綁定到新元素的函數。其次,也更容易,你可以使用jQuery live()函數。 在我看來這是更好的方法。 live()函數綁定所有當前和將來的元素,而不僅僅是綁定當前元素。因此,在創建動畫時,請在live()函數內創建它。下面是從http://docs.jquery.com/Events/live的使用例:

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

我不確定我的語法是否正確。這很有用,但我必須點擊它兩次才能初始化......我不知道該怎麼做!請原諒我的無知! – 2009-06-01 01:17:59

+0

你能發表你的語法嗎? – 2009-06-01 01:40:56

0
$('.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); 
    } 
}); 

所有的動作都發生在「頭」的div ...

+0

你想如何發生動畫?當你做點什麼(比如點擊)時它會發生,還是僅在頁面加載/ AJAX內容重新加載時發生? – 2009-06-01 04:26:18

+0

動畫發生在點擊上(就像slideToggle)。 ajax將調用一個新的動畫 - 淡入新內容(可能幻燈片關閉)。我並不十分確定我是如何做事的,但主要問題在於點擊。 我編輯了腳本(向上)。 – 2009-06-01 16:07:01

+0

更新的代碼是否工作?看起來應該... – 2009-06-01 19:08:58

0

好吧,這是我和它似乎工作... 有沒有更好的方式來做到這一點?

$(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); 
     } 
    }); 
    }); 
}); 
+0

是否有一個特別的原因,你有兩個現場活動? – 2009-06-03 00:08:41

+0

當我把它裹在一個 - 我可以只是犯了一個錯字,它表現得很滑稽... – 2009-06-03 02:24:02

0

我明白了!

$(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); 
     } 
    }); 
    }); 
}); 

謝謝你的幫助,詹姆斯!

+0

沒問題!樂於幫助。 – 2009-06-03 22:50:01