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
– coDe murDerer, Commented Feb 4, 2015 at 7:21
At this line $('#box').html(returnedData); just replace returnedData with data — Sunil Pachlangia
– Sunil Pachlangia, Commented Feb 4, 2015 at 7:22

rasso · Accepted Answer · 2015-02-04 08:28:46Z

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

Dachi · Accepted Answer · 2015-02-04 07:35:46Z

0

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>

answered Feb 4, 2015 at 7:35

Dachi

8471 gold badge9 silver badges17 bronze badges

Comments

Sachin Tyagi · Accepted Answer · 2015-02-04 07:36:02Z

0

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.

answered Feb 4, 2015 at 7:36

Sachin Tyagi

861 silver badge7 bronze badges

Collectives™ on Stack Overflow

how can i replace to div using ajax and php

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related