Ajax Talk - Asynchronous javascript and xml discussion board
 FAQ   Search    Usergroups      Register   Profile   Check your messages   Log in 
Signup now to enjoy a range of free membership advantages !!
Ajax Talk - Moderators Wanted
AJAX IE Lock Up Problem

 
Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX Programmers Exchange
View previous topic :: View next topic  
Author Message
grom358
New one
New one


Joined: 01 Jun 2008
Posts: 2

PostPosted: Sun Jun 01, 2008 11:00 pm    Post subject: AJAX IE Lock Up Problem Reply with quote

HTML example follows:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Options test</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
<!--
function createOption(text, value) {
   var option = document.createElement('option');
   option.setAttribute('value', value);
   option.appendChild(document.createTextNode(text));
   return option;
}

function removeOptions(selectElm) {
   selectElm.innerHTML = '';
   selectElm.appendChild(createOption("Loading please wait...", ""));
   selectElm.selectedIndex = 0;
}

function multiplerChange(multipler) {
   var addElm = document.getElementById('add');
   var resultElm = document.getElementById('results');

   addElm.options[0].text = 'Loading please wait...';
   resultElm.options[0].text = 'Loading please wait...';

   httpGet(getHttpRequest(), 'option_add_test.json.php', true,  { multipler : multipler }, function(options) {
      removeOptions(addElm);
      for(var i = 0, n = options.length; i < n; i++) {
         var option = options[i];
         addElm.appendChild(createOption(option.text, option.value));
         addElm.options[0].text = '(select)';
      }
   });

   httpGet(getHttpRequest(), 'options.json.php', true,  { multipler : multipler, add : addElm.value }, function(options) {
      removeOptions(resultElm);
      for(var i = 0, n = options.length; i < n; i++) {
         var option = options[i];
         resultElm.appendChild(createOption(option.text, option.value));
         resultElm.options[0].text = '(select)';
      }
   });
}

function test() {
   var multiplerElm = document.getElementById('multipler');
   var addElm = document.getElementById('add');
   var resultElm = document.getElementById('results');

   resultElm.options[0].text = 'Loading please wait...';

   httpGet(getHttpRequest(), 'options.json.php', true,  { multipler : multiplerElm.value, add : addElm.value }, function(options) {
      removeOptions(resultElm);
      for(var i = 0, n = options.length; i < n; i++) {
         var option = options[i];
         resultElm.appendChild(createOption(option.text, option.value));
         resultElm.options[0].text = '(select)';
      }
   });
}
//-->
</script>
</head>
<body>
<form action="options_test.html" method="post">
<table><tr>
   <th>Multipler</th>
   <td><select id="multipler" name="multipler" onChange="multiplerChange(this.value)">
      <option value="">(select)</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
   </select></td>
</tr><tr>
   <th>Add</th>
   <td><select id="add" name="add" onChange="test()">
      <option value="">(select)</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
   </select></td>
</tr><tr>
   <th>Results</th>
   <td><select id="results" name="results">
      <option value="">(select)</option>
   </select></td>
</tr></table>
</form>
</body>
</html>


The 'option_add_test.json.php' script:
Code:
<?php
$options = array();

if (!$_GET['multipler']) {
   $multipler = 1;
} else {
   $multipler = $_GET['multipler'];
}

for($i = 1; $i <= 5; $i++) {
   $v = $i * $multipler;
    $options[] = array('value' => $v, 'text' => $v);
}

header('Content-type: text/plain');
echo json_encode($options)."\n";


The 'options.json.php' script:
Code:
<?php
$options = array();

if (!$_GET['multipler']) {
   $multipler = 1;
} else {
   $multipler = $_GET['multipler'];
}

if (!$_GET['add']) {
   $add = 0;
} else {
   $add = $_GET['add'];
}

for($i = 1; $i <= 2000; $i++) {
   $v = $i * $multipler + $add;
    $options[] = array('value' => $v, 'text' => $v);
}

header('Content-type: text/plain');
echo json_encode($options)."\n";


The problem is when selecting an option from first select element (eg. multipler) there is noticable delay before the drop down list closes. It should close straight away and read 'Loading please wait...' in the other drop downs while the code is still running. Any ideas?

PS. One thing found out, when adding an alert('here') to bottom of multiplerChange, I can hear the alert beep as soon as I pick an item but the alert box doesn't display till after the other drop downs are populated via the ajax callback handler. Its as if the display is locked while the AJAX callbacks are running.

Below is the AJAX library
Code:
function getHttpRequest() {
   var httpRequest=false;
   /*@cc_on @*/
   /*@if (@_jscript_version >= 5)
   // JScript gives us Conditional compilation, we can cope with old IE versions.
   // and security blocked creation of the objects.
   try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (e) {
      try {
         httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
         httpRequest = false;
      }
   }
   @end @*/
   if (!httpRequest && typeof XMLHttpRequest!='undefined') {
      httpRequest = new XMLHttpRequest();
   }
   return httpRequest;
}

function httpGet(httpRequest, url, async, queryMap, handle) {
   var query = '';
   for(var field in queryMap) {
      if (query != '') {
         query += '&';
      }
      query += field + '=' + encodeURIComponent(queryMap[field]);
   }
   if (query != '') {
      url = url + '?' + query;
   }
   httpRequest.open("GET", url, async);
   if (async) {
      httpRequest.onreadystatechange = function() {
         if (httpRequest.readyState == 4) {
            if (handle && httpRequest.responseText != '') {
               var response = eval('(' + httpRequest.responseText + ')');
               handle(response);
            }
         }
      }
   }
   httpRequest.send(null);   
   if (!async) {
      var response = null;
      if (httpRequest.responseText != '') {
         response = eval('(' + httpRequest.responseText + ')');
      }
      if (handle) {
         handle(response);
      }
      return response;
   }
}

function httpPost(httpRequest, url, async, postMap, handle) {
   httpRequest.open("POST", url, async);
   httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   if (async) {
      httpRequest.onreadystatechange = function() {
         if (httpRequest.readyState == 4) {
            if (handle && httpRequest.responseText != '') {
               var response = eval('(' + httpRequest.responseText + ')');
               handle(response);
            }
         }
      }
   }
   var request = '';
   for(var field in postMap) {
      if (request != '') {
         request += '&';
      }
      request += field + '=' + encodeURIComponent(postMap[field]);
   }
   httpRequest.send(request);   
   if (!async) {
      var response = null;
      if (httpRequest.responseText != '') {
         response = eval('(' + httpRequest.responseText + ')');
      }
      if (handle) {
         handle(response);
      }
      return response;
   }   
}
Back to top
View user's profile Send private message
grom358
New one
New one


Joined: 01 Jun 2008
Posts: 2

PostPosted: Mon Jun 02, 2008 10:42 pm    Post subject: Reply with quote

A workaround I found is to use setTimeout:
Code:

function multiplerUpdate() {
  var multiplerElm = document.getElementById('multipler');
  var multipler = multiplerElm.value;

   httpGet(getHttpRequest(), 'option_add_test.json.php', true,  { multipler : multipler }, function(options) {
      removeOptions(addElm);
      for(var i = 0, n = options.length; i < n; i++) {
         var option = options[i];
         addElm.appendChild(createOption(option.text, option.value));
         addElm.options[0].text = '(select)';
      }
   });

   httpGet(getHttpRequest(), 'options.json.php', true,  { multipler : multipler, add : addElm.value }, function(options) {
      removeOptions(resultElm);
      for(var i = 0, n = options.length; i < n; i++) {
         var option = options[i];
         resultElm.appendChild(createOption(option.text, option.value));
         resultElm.options[0].text = '(select)';
      }
   });
}

function multiplerChange(multipler) {
   var addElm = document.getElementById('add');
   var resultElm = document.getElementById('results');

   addElm.options[0].text = 'Loading please wait...';
   resultElm.options[0].text = 'Loading please wait...';

   setTimeout("multiplerUpdate()', 20);
}
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX Programmers Exchange All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
 Advertisements
 XML & Copyright Notice 
    


Powered by phpBB © 2001, 2005 phpBB Group

What is according to Wikipedia: Ajax Web2.0 XML E4X


Link to our site:

  


del.icio.us digg spurl wists simpy newsvine blinklist furl blogmarks yahoo! myweb smarking ma.gnolia segnalo reddit fark technorati cosmos


Normal Bookmark


Partner Button Links:
Codecrunch.com: Webmaster Tutorials    One Ajax


Partner Text Links:
quomon | web20log | ajaxmatters | tableless | 456bereastreet | music charts | gift ideas | competitions | free xbox 360 | link trade ?


Credits:
it consultancy & project management lead generation zoekmachine optimalisatie steal these buttons seo expert