Zmiana zawartości diva po kliknięciu.

Question

Witam. Jak podmienić zawartość diva o id="content", przez naciśnięcie innego diva o klasie submenu. Zamienić ma na podstronę w php o nazwie klikanego diva, by mieć możliwość tworzenia innych wariacji strony.

Jestem na etapie:

$(document).ready(function(){
$(".submenu").click(function() {
        $("#content").load(this.id + ".php");
    });
});

 

Czyli zastosowanie 2 medoty z "Kursu HTML odc. 3: Linkowanie podstron, przyjazne adresy, fontello". W kursie jest przedstawiona metoda 1 czyli z gotowymi podstronami a ja chce podmienić tylko zawartość tego diva. 

Answer 1

Problem rozwiązany. 

$(document).ready(function(){
$(".submenu").on("click", function() {	
		$("#content").load(this.id + ".php");
	});
});

Dla sprawdzenia wstawiam byście sprawdzili kod.

Z ciekawostek to pierwszy raz chrom wywalił mi ponad 6000 errorów i tylko 150 ostrzeżeń.

Comments

this.id powinno być przynajmniej filtrowane bo w tej chwili każdy może zmieniać id elementu i może wczytać coś co akurat nie chcesz...

Lepiej by było zrobić np. load.php który będzie spr. czy dane są właściwe oraz wczytywał (jinclud'ował) sobie co tam chcesz, a całość wywołania było by coś w ten deseń( p.s. pisane z palca nie testowane ;) ):

$(document).ready(function(){
  $(".submenu").on("click", function() {  
    $.post("load.php",
      {
          mojeID: this.id
      },
      function(data, status){
           ('.jakisTamWezel').html(data)
      });
    });
  });
});

 

 

---

Czy zastosowanie folderu jest wystarczające do filtrowania?

$(document).ready(function(){
	$(".submenu").on("click", function() {	
		$("#content").load("folder/" + this.id + ".php");
	});
});

Bo wtedy wczyta teoretycznie tylko to co jest w folderze.

Ewentualnie zrobić switch z możliwościami lub tak jak ty napisałeś weryfikować przez load.php

 

 

Answer 2

Zastosowałem filtrowanie przez ajax czyli wyszukiwanie czy ten plik istnieje w folderze akcje. Działa tylko teraz pytanie czy skrypt spełnia działanie filtrujące.

$(document).ready(function(){
	autoOpen: false;
	$(".akcje").on("click", function (){var akc = this.id; $.ajax({
    url: '/akcje/' + this.id + '.php',
    error: function()
		{
			alert( "Nieznaleziono strony/skryptu" );
		},
	success: function()
		{
			$("#content").load("akcje/" + akc + ".php");
		}
	})
	});
});