AJAX PHP

I'm trying to setup an AJAX call and want to make sure I'm starting on the correct foot.  So far my form has two checkboxes. (There will be more)

The query will return multiple returns and am ultimately going to loop the returns.  I just need help starting.
Ajax.php file
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

$cw = '';
	if(!isset($_POST['cw'])) {
		$cw = "NONE";
	} else {
 		$cw = $_POST['cw'];
	}
	
$pulse = '';
	if(!isset($_POST['pulse'])) {
		$pulse = "NONE";
	} else {
 		$pulse = $_POST['pulse'];
	}	
		
  $laser_query = ee()->db->select('entry_id')
		->where('col_id_6401', $cw)
		->where('field_id_6041', $pulse)
		->get('exp_channel_data');
		
	$laser_finder = $laser_query->result_array();
	
	
?>

<script>
$( ".laser_operating_mode" ).change(function () {
	var cw = $('id="cw"').val();
	var pulse = $('id="pulse"').val();
	
	
$.ajax({
    url: 'ajax/laser_finder.php',
    type: "POST",
    data: {
    cw: cw,
    pulse: pulse
    },
    dataType: 'json',
    success: function(data){
       
    }
  });
});
</script>

<html>
		<form action="{path='lasers/'}" method="post">
  <!--  Operating Mode  -->
  	<div class="form-control main title">
  		Operating Mode
  	</div>
 <!--  START CW  -->
  	<div class="form-control">
  			<input type="checkbox" name="laser_operating_mode" id="cw" value="CW (Continuous Wave)" >
  			<label for="cw">
  				CW (Continuous Wave)
  		</label>
  	</div>
<!--  START Pulsed  -->
  	<div class="form-control">
  				<input type="checkbox" name="laser_operating_mode" id="pulse" value="Pulse" >
  				<label for="pulsed">
  				Pulsed
  		</label>
  	</div>

Open in new window

LVL 8
rgranlundAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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:
See if this helps.  It shows the basics in a deconstructed way.
http://www.experts-exchange.com/articles/10712/The-Hello-World-Exercise-with-jQuery-and-PHP.html
Marco GasiFreelancerCommented:
Hi, rgranlund. The answer depends on the nature of the returned array: is it multidimensional or not?
Basically, when the php script returns the data to the ajax call, you have to iterate through the results to process them some way. I put here two very basic examples: I hope they can help you.

Returned array is a simple associative array (as it should be in your case seeing the query):
    success: function(data){
       $(data).each(function (k, v){
           $('#target_element').html('<p>'+v['entry_id']+'</p>');
       }
    }

Open in new window


Returned array is a multimensional associative array:
$( data ).each( function ( a, b ) {
	$( b ).each( function ( k, v ) {
               $('#target_element').html('<p>'+v['entry_id']+'</p>');
        }
}

Open in new window


Keep in mind to always process your query result in order to get an associative array: if you have many data and the markup is complex, it could be a problem remember the correct index number for each value you want to print out :)
rgranlundAuthor Commented:
@Marco, in your response, Returned array is a multimensional associative array:  I do not understand you use of a,b and k, v.

Can you explain a little further?  Is the rest of what I have setup the correct way?
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

Marco GasiFreelancerCommented:
Mmmhh, I have a doubt: the query code,
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

$cw = '';
	if(!isset($_POST['cw'])) {
		$cw = "NONE";
	} else {
 		$cw = $_POST['cw'];
	}
	
$pulse = '';
	if(!isset($_POST['pulse'])) {
		$pulse = "NONE";
	} else {
 		$pulse = $_POST['pulse'];
	}	
		
  $laser_query = ee()->db->select('entry_id')
		->where('col_id_6401', $cw)
		->where('field_id_6041', $pulse)
		->get('exp_channel_data');
		
	$laser_finder = $laser_query->result_array();
?>

Open in new window


stay in the same page of the form or it is the code of laser_finder.php?

Let me explain how it should work. You have a form with two checkboxes. You want that when the user tick a checkbox a script is called to pull some data from the database and publish them into the page.
You have the form and you have the jquery code which waits for the user action. When the user tick the checkbox, the ajax call is executed: the laser_finder.php script is called, it retrieve data and returns them to ajax (success); ajax print out the data.
So the php code in that page doesn't make sense: I thought it was the code of laser_finder.php but now I think it is not.
If you want let the user check more than one check box, you have to add a button and make jquery wait for the button click.
So, leave the a,b,k,v for later and let me understand what exactly you're trying to get. Put here the laser_finder.php code and tell us what the ajax call has to do with data. If you have an excample of the expected array it would be better.
This way I'll be able to give you a better help :-)
Cheers
rgranlundAuthor Commented:
The form has a few checkboxes.  The php Query takes those parameters and search for all of the products that meet the filtered criteria of the checkboxes.  In addition to the the entry_id, it will also return the image url field and the item description field. So, as the user clicks the checkboxes in the form, the php returns the items with those criteria. There can be in excess of 60 items that meet the criteria.  Here is what I have so far.  The alert works but I am getting no returns.
laser_finder.php
<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);

$cw = '';
	if(!isset($_POST['cw'])) {
		$cw = "";
	} else {
 		$cw = $_POST['cw'];
	}
	
$pulse = '';
	if(!isset($_POST['pulse'])) {
		$pulse = "";
	} else {
 		$pulse = $_POST['pulse'];
	}	
		
  $laser_query = ee()->db->select('entry_id')
		->from('exp_channel_data');
		->where('col_id_6401', $cw)
		->where('col_id_6041', $pulse)
		->get();
		
	$laser_finder = $laser_query->result_array();
	echo json_encode($laser_finder);	
	
	
?>

Open in new window

My Form:
<div class="select-input">
		<form action="{path='lasers/'}" method="post">
  <!--  Operating Mode  -->
  	<div class="form-control main title">
  		Operating Mode
  	</div>
 <!--  START CW  -->
  	<div class="form-control">
  			<input type="checkbox" name="laser_operating_mode" class="laser_operating_mode"  id="cw" value="CW (Continuous Wave)" >
  			<label for="cw">
  				CW (Continuous Wave)
  		</label>
  	</div>
<!--  START Pulsed  -->
  	<div class="form-control">
  				<input type="checkbox" name="laser_operating_mode" id="pulsed" value="Pulsed" >
  				<label for="pulsed">
  				Pulsed
  		</label>
  	</div>

Open in new window


My jQuery:
<script>
	$(document).ready(function(){
$( ".laser_operating_mode" ).change(function () {
	var cw = $('#cw').val();
	var pulse = $('#pulse').val();
	alert(cw);
	
	
$.ajax({
    url: '{site_url}/ajax/laser_finder.php',
    data: {
    cw: cw,
    pulse: pulse
    },
    dataType: 'json',
    success: function(data){
    	$( data ).each( function ( a, b ) {
    		$( b ).each( function ( k, v ) {
    	               $('#results').html('<p>'+v['entry_id']+'</p>');
    	      });
    	});
       
    }
  });
});
});
</script>

Open in new window

Marco GasiFreelancerCommented:
Try this and run teh code with Firebug open on the console tab, so you can see if the problem is in the php script or in jquery code:
success: function(data){
    console.log(JSON.stringify(data));       
}

Open in new window

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
rgranlundAuthor Commented:
It runs with no errors but there is nothing else, (console.log)
Marco GasiFreelancerCommented:
Now, I'd do a drastic trying: comment out all jquery, set action of your form to  laser_finder.php and in this one replace
echo json_encode($laser_finder);

Open in new window

with
echo "<pre>";
var_dump($laser_finder);
echo "</pre>";

Open in new window

This way we can check more closely your php script.
rgranlundAuthor Commented:
My CMS, Expression Engine won't let me do that.
rgranlundAuthor Commented:
Marco, even though that was not the actual solution It got me going in the correct direction.  I am going to re-post the question with my progress.
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
AJAX

From novice to tech pro — start learning today.