Solved

Passing Two Values

Posted on 2013-01-18
22
240 Views
Last Modified: 2013-01-18
I have code that is working.

$('.Kitty').live("change",function(){
	var LocationString = 'Lid='+ $(this).val();
    $.ajax({
        type: "POST",
        url: "ajax_area.php",
        data: LocationString,
        cache: false,
        success: function (html) {									   
$(".Pig").html(html);

Open in new window


However: I need to get two values passed along.  Not only "Lid" LocationString but also Cid"
CityString.  This doesnt seem to be working.

$('.Kitty').live("change",function(){
	var LocationString = 'Lid='+ $(this).val();
	var CityString = 'Cid='+ $(this).val();
    $.ajax({
        type: "POST",
        url: "ajax_area.php",
        data: {Lid: LocationString, Cid:CityString},
        cache: false,
        success: function (html) {									   
$(".Pig").html(html);

Open in new window


This is the ajax_area.php file.
<?php
require('config.php');

if($_POST['Lid'])
{
$Lid=$_POST['Lid'];

$sql=mysql_query("SELECT tblLocations.RestID as Lid, tblAreas.AreaName as name
				FROM tblLocations INNER JOIN tblAreas ON tblLocations.AreaID = tblAreas.AreaID
				WHERE tblLocations.RestID = $Lid
				GROUP BY tblLocations.RestID, tblAreas.AreaName
				ORDER BY tblAreas.AreaName ASC");

echo '<option selected="selected">--Select Area--</option>';
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].'">'.$row['name'].'</option>';
}
}

?>

Open in new window


How do I add the second value "Cid" to this?  Thank you.
0
Comment
Question by:DS928
  • 12
  • 10
22 Comments
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
You are passing your data as JSON, but your 'JSON string' is not valid.  JSON expects {"string":"string", "blah": "blah"}

Change your data to this:
{"Lid": LocationString, "Cid":CityString}

Open in new window


Note: LocationString and CityString are your variables that represent a string, so no need for quotes around your variables.

- Chris
0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
As for your PHP, you can pull your new Cid parameter from the server...

$Cid=$_POST['Cid'];

Open in new window


Do you need 'Cid' added to your SQL statement as well?  
Do you need 'Cid' added to your 'option' elements?

If you do need updated option elements, how do you want it to work.
0
 

Author Comment

by:DS928
Comment Utility
OK I changed it to what you suggested, still not working.  There must be more wrong with these two pieces of code.  Like I said it works fine with one Lid.  I just need two. Lid and Cid.  Thank you.
0
 

Author Comment

by:DS928
Comment Utility
Here's the change to the PHP I did.  What about the first part?  if($_POST['Lid'])


<?php
require('config.php');

if($_POST['Lid'])
{
$Lid=$_POST['Lid'];
$Cid=$_POST['Cid'];


$sql=mysql_query("SELECT tblLocations.RestID as Lid, tblLocations.CityID as Cid, tblAreas.AreaName as name
				FROM tblLocations INNER JOIN tblAreas ON tblLocations.AreaID = tblAreas.AreaID
				WHERE tblLocations.RestID = $Lid and tblLocations.CityID = $Cid
				GROUP BY tblLocations.RestID, tblAreas.AreaName
				ORDER BY tblAreas.AreaName ASC");

echo '<option selected="selected">--Select Area--</option>';
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
}
}

?>

Open in new window

0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
Well, we gotta break this down a bit more....

What is failing?
Is your ajax call to ajax_area.php?
Is the PHP failing?

You will need to break it down a bit more and debug where the issue is happening....

Also, "if($_POST['Lid'])" is the code asking the server 'IF the Lid value was "POSTED" to the server then do something'.  If Lid wasn't sent to the server via a POST in your ajax call, that conditional wouldn't fire.
0
 

Author Comment

by:DS928
Comment Utility
I am receiving no error messages.  This populates the last of three listboxes.  The listbox simply isn't populating. It worked fine untill I added the second value Cid.  

var LocationString = 'Lid='+ $(this).val();
var CityString = 'Cid='+ $(this).val();

Open in new window


Is this passing the same value or two different values?
0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
With the way your code is, LocationString and CityString are the same value.

But I failed to notice that you are passing more than the just the value in...

Since you switched to JSON, you no longer need to follow the 'querysting' type of formatting.  You would need to switch it to the following:
var LocationString = $(this).val();
var CityString = $(this).val();

Open in new window

That way when you create your little JSON data string it will output correctly.  This doesn't fix the issue that you are assigning both LocationString and CityString the same value....

Do you use Firebug (with FireFox) or Chrome's Dev Tools?
0
 

Author Comment

by:DS928
Comment Utility
Soooo, I guess the big question is, How do we assign them different values?  LocationString alone works fine.  When I add a seccond string CityString thats when things go south.  How do we assign them different values?
0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
Can you post more of your HTML?

Do you use Firebug (with FireFox) or Chrome's Dev Tools?
0
 

Author Comment

by:DS928
Comment Utility
Sure, Here is more HTML.  No I don't use Firefox or Chrome.  I definitly feel that its the second value Cid that I am trying to get.

//This is based on Place, City, Area

$(document).ready(function()
{
	
$(".Doggie").change(function()
{
	var LocationString = 'Lid='+ $(this).val();
    $.ajax({
        type: "POST",
        url: "ajax_city.php",
        data: LocationString,
		cache: false,
        success: function (html) {
            $(".Kitty").html(html);
        }
    });
});

$('.Kitty').live("change",function(){
	var LocationString = 'Lid='+ $(this).val();
	$.ajax({
        type: "POST",
        url: "ajax_area.php",
        data: LocationString,
        cache: false,
        success: function (html) {									   
$(".Pig").html(html);
} 
});

});



});
</script>
</head>
<body>


		<div id="frame1">
  		<label>Place :</label>
  		<select name="Doggie" class="Doggie" id="Doggie">
    	<option selected="selected">--Select Place--</option>
    	<?php
		
		$sql = mysql_query("SELECT tblLocations.RestID as Lid, tblRestaurants.RestName as name
			FROM tblRestaurants INNER JOIN tblLocations ON tblRestaurants.RestID = tblLocations.RestID
			GROUP BY tblLocations.RestID, tblRestaurants.RestName
			ORDER BY tblRestaurants.RestName ASC");
		while($row=mysql_fetch_array($sql))
		{
		echo '<option value="'.$row['Lid'].'">'.$row['name'].'</option>';
		//echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
		} ?>
 		 </select>
  		<label>City :</label>
  		<select name="Kitty" class="Kitty" id="Kitty">
    	<option selected="selected">--Select City--</option>
  		</select>
  		<label>Area: :</label>
  		<select name="Pig" class="Pig" id="Pig">
    	<option selected="selected">--Select Area--</option>
  		</select>
		</div>
       
</body>
</html>

Open in new window


and the full ajax_area.php file

<?php
require('config.php');

if($_POST['Lid'])
{
$Lid=$_POST['Lid'];
//$Cid=$_POST['Cid'];
//$sql=mysql_query("select * from cities where state_id='$id' ");
//alert('Pre Switch.');
$sql=mysql_query("SELECT tblLocations.RestId as Lid, tblAreas.AreaName as name
				FROM tblLocations INNER JOIN tblAreas ON tblLocations.AreaID = tblAreas.AreaID
				WHERE tblLocations.RestID = $Lid AND tblLocations.CityID = 16
				GROUP BY tblLocations.RestID, tblAreas.AreaName
				ORDER BY tblAreas.AreaName ASC");

echo '<option selected="selected">--Select Area--</option>';
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].'">'.$row['name'].'</option>';
//echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
}
}

?>

Open in new window


The mySQL works fine.  I just put a value of 16 in to replace Cid untill I get the value.  The value is defintly not getting created or passed.
0
 
LVL 8

Accepted Solution

by:
soupBoy earned 500 total points
Comment Utility
So, lets get a handle on these values :)

When $('.Kitty') changes you are firing off some code. I imagine you want to pass .Doggie as well?

What values does Lid and Cid represent?

My guess is this is what you want

$('#Kitty').on('change', function(){
  var Lid = $('#Doggie').val(), // This is the value of the id="Doggie" selected option
      Cid = $(this).val(); // This is the value of the id="Kitty" selected option

// more goes here....
});

Open in new window

0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:DS928
Comment Utility
Yes, I do want to pass the value of Doggie Lid which is a number and the value of Kitty which is also a number.  Lid represents the RestID and Cid represents the CityID both from the tblLocations.  This is what I put.

$('.Kitty').live("change",function(){
	var Lid = $('#Doggie').val(),
                  Cid = $(this).val();
	//var LocationString = 'Lid='+ $(this).val();
	//var CityString = 'Cid='+ $(this).val2();
	$.ajax({
        type: "POST",
        url: "ajax_area.php",
        data: {Lid:LocationString,Cid:CityString},
        cache: false,
        success: function (html) {									   
$(".Pig").html(html);

Open in new window


Still not working.
0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
data should be:
data: {"Lid":LocationString,"Cid":CityString},

Open in new window


FYI, what you are passing in now is  JSON string, so it must be formatted correctly for the ajax scripts to parse it.

add this line to before your ajax call to make sure your values are correct:
alert("Lid = " + Lid + " Cid = " + Cid);

Open in new window

That should 'alert' the values so you know you are passing them in correctly.

Add this line of code in your success 'method' of your ajax call:
alert('This is what is returned from the php script: ' + html);

Open in new window

It too will 'alert' what is being returned from your script.

Here are all of those changes worked into your code:
$('.Kitty').live("change",function(){
	var Lid = $('#Doggie').val(),
                  Cid = $(this).val();

    alert("Lid = " + Lid + " Cid = " + Cid)
	
    //var LocationString = 'Lid='+ $(this).val();
	//var CityString = 'Cid='+ $(this).val2();
	$.ajax({
        type: "POST",
        url: "ajax_area.php",
        data: {"Lid":LocationString,"Cid":CityString},
        cache: false,
        success: function (html) {	
            alert('This is what is returned from the php script: ' + html);							   
            $(".Pig").html(html);
    });
});

Open in new window

The goal here is to determine the following:
1) Are you sending the right values to your script.  The best way to do this is open up developer tools and check what is being sent, but the alert will get us close to that.

2) Are we getting anything back that is relevant from the server.  The final alert in the success method would tell us that.

- Chris
0
 

Author Comment

by:DS928
Comment Utility
Ok what I have showing is Lid = 892 and Cid = 892     Cid should be 16....so right now, both Lid and Cid are returning the same value.

Got this back as well...
SCRIPT5009: 'LocationString' is undefined
0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
hmmm....my mistake.

Change this:
data: {"Lid":LocationString,"Cid":CityString},

Open in new window


to this:
data: {"Lid":Lid,"Cid":Cid},

Open in new window


Let me know what the values are :)
0
 

Author Comment

by:DS928
Comment Utility
Lid=892 Cid = 892  Lid is correct Cid is wrong...

Plus this message came up...

---------------------------
Message from webpage
---------------------------
This is what is returned from the php script: <option selected="selected">--Select Area--</option><br />
<b>Warning</b>:  mysql_fetch_array(): supplied argument is not a valid MySQL result resource in <b>/home/content/d/s/t/dstr3/html/MENUHEAD/Canada/ajax_area.php</b> on line <b>17</b><br />

ajax_area.php
<?php
require('config.php');

if($_POST['Lid'])
{
$Lid=$_POST['Lid'];
$Cid=$_POST['Cid'];
$sql=mysql_query("SELECT tblLocations.RestId as Lid, tblLocations.CityID as Cid, tblAreas.AreaName as name
				FROM tblLocations INNER JOIN tblAreas ON tblLocations.AreaID = tblAreas.AreaID
				WHERE tblLocations.RestID = $Lid AND tblLocations.CityID = $Cid
				GROUP BY tblLocations.RestID, tblAreas.AreaName
				ORDER BY tblAreas.AreaName ASC");

echo '<option selected="selected">--Select Area--</option>';  ////////////Line 17//////////////
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
}
}

?>

Open in new window

0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
So, we know the values are being passed correctly, meaning they are populating and making their way via a properly formatted JSON string...obviously it looks like there is something fishy going on with the Cid value...

Can you post a link to that page?
0
 

Author Comment

by:DS928
Comment Utility
Better yet.  Here are the pages.  The connection is active for now.
sections-demo.php
config.php
ajax-city.php
ajax-area.php
0
 

Author Comment

by:DS928
Comment Utility
When I added Cid to the ajax_city.php file  I get Lid = 892 Cid=89216.........?

<?php
require('config.php');

if($_POST['Lid'])
{
$Lid=$_POST['Lid'];
$Cid=$_POST['Cid'];

$sql=mysql_query("SELECT tblLocations.RestId as Lid, tblLocations.CityID as Cid,tblCities.CityName as name
				FROM tblLocations INNER JOIN tblCities ON tblLocations.CityID = tblCities.CityID
				WHERE tblLocations.RestID = $Lid
				GROUP BY tblLocations.RestID, tblCities.CityName
				ORDER BY tblCities.CityName ASC");

echo '<option selected="selected">--Select City--</option>';
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Lid'].''.$row['Cid'].'">'.$row['name'].'</option>';
}
}

?>

Open in new window


Lid is right 892   Cid is a combination of 892 and 16  16 is right.

By the way go to 28 Degrees, then select Boston and two areas should come up.

http://www.menuhead.net/Canada/sections_demo.php
0
 
LVL 8

Expert Comment

by:soupBoy
Comment Utility
Screen shot of Chrome Dev Tools showing 'City' <select> valuesTake a look at the screen shot I posted...
It shows the value of 'Boston'.  Which appears to be set from your ajax_city.php script.  
Check out why that is happening in that script and it will fix the cid issue.

Once that is fixed we can continue to debug :)

You should check your SQL statement....does this return what you are wanting?
SELECT tblLocations.RestId as Lid, tblCities.CityName as name
				FROM tblLocations INNER JOIN tblCities ON tblLocations.CityID = tblCities.CityID
				WHERE tblLocations.RestID = '892'
				GROUP BY tblLocations.RestID, tblCities.CityName
				ORDER BY tblCities.CityName ASC

Open in new window

0
 

Author Comment

by:DS928
Comment Utility
Here was the problem.

<?php
require('config.php');

if($_POST['Lid'])
{
$Lid=$_POST['Lid'];
$Cid=$_POST['Cid'];

$sql=mysql_query("SELECT tblLocations.CityId as Cid, tblCities.CityName as name
				FROM tblLocations INNER JOIN tblCities ON tblLocations.CityID = tblCities.CityID
				WHERE tblLocations.RestID = $Lid
				GROUP BY tblLocations.RestID, tblCities.CityName
				ORDER BY tblCities.CityName ASC");

echo '<option selected="selected">--Select City--</option>';
while($row=mysql_fetch_array($sql))
{
echo '<option value="'.$row['Cid'].'">'.$row['name'].'</option>';
}
}

?>

Open in new window


 I removed the tblLocations.RestID from the MySQL statement and from the option value statement.  In the option value I just went with the Cid and that worked.  I aam giving you the 500 points.  Thank you so much.  I appreciate your time and effort, could not have done it without you!
0
 

Author Closing Comment

by:DS928
Comment Utility
soupBoy really helped out with the coding.  Worked hard and pointed to the correct solution!  I express my deepest gratitude!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now