CODEWITHSUNDEEP
jquery
user1146939
user1146939

Reputation: 53

jquery ajax call: multiple links load data into one div

I have a dynamically generated list of links. Each link will request a different page to load. Depending on the link clicked I want it to fill the div with an ajax .load call. The thing is I want all links to reset and fill the same div. I am having trouble doing this without making a seperate div for each link, which isn't what I'm looking for.

This is what I have so far, but only works with one 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>

Upvotes: 0

Views: 1926

Answers (3)

kubedan
kubedan

Reputation: 626

I am not sure if I understand you question, but I think you want somethigs like this:

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/

Upvotes: 2

sarwar026
sarwar026

Reputation: 3821

You can give a try the following please:

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

Upvotes: 0

Muhammad Raheel
Muhammad Raheel

Reputation: 19882

How about something like this. Create a seperate html file named my_links.html Create many links in it like this.

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

Now do this with jquery

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

Upvotes: 0

Related Questions