Jquery Ajax passes the value but does not display in div

advertisements

I am trying to fix this issues from last two days but :(

Now I have a index.php page where I am displaying all the data of adds from database. this is my index page

<html>
 <head>
  <script>
   $(document).ready(function(){
     var overlayclass = $("<div id='overlayclass'></div>");
     //pagination starts
     $("#pagination li:first")
     .css({'color' : '#FF0084'}).css({'border' : 'solid #dddddd 10px'});
     $("#page").load("Controller/pagination_data_all_adds.php?page=1");
    //Pagination Click
    $("#pagination li").click(function(){
 //CSS Styles
    $("#pagination li")
    .css({'color' : '#FF0084'})
    .css({'border' : 'none'});
    $(this)
    .css({'border' : 'solid #dddddd 10px'})
    .css({'color' : '#0063DC'});
//Loading Data
   var pageNum = this.id;
     $("#page").load("Controller/pagination_data_all_adds.php?page=" + pageNum);
     });
//pagination ends
//for closing the div
   $(".close").click(function () {
    $(".divpopup").hide();
    overlayclass.appendTo(document.body).remove();
    return false;
   });
//for close image
   $(".x").click(function () {
   $(".divpopup").hide();
   overlayclass.appendTo(document.body).remove();
   return false;
 });
//onclick on button display div and overlay with button value and post the value to the index   page where I can use it to select the specific adds data from database
$(':submit').live('click',function () {
var id = $(this).val();
overlayclass.show();
overlayclass.appendTo(document.body);
$(".divpopup").show('slow');
$.ajax({
url: 'index.php',
data:'button=' + $(this).val(),
dataType: 'json',
succss: function(data)
{
$('.divpopup').html('');
alert(data);
$('.divpopup').append('button:'+data);
}
});
return false;
});
});

</script>
</head>

<body>
<div class="divpopup">
<div class="divcontent">
<img src="http://www.catalyst-gc.com/images/icon_close_window.jpg" alt="icon_close_window"
class="x" id="imgclose" />

<div class="detail_data">

<?php

print "<h1>".$button."</h1>";

?>

</div>

<a href="" class="close">Close</a>

</div>

</div>

<div id="page"></div>

<ul id="pagination">

<?php

//Pagination Numbers

for($i=1; $i<=$pages; $i++)

{

echo '<li id="'.$i.'"-->'.$i.'';
}

?>

</ul>

<!--Pagging display ends -->

</body>

</html>

This is my pagination_data_all_adds page which will be load through jQquery load function in index page. inside page div. and the button which is inside table will be click to display the popupdiv with id of adds and than I will use it to display the rest of the data.

<?php include_once('dbconn.php');
$per_page = 6;
if($_GET)
{
$page=$_GET['page'];
}  

$start = ($page-1)*$per_page;
$sql = "select * from adds order by add_id limit $start,$per_page";
$result = mysql_query($sql);
echo "<table cellspacing='0'>";
echo "<thead>";
echo "<th></th>";
echo "<th>Advertise</th>";
echo "<th>Title</th>";
//echo "<th>Description</th>";
echo "<th>Price</th>";
echo "</thead>";
while ($adds = mysql_fetch_array($result)) {
echo "<tbody>";
echo "<tr class='even'>";
$image_link = $adds["image"];
echo "<td><img class='image' src=adds_images/".$image_link."></td>";
echo "<td><b>".$adds["add_type"] . "</b></td>";
echo "<td><b>".$adds["add_title"] ."</b></td>";
echo "<td><b>".$adds["add_price"] ."</b></td>";
echo "<td>";
echo "<form method='post' action=''>"
echo "<button class='button' value='".$adds['add_id']."' type='submit'>Detail!</button>";
echo "</form>";
echo"</td>";
echo "</tr>";
echo "</tbody>";
}
 echo "</table>";?>

Now the problem is when I click on the button which is page div it display nothing but when I look at Firebug response it shows there. It does not display when I click the button.


Your dataType in ajax call is json.

$.ajax({
url: 'index.php',
data:'button=' + $(this).val(),
dataType: 'json', <--------------------------------- JSON

But you are returning html.

echo "<table cellspacing='0'>";
echo "<thead>";
echo "<th></th>";
echo "<th>Advertise</th>";
..........................
..........................

Hence your call is actually failing (Which you could have spotted had you used fail).

So answer is return json or change data type.


N.B.

LOTS AND LOTS OF deprecated function. use .on instead of live. use .done instead of success. use mysqli/pdo instead of mysql.

    if($_GET)
{
$page=$_GET['page'];
}

You need to use isset or empty that too on approriate index. $_GET is always set. So checking its existance is futile. You need to check the index. i.e.

if(isset($_GET['page']))