INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

jquery and ajax

jquery and ajax

(OP)
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/publi...',
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.

RE: jquery and ajax

please always post code within [code][/code] tags

RE: jquery and ajax

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 --> fixed.php

<?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 --> html+js

<!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: 'http://localhost/xampp/htdocs/imgweb/laravel/publi...',
				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> 

RE: jquery and ajax

(OP)
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.

RE: jquery and ajax

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.

RE: jquery and ajax

(OP)
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.

RE: jquery and ajax

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

CODE

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

CODE

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close