Solved

Three Listboxes, Third Not Going Empty

Posted on 2013-01-19
27
196 Views
Last Modified: 2013-02-10
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

0
Comment
Question by:DS928
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 7
  • 4
  • +1
27 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 38797648
work fine for me
0
 

Author Comment

by:DS928
ID: 38797682
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38797694
yes, for me it work fine, and yes, once you change the first one, the third one should become empty
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:mcnute
ID: 38798232
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
 

Author Comment

by:DS928
ID: 38798576
hmmmmmmm, I can't seem to duplicate it?  Why would that happen?
Is there a way to avoid it?
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38798608
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 38798612
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
 
LVL 82

Expert Comment

by:leakim971
ID: 38798634
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
 

Author Comment

by:DS928
ID: 38798934
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
 
LVL 11

Expert Comment

by:mcnute
ID: 38798939
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
 

Author Comment

by:DS928
ID: 38798955
Try it  now, maybe it's Browser sensitive?
0
 
LVL 11

Expert Comment

by:mcnute
ID: 38799027
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
 
LVL 11

Expert Comment

by:mcnute
ID: 38799111
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
 

Author Comment

by:DS928
ID: 38799302
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
 
LVL 11

Expert Comment

by:mcnute
ID: 38799339
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
 

Author Comment

by:DS928
ID: 38799369
OK getting closer!  Stay tuned!  Thank you!
0
 

Author Comment

by:DS928
ID: 38801841
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
 

Author Comment

by:DS928
ID: 38805646
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38805760
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
 

Author Comment

by:DS928
ID: 38807090
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38810316
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
 
LVL 11

Expert Comment

by:mcnute
ID: 38810999
Try to use html(''); instead of empty(); like so:

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

Open in new window

0
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38811136
If you do that, it will remove it entirely. They are <select> elements.
0
 

Author Comment

by:DS928
ID: 38819857
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
 
LVL 26

Expert Comment

by:EddieShipman
ID: 38820444
You also forgot to empty #Doggie. What browser are you using?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Fix Form size HTML 16 30
Drop down list show all elements but disabled for selection 6 31
Html date format 9 20
Table header must be on top 2 25
Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

763 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