...

View Full Version : Editable Combo - does not work in IE



h0tice
07-30-2010, 01:02 PM
Hello all,

I have a form which contains some fields like company_name, address, phone, email etc.

Also, I have a database with companies. I want that, when typing the beginning of the company name, a combo box to suggest all companies that match that text. I want that when a company is selected from the combo, all other textboxes to be filled with the correct info from the database. Also, I want that the user to be able to write a company that is not registered in the database.

What I have done until now:
For the editable combo I used the dhtmlxcombo from here: http://dhtmlx.com/docs/products/dhtmlxCombo/ (Filtering mode: (filter existing list)). I'm not a scripting expert, so I think I cannot build this combo all by myself.

I modified just one thing. At the begining, the dhtmlxcombo.js file contained something like this:


if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z

I added z.id='dest_company';, so the file looks something like this, now:


if (tab)z.tabIndex=tab;z.style.width = (width-19)+'px';self.DOMelem.appendChild(z);z.id='dest_company';self.DOMelem_input = z;z = document.createElement('input');z.type = 'hidden';z.name = name;self.DOMelem.appendChild(z);self.DOMelem_hidden_input = z;z = document.createElement('input');z.type = 'hidden';z.name = (name||"").replace(/(\]?)$/, "_new_value$1");z.value="true";self.DOMelem.appendChild(z);self.DOMelem_hidden_input2 = z};dhtmlXCombo_defaultOption.prototype._DrawHeaderButton = function(self, name, width)


The text field 'dest_company' is generated like this:


<select name="dest_company" id="dest_company" OnChange="SelectReceiver(document.comanda.dest_company.value);" style="width:206px;" tabindex="10">
<?php echo '
<option value=""></option>';

$address_result = mysql_query("SELECT * FROM `webdb_".$_COOKIE['user']."` ORDER BY companie ASC");
while($row = mysql_fetch_array($address_result))
{
echo '<option value="'.$row['id'].'">'.$row["companie"].'</option>';
}
echo '
</select>

<script>
var z = dhtmlXComboFromSelect("dest_company");
z.enableFilteringMode(true);
</script>';
?>


This is the SelectReceiver() function:


function SelectReceiver(id_dest)
{
if (id_dest=="")
{
document.getElementById("contact_destinatar").value="";
document.getElementById("adresa_destinatar").value="";
document.getElementById("oras_destinatar").value="";
document.getElementById("judet_destinatar").value="";
document.getElementById("zip_destinatar").value="";
document.getElementById("telefon_destinatar").value="";
document.getElementById("mail_destinatar").value="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//document.getElementById("detalii_destinatar").innerHTML=xmlhttp.responseText;
var response = eval(xmlhttp.responseText);
}
}
xmlhttp.open("GET","modifica_detalii_destinatar.php?q="+id_dest,true);
xmlhttp.send();
}


And the file modifica_detalii_destinatar.php looks like this:


<?php
$q=$_GET["q"];

include ('conectare.php');

$sql="SELECT * FROM `webdb_".$_COOKIE['user']."` WHERE id='".$q."'";

$result = mysql_query($sql);


while($row = mysql_fetch_array($result))
{
echo '

document.getElementById("contact_destinatar").value = "'.$row['contact'].'";
document.getElementById("adresa_destinatar").value = "'.$row['adresa'].'";
document.getElementById("oras_destinatar").value = "'.$row['oras'].'";
document.getElementById("judet_destinatar").value = "'.$row['judet'].'";
document.getElementById("zip_destinatar").value = "'.$row['zip'].'";
document.getElementById("telefon_destinatar").value = "'.$row['telefon'].'";
document.getElementById("mail_destinatar").value = "'.$row['mail'].'";

';
}
?>


All this is working just in Firefox. In IE, when I select a company from the combo box, an error is generated and no text box is completed with the correct data. The error I'm talking about is:

'document.comanda.compania_destinatar.value' is null or not an object

In Firefox, if I inspect element with Firebug, my select looks like this:


<div style="width: 204px;" class="dhx_combo_box ">
<input type="text" autocomplete="off" class="dhx_combo_input" tabindex="10" style="width: 185px;" id="companie_dest">
<input type="hidden" name="dest_company" value="45">
<input type="hidden" name="dest_company" value="false">
<img class="dhx_combo_img" src="codebase_xcombo/imgs/combo_select.gif">
</div>


Any help on this would be great.
Many thanks and best regards!

Kor
07-30-2010, 02:24 PM
No a bright idea to use eval()

And I think your PHP code returns those javascript code lines repeatedly, in duplicates - as many groups as your php while() loop turns. In fact, you preformed multiple echoes but following a single request, which is not a bright idea at all. You should PHP construct your result with the help of a while loop, and echo only the result of the construction, and only once, at the very end of the PHP code. In other words don't echo within a loop.

But in my opinion you have not chosen the best way. Either your PHP should echo only the necessary values for the javascript code, or it should echo the entire HTML code (the SELECT with his options) which will replace the old SELECT using innerHTML method.

Old Pedant
07-30-2010, 11:42 PM
Everything Kor said may be true, but that still doesn't explain why it doesn't work in IE.

In fact, the error message you showed does *NOT* match any of the code being generated by PHP!!!!

Can you show us the actual <form> you are using? That is, the contents of comanda?

Even better, can you show us this live on a web site?

h0tice
08-02-2010, 09:49 AM
Thank you both for your answers.

@Kor: Thanks, I'll take care of your suggestions. But, for the moment, I must resolve that JS issue.

@Old Pedant: You can find the entire form accessing http://www.adrian-tudor.ro/webexpress
- login with test / 123
- press "Expediere noua" in the left menu
- the part of the form with this issue is in the right (the table named "Destinatar")

Many thanks for support and best regards.

abduraooft
08-02-2010, 10:14 AM
the part of the form with this issue is in the right (the table named "Destinatar") To expect a compatible output from all browsers, you need to supply a valid markup to it. Add a proper DOCTYPE (http://www.alistapart.com/articles/doctype/) at the top and then validate your markup using http://validator.w3.org/#validate_by_input to see the errors in it.

Kor
08-02-2010, 10:19 AM
Everything Kor said may be true, but that still doesn't explain why it doesn't work in IE.
IE is a little bit lazy while handling the multiple requests and/or multiple responses.

On the other hand, IE would take the second (and the all the following) request/answer from its cache, if the arguments of the repeated requests/answers are the same.

Kor
08-02-2010, 10:21 AM
@Kor: Thanks, I'll take care of your suggestions. But, for the moment, I must resolve that JS issue..
I think you should solve first the PHP issue. Don't echo a response within a loop! That is the main error.

h0tice
08-04-2010, 11:03 AM
I deleted the while loop in the modifica_detalii_destinatar.php and now, the file looks like this:


<?php
$q=$_GET["q"];
include ('conectare.php');

$sql="SELECT * FROM `webdb_".$_COOKIE['user']."` WHERE id='".$q."'";
$result = mysql_query($sql);

$row = mysql_fetch_array($result);

echo '
document.getElementById("contact_destinatar").value = "'.$row['contact'].'";
document.getElementById("adresa_destinatar").value = "'.$row['adresa'].'";
document.getElementById("oras_destinatar").value = "'.$row['oras'].'";
document.getElementById("judet_destinatar").value = "'.$row['judet'].'";
document.getElementById("zip_destinatar").value = "'.$row['zip'].'";
document.getElementById("telefon_destinatar").value = "'.$row['telefon'].'";
document.getElementById("mail_destinatar").value = "'.$row['mail'].'";
';
?>


Still this works just on Firefox (it has the same behavior in IE).
Cheers!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum