Bestimmtes DIV ohne Reload der Seite erneut laden (Bei Linkklick)

[jakestyler]

Hei :)
Ich habe schon ein bisschen gegooglet und auch einiges zu dem Thema gefunden, nur leider kenne ich mich da garnicht aus, deshalb der neue Beitrag!

Ich habe einen div-Container auf meier Seite, der ein PHP-Script beinhaltet.

<div id="spruch">phpcode</div>

Nun brauche ich ein Script, dass den ganzen div-Container neulädt, wenn ich auf "Neuen Spruch laden" klicke.
Dabei soll sich aber nicht die ganze Seite reloaden.
Brauche das für eine Mobile-Version meiner Seite.

Würde mich über Codeschnipsel freuen! :)

Danke schonmal :)

 

[Timmer]

Stichwort AJAX

http://api.jquery.com/jQuery.ajax/

Hier findest du folgenden Schnipsel:

$.ajax({
   url: 'ajax/test.html',
   success: function(data) {
     $('.result').html(data);
     alert('Load was performed.');
   }
 });

Hau das alert raus, pass die URL & den Zielcontainer an (hier ein Element mit der Klasse result) und verknüpfe das ganze mit einem Click-Event ;)

.on() – jQuery API

 

[jakestyler]

Hei, ersteinmal vielen dank. :)
Allerdings bin ich wohl wirklich zu dumm, wie definiere ich den Container und was muss ich bei der test.html reinhauen?

 

[T4k3C4r3]

Den Inhalt der neugeladen werden soll

 

[jakestyler]

Also muss ich den Inhalt auslagern? :)

 

[jakestyler]

So, hab jetzt den Inahlt ausgelagert und hab folgenden Code in den DIV gepackt:

<script type="text/javascript">$.ajax({   url: 'http://deinemudda.org/m/ausgabe.php',   success: function(data) {     $('.result').html(data);     alert('Load was performed.');   } });</script>

Geht aber nicht... Bin ich zu dumm oder stimmt was nicht (das mit dem onklick habe ich auchnocnicht hinbekommen.)

 

[Spoiler]

<div id="spruch">phpcode</div>
[COLOR=#800000]<script type=[COLOR=#0000FF]"text/javascript"[/COLOR]>
[/COLOR]$.ajax({   
    url: 'http://deinemudda.org/m/ausgabe.php',   
    success: function(data) {     
        $('#spruch').html(data);
         } 
});
[COLOR=#800000]</script>

[/COLOR]

 

[Timmer]

Mit dem Click-Event sähe das ganze dann so aus

<script type="text/javascript">
  $(document).ready(function(){
    $('#neuer_spruch').on('click', function(){
      $.ajax({
        url: 'http://deinemudda.org/m/ausgabe.php',
        success: function(data) {
          $('#spruch').html(data);
        }
      });
    });
  });
</script>
<div id="spruch">phpcode</div>
<span id="neuer_spruch">Neuer Spruch</span>

Die http://deinemudda.org/m/ausgabe.php gibt anschließend bloß den Inhalt zurück, der in den div#spruch soll. Dies kann alles von Text bis HTML sein ;)

 

[newlord]

Korrigiert mich wenn ich falsch liege, aber läuft die ganze AJAX Geschichte nicht nachwievor in ner Sandbox, die verhindert, dass Inhalte von anderen Domains angefragt werden können?

 

[derMartin71]

Also mit JSONP geht's auch von unterschiedlichen Domains.

Viele Grüße
/martin

Korrigiert mich wenn ich falsch liege, aber läuft die ganze AJAX Geschichte nicht nachwievor in ner Sandbox, die verhindert, dass Inhalte von anderen Domains angefragt werden können?