Filteren met Jquery door html5 data attribute gebruiken
Alvast bedankt voor jullie oplossing,
Ik heb in mijn code van alles wat veranderd, nu werkt ie helemaal niet meer. Het is beter dat ik alles gewoon weer over nieuw doe dus nu de vraag is hoe kan ik het beste doen of op welke manier?? zo dat ie in ieder browser werkt.
Online http://jsfiddle.net/vC8m5/
Ik ben al 2 weken heel hard bezig met een zoek filter maar helaas nog lang niet af..!
Probleem : "Filteren werkt niet in IE7, Opera, Safari"
Ik zal even vertellen wat de bedoeling is.
Na dat het resultaat naar browser verstuurd is moet verder met Jquery kunnen filteren op de volgende dingen
Start datum
Eind datum
Land, Stad en Locatie
Ieder product krijgt zo 'n div
Code (php)
1
2
3
2
3
<div class="tickets_2800" data-json="{"productsId":"2800","date":"2013-10-13","countries":"5","cities":"99","location":"138"}">
Product informatie
</div>
Product informatie
</div>
En hier is mijn script
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<script type="text/javascript">
$(document).ready(function (){
$('#filter').click(function () {
//wanneer gebruikers op filter klikt
Filter();
});
function Filter(){
//Datum format veranderen naar yyyy-mm-dd
var startDate = $('.verfijnen .search .fromDate').val();
var startDate = startDate.split('/');
var startDate = startDate[2]+'-'+startDate[1]+'-'+startDate[0];
//Datum format veranderen naar yyyy-mm-dd
var endDate = $('.verfijnen .search .toDate').val();
var endDate = endDate.split('/');
var endDate = endDate[2]+'-'+endDate[1]+'-'+endDate[0];
//Geselecteerde waardes ophalen
var countries = $('.verfijnen .search #countries').val();
var cities = $('.verfijnen .search #cities').val();
var location = $('.verfijnen .search #location').val();
$('div.tickets').each(function() {
//convereten naar object
var objData = $.parseJSON($(this).attr('data-Json'));
//date.parse werkt niet in ieder browser
//Datum naar time()
var timeStartDate = date.parse(startDate);
var timeEndDate = date.parse(endDate);
var timeProductDate = date.parse(objData.date);
//alles beide datum velden niet leeg is
if(startDate.length > 0 && endDate.length > 0){
//valt product datum tussen beide datums die gebruiker heeft gekozen ?
if(timeProductDate.between(timeStartDate,timeEndDate)){
$('.tickets_'+objData.productsId).show();
}else{
$('.tickets_'+objData.productsId).hide();
}
}else{
//als alleen start datum gekozen
if(startDate.length > 0){
if( timeProductDate >= timeStartDate ){
$('.tickets_'+objData.productsId).show();
}else{
$('.tickets_'+objData.productsId).hide();
}
} else if(endDate.length > 0){
//als alleen eind datum gekozen
if( timeProductDate <= timeEndDate ){
$('.tickets_'+objData.productsId).show();
}else{
$('.tickets_'+objData.productsId).hide();
}
} else {
//anders! alles weer laten zien
$('.tickets_'+objData.productsId).show();
}
}
//is er een land geselecteerd en waarde is meer dan 0
if(countries > 0){
//is product land waarde niet zelfde als geselecteerde land waarde ? verberg het!
if(objData.countries != countries){
$('.tickets_'+objData.productsId).hide();
}
}
//is er een stad geselecteerd en waarde is meer dan 0
if(cities > 0){
//is product stad waarde niet zelfde als geselecteerde stad waarde ? verberg het!
if(objData.cities != cities){
$('.tickets_'+objData.productsId).hide();
}
}
//is er een locatie geselecteerd en waarde is meer dan 0
if(location > 0){
//is product locatie waarde niet zelfde als geselecteerde locatie waarde ? verberg het!
if(objData.location != location){
$('.tickets_'+objData.productsId).hide();
}
}
});
}//end function filter
//check Range number Dit komt van internet
Number.prototype.between = function(first,last){
return (first < last ? this >= first && this <= last : this >= last && this <= first);
}
});
</script>
$(document).ready(function (){
$('#filter').click(function () {
//wanneer gebruikers op filter klikt
Filter();
});
function Filter(){
//Datum format veranderen naar yyyy-mm-dd
var startDate = $('.verfijnen .search .fromDate').val();
var startDate = startDate.split('/');
var startDate = startDate[2]+'-'+startDate[1]+'-'+startDate[0];
//Datum format veranderen naar yyyy-mm-dd
var endDate = $('.verfijnen .search .toDate').val();
var endDate = endDate.split('/');
var endDate = endDate[2]+'-'+endDate[1]+'-'+endDate[0];
//Geselecteerde waardes ophalen
var countries = $('.verfijnen .search #countries').val();
var cities = $('.verfijnen .search #cities').val();
var location = $('.verfijnen .search #location').val();
$('div.tickets').each(function() {
//convereten naar object
var objData = $.parseJSON($(this).attr('data-Json'));
//date.parse werkt niet in ieder browser
//Datum naar time()
var timeStartDate = date.parse(startDate);
var timeEndDate = date.parse(endDate);
var timeProductDate = date.parse(objData.date);
//alles beide datum velden niet leeg is
if(startDate.length > 0 && endDate.length > 0){
//valt product datum tussen beide datums die gebruiker heeft gekozen ?
if(timeProductDate.between(timeStartDate,timeEndDate)){
$('.tickets_'+objData.productsId).show();
}else{
$('.tickets_'+objData.productsId).hide();
}
}else{
//als alleen start datum gekozen
if(startDate.length > 0){
if( timeProductDate >= timeStartDate ){
$('.tickets_'+objData.productsId).show();
}else{
$('.tickets_'+objData.productsId).hide();
}
} else if(endDate.length > 0){
//als alleen eind datum gekozen
if( timeProductDate <= timeEndDate ){
$('.tickets_'+objData.productsId).show();
}else{
$('.tickets_'+objData.productsId).hide();
}
} else {
//anders! alles weer laten zien
$('.tickets_'+objData.productsId).show();
}
}
//is er een land geselecteerd en waarde is meer dan 0
if(countries > 0){
//is product land waarde niet zelfde als geselecteerde land waarde ? verberg het!
if(objData.countries != countries){
$('.tickets_'+objData.productsId).hide();
}
}
//is er een stad geselecteerd en waarde is meer dan 0
if(cities > 0){
//is product stad waarde niet zelfde als geselecteerde stad waarde ? verberg het!
if(objData.cities != cities){
$('.tickets_'+objData.productsId).hide();
}
}
//is er een locatie geselecteerd en waarde is meer dan 0
if(location > 0){
//is product locatie waarde niet zelfde als geselecteerde locatie waarde ? verberg het!
if(objData.location != location){
$('.tickets_'+objData.productsId).hide();
}
}
});
}//end function filter
//check Range number Dit komt van internet
Number.prototype.between = function(first,last){
return (first < last ? this >= first && this <= last : this >= last && this <= first);
}
});
</script>
Gewijzigd op 23/02/2013 14:15:57 door A Aryan
1) Uitdagend? Waar slaat dat op? Heb je niet gewoon een vraag?
2) Maak liever een goede titel
3) toon alleen relevante code
4) gebruik [code] tags
5) Dat je operators niet werken en dat het in een bepaalde datum is weten we nu ondertussen wel. Leg liever uit waarom jij denkt dat die operators niet werken. Maw wat gebeurd er nu echt en wat verwacht je dat er moet gebeuren?
6) jQuery heeft geen operators, ik hoop dat je JavaScript bedoelt?
7) Verzorg graag een online voorbeeld. Stop je code bijv. in JSfiddle of jsbin
Bedankt voor jullie reactie, ik hoor dat het nu wat duidelijker is en anders hoor ik het graag.
Bedankt.