Populating selectboxes with jQuery / Ajax problem in IE

Javascript coding ..

Moderators: egami, macek, gesf

Post Reply
User avatar
hinkeltje
New php-forum User
New php-forum User
Posts: 15
Joined: Thu Aug 25, 2011 10:51 pm

Mon Jun 18, 2012 11:21 pm

Hi everyone,

I am trying to get this example to work http://www.itasc-dev.com/makes/.
Copied it from http://forum.codecall.net/topic/59341-p ... ect-boxes/

The second selectbox need to be populated when a value is choosen in the first selectbox.
Same for the third box, that will be populated when a value is choosen in the second selectbox.
For some reason I get the impression that there is a problem passing back the founded data to the selectbox.

Added new info: Forget the question I wrote above. I figured out the script does actually work in Google Chrome and Firefox, but it does not work in Internet Explorer. How can I fix this problem?

This is the index.php code:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">

<!-- http://forum.codecall.net/topic/59341-php-sql-jquery-and-ajax-populate-select-boxes/ -->

<head>
	<title>Multiple Select Boxes</title>
	<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			//$('#loader').hide();
			$('#type').change(function() {                        
				$('#make').fadeOut();
				//'#loader').show();
				
				$.post("ajax/ajax_make.php", { 
					type: $('#type').val()
				}, function(response){
					setTimeout( function() { finishAjax('make', escape(response));
					}, 400);
				});

				return false;
            });


			$('#make').change(function(){
				$('#model').fadeOut();
				//$('#loader').show();
				$.post("ajax/ajax_model.php", {
					type: $('#type').val(),
					make: $('#make').val()
				}, function(response){
					setTimeout( function() { finishAjax('model', escape(response));
					}, 400);
				});
				return false;
            });

			});

			function finishAjax(id, response){
				//$('#loader').hide();
				$('#'+id).html(unescape(response));
				$('#'+id).fadeIn();
            }

	</script>
</head>

<body>

<!--<div id="loader"><strong>Loading...</strong></div>-->

<form name="theform" id="form" method="POST" action="search.php">
	
	<label for="type">Type:</label>
		<select id="type" name="type">
			<?php
				include('lib/class_dbcon.php');
				$connect = new doConnect();

				$q = mysql_query("SELECT * FROM types ORDER BY t_id ASC");
				while($row = mysql_fetch_assoc($q))
				{
					echo '<option value="'.$row['t_id'].'">'.$row['t_caption'].'</option>';
				}

				$connect->disc();
			?>
		</select>

        <label for="make">Make:</label>
			<select id="make" name="make">
				<option value="">-- Select Make (html) --</option>
            </select>

		<label for="model">Model:</label>
			<select id="model" name="model">
				<option value="">-- Select Model (html) --</option>
            </select>

		<input type="submit" name="submit" value="Search">
		
</form>
</body>
</html>

User avatar
minimihi
New php-forum User
New php-forum User
Posts: 236
Joined: Sat Apr 14, 2012 11:57 am
Location: Vilnius, Lithuania

Fri Jun 22, 2012 11:42 am

Don't use escape() and unescape() since your messing up your html. Chrome and Firefox are so generous to fix it up for you, but IE just doesn't care.

Also I would get rid of setTimeout function.

See attachment for screenshot of HTML in IE. You should notice that there are lots of unwanted slashes
Attachments
untitled.JPG
untitled.JPG (66.76 KiB) Viewed 1013 times

User avatar
hinkeltje
New php-forum User
New php-forum User
Posts: 15
Joined: Thu Aug 25, 2011 10:51 pm

Mon Jun 25, 2012 2:15 am

Thanks minimihi for you answer.
Since I am a beginning Javascript developer I really wouldn't know how to rewrite the script without the escape and unescape.
Could you please help me a bit more? I would really appreciate that.

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest