[AJAX][PHP]img z możliwością wywołania zapisu do mysql. Opcje

[casperii]

Panowie chce stworzyć by po kliknięciu w img zapisywało mi do bazy aktualny status - czyli wł / wył.
Produkty wyświetlam sobie pętlą while z bazy mysql. Obok tych produktów (przy każdym produkcie z osobna) chcę ustawić img_on / img_off
Reasumując jeśli w bazie mam status=on przy produkcie pojawi mi się obrazek img_on - po jego kliknięciu podmienia mi się na obrazek img_off a w bazie pojawia mi się status =off.

Wiem, że trzeba użyć ajax by nie przeładowało mi strony. Dodatkowo musiałbym przekazywać do ajaxa dany ID produktu by odpowiedni status produktu aktualizować. Czy dodatkowo w tym przypadku każdy img_on/img_off musiał by mieć inny ID ?

Myślałem nad czymś takim :

[HTML] pobierz, plaintext 
<!-- tu pobierałbym sobie czy img jest on czy off --> 
<img src="img_on.jpg"/>
<script>
$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img_on.jpg')
            ? 'img_off.jpg'
            : 'img_on.jpg';
         $(this).attr('src', src);
    }
});
</script>
[HTML] pobierz, plaintext 

[com]

ale ze to nie działa tak?

[casperii]

@com Działa, ale musiałem włożyć to w:

[HTML] pobierz, plaintext 
$(window).load(function(){
});
[HTML] pobierz, plaintext 

Ale chyba img musiałbym przy każdym produkcie zastąpić unikalnym ID i jeśli mam w bazie 100 produktów to x tyle samo funkcji ? - absurd ?

Po trzecie - muszę przypisać zdarzenie ajax i w nim przekazać postem ID danego produktu który będzie updatować w bazie on /off

Ten post edytował casperii 14.02.2016, 17:12:21

[com]

Ale chyba img musiałbym przy każdym produkcie zastąpić unikalnym ID i jeśli mam w bazie 100 produktów to x tyle samo funkcji ? - absurd ?

poco?

Po trzecie - muszę przypisać zdarzenie ajax i w nim przekazać postem ID danego produktu który będzie updatować w bazie on /off

no owszem, wiec?

[casperii]

@com mógłbyś wskazać drogę ?(IMG:style_emoticons/default/biggrin.gif) jak przypisać ID do ajax ?(IMG:style_emoticons/default/smile.gif)

[com]

no zrób sobie funkcje i tam przekazuj id jako parametr a potem ja wywołuj, w czym problem?

[casperii]

@com zrobiłem coś takiego:

[HTML] pobierz, plaintext 
<script type='text/javascript'>
$(window).load(function(){
	$("#ikonka").click(function(){
		var data_id = $(this).attr('data-uid');
		var status = $(this).attr('data-status');
		$.ajax({
			type: 'POST',
			url: "/ajax.php",
			data: { edit:1, id:data_id, status:status },
			success: function(data) {
 
				var url4 = window.location.href;
				setTimeout(function() {
					window.location.reload(url4);
					location.reload(true);
				}, 100); 
 
				var src = ($(this).attr('src') === '/images/icon_off.png')
					? '/images/icon_on.png'
					: '/images/icon_off.png';
				 $(this).attr('src', src);
 
			}
 
 
 
 
         });
	});
});
</script>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
while($rowp = mysql_fetch_array($result)){
print('
<img class="img" id="ikonka" data-uid="'.$rowp['id'].'" data-status="'.$rowp['onoff'].'" src="/images/icon_');if($rowp['onoff']=='0'){print('off');}else{print('on');}print('.png" style="cursor:pointer;">');
}
[PHP] pobierz, plaintext 

Niestety to co powyżej wskazałem działa tylko dla pierwszego rekordu. Wiem, że problem tkwi w tym, że wszystkie rekordy w pętli while mają te same ID - i to chyba jest problem?

Po drugie:

[HTML] pobierz, plaintext 
var src = ($(this).attr('src') === '/images/icon_off.png')
					? '/images/icon_on.png'
					: '/images/icon_off.png';
				 $(this).attr('src', src);
[HTML] pobierz, plaintext 

Chyba włożone w złym miejscu bo jakoś nie spełnia swojego zadania dlatego zrobiłem tak:

[HTML] pobierz, plaintext 
var url4 = window.location.href;
				setTimeout(function() {
					window.location.reload(url4);
					location.reload(true);
				}, 100); 
[HTML] pobierz, plaintext 

Ale to powoduje wymuszenie odświeżenia - a zamierzonym moim celem jest updatowanie bez przeładowania przeglądarki.

Może ktoś naprowadzić ?

pomoże ktoś?