Update chart after input field updated using autocomplete

I am trying to create a dynamic chart using query binding with CodeIgniter. The value that is being passed into the query is a form input field. Here is the current query:

$sql = "SELECT * FROM myTable WHERE Municipality = ?"; 
$qry = $this->db->query($sql, array($this->input->post('myCity')));

Open in new window

This is working fine to create the chart when the page loads. When I am running into trouble is when the user changes the value in the input field. The input field is an autocomplete field and when a new value is selected, the chart does not dynamically update itself to be based on the newly selected municipality.

How can I make the chart dynamically update itself after a new input value is selected?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ray PaseurCommented:
The script would need to rerun the query, and that would almost certainly require a new HTTP request.  If you're using jQuery and AJAX, this request can be performed in the background, and the background script can reload a <div> with the new chart.  A Hello World example of the process is available in this article.
Chris StanyonWebDevCommented:
Assuming you are using the jQuery UI autocomplete, there is a 'select' event that is fired when an item is selected. In your case, you would need to use this event to send the selected value back to your server using an AJAX request. Your server would then process this infomation and pass some info / data / html back to the browser. Here's a very simple example of the type of thing you need:

   select: function( event, ui ) {
      //now make your AJAX request
         url: 'yourScript.php',
         type: 'post'
         data: { myCity : ui.item.value }
      }).done(function(returnedData) {

Open in new window

When you select an item from your autocomplete field (#yourTextField) the value that was selected (ui.item.value) is POSTed to your server-side script (yourScript.php). Whatever your script outputs is passed back to your jQuery and inserted in the #response element (for example <div id="response"></div>).

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DanielAttardAuthor Commented:
Thanks Ray.  I read your article last night and learned a lot from it.  Thank you for putting it together.  Tonight I will try and apply what I've learned.  Will let you know how I make out . . .
DanielAttardAuthor Commented:
Thanks for the help guys.  Wish I could say I figured it out, but unfortunately I'm not quite there yet.  Need a bit more of your sage advice.

ChrisStanyon - You mentioned that I need to use the autocomplete select event to send the selected value back to the server in my AJAX request, which then processes the information and passes back the info/data/html to the browser.  Well, I have that part working, sort of.  

Here is the function that runs when I select an item from the autocomplete field:

$("#myField").result(function(event, data, formatted) {
	if (data){
		//var r = data[1];
			url: sURL + "myController/myFunction",
			type: "POST",
			data: {r: data[1]},
			dataType: 'json', 				
			success: function(json){
				if  (!jQuery.isEmptyObject( json.City )) {
				} else { 

Open in new window

The function runs and alerts `yes` every time a selection is made.  I know that the correct json values are coming back from the server.  The problem I am having is that I don't know how to then update my chart object to use the value coming back in the JSON response.  

Here is the code which generates the query result for the chart object:

$sql1 = "SELECT
	SaleYear AS Y,
	NewSaleType AS T,
	count(*) AS C,
	tblsales.Municipality AS M,
		(sum(SalePrice) / sum(Quantity1)),
	) AS R
FROM	tblsales
WHERE	tblsales.SaleYear > 2007
AND tblsales.Quantity1 > 2000
AND (tblsales.NewSaleType = 'Industrial')
AND tblsales.Municipality = ?

$chart1 = $this->db->query($sql1, array('London') );

Open in new window

As you can see, the query result for `chart1` is presently hard-coded to use the city value of `London`.  How should I change this so that the query result can be dynamically linked to the value coming back from the JSON response?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.