Question

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?

Answer 1

$('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