Change Div Content Using Ajax, PHP and Jquery

Change DIV content using ajax, php and jQuery

<script>

function getSummary(id)
{
   $.ajax({

     type: "GET",
     url: 'Your URL',
     data: "id=" + id, // appears as $_GET['id'] @ your backend side
     success: function(data) {
           // data is ur summary
          $('#summary').html(data);
     }

   });

}
</script>

And add onclick event in your lists

<a onclick="getSummary('1')">View Text</a>
<div id="#summary">This text will be replaced when the onclick event (link is clicked) is triggered.</div>

How can I change div contents using jquery and PHP

Its simple,

you can add after the following content in "showSaved" to the "removeSaved" div and make "removeSaved div hide.

eg as follows :-

$.ajax({
    method: "POST",
    url: "deleteLink.php",
    dataType: "json",
    data:  { 'deletedID' : deletedID },

    success: function(deleteIDFunc){
        var deleteIDFunc = $.trim(deleteIDFunc);
        if(deleteIDFunc){               
            $('#removeSaved').html(deleteIDFunc); //<-how can I change the div so that it will display the other icon
            $('#removeSaved').hide();
            $("#removeSaved").after('<span id="showSaved"><a href="javascript:void();" class="pull-right" onclick="saveLink('+deletedID +');">Save <i class="fa fa-heart"></i></a></span>');

        }
        else {
            alert('Your saved post was not removed. Please try again');
        }
    }
});

Please note the ID to pass, if you want pass the id to the ajax function deleteLink()

how can i replace to div using ajax and php

There are certain things missing in the code you've posted. Lets just simplify the code a little bit with some modifications.

index.php

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <!-- Added jQuery Reference -->
</head>
<body> <!-- Added body tag -->
<?php
echo "<input type='hidden' id='idnya' value='value_posted_for_idnya'><div id='box'> Replace Me </div> <a class='readmore' href='javascript:void(0)'>ReadMore</a>";
?>
<script>
$(document).ready(function(){ // Wrapped the script in $(document).ready function
$('.readmore').click(function(){    
    $.ajax({
        type: "POST",
        url: "readmore.php",
        data: "idnya=" + $("#idnya").val(), //say you have only one field to post for now
        success: function(returnedData) {
        $('#box').html(returnedData);
        }
    });
})});
</script>

</body>
</html>

readmore.php

Can stay the same.

Try the code above and see what you get.

EDIT

If you have multiple fields to post with ajax function you can use serializeArray() method.

Simply wrap your fields with in a form tag as follows

<form id="frm">
...form controls
</form>

This time you have to specify name attributes in order for serializeArray() to work.

Then your new ajax function becomes

$(document).ready(function(){ 
$('.readmore').click(function(){    
    $.ajax({
        type: "POST",
        url: "readmore.php",
        data: $("#frm").serializeArray(), //get all name-value pairs within form
        success: function(returnedData) {
        $('#box').html(returnedData);
        }
    });
})});
</script>

Change Div Content Using Ajax, PHP and Jquery