[Opgelost]/[jquery/ajax]Snelle instelling menu
Hier kan een gebruiker dan de balk zelf samenstellen d.m.v. het menu.
Het probleem waar ik nu mee zit is, dat dit enkel eenmalig uitgevoerd kan worden.
Dus bijvoorbeeld je hebt een optie aan staan, dan kan deze alleen maar uit en andersom.
Het menu is nog niet werkend dus de opties die aan- en uitstaan kloppen niet met de balk eronder.
javascript.php heeft nog geen functie, dus toevoegen heeft weinig zin. Het zet bij iedere optie een ander woordje in de balk om te testen.
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
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
$(document).ready(function() {
// Hang een event listener voor het klik event aan de class .ajaxableVar
$('.put_on').click(function(){
//this.setAttribute("class", "put_off");
$.ajax({
// In dit geval wil ik een post maar het kan ook met bijv. GET variabelen
type: "POST",
// De data die we willen posten als variabel ajaxableVar is de inhoud van
// this (in dit geval dus de inhoud van het element waarop we geklikt hebben)
data: ({optie : $(this).val()}),
// Het url waarnaar de AJAX request gaat
url: 'js/javascript.php',
success: function(data) {
// We plaatsen het resultaat van de call als content van de div
// #ajaxResult
$('#Check').html(data);
}
});
$(this).css({"background-image":"url(images/icon_unchecked.png)"});
});
$('.put_off').click(function(){
//this.setAttribute("class", "put_on");
$.ajax({
// In dit geval wil ik een post maar het kan ook met bijv. GET variabelen
type: "POST",
// De data die we willen posten als variabel ajaxableVar is de inhoud van
// this (in dit geval dus de inhoud van het element waarop we geklikt hebben)
data: ({optie : $(this).val()}),
// Het url waarnaar de AJAX request gaat
url: 'js/javascript.php',
success: function(data) {
// We plaatsen het resultaat van de call als content van de div
// #ajaxResult
$('#Check').html(data);
}
});
$(this).css({"background-image":"url(images/icon_checked.png)"});
});
});
// Hang een event listener voor het klik event aan de class .ajaxableVar
$('.put_on').click(function(){
//this.setAttribute("class", "put_off");
$.ajax({
// In dit geval wil ik een post maar het kan ook met bijv. GET variabelen
type: "POST",
// De data die we willen posten als variabel ajaxableVar is de inhoud van
// this (in dit geval dus de inhoud van het element waarop we geklikt hebben)
data: ({optie : $(this).val()}),
// Het url waarnaar de AJAX request gaat
url: 'js/javascript.php',
success: function(data) {
// We plaatsen het resultaat van de call als content van de div
// #ajaxResult
$('#Check').html(data);
}
});
$(this).css({"background-image":"url(images/icon_unchecked.png)"});
});
$('.put_off').click(function(){
//this.setAttribute("class", "put_on");
$.ajax({
// In dit geval wil ik een post maar het kan ook met bijv. GET variabelen
type: "POST",
// De data die we willen posten als variabel ajaxableVar is de inhoud van
// this (in dit geval dus de inhoud van het element waarop we geklikt hebben)
data: ({optie : $(this).val()}),
// Het url waarnaar de AJAX request gaat
url: 'js/javascript.php',
success: function(data) {
// We plaatsen het resultaat van de call als content van de div
// #ajaxResult
$('#Check').html(data);
}
});
$(this).css({"background-image":"url(images/icon_checked.png)"});
});
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="settings" style="display: block;">
<ul>
<li>
Instellingen
</li>
<li>
<input id="1" class="put_on" style="background: url(images/icon_checked.png) right no-repeat;" type="button" name="Users" value="Users" />
</li>
<li>
<input id="2" class="put_off" style="background: url(images/icon_unchecked.png) right no-repeat;" type="button" name="Website link" value="Website link" />
</li>
<li>
<input id="3" class="put_on" style="background: url(images/icon_checked.png) right no-repeat;" type="button" name="Status" value="Status" />
</li>
</ul>
</div>
<ul>
<li>
Instellingen
</li>
<li>
<input id="1" class="put_on" style="background: url(images/icon_checked.png) right no-repeat;" type="button" name="Users" value="Users" />
</li>
<li>
<input id="2" class="put_off" style="background: url(images/icon_unchecked.png) right no-repeat;" type="button" name="Website link" value="Website link" />
</li>
<li>
<input id="3" class="put_on" style="background: url(images/icon_checked.png) right no-repeat;" type="button" name="Status" value="Status" />
</li>
</ul>
</div>
EDIT:
Code tags toegevoegd
Gewijzigd op 03/07/2013 11:00:00 door Martijn L
Dus als hij bijvoorbeeld de optie "Users" uitstaat en ik klik erop dan gaat die aan. Dan komt er dus een vinkje. Klik ik nog een keer op de optie "Users" dan gaat het vinkje niet weg. Dus je kan hem maar eenmalig aanpassen per keer dat je de pagina herlaad, terwijl ik dit graag onbeperkt wil hebben.
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
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
$(document).ready(function() {
$('.checkable').click(function(){
var el = $(this);
if(parseInt(el.data('aan_uit')) == 0) {
el.removeClass('put_off');
el.addClass('put_on');
el.data('aan_uit', 1);
}
else {
el.removeClass('put_on');
el.addClass('put_off');
el.data('aan_uit', 0);
}
$.ajax({
type: 'POST',
url: 'js/javascript.php',
data: {
optie: el.attr('name'),
waarde: el.data('aan_uit')
},
success: function(data) {
$('#check').html(data)
}
});
});
});
$('.checkable').click(function(){
var el = $(this);
if(parseInt(el.data('aan_uit')) == 0) {
el.removeClass('put_off');
el.addClass('put_on');
el.data('aan_uit', 1);
}
else {
el.removeClass('put_on');
el.addClass('put_off');
el.data('aan_uit', 0);
}
$.ajax({
type: 'POST',
url: 'js/javascript.php',
data: {
optie: el.attr('name'),
waarde: el.data('aan_uit')
},
success: function(data) {
$('#check').html(data)
}
});
});
});
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$('body').on('click', '.put_on', function(){
});
$('body').on('click', '.put_off', function(){
});
});
$('body').on('click', '.put_off', function(){
});
Het is inderdaad beter om .on te gebruiken, maar het effect zal in dit geval hetzelfde blijven, bij het inladen van het document krijgen de elementen met de class put_off de functie om de checkbox 'aan te zetten' (en omgekeerd).
JQuery documentatie:
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()
Ger van Steenderen op 03/07/2013 11:45:41:
Volgens de jquery handleiding is .click een verkorte versie van .on('click') of .trigger('click').
Het is inderdaad beter om .on te gebruiken, maar het effect zal in dit geval hetzelfde blijven, bij het inladen van het document krijgen de elementen met de class put_off de functie om de checkbox 'aan te zetten' (en omgekeerd).
Het is inderdaad beter om .on te gebruiken, maar het effect zal in dit geval hetzelfde blijven, bij het inladen van het document krijgen de elementen met de class put_off de functie om de checkbox 'aan te zetten' (en omgekeerd).
JQuery documentatie:
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on()
Ik heb het nu werkend met onclick. Ik gebruikte een te verouderde versie van jquery, namelijk jquery 1.3.1. Maar wat ik mij dan afvraag is als click() een eenvoudige manier is van on('click') waarom is deze dan pas ingevoerd bij jquery 1.7+?
De reden waarom ik een verouderde versie gebruikte was, omdat ik mijn slider eerst had draaien op een buggie jquery script blijkt nu. Ik gebruikte jquery 1.6 volgens mij gehost bij google. Die veroorzaakte een raar resultaat van mijn functie in de slider.
In jquery bestond on() niet voor versie 1.7. click() was toen dus ook nog geen shorthand voor on('click'). Bij de introductie van on() is dat veranderd.
Met .click kan je zowel een eventhandler toekennen als de event triggeren.
Dan moet jQuery dus 'uit gaan zoeken' wat jouw bedoeling is, terwijl dat met .on of .trigger al duidelijk is.
En in die zin is het dus sneller.
Wat nu precies de reden is dat .click is ingevoerd weet ik niet, daarvoor werk ik nog niet lang genoeg met jQuery.
Erwin H op 03/07/2013 14:51:18:
Dat verklaart inderdaad waarom het eerder niet werkte, had ik natuurlijk er wel bij kunnen zetten.
In jquery bestond on() niet voor versie 1.7. click() was toen dus ook nog geen shorthand voor on('click'). Bij de introductie van on() is dat veranderd.
In jquery bestond on() niet voor versie 1.7. click() was toen dus ook nog geen shorthand voor on('click'). Bij de introductie van on() is dat veranderd.
Is het verstandig om altijd de nieuwste versie te gebruiken? Er is zover ik kan vinden een lijst met bijvoorbeeld nightly/unstable of stable versies. of zijn ze ten alle tijden stabiel in gebruik als ze uit worden gebracht.(Dan doen ze het beter dan google)
Ger van Steenderen op 03/07/2013 14:52:53:
Wat nu precies de reden is dat .click is ingevoerd weet ik niet, daarvoor werk ik nog niet lang genoeg met jQuery.
click was er eerst. De goede vraag is dus waarom die nog bestaat. Ik neem aan vanwege backwards compatibility.
Martijn L op 03/07/2013 15:04:27:
Is het verstandig om altijd de nieuwste versie te gebruiken? Er is zover ik kan vinden een lijst met bijvoorbeeld nightly/unstable of stable versies. of zijn ze ten alle tijden stabiel in gebruik als ze uit worden gebracht.
In principe wel, maar nu 2.0 uit is moet je dan wel een keuze maken vanwege het feit dat men support voor een aantal (oude) browsers daarin heeft laten vallen. Wil je die dus nog ondersteunen dan moet je op 1.9 blijven.