Я делаю слайд-вниз регистрационную форму, которая отправляется с плагином 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, и я не знаю, как это улучшить.
Я не уверен, что мой синтаксис верен. Это своего рода работа, но я должен щелкнуть ее два раза, чтобы инициализировать ... Я не уверен, что делать! Пожалуйста, извините мое невежество! –
Можете ли вы опубликовать свой синтаксис? –