CODEWITHSUNDEEP
javascriptmysql
Rajan
Rajan

Reputation: 31

Connect database and retrieve values using javascript

I want to connect to the database and retrieve value from database using javascript as I built a javascript bargraph. Below is my code if someone can look into that and help me.

<?php
ini_set('display_errors',1); 
error_reporting(E_ALL);
$link = mysql_connect('localhost', 'root', 'root');
mysql_select_db('sarc', $link);
$result = mysql_query('SELECT 73');

$val = mysql_fetch_row($result);
$val = $val[0];

?>

<link rel="stylesheet" type="text/css" href="progressbar.css" />
<script type="text/javascript" src="progressbar.js"></script>
<style type="text/css">
.my_progress_bar {
border-width: 0px;
}

</style>

<div id="my_progress_bar_1"></div>

<script type="text/javascript">
var currentValue = [<?php echo $val; ?>];
var myProgressBar = null
var timerId = null
function loadProgressBar(){
myProgressBar = [
     new ProgressBar("my_progress_bar_1",{
         height: 400,
         width: 129,
         orientation: ProgressBar.Orientation.Vertical,
         direction: ProgressBar.Direction.BottomToTop,
         animationStyle: ProgressBar.AnimationStyle.StaticFull,
         showLabel: false,
         imageUrl: 'images/bottle-in.png',
         markerUrl: 'images/marker-bottle.png',
         extraClassName: {
             wrapper: 'my_progress_bar',
             left: 'my_progress_bar',
             right: 'my_progress_bar',
             middle: 'my_progress_bar',
             marker: 'my_progress_bar',
             parent: 'my_progress_bar',
             background: 'my_progress_bar'
         },
     })
 ];

 myProgressBar[0].setValue(currentValue);
}

loadProgressBar();
</script>

This code is displaying blank page when I run it. Can anybody help me pls

Upvotes: 0

Views: 1828

Answers (3)

Selosindis
Selosindis

Reputation: 544

This is quite a jump for someone unfamiliar with both AJAX and jQuery. I would recommend you start here:

AJAX Tutorial: http://www.w3schools.com/ajax/default.asp

jQuery Tutorial: http://www.w3schools.com/jquery/default.asp

After you're familiar with those two, you'll want something like this:

File 1: ajax_landing.php

// This file needs to search your database using PHP, and echo the results.
$data = mysql_fetch_assoc(mysql_query("SELECT myCol FROM myTable WHERE condition = value"));
echo json_encode($data);

// This should output something like...
{ myCol: 73 }

File 2: chart_page.html (or .php)

<script>
$.getJSON("ajax_landing.php", function(response) {
    var value = response['myCol'];

    example_10(value);
});
</script>

Of course this is only scratching the surface, but will hopefully point you in the right direction.

Please no downvotes for linking w3schools. They aren't that terrible... ;)

Upvotes: 1

BuddhiP
BuddhiP

Reputation: 6451

Well, there is no easy answer to this @Rajan, even though AJAX seem complecated it is your friend here. You have to add a PHP page which read your data from db and return it as JSON (not a big page with all the HTML, just a JSON string, ex { value: 73 }, then use a client side JavaScript library (such as jQuery) to access that page, using ajax and pass the value to your function.

$.ajax({
  url: 'yourserver/phppage.php',
  dataType: 'json',
  data: data,
  success: function(data) { example_10(data.value); }
});

This code will not work as it is, but hopefully it will serve you as a guide. You need to modify example_10 function to accept parameters as well. :)

We can't write the entire program for you. But we can of course help at points where you get stuck. So you have to start your self.

Upvotes: 0

chad
chad

Reputation: 7519

If you are executing this javascript in a web browser, as I assume you are, then the most common way to get data from the database is via the server. And this means that you need some sort of dynamic server. In the Java world, this would be a Servlet container and you would most likely use a web application framework on top of that servelt container to help out. You javasript would make an ajax call to the server, and the java code would connect to the DB, then prepare an ajax appropriate response out of that data, such as json or xml.

Does this help? Note, there are other types of db's you can probably hit directly from the javascript, but that's kind of advanced topics. I'd need more requirements from you to know whether a more specialized case is called for.

Upvotes: 0

Related Questions