jquery - jquery ajax呼び出し:複数のリンクがデータを1つのdivにロードします

Question

動的に生成されたリンクのリストがあります。リンクごとに異なるページの読み込みが要求されます。クリックしたリンクに応じて、div を ajax .load 呼び出しで埋めます。問題は、すべてのリンクをリセットして同じ div を埋めることです。リンクごとに個別のdivを作成せずにこれを行うのに問題がありますが、これは私が探しているものではありません。

これは私がこれまでに持っているものですが、1 つのリンクでしか機能しません。

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

Answer 1

このようなものはどうですか。my_links.html という名前の別の html ファイルを作成します。このように、その中に多くのリンクを作成します。

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

jqueryでこれを行う

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

Answer 2

次のことを試してみてください。

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