jquery and ajax

dendic · Jan 29, 2015

I have this problem and at wits end can't work out the issue alone please help.
JavaScript: ( external but tried it in the main html as well)
$('#customer-select').on('change',function() {
var self =$(this);
$.ajax({
url: '

http://localhost/xampp/htdocs/imgweb/laravel/public/partials/customers.php',

type: 'GET',
data: { customer: self.val() },
success: function(data) {
$('#customer-profile').html(data);
},
error:function(xmlHttpRequest, textStatus, errorThrown) {
alert(errorThrow);
}
});
});
PHP file:
<?php
require 'start.php'
if(isset($_GET['customer'])) {
$customersQuery = "
SELECT
customernumber,
company,
notactive
FROM customerequipment
WHERE customernumber = :customer_id
";
$customer = $db->prepare($customersQuery);
$customer->execute(['customer_id'=> $_GET['company']]);
$selectedCustomer = $customer->fetch(PDO::FETCH_ASSOC);
}
}
HTML file:
The browser is finding the scripts but I include them anyway
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/global.js"></script>
<script src="assets/jquery-2.1.3.min.js"></script>

<div class="col-xs-2">
<?php
$customerequipmentQuery = "
SELECT
customernumber,
company,
notactive
FROM customerequipment
WHERE notactive = 0
";
$customers = $db->query($customerequipmentQuery);
?>

<labelCustomerlabel>
<select type="text" list="customer" id="customer-select"
name="customer" style = "height:35px; width: 200px;"/>
<option value="">None Selected</option>
<?php foreach($customers->fetchAll() as $customer): ?>
<option value="<?php echo $customer['customernumber']; ?>">
<?php echo $customer['company']; ?>
</option>
<?php endforeach; ?>
</select>
</div>
<div id="customer-profile" >
<p>
testing
</p>
</div>
My database connect is working because I populate other dropdown boxes without ajax.
I want to use ajax because I need to GET a record based on the value from a dropdown/textbox. If there are different/better methods perhaps a suggestion would help.

jpadie · Jan 29, 2015

please always post code within [ignore]

Code:

[/ignore] tags

jpadie · Jan 29, 2015

php code

this will not work.
1. PDOSTATEMENT::execute() takes an array as an argument. you are passing an odd string surrounded by squarebracket literals. This will throw errors and kill the program.
2. you have given your query a placeholder of :customer_id. Thus you MUST pass that placeholder to the execute parameter. You are not. You are passing an array key without the colon. You will get a database error.
3. note that you do not OUTPUT anything from the php file that you have shown us. merely assigning something to a variable does not output it to the browser.

Code:

<?php
require 'start.php'
if(isset($_GET['customer'])) {
	$customersQuery = "
	SELECT
			customernumber,
			company, 
			notactive
	FROM 	customerequipment	
	WHERE 	customernumber = :customer_id 
	";
	$customer = $db->prepare($customersQuery);
	if($customer === false){
		print_r($db->errorInfo());
		die;
	endif;
	$result = $customer->execute(  array(':customer_id' => $_GET['company']);
	if($result === false){
		print_r($customer->errorInfo());
		die;
	} 
	echo json_encode(array('result'=>'ok','selectedCustomer' => $customer->fetch(PDO::FETCH_ASSOC)));
	die; 
}
echo json_encode(array('result'=>''));
die;
?>

HTML + JS Code

your main page is flawed too. for these reasons:
1. you are not including the eventlistener for customer-select within a document ready test. so it will run BEFORE the dom is loaded and not find the relevant element to attach the listener.
2. you are not including that text AFTER you have loaded jQuery. so the $ etc will be meaningless to the browser.
3. you are loading jquery, and jquery min. no idea why.
4. your element for the customer label is malformed
5. your element for the select box is malformed as you are closing it before the options. some browsers may ignore your errors.
6. you appear to be intending to return an array from php and display it natively in html. It will look like 'Array'.

Code:

<!DOCTYPE HTML>
<html>
<head>
<script src="assets/jquery-2.1.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/global.js"></script>
<script>
$(document).ready(function(){
	$('#customer-select').on('change',function() {
		var self = $(this);
		if($(this).val() !== ""){
			$.ajax({
				url: '[URL unfurl="true"]http://localhost/xampp/htdocs/imgweb/laravel/publi...',[/URL]
				type: 'GET',
				data: { customer: self.val() },
				success: function(data) {
					if(data.result == 'ok'){
						var ul = $('<ul/>');
						$.each(data.selected, function(i, e){
							$('<li/>').text(i + ":" + e).appendTo(ul);
						}
						$('#customer-profile').html(ul);
					} else {
						$('#customer-profile').html('Serverside error reported or no query results or no customer value specified');
					}
				},
				error:function(xmlHttpRequest, textStatus, errorThrown) {
					alert(errorThrow);
				}
				dataType:'json'
			});	//end of ajax
		} else {
			$('#customer-profile').html('');//set to zero as nothing selected
		}
	});
</script>
</head>
<body>
<div class="col-xs-2">
<?php
$customerequipmentQuery = "
SELECT
		customernumber,
		company,
		notactive
FROM 	customerequipment
WHERE 	notactive = 0
";
$customers = $db->query($customerequipmentQuery);
if($customers === false){
	echo '<pre>' . print_r($db->errorInfo(), true) .'</pre>';
	die;
}
?>
	<label for="customer-select">Customer</label>
	<select type="text" list="customer" id="customer-select" name="customer" style="height:35px;width:200px;">
		<option value="">None Selected</option>
<?php foreach($customers->fetchAll() as $customer): ?>
		<option value="<?php echo $customer['customernumber']; ?>"><?php echo htmlspecialchars($customer['company']); ?></option>
<?php endforeach; ?>
	</select>
</div>
<div id="customer-profile" >
	<p>testing</p>
</div>
</head>
</html>

dendic · Jan 29, 2015

Thank you for correcting my code. I was just following an example from phpacademy because I'm still a new-bee. But I'm getting an error here: $('#customer-profile').html(ul); unexpected identifier. I see you're setting a variable to the ul and I have several within my document so I tried giving the calling ul an ID but the error continued.

jpadie · Jan 29, 2015

Try html('').append(ul) instead of html(ul). Brain fart moment.

uk in this context is a variable not a reference to all the ul elements.

dendic · Jan 29, 2015

Made the change same problem. Tried appendTo like you used here: $('<li/>').text(i + ":" + e).appendTo(ul);
But still getting the error.
Thanks again for your help.

jpadie · Jan 29, 2015

appendTo and append are not the same.
instead of this line

Code:

$('#customer-profile').html(ul);

use this

Code:

$('#customer-profile').html('').append(ul);

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

jquery and ajax

dendic

Programmer

jpadie

Technical User

jpadie

Technical User

dendic

Programmer

jpadie

Technical User

dendic

Programmer

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor