Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Javascript, kliknięcie na div
Forum PHP.pl > Forum > Po stronie przeglądarki
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ć biggrin.gif
PrinceOfPersia
Cytat
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.
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:

  1. <div class="clickable" id="id1">...
  2. <div class="clickable" id="id2">...

a potem
  1. $(".clickable").click(function(){
  2. $(this).css('costam');
  3. var id_elementu = $(this).attr('id'); // to id kliknietego elementu
  4. })
pitu
http://jsfiddle.net/CMfP8/2/
Cinnanical
No szok. Nie działają oby dwa.

Mam wszystkie elementy w klasie "object"

Dam kod


  1. <div class="object" id="zly3"
  2.  
  3. onclick='
  4.  
  5. $.ajax({
  6. type: "POST",
  7. url: "blabla.php",
  8. data:"id",
  9. success: function(msg){
  10. if(msg){
  11.  
  12.  
  13.  
  14. tutaj dawałem wasz kod
  15.  
  16.  
  17. }
  18. }
  19.  
  20.  
  21. });'
  22.  
  23. style="
  24. tajne style">
  25. </div>
walkie
Jeśli juz nadaleś klasy wspólne elementom, to już nie musisz tego na onclicku robić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:

  1. <div class="object" id="zly3" style="tajne style"</div>
  2.  
  3. $(".object").click(function(){
  4. //$(this).css('costam');
  5. var id = $(this).attr('id'); // to id kliknietego elementu
  6. $.ajax({
  7. type: "POST",
  8. url: "blabla.php",
  9. data:id
  10. });
  11. })
Cinnanical
No ja jestem chyba jakiś ciemny, bo to mi nie działa.

  1. onclick='
  2. $.ajax({
  3. type: "POST",
  4. url: "aaa.php",
  5. data:"id",
  6. success: function(msg){
  7. if(msg){
  8.  
  9.  
  10. alert("ok");
  11.  
  12. }
  13. }
  14.  
  15.  
  16. });
  17.  
  18.  
  19. '

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:
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
  2. <div class = 'clickable' id = "id1">click me 1</div>
  3. <div class = 'clickable' id = "id2">click me 2</div>
  4. <div class = 'clickable' id = "id3">click me 3</div>
  5. <div id = "kontener"></div>
  6. <script type="text/javascript">
  7. $(document).ready(function(){
  8. $(".clickable").click(function(){
  9. $.ajax({
  10. type: "POST",
  11. url: "blabla.php",
  12. data:{'id': $(this).attr('id')},
  13. success:(function(data){
  14. $("#kontener").html(data);
  15. })
  16. });
  17. })
  18. })

blabla.php
  1. <?php
  2. echo "id kliknietego diva:";
  3. echo($_POST['id']);
  4. ?>


Mam nadzieję, że wyjaśnia:)
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.

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...
  1. <?php
  2. echo "id kliknietego diva:";
  3. echo($_POST['id']);
  4. 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/>";
  5. $losowa = rand(0, 1000000000);
  6. echo 'losowa liczba:' . $losowa;
  7. ?>
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:

  1. $(document).ready(function(){
  2. $(".object").click(function(){
  3. $.ajax({
  4. type: "POST",
  5. url: "blablabla.php",
  6. data:{'id': $(this).attr('id')},
  7. success:(function(data){
  8. $("#contener").html(data);
  9. alert("Wyslalem id diva do php!");
  10. })
  11. });
  12. })
  13. })
  14.  


To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.