Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML JavaScript

Populating selectboxes with jQuery / Ajax problem in IE

Javascript coding ..

Moderators: macek, egami, gesf

Populating selectboxes with jQuery / Ajax problem in IE

Postby hinkeltje » 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
hinkeltje
New php-forum User
New php-forum User
 
Posts: 14
Joined: Thu Aug 25, 2011 10:51 pm

Re: Populating selectboxes with jQuery / Ajax problem in IE

Postby minimihi » 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 305 times
User avatar
minimihi
New php-forum User
New php-forum User
 
Posts: 238
Joined: Sat Apr 14, 2012 11:57 am
Location: Vilnius, Lithuania

Re: Populating selectboxes with jQuery / Ajax problem in IE

Postby hinkeltje » 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.
User avatar
hinkeltje
New php-forum User
New php-forum User
 
Posts: 14
Joined: Thu Aug 25, 2011 10:51 pm


Return to JavaScript

Who is online

Users browsing this forum: No registered users and 1 guest

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.