Jump to content

Problem with select element Styling after loaded with Ajax


Aleroth

Recommended Posts

Problem with Auto-complete Styling in JQuery

Hi there, I think i should ask this question here, if not...I Apologize. Okay here goes:

 

I have a Country/City list in my SQL database and access it with PHP using a select element in php. I use the Chosen Jquery Plugin for the styling of these select elements.

 

Now my problem is that i want only the cities of the country selected to display, and i got that right, but then when it loads the city list, it discards the Chosen Style to the select element.

 

To load my City Select data i use the onChange event. here is the code:

 

function getXMLHTTP() { //fuction to return the xml http object
	var xmlhttp=false;	
	try{
		xmlhttp=new XMLHttpRequest();
	}
	catch(e)	{		
		try{			
			xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			try{
			xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch(e1){
				xmlhttp=false;
			}
		}
	}
	return xmlhttp;
}
function getCity(strURL) {		
	var req = getXMLHTTP();
	if (req) {
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				// only if "OK"
				if (req.status == 200) {						
					document.getElementById('citydiv').innerHTML=req.responseText;					
				} else {
					alert("There was a problem while using XMLHTTP:\n" + req.statusText);
				}
			}				
		}			
		req.open("GET", strURL, true);
		req.send(null);
	}
}

 

that is the Javascript i use to load the file combined with this:

 

<select name="country" id="country" data-placeholder="Choose a Country..." class="chzn-select-deselect" onChange="getCity('findcity.php?country='+this.value)">

 

You can view the Chosen Plugin details here - http://harvesthq.github.com/chosen/

 

the PHP file "findcity.php" looks like this:

<?php
include 'connection.php';

$query  = "SELECT fips, full_name FROM cities WHERE fips='$country' ORDER BY full_name";
$getCity = mysql_query($query) or die('Error : ' . mysql_error());

include 'closedb.php';
?>
<select name="city" id="city" data-placeholder="Choose a City..." class="chzn-select-deselect">
 <option selected="selected"></option>
  <?php while ($row = mysql_fetch_array($getCity)) {?>
  <option value="<?php echo $row2['full_name']; ?>">
  <?php echo $row['full_name']; ?></option>
  <?php } ?>
</select>

 

Now it works fine, when you select the country it shows the city list fine. But it doesn't have the Chosen Style like the country does. it has all the class's it needs added etc. but yet nothing.

 

Its like the Ajax loading makes the select element loose the class added to it. Is there a way of preventing this or maybe adding the class again after it loaded?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...