• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 396
  • Last Modified:

jQuery and Custom select problem

Hi All

Please see the QUICK JOB SEARCH box on the left column of this website: http://dev.leonbrits.com/

I am using a custom styled select, as well as jQuery to display the results. All is displayed well when the page loads, however when I change the country field, the city field loads with the cities, however does not apply the custom style.

Any ideas how I can fix this? Or, if there is a better way, i.e. just appending the new options then please let me know.

Files attached.

Cheers
Leon
form-search.php
get-City-Search.php
0
leapingleon
Asked:
leapingleon
  • 15
  • 15
1 Solution
 
mattibuttCommented:
your cities are not done same way you done countires try replicating country and see what happens
0
 
leakim971PluritechnicianCommented:
Try to reset the z-index of the select box in the callback function :

$("#City").css("zIndex",-1);
$("#txtCity").find(".selectedTxt").css("zIndex",99);
0
 
leapingleonAuthor Commented:
leakim, without sounding too stupid, which is the callback function? new to jQuery, is where I put it below correct?
function showCity(str,str2)
							{
								if (str=="")
								  {
								  document.getElementById("txtCity").innerHTML="";
								  return;
								  }
								if (window.XMLHttpRequest)
								  {// code for IE7+, Firefox, Chrome, Opera, Safari
								  xmlhttp2=new XMLHttpRequest();
								  }
								else
								  {// code for IE6, IE5
								  xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
								  }
								xmlhttp2.onreadystatechange=function()
								  {
								  $("#City").css("zIndex",-1);
								  $("#txtCity").find(".selectedTxt").css("zIndex",99);
								  if (xmlhttp2.readyState==4 && xmlhttp2.status==200)
								    {
								    document.getElementById("txtCity").innerHTML=xmlhttp2.responseText;
								    }
								  }
								xmlhttp2.open("GET","/get_City_Search.php?q="+str+"&def="+str2,true);
								xmlhttp2.send();
							}

Open in new window

0
Independent Software Vendors: 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!

 
leakim971PluritechnicianCommented:
>new to jQuery, is where I put it below correct?

yes you're correct :




xmlhttp2.onreadystatechange = function() {
   if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
	 $("#City").css("zIndex",-1);
	 $("#txtCity").find(".selectedTxt").css("zIndex",99);
// document.getElementById("txtCity").innerHTML=xmlhttp2.responseText;
   }
}

Open in new window

0
 
leapingleonAuthor Commented:
Cool, changed it with your code above with the commented out line. It does not change the custom select, which is good, however it does not display the list (obviously). When I uncomment the line it goes back to the problem.

Currently the site still has it uncommented if you want to take a look...
function showCity(str,str2)
{
	if (str=="")
	{
		document.getElementById("txtCity").innerHTML="";
	  	return;
	}
	
	if (window.XMLHttpRequest)
	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
	  	xmlhttp2=new XMLHttpRequest();
	}
	else
	{
		// code for IE6, IE5
	  	xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp2.onreadystatechange = function() 
	{
			if (xmlhttp2.readyState==4 && xmlhttp2.status==200) 
			{
				$("#City").css("zIndex",-1);
				$("#txtCity").find(".selectedTxt").css("zIndex",99);
			//document.getElementById("txtCity").innerHTML=xmlhttp2.responseText;
			}
	}

	xmlhttp2.open("GET","/get_City_Search.php?q="+str+"&def="+str2,true);
	xmlhttp2.send();
}

Open in new window

0
 
leakim971PluritechnicianCommented:
try :


$("txtCity").append(xmlhttp2.responseText);
				$("#City").css("zIndex",-1);
				$("#txtCity").find(".selectedTxt").css("zIndex",99);

Open in new window

0
 
leapingleonAuthor Commented:
No Luck...
function showCity(str,str2)
{
	if (str=="")
	{
		document.getElementById("txtCity").innerHTML="";
	  	return;
	}
	
	if (window.XMLHttpRequest)
	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
	  	xmlhttp2=new XMLHttpRequest();
	}
	else
	{
		// code for IE6, IE5
	  	xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp2.onreadystatechange = function() 
	{
		if (xmlhttp2.readyState==4 && xmlhttp2.status==200) 
		{
			$("txtCity").append(xmlhttp2.responseText);
			$("#City").css("zIndex",-1);
			$("#txtCity").find(".selectedTxt").css("zIndex",99);
			//document.getElementById("txtCity").innerHTML=xmlhttp2.responseText;
		}
	}

	xmlhttp2.open("GET","/get_City_Search.php?q="+str+"&def="+str2,true);
	xmlhttp2.send();
}

Open in new window

0
 
leakim971PluritechnicianCommented:
typo error, we use the id so # is missing :

$("#txtCity").append(xmlhttp2.responseText);
$("#City").css("zIndex",-1);
$("#txtCity").find(".selectedTxt").css("zIndex",99);
0
 
leapingleonAuthor Commented:
now it leaves the previous select and adds a new one... give it a test and see...
0
 
leakim971PluritechnicianCommented:
currently it don't work ?
0
 
leapingleonAuthor Commented:
no it doesnt. been playing around a bit, you want me to change back to like it was after your last response?
0
 
leakim971PluritechnicianCommented:
>you want me to change back to like it was after your last response?
please, I want to check index

before, try to hide the selectbox :


$("#txtCity").append(xmlhttp2.responseText);
$("#City").hide();
$("#txtCity").find(".selectedTxt").css("zIndex",99);

Open in new window

0
 
leapingleonAuthor Commented:
changed it back. this is starting to get to me, just cant get it working. are there any other options? is there a way to just take the results and maybe append? tried a few things, but just cant get it going...
0
 
leapingleonAuthor Commented:
i have it like you just asked now, and is the same  as before you came back...
0
 
leapingleonAuthor Commented:
I dont know if these will help at all, its what is used to create the selects...
/*
	Stylish Select 0.4.1 - $ plugin to replace a select drop down box with a stylable unordered list
	http://scottdarby.com/
	Copyright (c) 2009 Scott Darby
	Requires:jQuery 1.3 or newer
	Dual licensed under the MIT and GPL licenses.
*/

.selectedTxt
{
	overflow: hidden;
	height: 15px;
}

.selectedTxt,.newListSelected,ul.newList li,ul.newList li a
{
	font: 10px/14px verdana !important;
}

.newListSelected
{
	text-indent: 6px;
	background: #FFF url(/images/dropdown.gif) no-repeat left top;
	color: #000;
	height: 19px;
	margin-bottom: 4px;
	padding: 0;
	width: 163px;
	cursor: default;
	color: #686868;
}

.newListSelected div
{
	display: block;
	padding: 2px 21px 2px 2px;
	text-align: left !important;
	width: 138px;
}

ul.newList *
{
	margin: 0;
	padding: 0;
	cursor: default;
}

ul.newList
{
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #000;
	width: 160px;
	background-color: #EBEBEB;
	border: 1px solid #D2D2D2;
	left: 1px !important;
	height: auto;
	overflow: auto;
	text-align: left!important;
	position: absolute;
}

ul.newList li
{
	padding: 0 !important;
	text-indent: 0px;
	background: none;
}

ul.newList li a
{
	color: #000;
	text-decoration: none !important;
	display: block;
	padding: 3px 6px 3px 7px;
}

ul.newList li a:focus
{
	-moz-outline-style:none;
}

.hiLite
{
	background-color: #E4E4E4!important;
	color:black !important;
}

.newListHover
{
	background: #ccc!important;
	color: #000!important;
}

.wide_selects .newListSelected
{
	width: 183px !important;
	background-image: url(/images/dropdown-wide.gif) !important;
}

.wide_selects .newListSelected div
{
	width: 158px !important;
}

.wide_selects ul.newList
{
	width:180px !important;
}

.small_selects .newListSelected
{
	width: 106px !important;
	background-image: url(/images/dropdown-small.gif) !important;
}

.small_selects .newListSelected div
{
	width: 81px !important;
}

.small_selects ul.newList
{
	width: 103px !important;
}

Open in new window

stylish-select.js
0
 
leakim971PluritechnicianCommented:
currently you've two select with the same name and same id that's why it don't work.
you need to :

remove the previous selectbox

or

return only the options (from get-City-Search.php) and put them in the select after removing the previous options


$("#City").remove();
$("#txtCity").append(xmlhttp2.responseText);
$("#City").css("zIndex",-1);
$("#txtCity").find(".selectedTxt").css("zIndex",99);

Open in new window

0
 
leapingleonAuthor Commented:
It is now only returning the options, and the script changed like you said, however I think its appending to the end of the select and not in the options...
function showCity(str,str2)
{
	if (str=="")
	{
		document.getElementById("txtCity").innerHTML="";
	  	return;
	}
	
	if (window.XMLHttpRequest)
	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
	  	xmlhttp2=new XMLHttpRequest();
	}
	else
	{
		// code for IE6, IE5
	  	xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp2.onreadystatechange = function() 
	{
		if (xmlhttp2.readyState==4 && xmlhttp2.status==200) 
		{
			//$("#txtCity").append(xmlhttp2.responseText);
			//$("#City").css("zIndex",-1);
			//$("#txtCity").find(".selectedTxt").css("zIndex",99);
			
			//$("#txtCity").append(xmlhttp2.responseText);
			//$("#City").hide();
			//$("#txtCity").find(".selectedTxt").css("zIndex",99);
			
			$("#City").remove();
			$("#txtCity").append(xmlhttp2.responseText);
			$("#City").css("zIndex",-1);
			$("#txtCity").find(".selectedTxt").css("zIndex",99);

			//document.getElementById("txtCity").innerHTML=xmlhttp2.responseText;
		}
	}

	xmlhttp2.open("GET","/get_City_Search.php?q="+str+"&def="+str2,true);
	xmlhttp2.send();
}

Open in new window

0
 
leakim971PluritechnicianCommented:
no the last script remove the select and add the new one :

it was the first proposition
0
 
leapingleonAuthor Commented:
tried that too, however

$("#City").remove();

does not remove it, instead I used

document.getElementById("txtCity").innerHTML="";

which removes it, however it is the same as we started.

There were only two select when you told me to append, i.e.:

$("#txtCity").append(xmlhttp2.responseText);

however, from the beginning this was removing the old select:

//document.getElementById("txtCity").innerHTML=xmlhttp2.responseText;

and addinf the new one, however without the custom style...

function showCity(str,str2)
{
	if (str=="")
	{
		document.getElementById("txtCity").innerHTML="";
	  	return;
	}
	
	if (window.XMLHttpRequest)
	{
		// code for IE7+, Firefox, Chrome, Opera, Safari
	  	xmlhttp2=new XMLHttpRequest();
	}
	else
	{
		// code for IE6, IE5
	  	xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
	}
	
	xmlhttp2.onreadystatechange = function() 
	{
		if (xmlhttp2.readyState==4 && xmlhttp2.status==200) 
		{			
			//$("#City").remove();
			document.getElementById("txtCity").innerHTML="";
			$("#txtCity").append(xmlhttp2.responseText);
			$("#City").css("zIndex",-1);
			$("#txtCity").find(".selectedTxt").css("zIndex",99);

			//document.getElementById("txtCity").innerHTML=xmlhttp2.responseText;
		}
	}

	xmlhttp2.open("GET","/get_City_Search.php?q="+str+"&def="+str2,true);
	xmlhttp2.send();
}

Open in new window

0
 
leakim971PluritechnicianCommented:
document.getElementById("txtCity").innerHTML="";

remove your custom select (div) and the true one (select)

Sorry, the good syntax is : $("#txtCity").remove("#City");
$("#txtCity").remove("#City"); // we remove the old true select
$("#txtCity").append(xmlhttp2.responseText); // we add the new Select and its Options
$("#City").css("zIndex",-1); // We set the z-index of the true Select with a low value
$("#txtCity").find(".selectedTxt").css("zIndex",99); // We set the z-index of the fake select with a high value (greater than the true select)

Open in new window

0
 
leapingleonAuthor Commented:
was really hoping that would work... still does not seem to be taking out the old one.

i even tried renaming the new select (to be different from the old) but it still appears without the custom style, so dont think its because they are both named the same...
0
 
leakim971PluritechnicianCommented:
Replace your current showCity function with this one :


function showCity(str, str2) {
		$("#txtCity").html("");
		if(str == "") return;
		$.ajax({
			url : "get_City_Search.php",
			data: "q=" + str + "&def=" + str2,
			success: function(data) {
				//$("#txtCity").html("");
				$("#txtCity").append(data);
				$("#txtCity select").addClass("custom").attr("name","City").attr("id", "Country").css({"float":"right","display":"none"}); 
				$("#txtCity").append("<div class='newListSelected'>City</div><ul class='newList' style='left: 0px; display: none; top: 20px; height: 100px; ' />");
				$("#txtCity select option").each(function() {
					$("ul", "#txtCity").append("<li><a href='JavaScript:void(0);'>" + $(this).text() + "</a></li>");
				});
			}
		});
	}

Open in new window

0
 
leapingleonAuthor Commented:
That is almost there, I can see it change, and when I view source is can see the options there, however I cant select the box, its just dead...
0
 
leakim971PluritechnicianCommented:
Check this : http://api.jquery.com/live/

in stylish-select, replace :

line 135, replace : $containerDivText.click(function (event) {
by : $containerDivText.live('click', function (event) {

and

line 152, replace : $newLi.click(function (e) {
by : $newLi.live('click', function (event) {
0
 
leapingleonAuthor Commented:
BTW I do appreciate your persistence with this...

That just makes them all un-actionable...
0
 
leakim971PluritechnicianCommented:
No worry

I need to go, for now I see only one difference give it a try :

(see you later)

replace line 11 : 
$("#txtCity").append("<div class='newListSelected'>City</div><ul class='newList' style='left: 0px; display: none; top: 20px; height: 100px; ' />");

by : 
$("#txtCity").append("<div class='newListSelected' style='z-index: 1019; position: static; background-position: 0% 0%; '>City</div><ul class='newList' style='left: 0px; display: none; top: 20px; height: 100px; ' />");

Open in new window

0
 
leakim971PluritechnicianCommented:
here the solution, update the success function of the ajax call like this :


success: function(data) {
				$("#txtCity").html("");
				$("#txtCity").append(data);
				$("#txtCity select").addClass("custom").attr("name","City").attr("id", "City").css({"float":"right","display":"none"}).resetSS();
			}

Open in new window

0
 
leakim971PluritechnicianCommented:
All script :


<script language="javascript" type="text/javascript">

	function showCity(str, str2) {
		if (str=="") {
			document.getElementById("txtCity").innerHTML="";
			return;
		}
		$.ajax({
			url : "get_City_Search.php",
			data: "q=" + str + "&def=" + str2,
			success: function(data) {
				$("#txtCity").html(data);
				$("#txtCity select").addClass("custom").attr("name","City").attr("id", "City").css({"float":"right","display":"none"}).resetSS();
			}
		});
	}

	function submitLoginform() {
		document.searchForm.submit();
	}

	function clickclear(thisfield, defaulttext) {
		if(thisfield.value == defaulttext) {
			thisfield.value = "";
		}
	}
	
	function clickrecall(thisfield, defaulttext) {
		if(thisfield.value == "") {
			thisfield.value = defaulttext;
		}
	}
	
</script>

Open in new window

0
 
leapingleonAuthor Commented:
You really are a Genius, and I really thank you for your persistence.

Thank you so much, I wish I could give you bonus points.
0
 
leapingleonAuthor Commented:
Thank you so much for your persistence. I really appreciate it.
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks a lot for the points!
0

Featured Post

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!

  • 15
  • 15
Tackle projects and never again get stuck behind a technical roadblock.
Join Now