CODEWITHSUNDEEP
phpjavascriptmysqlhtmlajax
user1275456
user1275456

Reputation:

how to bring ajax sorted result into html divs

HI i have done some AJAX, PHP&MySQL Sorting and it is giving me result in tables as shown in the code below, my question is how to bring that $result in html divs.

please help

PHP code used

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("security_software", $con);

$sql="SELECT * FROM internet_security ORDER by '".$q."' DESC" ;


$result = mysql_query($sql);

echo "<table border='1'>
<tr>
<th>id</th>
<th>title</th>
<th>image</th>
<th>description</th>
<th>rating</th>
<th>download</th>
<th>buy</th>
</tr>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['title'] . "</td>";
  echo "<td>" . $row['image'] . "</td>";
  echo "<td>" . $row['description'] . "</td>";
  echo "<td>" . $row['rating'] . "</td>";
  echo "<td>" . $row['download'] . "</td>";
  echo "<td>" . $row['buy'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

mysql_close($con);
?>

I want Result In These HTML Div's

<div class="category-container">
    <div class="category-image"></div>
    <div class="category-link"><a href="#">#</a></div>
    <div class="category-desc"><p>#</p> </div>          
    <div class="rating5" >Editors' rating: </div>        
    <div class="category-download-btn"><a href="#">Download </a></div><
    <div class="category-buy-btn"><a href="#">Buy</a></div>
</div>

Upvotes: 0

Views: 720

Answers (3)

Rajan Rawal
Rajan Rawal

Reputation: 6313

I don't know why you are creating table when returning the ajax response. I advice you to create json response as a result of ajax. Using this result JSON you can either create table or you can render them in your html. in your php code where ajax request is sent: ajax.php

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'root', '');
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }

mysql_select_db("security_software", $con);

$sql="SELECT * FROM internet_security ORDER by '".$q."' DESC" ;


$result = mysql_query($sql);
$response = array();
$i=0;
while($row = mysql_fetch_array($result))
  {
  $response[$i]['id']           =$row['id'];
  $response[$i]['title']        = $row['title'];
  $response[$i]['image']        = $row['image'];
  $response[$i]['description']  = $row['description'];
  $response[$i]['rating']       = $row['rating'];
  $response[$i]['download']     = $row['download'];
  $response[$i]['buy']          = $row['buy'];
  $i++;
  }
mysql_close($con);

echo json_encode($response);
?>

In your html file where you are getting this ajax response, I am giving you the hint how can u use this ajax response: 

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
    $.ajax({
        url: 'ajax.php',
        dataType: 'json',
        success: function(response){
            data = '';
            $.each(response,function(i,val){
              data = '<div class="category-image">'+val.image+'</div>'+
            '<div class="category-link"><a href="#">'+val.id+'</a></div>'+
            '<div class="category-desc"><p>'+val.description+'</p> </div>'+
            '<div class="rating5" >'+val.rating+'</div>'+ 
            '<div class="category-download-btn"><a href="'+val.download+'">Download </a></div>'+
            '<div class="category-buy-btn"><a href="'+val.buy+'">Buy</a></div>';
            $('<div>').attr('id',i).html(data).appendTo('#response');
        });
            });
        }
    });
  </script>
</head>

<body>
<div id='response'></div>   
</body>
</html>

Upvotes: 1

Jhong
Jhong

Reputation: 2752

I'm inclined to view this as a bit of a joke, seeing as the database is called "security_software", and you're putting a GET var directly into a database query without doing any sanitation. You're also making no attempt to clean anything coming from the database before spitting it back onto the page...

Anyway, assuming it's not a joke, the following should point you in the right direction:

<?php
$q=$_GET["q"];

$con = mysql_connect('localhost', 'root', '');
if (!$con) {
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("security_software", $con);

$sql="SELECT * FROM internet_security ORDER by '".$q."' DESC" ;

$result = mysql_query($sql);

while($row = mysql_fetch_array($result)) {
    echo '<div class="category-image"><img src="' $row['image'] . '</div>';
    echo '<div class="category-link"><a href="#">' . $row['title'] . '</a></div>';
    echo '<div class="category-desc"><p>' . $row['description'] . '</p></div>';        
    echo '<div class="rating5" >Editors' rating: ' . $row['rating'] . '</div>';       
    echo '<div class="category-download-btn"><a href="' . $row['download'] .'">Download</a></div>';
    echo '<div class="category-buy-btn"><a href="' . $row['buy'] . '">Buy</a></div>';
 }
echo "</table>";

mysql_close($con);
?>

Upvotes: 0

ieatbytes
ieatbytes

Reputation: 516

if you wan to pull the result in these divs then use same divs instead of table/tr/tds or you can bind it by receiving json/xml or any kind of object based data

Upvotes: 0

Related Questions