Forum PHP.pl

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.

[HTML] pobierz, plaintext 
<li id="m1"><a onclick="loadDoc()">Treść 1</a></li>
<li id="m2"><a onclick="loadDoc()">Treść 2</a></li>
<li id="m3"><a onclick="loadDoc()">Treść 3</a></li>
<div id="tekstktorymasiezmieniac"> QQQ </div>
 
 
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("tekstktorymasiezmieniac").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "menu1.php", true);
  xhttp.send();
};
 
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("tekstktorymasiezmieniac").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "menu2.php", true);
  xhttp.send();
};
 
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("tekstktorymasiezmieniac").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "menu3.php", true);
  xhttp.send();
};
</script>
 
[HTML] pobierz, plaintext 

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:

[HTML] pobierz, plaintext 
$(document).ready(function(){
    $("#m1").click(
[HTML] pobierz, plaintext 

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ś?

Korzystasz z jquery czy czysty JS? Bo wygląda że masz mix.

Resztę sobie dopisz https://jsfiddle.net/ehjLveof/1/

Tak, używam jeszcze jQuery. Niestety nie działa :/ podstawiam taki kod:

[HTML] pobierz, plaintext 
var loadMenu = function (id) {
	var mappings = {
    	m1: 'menu1.php',
        m2: 'menu2.php',
        m3: 'menu3.php'
    };
    if (mappings.hasOwnProperty(id)) {
    	console.log(mappings[id]);
    }
}
 
$('#m1, #m2, #m3').on('click', function(e) {
    e.preventDefault();
    loadMenu($(this).attr('1'));
});
 
 
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("1").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "menu1.php", true);
  xhttp.send();
};
 
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("1").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "menu2.php", true);
  xhttp.send();
};
 
[HTML] pobierz, plaintext 

Ale dziękuję serdecznie za to, że poświęciłeś czas. No ja już nie wiem jak temu zaradzić

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.

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 (IMG:style_emoticons/default/smile.gif) Może ktoś jeszcze coś pomoże.

[HTML] pobierz, plaintext 
var loadMenu = function (id) {
	var mappings = {
    	"#m1": 'menu1.php',
        "#m2": 'menu2.php',
        "#m3": 'menu3.php'
    };
    if (mappings.hasOwnProperty(id)) {
    	console.log($( "#m1" ).load( "menu1.php" ),
		$( "#m2" ).load( "menu2.php" ),
		$( "#m3" ).load( "menu3.php" ););
    }
}
[HTML] pobierz, plaintext 

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

Nie działało, więc rozwiązałem problem w następujący sposób. Dziękuję Ci za poświęcony czas.

[HTML] pobierz, plaintext 
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("0").innerHTML =
  xhttp.responseText;
[HTML] pobierz, plaintext 

Ale co nie działało? Nie umiałeś konsoli w przeglądarce odpalić?