Three Listboxes, Third Not Going Empty

I have three dependent listboxes that work well.  Except for one thing.  When you start they all say <Select>.  However; when you go back to the first one, the third one ("Pig") doesn't revert back to <Select> untill you click on yje second one.  Here is what I tried....

$("#Doggie").change(function() { getKitty(m); })
$("#Pig").empty();
$("#Kitty").change(function() { getPig(m); })

Open in new window


Here is the link.
http://www.menuhead.net/Steelers/sections_demo.php

OK I played around with it, I got it to go empty but I can't get the <Select Area"> in the box...

$(document).ready(function()
&#9;{
&#9;$("#Doggie").change(function()
&#9;{
&#9;$("#Pig").empty()
&#9;'<option selected="selected">--Select Area--</option>';&#9;
&#9;var LocationString ='Rid='+ $(this).val();
    &#9;$.ajax({
&#9;&#9;type: "POST",
        &#9;&#9;url: "place_city.php",
        &#9;&#9;data: LocationString,
&#9;&#9;cache: false,
        &#9;&#9;success: function (html) {
            &#9;$("#Kitty").html(html);
        &#9;&#9;}
    &#9;&#9;});
&#9;&#9;});
    &#9;&#9;});

Open in new window

DS928Asked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
to reproduce you need to click on the first option
to fix, replace :
			$("#Doggie").change(function()
			{
			$("#Pig").empty()
			//'<option selected="selected">--Select Area--</option>';	
			var LocationString ='Rid='+ $(this).val();
    		$.ajax({
				type: "POST",
        		url: "place_city.php",
        		data: LocationString,
				cache: false,
        		success: function (html) {
            	$("#Kitty").html(html);
        		}
    			});
				});
    			});

Open in new window

by :
			$("#Doggie").change(function()
			{
if($(this).val()!="--Select Area--") {
			$("#Pig").empty()
			//'<option selected="selected">--Select Area--</option>';	
			var LocationString ='Rid='+ $(this).val();
    		$.ajax({
				type: "POST",
        		url: "place_city.php",
        		data: LocationString,
				cache: false,
        		success: function (html) {
            	$("#Kitty").html(html);
        		}
    			});
				});
}
    			});

Open in new window

0
 
leakim971PluritechnicianCommented:
work fine for me
0
 
DS928Author Commented:
Dont you think when you click on the first one, the last one should empty and say <Select Area>?  On the other hand, does it seem fine?  I just want the thing to work properly without someone staring a new search and have leftovers from the last one.  Thank you.
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
leakim971PluritechnicianCommented:
yes, for me it work fine, and yes, once you change the first one, the third one should become empty
0
 
mcnuteCommented:
The only issue I encountered was, if you have selected something on each column and then click on the second column <--Select > statement it gives a mysql error as in the screenshot.
Bildschirmfoto-2013-01-20-um-12..PNG
0
 
DS928Author Commented:
hmmmmmmm, I can't seem to duplicate it?  Why would that happen?
Is there a way to avoid it?
0
 
mcnuteCommented:
Choose for all column an item. Then go to the second and choose --select city--. there you go.

We need to see your server side code for that. probably it's trying to update the third column but gets passed a null or undefined value for the second column, due to clicking on --select city--.
0
 
leakim971PluritechnicianCommented:
and replace :
		$('#Kitty').live("change",function(){
if($(this).val()!="--Select City--") {
		var Rid = $('#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
		$.ajax({
        type: "POST",
        url: "place_area.php",
        data: {"Rid":Rid,"Cid":Cid}, 
        cache: false,
        success: function (html) {
		$("#Pig").html(html);
		} 
		});
		});

Open in new window

by :
		$('#Kitty').live("change",function(){
		var Rid = $('#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
		$.ajax({
        type: "POST",
        url: "place_area.php",
        data: {"Rid":Rid,"Cid":Cid}, 
        cache: false,
        success: function (html) {
		$("#Pig").html(html);
		} 
		});
}
		});

Open in new window

0
 
DS928Author Commented:
Thank you, I put the code in, However; I could not duplicate the error.  What browser are you using>  Try it now.  I have Explorer 9 Win 7.
0
 
mcnuteCommented:
I'm using chrome and getting the error every time I follow the steps as described above.

You can even just click on --select city-- on the second column right away and the mysql error comes. It's because no value for the third column to extract the options comes from the second column.
0
 
DS928Author Commented:
Try it  now, maybe it's Browser sensitive?
0
 
mcnuteCommented:
That's not browser sensitive. It's a server side issue, it cannot be browser sensitive. It's a mysql error caused by a function which is triggered without it's related parameter which comes from the second column. Maybe you're working with a local copy, which is slightly different from the online version?

Just show us the server side code where the database query is made.
0
 
mcnuteCommented:
Now you're getting the error on the first column click on the select-place option. See screenshot.

You can prevent the mysql error by wrapping all of your ajax calls in this if clause:

if($(this).val()!="no-value") {  // this if clause prevents the database error 
// here your ajax calls.
}

Open in new window


You need to change your first select option like this:

<option selected="selected" value="no-value">--Select Place--</option>

Open in new window

Bildschirmfoto-2013-01-20-um-21..PNG
0
 
DS928Author Commented:
Thank you.  I am descending into heck here.  I am having problems with populating the other boxes.  Going straight across to top level......Place, Cuisine, City,State,Zip loading the first list works fine.  Place works fine on the first second and third listboxes. Cuisine won't populate the second....here I am stuck..........also I have the problem if once you populate all three, then change one of the top five, the second and third listboxes do not empty!  LOL!
0
 
mcnuteCommented:
You have an error there. see screenshot.

Sid is not defined. So this variable isn't set when you call your script. Just check there.
0
 
DS928Author Commented:
OK getting closer!  Stay tuned!  Thank you!
0
 
DS928Author Commented:
Ok, I have all of my listbox options loaded.  It was working fine except for the clearing of the boxes.  First off, when you click on one of the five images, Kitty and Pig should empty, they are not, so I added this.  It empties them, but also empties them whenever anything else is clicked, so it must be in the wrong place.....here is the code.

case "Cuisine":
 	$("#Kitty").empty();
	$("#Pig").empty();
	//document.getElementById("#Kitty").options.length=clear;
	//document.getElementById("#Pig").options.length=clear;
	$(document).ready(function () {
	$.ajax({
	url: 'cuisine_cuisine.php',
	success: function (html) {
	$("#Doggie").html(html);
	},
	error: function () {
	}
	});
	});
 	break;

Open in new window

This is one of the five images across the top.  Also it seems to be lagging? And acting crazy.   Link is still active.  It seems that if you refresh the whole page before starting a new search everything works fine. but there has to be a better way to do this.  Even with the code that was suggested, the thing still acts wacky, refreshing the page is the only thing that clears it up at this point.  Have been searching the internet all day, seems like any number of people have this problem, but I can't find a clear enough answer. At least something that I can understand.
0
 
DS928Author Commented:
OK the only issue now sems to be the ability to refresh the two listboxes from the five buttons accross the top.  And when you select a new search from the first istbox, the third listbox needs to empty.  Heres the link.

http://www.menuhead.net/Steelers/sections_demo.php
0
 
Eddie ShipmanAll-around developerCommented:
I don't understand why you keep changing the code I posted on your other question. It IS working and it clears all three listboxes.. What is the problem?
0
 
DS928Author Commented:
Back up a moment.  $("#Kitty").empty(); doesn't seem to be working.  It works a couple of times then it  freezes.   So what to do?

OK the last part is having the two listboxes Kitty and Pig empty when any of the five images are licked.  Here is the code.  Where exactly would I put the empty part?

$("#Kitty").empty();
$("#Pig").empty();

Open in new window


$(document).ready(function() {
	$("input:image").click(function(evt) {
	evt.preventDefault();
	var s = setSearch( $(this).val() )
	var k = getKitty( $(this).val() )
	var p = getPig( $(this).val() );})
		})

Open in new window

0
 
Eddie ShipmanAll-around developerCommented:
This is what clears the LB's when the images are clicked.
$("input:image").click(function(evt) {
	evt.preventDefault();
	$("#Doggie").empty();
	$("#Kitty").empty();
	$("#Pig").empty();
	display("Doggie", $(this).val());
	window.Doggie = $(this).val()
})

Open in new window

0
 
mcnuteCommented:
Try to use html(''); instead of empty(); like so:

$("#Doggie").html('');
	$("#Kitty").html('');
	$("#Pig").html('');

Open in new window

0
 
Eddie ShipmanAll-around developerCommented:
If you do that, it will remove it entirely. They are <select> elements.
0
 
DS928Author Commented:
Tried this, it works twice, Then starts getting wacky after I make a selection on the first listbox it clears the second listbox, this happens about three times, then its ok.

$(document).ready(function() {
	$("input:image").click(function(evt) {
	evt.preventDefault();
	$("#Kitty").empty();
	$("#Pig").empty();
	var s = setSearch( $(this).val() )
	var k = getKitty( $(this).val() )
	var p = getPig( $(this).val() )
	;})
	})
	$("#Doggie").change(function() { getKitty(s); })
	$("#Kitty").change(function() { getPig(s); })

Open in new window

0
 
Eddie ShipmanAll-around developerCommented:
You also forgot to empty #Doggie. What browser are you using?
0
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.

All Courses

From novice to tech pro — start learning today.