2012-04-06 8 views
0

Ich habe eine dynamisch generierte Liste von Links. Jeder Link fordert eine andere Seite zum Laden an. Je nachdem, auf welchen Link geklickt wurde, möchte ich das div mit einem Ajax-Lade-Aufruf füllen. Die Sache ist, dass ich möchte, dass alle Links zurückgesetzt werden und dasselbe div füllen. Ich habe Probleme, dies zu tun, ohne ein separates div für jeden Link zu machen, was nicht das ist, wonach ich suche.jquery ajax call: mehrere links laden daten in ein div

Das ist was ich bisher habe, funktioniert aber nur mit einem Link.

<a data-toggle="modal" href="#myModal">Link</a> 

<div class="modal hide fade" id="myModal"></div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myModal').load('mypage.php'); 
    }); 
</script> 

Antwort

0

Wie wäre es mit so etwas? Erstellen Sie eine separate HTML-Datei namens my_links.html Erstellen Sie viele Links in diesem wie folgt.

<a href = "first_link.php">First link</a> 
<a href = "second_link.php">Second link</a> 
<a href = "third_link.php">Third link</a> 
<a href = "forth_link.php">Forth link</a> 

Jetzt tun dies mit jquery

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#myModal').load('my_links.html'); 
}); 

0

Sie können eine der folgenden bitte versuchen Sie es geben:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#myModal').empty(); // clears the div 
     $('#myModal').load('mypage.php'); // load again 
    }); 
</script> 
2

Ich bin nicht sicher, ob ich verstehe Sie in Frage, sondern Ich denke, dass Sie etwas wie dieses wollen:

HTML

<a class="link" data-toggle="modal" href="link1.php" >Link 1</a> 
<a class="link" data-toggle="modal" href="link2.php" >Link 2</a> 
<a class="link" data-toggle="modal" href="link3.php" >Link 3</a> 

<div class="modal hide fade" id="myModal"></div> 

jQuery

$("a.link").click(function(){ 
     $("#myModal").html($(this).attr("href")); /*$("#myModal").load($(this).attr("href"));*/ 
     return false; 
    });​ 

http://jsfiddle.net/3RCAg/