Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX]AJAX - nadanie funkcji konkretnego DIV
Forum PHP.pl > Forum > Przedszkole
iki
Dzień dobry
Przeszukałem prawie ,,cały Internet" w poszukiwaniu informacji jak nadać dla funkcji JS konkretny div. Wróć - wiem jak to robić, ale widocznie to zastosowanie nie działa w technologii AJAX. Najpierw przedstawię kod a później opiszę problem.

  1. <li id="m1"><a onclick="loadDoc()">Treść 1</a></li>
  2. <li id="m2"><a onclick="loadDoc()">Treść 2</a></li>
  3. <li id="m3"><a onclick="loadDoc()">Treść 3</a></li>
  4. <div id="tekstktorymasiezmieniac"> QQQ </div>
  5.  
  6.  
  7. function loadDoc() {
  8. var xhttp = new XMLHttpRequest();
  9. xhttp.onreadystatechange = function() {
  10. if (this.readyState == 4 && this.status == 200) {
  11. document.getElementById("tekstktorymasiezmieniac").innerHTML =
  12. this.responseText;
  13. }
  14. };
  15. xhttp.open("GET", "menu1.php", true);
  16. xhttp.send();
  17. };
  18.  
  19. function loadDoc() {
  20. var xhttp = new XMLHttpRequest();
  21. xhttp.onreadystatechange = function() {
  22. if (this.readyState == 4 && this.status == 200) {
  23. document.getElementById("tekstktorymasiezmieniac").innerHTML =
  24. this.responseText;
  25. }
  26. };
  27. xhttp.open("GET", "menu2.php", true);
  28. xhttp.send();
  29. };
  30.  
  31. function loadDoc() {
  32. var xhttp = new XMLHttpRequest();
  33. xhttp.onreadystatechange = function() {
  34. if (this.readyState == 4 && this.status == 200) {
  35. document.getElementById("tekstktorymasiezmieniac").innerHTML =
  36. this.responseText;
  37. }
  38. };
  39. xhttp.open("GET", "menu3.php", true);
  40. xhttp.send();
  41. };
  42.  



Tutaj rodzi się moje pytanie: jak dać tym funkcjom polecenie, aby działały na odnośnik o konkretnym id? Bo rzecz jasna, po kliknięciu w dowolny odnośnik wykonuje się ostatnia funkcja, czyli pokazuje się "menu3.php". Próbowałem nadać "a" id i wkleić do skryptu:
  1. $(document).ready(function(){
  2. $("#m1").click(

lecz i to nie podziałało. Czy ktoś wie jak można pomóc mi z tym kodem?
Chciałbym, aby po kliknięciu w "li" o id="m1" wyświetlała się "menu1.php" w miejscu gdzie jest div o id=tesktktorymasiezmieniac i dalej analogicznie w tym samym miejscu nowe teksty. Wie ktoś?
viking
Korzystasz z jquery czy czysty JS? Bo wygląda że masz mix.

Resztę sobie dopisz https://jsfiddle.net/ehjLveof/1/
iki
Tak, używam jeszcze jQuery. Niestety nie działa :/ podstawiam taki kod:
  1. var loadMenu = function (id) {
  2. var mappings = {
  3. m1: 'menu1.php',
  4. m2: 'menu2.php',
  5. m3: 'menu3.php'
  6. };
  7. if (mappings.hasOwnProperty(id)) {
  8. console.log(mappings[id]);
  9. }
  10. }
  11.  
  12. $('#m1, #m2, #m3').on('click', function(e) {
  13. e.preventDefault();
  14. loadMenu($(this).attr('1'));
  15. });
  16.  
  17.  
  18. function loadDoc() {
  19. var xhttp = new XMLHttpRequest();
  20. xhttp.onreadystatechange = function() {
  21. if (this.readyState == 4 && this.status == 200) {
  22. document.getElementById("1").innerHTML =
  23. this.responseText;
  24. }
  25. };
  26. xhttp.open("GET", "menu1.php", true);
  27. xhttp.send();
  28. };
  29.  
  30. function loadDoc() {
  31. var xhttp = new XMLHttpRequest();
  32. xhttp.onreadystatechange = function() {
  33. if (this.readyState == 4 && this.status == 200) {
  34. document.getElementById("1").innerHTML =
  35. this.responseText;
  36. }
  37. };
  38. xhttp.open("GET", "menu2.php", true);
  39. xhttp.send();
  40. };
  41.  


Ale dziękuję serdecznie za to, że poświęciłeś czas. No ja już nie wiem jak temu zaradzić
viking
Miałeś trochę pomyśleć i podstawić kod a nie bez sensu skopiować. W miejscu console.log masz nazwę pliku zależną od id. Wstawiasz tam http://api.jquery.com/load/ i tyle.
iki
Przykro mi, ale nie jestem leniem który liczy na gotowca. Po prostu z moimi jak dotąd niskimi umiejętnościami nie wiele potrafię zrobić ale staram się jak mogę. Praca nad rozwiązaniem tego przypadku z Tobą też jest nauką i w przyszłości sam będę mógł rozwiązać podobne problemy.
Więc pozmieniałem tyle, zabij mnie ale co dalej z tym zrobić nie wiem. A wcześniej, myślałem że mam nie ruszać tekstów które nie są w cudzysłowach. Od niedawna operuję w JS dlatego też się zwracam o pomoc... Rezultat mam taki i kod nie działa :/
Nie wiem np. jeszcze czy mam zmieniać to "id" w nawiasie czy tego nie ruszać bo jest to jakieś polecenie. Jeśli nie chcesz marnować czasu to rozumiem, czas to pieniądz smile.gif Może ktoś jeszcze coś pomoże.

  1. var loadMenu = function (id) {
  2. var mappings = {
  3. "#m1": 'menu1.php',
  4. "#m2": 'menu2.php',
  5. "#m3": 'menu3.php'
  6. };
  7. if (mappings.hasOwnProperty(id)) {
  8. console.log($( "#m1" ).load( "menu1.php" ),
  9. $( "#m2" ).load( "menu2.php" ),
  10. $( "#m3" ).load( "menu3.php" ););
  11. }
  12. }
viking
Uruchom konsolę, zobacz jaki wyświetla się efekt (na jsfiddle, bez tak podstawowych rzeczy nic nie zrobisz), a potem $( "#tekstktorymasiezmieniac" ).load( i tu pomyśl );
iki
Nie działało, więc rozwiązałem problem w następujący sposób. Dziękuję Ci za poświęcony czas.


  1. function loadDoc(url, cFunction) {
  2. var xhttp;
  3. xhttp=new XMLHttpRequest();
  4. xhttp.onreadystatechange = function() {
  5. if (this.readyState == 4 && this.status == 200) {
  6. cFunction(this);
  7. }
  8. };
  9. xhttp.open("GET", url, true);
  10. xhttp.send();
  11. }
  12. function myFunction(xhttp) {
  13. document.getElementById("0").innerHTML =
  14. xhttp.responseText;
viking
Ale co nie działało? Nie umiałeś konsoli w przeglądarce odpalić?
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.