CODEWITHSUNDEEP
javascriptphpajax
Aditya Rahadian
Aditya Rahadian

Reputation: 73

how can i replace to div using ajax and php

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

Upvotes: 0

Views: 1236

Answers (3)

rasso
rasso

Reputation: 2221

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>

Upvotes: 1

Sachin Tyagi
Sachin Tyagi

Reputation: 86

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.

Upvotes: 0

Dachi
Dachi

Reputation: 847

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>

Upvotes: 0

Related Questions