Solved

Three Listboxes, Third Not Going Empty

Posted on 2013-01-19
27
191 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
  • 10
  • 7
  • 4
  • +1
27 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
work fine for me
0
 

Author Comment

by:DS928
Comment Utility
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
Comment Utility
yes, for me it work fine, and yes, once you change the first one, the third one should become empty
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Try it  now, maybe it's Browser sensitive?
0
 
LVL 11

Expert Comment

by:mcnute
Comment Utility
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
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

 
LVL 11

Expert Comment

by:mcnute
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
OK getting closer!  Stay tuned!  Thank you!
0
 

Author Comment

by:DS928
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
If you do that, it will remove it entirely. They are <select> elements.
0
 

Author Comment

by:DS928
Comment Utility
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
Comment Utility
You also forgot to empty #Doggie. What browser are you using?
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

762 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

6 Experts available now in Live!

Get 1:1 Help Now