Kijk of element bestaat
Ik wil m.b.v. jQuery en AJAX kijken of in de response die ik terug met AJAX of er een class gevonden is.
Dit gaat om de class .errors!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
var errors = $(data).find('.errors')
if (errors)
{
alert("Errors zijn gevonden");
}
else
{
alert("Geen errors gevonden");
}
</script>
var errors = $(data).find('.errors')
if (errors)
{
alert("Errors zijn gevonden");
}
else
{
alert("Geen errors gevonden");
}
</script>
Gewijzigd op 06/10/2015 13:27:29 door Mathieu Posthumus
Google, eerste hit.
Gewijzigd op 06/10/2015 13:36:43 door Thomas van den Heuvel
Als er wel errors zijn dan doet ie het gewoon goed, en als er geen errors zijn dan wilt hij de hele if niet inkomen!
- .find()
- .filter()
gebruikt maar die werkten niet.
De manieren;
- $(".errors").length > 0
- $(".errors") == true
Maar niks werkt! :s
if(errors.length > 0)
Maar ik mis alleen nog wat "ajax" hier precies van invloed is.
Ik kan dat niet in de vraag plaatsen. Of haal je iets op en probeer je de response te doorzoeken ipv de DOM
Ik geef via ajax het formulier mee aan de handler en in die handler check ik alles na en geef ik een response weer terug, in die response zitten errors met een class .errors.
Ik moet kunnen checken of .errors bestaat of niet, als ie bestaat geeft ie netjes weer dat er errors zijn en als ie niet bestaat dus als er geen errors zijn dan stopt ie met de code uitvoeren.
ik neem aan dat je in php iets doet met
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?php
$response.html = 'some html code;
$response.error = 'er is een error';
header('Content-Type: application/json');
exit(json_encode($response));
?>
$response.html = 'some html code;
$response.error = 'er is een error';
header('Content-Type: application/json');
exit(json_encode($response));
?>
en in js:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$.ajax({
url: 'iets.php',
success: function(data) {
if(data.error) {
alert('er is een error: ' + data.error);
}
},
error: function(){}
});
url: 'iets.php',
success: function(data) {
if(data.error) {
alert('er is een error: ' + data.error);
}
},
error: function(){}
});
Repsonse handler
Code (php)
En de js code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
("#contact-form").submit(function(event){
event.preventDefault();
var form = $(this);
var url = "contact_form_handler.php?action=check_contact_form";
var posting = $.post(url, form.serialize());
posting.done(function(data){
alert();
var errors = $(data).find('.errors');
if (!errors.length > 0)
{
alert("errors gevonden");
}
else
{
alert("Geen errors");
}
});
});
event.preventDefault();
var form = $(this);
var url = "contact_form_handler.php?action=check_contact_form";
var posting = $.post(url, form.serialize());
posting.done(function(data){
alert();
var errors = $(data).find('.errors');
if (!errors.length > 0)
{
alert("errors gevonden");
}
else
{
alert("Geen errors");
}
});
});
Gewijzigd op 06/10/2015 15:44:09 door Mathieu Posthumus
http://stackoverflow.com/questions/9551230/jquery-selectors-on-a-html-string zegt dat je in elk geval op de goede weg zit.
zelf zou ik ipv alleen de html uit te spugen er een (json) object van maken, en gewoon separaat de melding over error meegeven. Ik blijk namelijk vaak zat dergelijke meta info nodig te hebben.
Maar ik weet zeker dat het zo kan!
var errors = $('<div>' + data + '</div>').find('.errors');
In plaats van het zoeken in een lap HTML had je een errors-array in JSON-formaat terug kunnen geven. Leeg array = geen errors, niet-leeg array = wel errors. Op die manier kun je veel gestructureerder te werk gaan met je geretourneerde data. De HTML kun je vervolgens eenvoudig genereren in je callback functie met behulp van deze data.
(in het laatste fragment van Mathieu stond op regel 11 een ! die mij niet op zijn plaats lijkt, mogelijk zorgde dit voor verwarring?)
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
$aData['html'] = 'een lap html';
$aData['errors'][] = 'foutmelding X';
$aData['errors'][] = 'foutmelding Y';
headers('Content-Type: application/json';
echo json_encode($aData);
?>
$aData['html'] = 'een lap html';
$aData['errors'][] = 'foutmelding X';
$aData['errors'][] = 'foutmelding Y';
headers('Content-Type: application/json';
echo json_encode($aData);
?>
Dat je ME-leraar (wat is dat voor vak?) er niet uitkomt, is nog geen reden om het maar aan de kant te schuiven.
Je code wordt er namelijk veel eenvoudiger van.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
posting.done(function(data){
alert();
var errors = data.errors;
if (errors.length > 0)
{
alert("errors gevonden");
}
else
{
alert("Geen errors");
}
});
alert();
var errors = data.errors;
if (errors.length > 0)
{
alert("errors gevonden");
}
else
{
alert("Geen errors");
}
});
Ivo P op 18/11/2015 14:01:07:
precies wat ik eerder probeerde aan te geven:
Jij verschafte eerder al het hoe (een mogelijke implementatie) en ik geef nu alsnog (wellicht ten overvloede) het waarom :).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php // Jquery
<div class="errors"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
if($('.errors').length > 0) {
console.log('Bestaat');
} else {
console.log('Bestaat niet');
}
});
</script>
?>
<div class="errors"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
if($('.errors').length > 0) {
console.log('Bestaat');
} else {
console.log('Bestaat niet');
}
});
</script>
?>
Gewijzigd op 27/11/2015 15:53:02 door Inter Kode