Jquery: meerdere button id's
Mijn probleem is dat ik de buttonclass .markevent dynamisch wil maken maar niet weet hoe ik dit moet doen.
Als ik nu de markeerbutton aanklik dan hoogt de counter elke keer op. Ik wil dat de counter maar 1 keer ophoogt(of verlaagd) bij het klikken van deze specieke button.
Heeft iemand een idee hoe ik dit het beste kan aanpakken?
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
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
<?php
<script>
$(document).ready(function(){
$('#count').text( 'Geen events gemarkeerd');
$('.markevent').click (function(){
var id = $(this).attr('id');
$.ajax({
url: 'markevent.php',
data: 'id=' + id,
dataType: 'json',
success: function(data)
{
var event_id = data[0];
var title = data[3];
$('<li class="countevents" id="' + event_id + '"><input type="hidden" name="' + event_id + '" id="' + event_id + '"></li>').appendTo('ul');
var n = $(".countevents").length;
$('#count').text( + n + ' event(s) gemarkeerd');
$('#selectevent' + id).css('border','1px solid red');
}
});
});
$('.unmarkevent').click (function(){
var id = $(this).attr('id');
$('li[id=' + id +']').remove();
var n = $(".countevents").length;
$('#count').text( + n + ' event(s) gemarkeerd');
$('#selectevent' + id).css('border','1px solid white');
});
});
</script>
?>
<script>
$(document).ready(function(){
$('#count').text( 'Geen events gemarkeerd');
$('.markevent').click (function(){
var id = $(this).attr('id');
$.ajax({
url: 'markevent.php',
data: 'id=' + id,
dataType: 'json',
success: function(data)
{
var event_id = data[0];
var title = data[3];
$('<li class="countevents" id="' + event_id + '"><input type="hidden" name="' + event_id + '" id="' + event_id + '"></li>').appendTo('ul');
var n = $(".countevents").length;
$('#count').text( + n + ' event(s) gemarkeerd');
$('#selectevent' + id).css('border','1px solid red');
}
});
});
$('.unmarkevent').click (function(){
var id = $(this).attr('id');
$('li[id=' + id +']').remove();
var n = $(".countevents").length;
$('#count').text( + n + ' event(s) gemarkeerd');
$('#selectevent' + id).css('border','1px solid white');
});
});
</script>
?>
Toevoeging op 25/10/2012 16:02:26:
Iemand?
Gewijzigd op 25/10/2012 14:47:01 door N K
Nu tel je dit door <li class="countevents"> te tellen
Maar je zou het rechtstreeks kunnen tellen; aflezen aan de div zelf.
Twee extra classes aanmaken: "marked" en "unmarked". Die geven we mee aan de divs, eventueel als tweede class (1 element mag meerdere classes bevatten). Die witte of rode border kunnen dan met css geregeld worden.
En vooral: dan kan je die class gebruiken om te tellen: $('div.marked').length
---
Nu; een aantal dingen moeten nog veel duidelijker worden.
Vooral dan de rol van id in de DB <=> id van het HTML-element.
Ik zou die wat uit mekaar trekken. Op deze manier is het verwarrend.
1 Van de leuke attributes, is "data-..." Daar kan je extra informatie aan een HTML-element plakken, zonder dat het verder stoort voor het element.
bv.
<div class="content" data-id="15">Klik</div>
->
$('.content').click(function(e) {
var id = $(this).data('id') // geeft dus 15; heeft niets te maken met de id van het HTML-element
...
---
Ik zal straks een voorbeeld maken.
Kan je ondertussen een voorbeeld geven van een jSON-string die markevent.php terug geeft?
(sowieso, als je reageert, valt het beter op wanneer er een nieuwe post is ... anti-bump-wet ...)
Gewijzigd op 25/10/2012 17:58:24 door Kris Peeters
Zoiets?
Code (php)
1
2
3
4
5
2
3
4
5
<?php
["61","19","15","Expositie blabla","
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<\/p>","2012-09-05","08:15:00","10:00:00","0","0"]
?>
["61","19","15","Expositie blabla","
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<\/p>","2012-09-05","08:15:00","10:00:00","0","0"]
?>
Dit is ongeveer de bedoeling. Juist?
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
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
<!DOCTYPE html>
<html>
<head>
<style>
.marked {
border: 1px solid red;
}
.unmarked {
border: 1px solid white;
}
</style>
</head>
<body>
<div class="markdiv unmarked" data-id="15"> 15 </div>
<div class="markdiv unmarked" data-id="21"> 21 </div>
<div class="markdiv unmarked" data-id="23"> 23 </div>
<div class="markdiv unmarked" data-id="27"> 27 </div>
<input type="button" class="markevent" data-id="15" value="mark 15">
<input type="button" class="markevent" data-id="21" value="mark 21">
<input type="button" class="markevent" data-id="23" value="mark 23">
<input type="button" class="markevent" data-id="27" value="mark 27">
<br>
<input type="button" class="unmarkevent" data-id="15" value="unmark 15">
<input type="button" class="unmarkevent" data-id="21" value="unmark 21">
<input type="button" class="unmarkevent" data-id="23" value="unmark 23">
<input type="button" class="unmarkevent" data-id="27" value="unmark 27">
<div id="count"></div>
<ul></ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.markevent').click(function(e) {
var id = $(this).data('id');
// deze klik naar de server sturen
$.ajax({
url: 'markevent.php',
data: {id: id}, // ik vind deze notatie wat eleganter
dataType: 'json',
success: function(data) {
data = eval(data);
var id = data[0];
var div = $('div[data-id="' + id +'"]');
div.addClass('marked');
div.removeClass('unmarked');
// geen idee of de volgende lijn nog nodig is ... moet je zelf zien ... maar ik doe er verder niets mee
$('<li class="countevents" id="' + id + '"><input type="hidden" name="' + id + '" id="' + id + '"></li>').appendTo('ul');
displayCounter();
},
});
});
$('.unmarkevent').click(function(e) {
var id = $(this).data('id');
var div = $('div[data-id="' + id +'"]');
div.addClass('unmarked');
div.removeClass('marked');
displayCounter();
});
function displayCounter() {
$('#count').html(
$('.marked').length
+ ' event(s) gemarkeerd'
);
}
});
</script>
</body>
</html>
<html>
<head>
<style>
.marked {
border: 1px solid red;
}
.unmarked {
border: 1px solid white;
}
</style>
</head>
<body>
<div class="markdiv unmarked" data-id="15"> 15 </div>
<div class="markdiv unmarked" data-id="21"> 21 </div>
<div class="markdiv unmarked" data-id="23"> 23 </div>
<div class="markdiv unmarked" data-id="27"> 27 </div>
<input type="button" class="markevent" data-id="15" value="mark 15">
<input type="button" class="markevent" data-id="21" value="mark 21">
<input type="button" class="markevent" data-id="23" value="mark 23">
<input type="button" class="markevent" data-id="27" value="mark 27">
<br>
<input type="button" class="unmarkevent" data-id="15" value="unmark 15">
<input type="button" class="unmarkevent" data-id="21" value="unmark 21">
<input type="button" class="unmarkevent" data-id="23" value="unmark 23">
<input type="button" class="unmarkevent" data-id="27" value="unmark 27">
<div id="count"></div>
<ul></ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.markevent').click(function(e) {
var id = $(this).data('id');
// deze klik naar de server sturen
$.ajax({
url: 'markevent.php',
data: {id: id}, // ik vind deze notatie wat eleganter
dataType: 'json',
success: function(data) {
data = eval(data);
var id = data[0];
var div = $('div[data-id="' + id +'"]');
div.addClass('marked');
div.removeClass('unmarked');
// geen idee of de volgende lijn nog nodig is ... moet je zelf zien ... maar ik doe er verder niets mee
$('<li class="countevents" id="' + id + '"><input type="hidden" name="' + id + '" id="' + id + '"></li>').appendTo('ul');
displayCounter();
},
});
});
$('.unmarkevent').click(function(e) {
var id = $(this).data('id');
var div = $('div[data-id="' + id +'"]');
div.addClass('unmarked');
div.removeClass('marked');
displayCounter();
});
function displayCounter() {
$('#count').html(
$('.marked').length
+ ' event(s) gemarkeerd'
);
}
});
</script>
</body>
</html>
Gewijzigd op 25/10/2012 19:35:57 door Kris Peeters
Ik zie een paar dingen die me nog niet bekend waren:
1)Data-id attribuut: Nog nooit van gehoord, misschien stomme vraag maar werkt dit op alle browsers?
2) $(document).ready(function($) {
$('.markevent').click(function(e)
Ik weet dat $ voor jQuery staat maar waarom zet je deze ook bij function($)
Wat betekent die "e" bij (function(e). Ik zie deze nergens terugkomen?
Het leuke aan dat data- attribute is dat jQuery daar de verantwoordelijkheid voor neemt; dus ik veronderstel dat dat wel goed ondersteund wordt.
jQuery regelt callbacks op basis van evenementen. Daarbij geeft het altijd parameters.
.ready geeft je het jQuery object als parameter.
Het mooie daaraan is, wanneer je die parameter invult als $ krijg je sowieso het juiste object. Als je dat niet doet, is het mogelijk om de variabele $ te overschrijven. Dat kan gebeuren als je een ander framework gebruikt.
(edit: nu ik er aan denk, kan je beter jQuery.ready(function($)...) doen; wat dit argument betreft)
Verder is het zo dat alles wat je definiëert binnen .ready mooi afgesloten is in zijn scope.
De gewone callbacks, zoals bij .click leveren parameter e (nu ja, je noemt ze zoals je wil). Die bevat vanalles van informatie over het evenement. De muiscoördinaten, het aangesproken element, ... je moet maar eens kijken op developper tools of firebug.
ALtijd interessant om die bij de hand te hebben.
Gewijzigd op 25/10/2012 22:43:51 door Kris Peeters
Ik wil van alle gemarkeerde divs de id's bewaren in een PHP session array.
Ik heb het nu als onderstaande:
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
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
</php
<script>
$(document).ready(function($) {
displayCounter();
$('.markevent').click(function(e) {
var id = $(this).data('id');
$.ajax({
url: 'markevent.php',
data: {id: id},
dataType: 'json',
success: function(data) {
data = eval(data);
var id = data[0];
var div = $('div[data-id="' + id +'"]');
div.addClass('marked');
div.removeClass('unmarked');
$.post("index.php", {"markedpost": id}); // Nieuwe regel om de id waarden in een session array op te slaan
displayCounter();
},
});
});
$('.unmarkevent').click(function(e) {
var id = $(this).data('id');
var div = $('div[data-id="' + id +'"]');
div.addClass('unmarked');
div.removeClass('marked');
displayCounter();
});
function displayCounter(){
$('#count').html(
$('.marked').length
+ ' event(s) gemarkeerd'
);
}
});
</script>
?>
<script>
$(document).ready(function($) {
displayCounter();
$('.markevent').click(function(e) {
var id = $(this).data('id');
$.ajax({
url: 'markevent.php',
data: {id: id},
dataType: 'json',
success: function(data) {
data = eval(data);
var id = data[0];
var div = $('div[data-id="' + id +'"]');
div.addClass('marked');
div.removeClass('unmarked');
$.post("index.php", {"markedpost": id}); // Nieuwe regel om de id waarden in een session array op te slaan
displayCounter();
},
});
});
$('.unmarkevent').click(function(e) {
var id = $(this).data('id');
var div = $('div[data-id="' + id +'"]');
div.addClass('unmarked');
div.removeClass('marked');
displayCounter();
});
function displayCounter(){
$('#count').html(
$('.marked').length
+ ' event(s) gemarkeerd'
);
}
});
</script>
?>
en dan in index.php
Code (php)
1
2
3
2
3
<?php
$_SESSION['markedsession'] = $_POST['markedpost'];
?>
$_SESSION['markedsession'] = $_POST['markedpost'];
?>
Is dit te simpel gedacht? Bovenstaande werkt niet.
verander dit eerst eens in
data: {'id': id}
Je hebt te moelijk gedacht, volgens mij kan je dat net zo handig in markevent.php doen, bespaar je jezelf weer een extra ajax call.
PS.
waarom gebruik je een eval, je kunt JS objecten gewoon 'aanspreken' via bv data.id
Ik heb nu in markevent.php onderstaande staan:
$_SESSION['id'] = $_GET['id'];
wat wel werkt maar ik krijg bij print_r($_SESSION)in index.php maar 1 waarde terug als ik meerdere divs markeer en refresh.
Je maakt toch als bovenstaand een array aan of niet?
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<?php
$_SESSION['id'] = array();
//dit doe je dus bv in index.php
// daarna kan je in markevent.php dit doen:
$_SESSION['id'][] = $_GET['id'];
?>
$_SESSION['id'] = array();
//dit doe je dus bv in index.php
// daarna kan je in markevent.php dit doen:
$_SESSION['id'][] = $_GET['id'];
?>
Edit:
Even overnieuw:
Ik probeer even te begrijpen hoe het allemaal werkt aangezien het nog niet lukt via de manier van Ger.
Het jquery gedeeelte stuurt een GET['id'] naar de server.
In markevent.php haal ik deze op en stop deze in een session array. d.m.v.
$_SESSION['id'][] = $_GET['id'];
In index.php zet ik na de session start(): $_SESSION['id'] = array(); om te laten weten dat id een array wordt.
Op bovenstaande manier krijg ik een lege array na het selecteren van 1 of meerdere id's (en een refresh van de pagina)namelijk: array([id]=> Array())
Toevoeging op 28/10/2012 15:05:24:
ah het lukt nu toch.
Alleen $_SESSION['id'][] = $_GET['id']; in markevent.php werkt goed.
Even overnieuw:
Ik probeer even te begrijpen hoe het allemaal werkt aangezien het nog niet lukt via de manier van Ger.
Het jquery gedeeelte stuurt een GET['id'] naar de server.
In markevent.php haal ik deze op en stop deze in een session array. d.m.v.
$_SESSION['id'][] = $_GET['id'];
In index.php zet ik na de session start(): $_SESSION['id'] = array(); om te laten weten dat id een array wordt.
Op bovenstaande manier krijg ik een lege array na het selecteren van 1 of meerdere id's (en een refresh van de pagina)namelijk: array([id]=> Array())
Toevoeging op 28/10/2012 15:05:24:
ah het lukt nu toch.
Alleen $_SESSION['id'][] = $_GET['id']; in markevent.php werkt goed.
Gewijzigd op 28/10/2012 14:53:08 door N K