ajax load mysql data into multiple divs

Question

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.

I recommend you to start using mysqli, mysql is deprecated as of PHP 5.5 — Danijel
– Danijel, Commented Jun 25, 2014 at 20:40
What data would you want to put in the div's? You probably need to select more data in your php script, send that as a json string and change your ajax request to $.ajax or $.get so that you get the data back and can display that wherever you want. — jeroen
– jeroen, Commented Jun 25, 2014 at 20:46
I want to use only variables from mysql like temperature, humidity, weight ... I know about using get but I haven't found examples yet that would helped me. I am a bit confused about how to use that — Matej Petráš
– Matej Petráš, Commented Jun 25, 2014 at 20:52

Ravinder Payal · Accepted Answer · 2016-03-26 22:12:36Z

1

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.

edited Mar 26, 2016 at 22:12

answered Aug 6, 2014 at 10:14

Ravinder Payal

3,0291 gold badge33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Geseft · Accepted Answer · 2014-06-25 20:54:21Z

1

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 });
    });

answered Jun 25, 2014 at 20:54

Geseft

3171 silver badge7 bronze badges

2 Comments

Matej Petráš Over a year ago

thx for your fast reply. I did more search on the internet and found another solution using $.ajax and it's working. I cant paste the code now because since I am new here i ahve to wait 8 hours. I will post it tomorrow

Geseft Over a year ago

No problem :). The .get function is a simpler version of $.ajax, both of them are doing the same, in the .get function you do not have to specify (obviously ) the method of transfer data. There is also a .post function for the POST method, works similar. Please accept my answer if it was useful. Thanks a lot :)

Collectives™ on Stack Overflow

ajax load mysql data into multiple divs

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related