Javascript, kliknięcie na div Opcje

[Cinnanical]

Witam!

Mam sobie divy o charakterystycznym id każdy. Chciałbym, żeby po kliknięciu na tego diva, javascript coś zrobił.

Jak takie coś zrobić? Dodam że jestem prawie zielony w js

[pitu]

Np. tak:

http://jsfiddle.net/CMfP8/

[Cinnanical]

Ok, dzięki. Podłączyłem sobie do tego ajaxa.

Mam taki kod w ajaxie $("#div").css("dsadsadsadsa");;

Zamiast tego div, chciałbym żeby załadowało mi nazwe diva(id), w którym jest ten skrypt js

Np.

mam

<div id="test"
onclick blabla

$("#[I TUTAJ TE ID TEGO DIVA").css("dsadsadsadsa");;

Żebym nie musiał wpisywać tego div, tylko żeby mi pobrało div tego diva , w ktorym jest ten kod.

Ciężko mi było to wytłumaczyć (IMG:style_emoticons/default/biggrin.gif)

Ten post edytował Cinnanical 19.04.2013, 14:01:15

[PrinceOfPersia]

Podłączyłem sobie do tego ajaxa.

Mam taki kod w ajaxie $("#div").css("dsadsadsadsa");;

to nie AJAX, tylko jQuery.

[pitu]

Pisząc ajax i podając kod miałeś na myśli chyba jQuery?

Przykładowy kod:
http://jsfiddle.net/CMfP8/1/

[Cinnanical]

Tak o jquery. No to nie działa: $(this).css("margin-left",(x+0)+"px");

Albo może źle chcę to zrobić. Ale tak czy siak, muszę pobrać sobie id tego obiektu, by wysłać do php.


A tak btw. spodobało mi się JQuery, i przy tym ajax. Chyba zacznę wdrążać do skryptów.

Ten post edytował Cinnanical 19.04.2013, 15:44:15

[walkie]

Musisz sprecyzować, na który element będzie działać funkcja, dopiero potem uzywasz this. Najlepiej nadaj wszystkim divom, w które można klikać jedną klasę, np:

[HTML] pobierz, plaintext 
<div class="clickable" id="id1">...
<div class="clickable" id="id2">...
[HTML] pobierz, plaintext 

a potem

[HTML] pobierz, plaintext 
$(".clickable").click(function(){
$(this).css('costam');
var id_elementu = $(this).attr('id'); // to id kliknietego elementu
})
[HTML] pobierz, plaintext 

Ten post edytował walkie 19.04.2013, 15:48:23

[pitu]

http://jsfiddle.net/CMfP8/2/

[Cinnanical]

No szok. Nie działają oby dwa.

Mam wszystkie elementy w klasie "object"

Dam kod

[PHP] pobierz, plaintext 
<div  class="object" id="zly3" 
 
onclick='
 
$.ajax({
		type: "POST",
		url: "blabla.php",
		data:"id",
			success: function(msg){
	if(msg){
 
 
 
tutaj dawałem wasz kod
 
 
			}
		}
 
 
	});'
 
style="
tajne style"> 
  </div>
[PHP] pobierz, plaintext 

[walkie]

Jeśli juz nadaleś klasy wspólne elementom, to już nie musisz tego na onclicku robić(IMG:style_emoticons/default/smile.gif)
Napisz, co dokładnie chcesz osiągnąć. Jeśli chcesz wykonać skrypt blabla.php po kliknięciu na element(z tego wnioskuję, że do blabla.php przesyłasz id.), to spróbuj tego:

[HTML] pobierz, plaintext 
<div  class="object" id="zly3" style="tajne style"</div>
 
<script>
$(".object").click(function(){
//$(this).css('costam');
var id = $(this).attr('id'); // to id kliknietego elementu
$.ajax({
		type: "POST",
		url: "blabla.php",
		data:id
});
})
</script>
[HTML] pobierz, plaintext 

Ten post edytował walkie 19.04.2013, 16:57:09

[Cinnanical]

No ja jestem chyba jakiś ciemny, bo to mi nie działa.

[PHP] pobierz, plaintext 
onclick='
$.ajax({
		type: "POST",
		url: "aaa.php",
		data:"id",
			success: function(msg){
	if(msg){
 
 
alert("ok");
 
			}
		}
 
 
	});
 
 
	'
[PHP] pobierz, plaintext 

Takie coś działa bez problemu

[walkie]

Ok, jaki błąd? Coś z konsoli js? Może daj skrypt js w document.ready... No i wciąż nie powiedziałeś co to ma robić, bo w twoim przykładzie ajaxem jako parametr przesylasz id, ale tylko jako string,

[Cinnanical]

To tak. Te obiekty, to są obrazki na mapie.

Gdy kliknie się na ten obrazek, wtedy chcę pobrać id tego obrazka, a w php sobie z nim robić co chcę , po tym właśnie id.

[walkie]

To taki prosty przykład, który już musi działac:P
index.php:

[HTML] pobierz, plaintext 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<div class = 'clickable' id = "id1">click me 1</div>
<div class = 'clickable' id = "id2">click me 2</div>
<div class = 'clickable' id = "id3">click me 3</div>
<div id = "kontener"></div>
<script type="text/javascript">
	$(document).ready(function(){
		$(".clickable").click(function(){
			$.ajax({
				type: "POST",
				url: "blabla.php",
				data:{'id': $(this).attr('id')},
				success:(function(data){
					$("#kontener").html(data);
				})
			});
		})
	})
</script>
[HTML] pobierz, plaintext 

blabla.php

[PHP] pobierz, plaintext 
<?php
echo "id kliknietego diva:";
echo($_POST['id']);
?>
[PHP] pobierz, plaintext 

Mam nadzieję, że wyjaśnia:)

Ten post edytował walkie 19.04.2013, 17:49:52

[Cinnanical]

I tak ma być! Działa, dziękuje. Może poprzednie skrypty też działały, bo tutaj też alert się nie pojawił, ale sprawdziłem czy na mail wyśle, i działa ; )

[walkie]

W poprzednim chyba wkradł się błąd, bo data w ajaxie powinna byc w formacie {'pole1': wartosc, 'pole2': wartosc2} itd...

[Cinnanical]

A jeszcze jedno pytanko ; )

W PHP mam kodzik, i tym postem w ajaxie wysyłam właśnie do tego pliku. Jak zrobić, że jak wyślę ten kod, to załaduje mi się plik php, tzn. pokaże mi się ten kod php.

W praktyce:

Klikam sobie na dany obrazek -> wysyła mi się te id diva -> w tym pliku co odbiera id, wykonuje mi się jakiś kod i chcę wyświetlić rezultat.

Domyślam się, że tutaj muszę coś dodać:
success:(function(data){
$("#contener").html(data);

blablalalalalaal
})

W kodzie php np. mam wyświetlanie obrazka.



Ten post edytował Cinnanical 19.04.2013, 19:40:42

[walkie]

Generalnie juz nic nie musisz zmieniac. data w success to jest to, co produkuje sam plik blabla.php. Możesz to wrzucic do jakiegos diva(load, tak jak wczesniej zrobilem), możesz w alerta, cokolwiek. Jeśli chcesz zmienic cos do wyświetlenia, to zmien blabla.php, możesz wrzucic tam obrazek,robic tam skomplikowane oblicznia albo co tylko dusza zapragnie...

[PHP] pobierz, plaintext 
    <?php
    echo "id kliknietego diva:";
    echo($_POST['id']);
	echo "<br/><img style='width:100px;' src='http://fc08.deviantart.net/fs71/i/2012/102/4/3/pikach___err_homer____whatever_by_okofrancisco-d4vwrib.jpg'><br/>";
	$losowa = rand(0, 1000000000);
	echo 'losowa liczba:' . $losowa;
    ?>
[PHP] pobierz, plaintext 

[Cinnanical]

Obliczenia może mi i zrobi, ale nie wyświetla mi się to co dałem w php po kliknięciu. I jeszcze po co ten kontener?


Kod mam taki:

[PHP] pobierz, plaintext 
	$(document).ready(function(){
		$(".object").click(function(){
			$.ajax({
				type: "POST",
				url: "blablabla.php",
				data:{'id': $(this).attr('id')},
				success:(function(data){
					$("#contener").html(data);
					alert("Wyslalem id diva do php!");
				})
			});
		})
	})
 
[PHP] pobierz, plaintext 

Ten post edytował Cinnanical 20.04.2013, 19:48:02