[Opgelost]/[jquery/ajax]Snelle instelling menu

Door Martijn L op 02-07-2013 23:25 gewijzigd op 03-07-2013 11:00

2.210 views

Ik ben bezig een balk aan de onderkant te maken met opties.
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.

$(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)"});
	});
});


<div id="settings" style="display: block;">
   <ul>
      <li>
         &nbsp;&nbsp;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

Wouter J

02-07-2013 23:53

En wat is je vraag? In het geval van "hoe kan ik het limiteren tot 1x?" is het antwoord gebruik jQuery.one

Martijn L

03-07-2013 00:00

Nee het kan nu maar 1 keer.

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.

Ger van Steenderen

03-07-2013 08:34

Dat komt omdat je de functie aanzetten aan het element hangt. Ik geef in dit soort situaties het element altijd een dubbele class en een data attribuut waarin ik de status bij hou (<input class="checkable put_off" data-aan_uit="0" />)


$(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)
			   }
		});
	});
});

Erwin H

03-07-2013 08:55

Of niet met de click() functie werken, maar met de on() functie:


$('body').on('click', '.put_on', function(){

});
$('body').on('click', '.put_off', function(){

});

Martijn L

03-07-2013 10:59

Ger van Steenderen je oplossing werkt. Bedankt. Erwin H bedankt voor de hulp. Heb jou oplossing niet werkend gekregen.

Erwin H

03-07-2013 11:19

Daar zou ik dan alsnog wel naar kijken als ik jou was. Het grote voordeel van on() boven click() (en andere event handlers) is dat on() altijd werkt, ook op dynamisch gegenereerde elementen, terwijl click alleen werkt op de elementen die bij het laden van de pagina aanwezig zijn. Of eigenlijk beter gezegd, die aanwezig zijn op het moment dat je de event handler functie bindt. Daarnaast is on() ook nog eens sneller dan click().

Ger van Steenderen

03-07-2013 11:45

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).

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()

Martijn L

03-07-2013 13:13

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).
[quote="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()

[/quote]

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.

Erwin H

03-07-2013 14:51

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.

Ger van Steenderen

03-07-2013 14:52

Ik denk dat eenvoudiger niet de juiste uitdrukking is.
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.

Reageren

Inloggen om te reageren