• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 529
  • Last Modified:

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?
  • 2
2 Solutions
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 StanyonCommented:
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>).
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?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now