CODEWITHSUNDEEP
phpjquerymysqlajax
Matej Petráš
Matej Petráš

Reputation: 67

ajax load mysql data into multiple divs

at first I apologise for creating this topic. I did try to search the answer but I couldnt find the right solution.

I am reading data from mysql with ajax and everything is working with one div. The thing I can't get working is to load each variable into separate div.

I use this api.php for fetching the data from mysql.

<?php 
$host = "localhost";
$user = "root";
$pass = "";

$databaseName = "skuska";
$tableName = "hodnoty";

//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------

$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);

//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$result = mysql_query('SELECT t.hodnota FROM hodnoty t ORDER BY t.id DESC LIMIT 1') or die('Invalid query: ' . mysql_error());         //query

while ($row = mysql_fetch_assoc($result)) {
    echo $row['hodnota'];
}

?>

This is the ajax script for updating the data.

$(document).ready(function() {
     $("#gettable").load("api.php");
   var refreshId = setInterval(function() {
      $("#gettable").load('api.php?randval='+ Math.random());
   }, 9000);
   $.ajaxSetup({ cache: false });
});

Then in html I am using div for showing the data

 <div id="gettable"></div>

I would like to use this but with more variables like data1, data2, data3

and then used div for each data so I could use more divs. For example:

<div id="data1"></div> 
<div id="data2"></div>

I understand html, a little bit of php but I am totally new in java.

Thank you for your help.

Upvotes: 1

Views: 1336

Answers (2)

Ravinder Payal
Ravinder Payal

Reputation: 3031

do this take as many variables as you have div and store content in variables inside loops

/******* a short example **************/
$div1cnt="";
$div2cnt="";
while($SRC=mysqlii_fetch_object($link)){
$divid=$SRC->id;
if($divid==1){
$div1cnt.="add more stuff that you want here";
}
else if($divid==2){
$div2cnt.="add stuff to second div";
}
echo "<div id=\"div1\">{$div1cnt}</div>";
/************and so on ******************/

There is no JS requirement means it is mobile friendly and no double connection required to load second page.

Upvotes: 1

Geseft
Geseft

Reputation: 317

Here is how you can solve the problem in Javascript ( watch out, not JAVA :) ) 

 $(document).ready(function() {
    var i = 1;
        $.get("api.php", function(result) {

             $("#gettable").append("<div id='data"+i+"'>"+result+"</div>");
             i++;

             });
       var refreshId = setInterval(function() {

             $.get("api.php?randval="+ Math.random(), function(result) {

             $("#gettable").append("<div id='data"+i+"'>"+result+"</div>");
             i++;

             });

       }, 9000);
       $.ajaxSetup({ cache: false });
    });

Upvotes: 1

Related Questions