CODEWITHSUNDEEP
jqueryajaxload
greenbandit
greenbandit

Reputation: 2275

jQuery ajax issue, stacking divs

I have a little code for dynamically loading part of my web:

$('a#ajax-call').click(function (e) {
    $("#container").load('/process.php',{id:myID},function(data){
        return;
    });
    e.preventDefault();
});

which returns this html scheme:

<div>my ajax loaded content</div>

and appends to this scheme:

<div id=container>
     <div>php loaded content 1</div>
     <div>php loaded content 2</div>
     <div id="static">php loaded content static</div>
     <div>php loaded content 3</div>
     ... until 12 divs...
</div>

the problem is, load is replacing whole content of #container and I need show this way:

<div id=container>
     <div>ajax loaded content </div>
     <div>php loaded content 1</div>
     <div id="static">php loaded content static</div> <--- remains static
     <div>php loaded content 2</div>
     ... until 12 divs...
 </div>

Any ideas?

Upvotes: 1

Views: 75

Answers (2)

MAK
MAK

Reputation: 291

$('a#ajax-call').click(function (e) {
    e.preventDefault();
    $.ajax({
    url: '/process.php',
    type: "POST",
    data: "id="+myID,
    cache: true,
    success: function(data){
    $("#container").append(data);           
    }
    });
});

and modify your anchor tag as 

<a href="javascript:;" id="ajax-call"> ... </a>

if you are not using e.preventDefault(); function in ajax call

Upvotes: 4

Ayman Safadi
Ayman Safadi

Reputation: 11552

Maybe try something like:

$.get('/process.php', {id: myID}, function(data) {

    $("#container").append(data);
    return;
});

According to jQuery's documentation about $.load():

When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched element to the returned data.

Upvotes: 0

Related Questions