CODEWITHSUNDEEP
phpjqueryajax
Jason
Jason

Reputation: 109

returning php echoes in jQuery

<li>
  <a id="collection" href="collections.php">
     <span class="glyphicon glyphicon-th white"> Collections</span>
  </a>
</li>

  <script>
     $(document).ready(function(){
        $("#collection").click(function(){
            $.ajax({
                type: 'POST',
                url: 'pagination.php',
                success: function(data) {
                  $('#cont').show();
                }
            });
        });
     });
    </script>

pagination.php :

<?php
require_once "database.php";
$db = new Database();

$perPage = 9;
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$startAt = $perPage * ($page - 1);

$queryTotalRow = "SELECT COUNT(*)  FROM image";
$rsetTotalRow = $db->query($queryTotalRow);
$fetchTotalRow = mysqli_fetch_array($rsetTotalRow);

$totalPages = ceil($fetchTotalRow["0"] / $perPage);

$links = "";
    for ($i = 1; $i <= $totalPages; $i++) {
     $links .= ($i != $page ) ? "<li><a href='collections.php?page=$i'>Page $i</span></a></li> " 
                              : "<li><a href='collections.php?page=$i'>Page $page</a></li> ";
    }

$paginationQuery = "select name,image,price,description from image LIMIT $startAt, $perPage";
$result = $db->query($paginationQuery);
        if($result){
                echo '<div class="containerCollection" id="cont" style="display:none" >';
            while($row = mysqli_fetch_array ($result)){ 
                echo '<div style="float:left" class="divEntry">';
                echo "<div align='center' class='nameEntry'>".$row['name']."</div>";
                echo '<div align="center"><img src="'.$row['image'].'" class="imageEntry"/></div>'; 
                echo "<div align='center' class='priceEntry'>".$row['price']."</div>";
                echo "<div class='descEntry'>".$row['description']."</div>";
                echo '</div>';
            }
                echo "<div class='text-center' style='clear:both'>";
                echo "<ul class='pagination'>";
                echo $links;
                echo '</ul>';
                echo '</div>';
                echo '</div>';
        }


?>

why is this not working ? i trigger an ajax call from collection button click , then i want to return some echoes wrapped in div which i set to hide, then i want to show it.

edit : fully updated my pagination.php seems like at fault .

edit2 : solver using this solution jQuery showing div and then Disappearing

Upvotes: 0

Views: 92

Answers (2)

Erick Boshoff
Erick Boshoff

Reputation: 1583

Check your payload and responses in the browser when running the code make sure it returns data. You can then specify an explicit html type to be returned in your ajax, finally append the html like follow:

Apply html:

<!--html-->
<html>  
<head>
        <script language="javascript" type="text/javascript" src="jquery-1.11.3.js"></script>
        <script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
    <h1>Test header</h1>
    <h2 id="idTxt"></h2>
</body>
</html>

Apply javascript:

//javascript
$(document).ready(function() {
    var data = 'name=getData'; //data parameter passed through to execute specific functions 
    $.ajax({
        type: "POST",
        url: "function.php",
        data: data,
        dataType: 'json',
        success: function(data) {
          $("#idTxt").append(data["html"]);
          console.log(data["html"]);
        },
        error: function(data) {
            //console.log(data);
        }
    });
});

Apply php:

//php 
<?php 
    if (isset($_POST["name"]))
    {
        $string = "<h4> Hi there </h4>"; //build up html as string
        $obj = new stdClass();

        $obj->html = $string;   

        echo json_encode($obj);     

    }
?>

Also try to replace your POST with a get maybe, remember you are trying to get html response data from the server. Good luck hope it helps. :)

Upvotes: 1

ahervin
ahervin

Reputation: 461

Your response isn't on the page yet. You've just echoed it in a Ajax call. In your success function take the returned data put it on the page then try and show it i.e 

success: function(data) {
           $('body').append(data);
           $('body #cont').show();
        }

This is assuming the data is being returned correctly, I'd put something in our pagination.php that says return json_encode($row) then you have the data in a JSON format in your success function to build the elements you want.

Upvotes: 3

Related Questions