?
Solved

jQuery and Custom select problem

Posted on 2010-08-22
31
Medium Priority
?
394 Views
Last Modified: 2012-05-10
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
Comment
Question by:leapingleon
[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
  • 15
  • 15
31 Comments
 
LVL 11

Expert Comment

by:mattibutt
ID: 33495662
your cities are not done same way you done countires try replicating country and see what happens
0
 
LVL 82

Expert Comment

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

Author Comment

by:leapingleon
ID: 33495929
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
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!

 
LVL 82

Expert Comment

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

Author Comment

by:leapingleon
ID: 33495982
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33496029
try :


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

Open in new window

0
 

Author Comment

by:leapingleon
ID: 33496047
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33496055
typo error, we use the id so # is missing :

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

Author Comment

by:leapingleon
ID: 33496079
now it leaves the previous select and adds a new one... give it a test and see...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33496688
currently it don't work ?
0
 

Author Comment

by:leapingleon
ID: 33496716
no it doesnt. been playing around a bit, you want me to change back to like it was after your last response?
0
 
LVL 82

Expert Comment

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

Author Comment

by:leapingleon
ID: 33496729
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
 

Author Comment

by:leapingleon
ID: 33496741
i have it like you just asked now, and is the same  as before you came back...
0
 

Author Comment

by:leapingleon
ID: 33496765
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
 
LVL 82

Expert Comment

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

Author Comment

by:leapingleon
ID: 33496845
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33496857
no the last script remove the select and add the new one :

it was the first proposition
0
 

Author Comment

by:leapingleon
ID: 33496877
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
 
LVL 82

Expert Comment

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

Author Comment

by:leapingleon
ID: 33496958
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
 
LVL 82

Expert Comment

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

Author Comment

by:leapingleon
ID: 33503663
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
 
LVL 82

Expert Comment

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

Author Comment

by:leapingleon
ID: 33504190
BTW I do appreciate your persistence with this...

That just makes them all un-actionable...
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33504391
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33527931
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 33527938
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
 

Author Comment

by:leapingleon
ID: 33535331
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
 

Author Closing Comment

by:leapingleon
ID: 33535350
Thank you so much for your persistence. I really appreciate it.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33535486
You're welcome! Thanks a lot for the points!
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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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 learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 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