how can i replace to div using ajax and php

Question

i want to replace result from readmore.php into <div id='box'> base on id_pages at index.php after click
<a class=readmore> Read More </a>.
i tired to try how to get value from readmore.php using ajax.

this's my code

index.php

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='style.css'>
        <title> Home Page </title>

<script src="//code.jquery.com/jquery-1.10.2.js"></script>



<script>
$('.readmore').click(function(){    
    $.ajax({
        type: "POST",
        url: "readmore.php",
        data: dataString,
        success: function(returnedData) {
        $( '#daleman' ).html(returnedData);
        }
    });
})

</script>

    </head>

    <body>

<?php 
error_reporting(E_ERROR | E_PARSE);

include "koneks.php";

$db = new database;

$db->connectMYSQL();

//* Memulai Tampilan Menu
echo"
<div id='menu'>
    <a href='manage.php'>Manage Blog</a>
</div>
";

//*  Memulai Tampilan Page
$arraypage = $db->tampilPage();

foreach($arraypage as $data) {
echo"
<input type=hidden id=idnya name='idnya' value=".$data['id_pages'].">
<div id='boxpage'>
    <div id='alasatas'>
    </div>

    <div id='alasjudul'>
    ".$data['judul']." 
    </div>

    <div>
        <div id='alasfoto'>
        <img height='200px' src='pict/".$data['foto']."'>
        </div>

        <div id='alasisi'>
            <div id='daleman'>
            <br>

            ".$data['deskripsi']."

            </div>

        </div>
    </div>

    <div id='alasketerangan'>
    <center>Tanggal dibuat : ".$data['tgl_dibuat']." &nbsp; &nbsp; &nbsp; Label : ".$data['label']." &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class='readmore' >Read More</a> </center>
    </div>
</div>

</body>
</html>
";
}

?>

this my readmore.php

<?php

    include "koneks.php";

    $dbi = new database;

    $dbi->connectMYSQL();

    echo"
    $_POST[idnya]
    ";

?>

i need help meybe to fix my code, my thanks

you are using same id "box" in for loop this will not work.. — coDe murDerer, Feb 04 '15 at 07:21
At this line $('#box').html(returnedData); just replace returnedData with data — Sunil Pachlangia, Feb 04 '15 at 07:22
possible duplicate of [How to replace html element with ajax response?](http://stackoverflow.com/questions/19527586/how-to-replace-html-element-with-ajax-response) — Veerendra, Feb 04 '15 at 07:25
@Veerendra almost but on this case i need the respon from the database. — Aditya Rahadian, Feb 04 '15 at 07:27
@OzgurBar and what should i add at dataString im new in ajax.. dont really know about it my apologize — Aditya Rahadian, Feb 04 '15 at 07:28
@AdityaRahadian So you can get the response from database in the php file and then can return that response to the js file and can replace the div with the received response — Veerendra, Feb 04 '15 at 07:29
Can you please post the complete page in which you are running foreach and echo — Veerendra, Feb 04 '15 at 07:30
You are advised to use a developer tool to check a) whether the ajax request goes out b) what is the return value c) are there any JS errors and finally d) give some console_log() information in the AJAX callback. — agoldev, Feb 04 '15 at 08:04

rasso · Accepted Answer · 2015-02-04T08:28:46.290

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>

you're welcome. I've also updated the answer for multiple fields to post — rasso, Feb 04 '15 at 08:29

score 0 · Answer 2 · answered Feb 04 '15 at 07:35

its possible that click function is not executing beacause you dont prevent default anchor action

<script>
$('.readmore').click(function(event){  
    event.preventDefault();
    $.ajax({
        type: "POST",
        url: "readmore.php",
        data: dataString,
        success: function(returnedData) {
        $('#box').html(returnedData);
        }
    });
})
 </script>

score 0 · Answer 3 · answered Feb 04 '15 at 07:36

I have modified your code a little try doing this:

<script>
$('.readmore').click(function(){    
    var idnya = $('#idnya').val();
    $.ajax({
        type: "POST",
        url: "readmore.php?idnya="+idnya,
        data: dataString,
        success: function(returnedData) {
        $('#box').html(returnedData);
        }
    });
})
 </script>

and in your readmore.php file use $_GET['idnya'] to get this value and use it in your query.

how can i replace to div using ajax and php

3 Answers3