Это моя ситуация.Я работаю над новостным веб-сайтом, где домашняя страница содержит последние 100 новостных статей.Клиент хочет, чтобы посетители могли оставлять комментарии к новостям через диалоговое окно.Это ссылка после заголовка статьи.Также, когда посетитель не вошел в систему, он может сделать это через диалоговое окно, а когда посетитель не имеет учетной записи, он может зарегистрироваться для этого в.
Используемое мной диалоговое окно из jquery ui.Раскладка выглядит следующим образом:
|---------------------------------------|
| Login | Registration |
| | |
| username: | username: |
| - Inputfield | - Inputfield |
| password: | password |
| - Inputfield | - Inputfield |
| remember me | password confirm |
| login button | - Inputfield |
| | email: |
| | - Inputfield |
| | register button |
|---------------------------------------|
| |
| Here will be all the comments for the |
| news article from newest to oldest |
|---------------------------------------|
То, что я здесь сделал, это просто создание 3 делений.
- создание div-обертки вокруг формы входа и формы регистрации.
- создать div-код вокруг формы входа в систему
- создать div-код вокруг формы регистра
HTML выглядит так: (содержимое голландское, и я оставилкомментарии из него.)
<div class="reactionForm" >
<div id="normalReaction" class="normalReaction activeForm'.(check_login() ? '' : ' login').'">
<form action="" name="plaatsreactie" onsubmit="return validateReaction( '.$_POST['id'].');" method="post">
<div id="reactionForm">
<div class="qr_login">
<h3>Log hieronder in.</h3>
<form action="" method="post" id="reactie_login" >
Gebruikersnaam:<br />
<input id="r_username" type="text" name="gebruikersnaam" class="r_loginInput" value="" /><br />
Wachtwoord:<br />
<input id="r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br />
<input id="r_onthouden" type="checkbox" name="onthouden" value="1" class="customCheckbox" id="onthoudenCheck" />
<label for="onthoudenCheck">Onthouden</label><br />
<span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a>
<input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" />
</form>
</div>
<div class="qr_register">
<h3>Nog geen account? <br />Maak hieronder een account aan.</h3>
<form action="" method="post" id="reactie_register" >
Gebruikersnaam:<br />
<input id="r_r_username" type="text" name="gebruikersnaam" class="r_loginInput" value="" /><br />
Wachtwoord:<br />
<input id="r_r_password" type="password" name="wachtwoord" class="r_loginInput" value="" /><br />
Bevestig wachtwoord:<br />
<input id="r_r_password2" type="password" name="wachtwoord2" class="r_loginInput" value="" /><br />
Email adres:<br />
<input id="r_r_email" type="text" name="emailadres" class="r_loginInput" value="" /><br />
<input id="r_r_voorwaarden" type="checkbox" name="voorwaarden" class="register_checkbox"/> Ik accepteer de <a href="/algemene-voorwaarden/" target="_blank">algemene voorwaarden</a>
<input type="image" name="submit" id="r_register" src="/images/registreren.png" class="loginSubmit" />
</form>
</div>
</div>
</form>
</div>
, тогда, когда я нажимаю на кнопку входа в систему, будет следующий код:
$("#r_login").live("click",function() {
var unameval = $('#r_username').val();
var pwordval = $('#r_password').val();
var onthoude = $('#r_onthouden').val();
$.post( "/ajax/login.php", { gebruikersnaam: unameval, wachtwoord: pwordval, onthouden: onthoude },
function(data){
$('#reactionForm').html(data);
});
check_login();
return false;
});
и для регистра этотот же код с некоторыми дополнительными переменными:
$("#r_register").live("click",function() {
var unameval = $('#r_r_username').val();
var pwordval = $('#r_r_password').val();
var pword2val = $('#r_r_password2').val();
var email = $('#r_r_email').val();
var chkbox = $('#r_r_voorwaarden:checked');
if(chkbox.length > 0){
var voorwaarden = 'on';
}else{
var voorwaarden = 'off';
}
$.post( "/ajax/register.php", { gebruikersnaam: unameval, wachtwoord: pwordval, wachtwoord2: pword2val, emailadres: email, voorwaarden: voorwaarden },
function(data){
$('#reactionForm').html('');
$('#reactionForm').html(data);
}
);
return false;
});
код, который я привел выше для HTML-макета диалогового окна, - это то, что будет возвращено, если данные для входа в систему или регистрации неверны и будут добавлены только некоторые промежуткидля некоторых красных предупреждений.
Но вместо того, чтобы заменять текущий контент новым (с интервалами), он заменяет половину его онлайн.
В таком случае макет выглядит следующим образом.
|---------------------------------------|
| login button | |
| | |
| Registration |
| username: |
| - Inputfield |
| password |
| - Inputfield |
| password confirm |
| - Inputfield |
| email: |
| - Inputfield |
| register button |
|---------------------------------------|
| |
| Here will be all the comments for the |
| news article from newest to oldest |
|---------------------------------------|
Форма входа почти исчезла, и толькокнопка все еще там, а форма регистрации находится под ней.
Я не знаю, достаточно ли было объяснений, чтобы вы, ребята, дали мне ответ на проблему, но я просто не могу это исправить.
С уважением
РЕДАКТИРОВАТЬ-> проблема решена Проблема заключалась в том, что в HTML не был закрыт промежуток.
<label for="onthoudenCheck">Onthouden</label><br />
<span class="r_login_option"><a href="/wachtwoord-vergeten/" title="Wachtwoord vergeten?">Vergeten?</a>
<input type="image" name="submit" id="r_login" src="/images/inloggen.png" class="loginSubmit" />
Посмотрите на промежуток скласс r_login_option, он никогда не закрывается.
В любом случае, спасибо за ответы, которые были даны.