Solved

jQuery and Custom select problem

Posted on 2010-08-22
31
387 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
  • 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
 
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 500 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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…

743 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

11 Experts available now in Live!

Get 1:1 Help Now