[Mootools] reset ajax form
Ik ben een login aan het maken dmv ajax. Login kun je hier vinden (wachtwoord vergeten klikken en op verzenden klikken. Daarna krijg je een link om het form terug te krijgen.)
Het probleem is, zodra ik 1 keer de ajax request do, en het form reset, dan krijg ik geen resultaat meer van de ajax request. Ik heb al geprobeerd dmv $clear het 'cache' te clearen, maar het heeft geen resultaat.
Wat $vars zodat er geen misverstanden komen
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php //kleurtjes
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
var username = $('customernumber');
var password = $('password');
var email = $('email');
var resetForgotPass = $('reset-forgotpass');
//var resetLogin =
?>
var SliderEmail = new Fx.Slide('forgotpass-div', {mode: 'horizontal'});
var username = $('customernumber');
var password = $('password');
var email = $('email');
var resetForgotPass = $('reset-forgotpass');
//var resetLogin =
?>
Ajax request
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php //kleurtjes
$('forgotPass').addEvent('submit', function(e) {
e.stop();
$('formContainer-forgotpass').style.display = 'none';
var log = $('forgotpass-container').addClass('ajax-loading');
this.set('send', {onComplete: function(response) {
log.removeClass('ajax-loading');
log.set('html', response);
resetForgotPass.style.display = 'block';
}});
this.send();
});
?>
$('forgotPass').addEvent('submit', function(e) {
e.stop();
$('formContainer-forgotpass').style.display = 'none';
var log = $('forgotpass-container').addClass('ajax-loading');
this.set('send', {onComplete: function(response) {
log.removeClass('ajax-loading');
log.set('html', response);
resetForgotPass.style.display = 'block';
}});
this.send();
});
?>
Functie om het formpje terug te krijgen
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php //kleurtjes
resetForgotPass.addEvent('click', function(e){
$('forgotpass-container').style.display = 'none';
$('forgotpass-container').empty();
resetForgotPass.style.display = 'none';
$('formContainer-forgotpass').style.display = 'block';
});
?>
resetForgotPass.addEvent('click', function(e){
$('forgotpass-container').style.display = 'none';
$('forgotpass-container').empty();
resetForgotPass.style.display = 'none';
$('formContainer-forgotpass').style.display = 'block';
});
?>
De html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php //kleurtjes
<div class="forgotpass-input" id="forgotpass-div">
<form id="forgotPass" action="ajax/auth.ajax.php" method="post">
<div id="formContainer-forgotpass">
<input type="text" name="email" id="email" value="E-mail adres" />
<div class="login-submit">
<input type="submit" name="btnForgotPass" value="Verzend" />
</div>
</div>
<div id="forgotpass-container">
</div>
<div style="margin-top: 15px; display: none;" id="reset-forgotpass">[<a href="javascript:void(0);">Probeer het opnieuw</a>]</div>
</form>
</div>
?>
<div class="forgotpass-input" id="forgotpass-div">
<form id="forgotPass" action="ajax/auth.ajax.php" method="post">
<div id="formContainer-forgotpass">
<input type="text" name="email" id="email" value="E-mail adres" />
<div class="login-submit">
<input type="submit" name="btnForgotPass" value="Verzend" />
</div>
</div>
<div id="forgotpass-container">
</div>
<div style="margin-top: 15px; display: none;" id="reset-forgotpass">[<a href="javascript:void(0);">Probeer het opnieuw</a>]</div>
</form>
</div>
?>
Iemand ervaring hiermee?
Gewijzigd op 01/01/1970 01:00:00 door W W
Wat wil je precies hier mee bereiken? Het lijkt mij het resetten van je veld waarden toch? Misschien dat je de velden specifiek moet aanroepen of maak er anders van:
$('forgotpass-container').innerHTML = '';
Maar ik zie nu ook dat je een divje hebt met hetzelfde id
<div id="forgotpass-container">
die empty() zou voor een text veld moeten werken. Hier haal je volgens mij wat dingen door elkaar...
edit: typo
Gewijzigd op 01/01/1970 01:00:00 door Crispijn -
Daarnaast heeft maar 1 div het id 'forgotpass-contianer'.
De ajax request blijkt wel te werken. Sinds het divje naar een poosje groter word (en er dus content in word gezet). Alleen werken de addClass niet en word het resultaat niet weergegeven!
Met firebug kan je eens goed kijken welke elementen er allemaal veranderd moeten worden e.d. Misschien is er gewoon iets mis met je css file. Dus even pielen in je html tabje in firebug!