[RESOLVED] AJAX Drop Down Problem

jaswinder_rana

Hi:

I have a page which returns list persons. This page is accessed from a text box with AJAX. When user types in something, this page is accessed to get all the persons starting with that character(s).

It's working fine but there is one slight problem. It doesn't display correct names when users have accent in their names.

For example there is a user with last name "Magné" but it appears as:

Magn� (in Firefox)
Magn?a> (in IE)

Whats more is if I click that name to select it, it works in Firefox but not in IE.

Can anyone please tell me where I might be wrong?

The code I have is following

onchange.php


<table width="100%" cellpadding="2" cellspacing="0">
	<tr class="section">
		<td align="center" class="closebox">

		<a href="javascript:void(0);" onclick="autosuggest_hide('{$textbox}','{$resultsdiv}');">
			x (Close)
		</a>
		<div>
			{$count_list_persons} record(s) found.
		</div>
	</td>
</tr>
	{foreach from=$list_persons item=value key=key}
	{cycle values="firstrow,secondrow" assign="row_color"}
<tr class="{$row_color}">
	<td>
		<a href="javascript:void(0);" onclick="autosuggest_select('{$textbox}','{$resultsdiv}','{$value.NAME|escape:"quotes"}','{$value.ID}',{$append},'{$append_str}');">
			{$value.NAME}</a>
	</td>
</tr>
	{/foreach}

</table>

Text box to select persons

<div id="id_preference_maindiv" style="position:absolute;top:115px;right:25px;width:200px;height:300px;border:none;display:none;">
			<iframe id="id_preference_iframe" frameborder="0" style="position:absolute;top:0px;left:0px;width:300px;height:300px;"></iframe>
			<div id="serial_results3" class="ajaxdropdown" />
			</div>
		</div>

template_barebone.php is simply template with <HTML> and <body> tags in it (and some meta tags)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<title>{$title|default:"Software"}</title>
{literal}
<script type="text/JavaScript" src="{/literal}{$tpl_dir}{literal}/js/ajax_dropdown.js"></script>
<script type="text/JavaScript" src="{/literal}{$tpl_dir}/js/js.js{literal}"></script>
</head>
<body>

	<div id="body_page">
		{$body|default:""}
	</div>

</body>
</html>

ajax_dropdown.js


var last_type = 0;

function autosuggest(srcTextbox,textbox, resultsdiv, backendfile, extraquerystring,append,appendStr) {


  resultsdiv = document.getElementById(resultsdiv);

  var d = new Date();

   // if they aren't typing too fast or they haven't started typing
  if (d.getTime() - last_type > 100 || last_type == 0) {
    // start the request
    var objXML = zXmlHttp.createRequest();
      // open the ajax serials page and pass the search and company
	var joinChar = "?";
	if(backendfile.indexOf('?'))
	{
		joinChar = "&";
	}
	var url = backendfile + joinChar + "textbox=" + textbox.id + "&resultsdiv=" + 
          resultsdiv.id + "&append=" + append + "&append_str=" + appendStr   + "&search=" + srcTextbox.value + extraquerystring;

  objXML.open("get", url, true);
  objXML.onreadystatechange = function () {
    if (objXML.readyState == 4) {
      // success, so pass the result to the page

	autosuggest_show(srcTextbox.id,textbox.id,resultsdiv.id);



      result = objXML.responseText;

      if (result != "-1") {
        resultsdiv.innerHTML = result;
      } else {
        // an error (-1) was passed from the page
        autosuggest_hide(textbox.id,resultsdiv.id);
      }
    }
  }
  objXML.send(null);
} else {
  // typing too fast, hide the box
   autosuggest_hide(textbox.id,resultsdiv.id);

}

// get the new last typed time
var d = new Date();
last_type = d.getTime();
}
function autosuggest_show(srcTextbox,textbox,resultsdiv)
{

srcTextbox = document.getElementById(srcTextbox);

resultsdiv = document.getElementById(resultsdiv);// display the box

	resultsdiv.style.display='block';

var pos = findPos(srcTextbox);

resultsdiv.style.top = (pos[1] + 20) + 'px';
resultsdiv.style.left = pos[0] + 'px';

resultsdiv.style.top = '0px';
resultsdiv.style.left = '0px';

//Change positoin of div and iframe

textbox_maindiv = document.getElementById(textbox + '_maindiv');
textbox_iframe = document.getElementById(textbox + '_iframe');

if(textbox_maindiv)
{
		textbox_maindiv.style.display='block';
	textbox_maindiv.style.top = (pos[1] + 20) + 'px';
	textbox_maindiv.style.left = pos[0] + 'px';
}
if(textbox_iframe)
{
	textbox_iframe.style.display ='block';
	textbox_iframe.style.top = '0px';
	textbox_iframe.style.left = '0px';
}

}
function autosuggest_hide(textbox,resultsdiv)
{
	textbox_maindiv = document.getElementById(textbox + '_maindiv');
	textbox_iframe = document.getElementById(textbox + '_iframe');

resultsdiv = document.getElementById(resultsdiv);


if(textbox_maindiv)
{
	textbox_maindiv.style.top = '0';
	textbox_maindiv.style.top = '0';
	textbox_maindiv.style.display = 'none';
}
if(textbox_iframe)
{
	textbox_iframe.style.top = '0';
	textbox_iframe.style.top = '0';
	textbox_iframe.style.display = 'none';
}

resultsdiv.style.display = 'none';

}
function autosuggest_select(textbox, resultsdiv, text,value,append,appendStr) {
  textbox_label = document.getElementById(textbox + '_label');


  textbox = document.getElementById(textbox);

  resultsdiv = document.getElementById(resultsdiv);
	if(append)
	{
		textbox.value = textbox.value + ((textbox.value =="")?value:appendStr + value);
		if(textbox_label)
		{
			textbox_label.value = textbox_label.value + ((textbox_label.value =="")?text:appendStr + text);
		}
	}
	else
	{
		textbox.value = value;
		if(textbox_label)
		{
			textbox_label.value = text;
		}
	}
	autosuggest_hide(textbox.id,resultsdiv.id);

}

function serial_onchange(srcTextbox,textbox, resultsdiv, page,extraParams,append,appendStr) {
	extraParams = (typeof extraParams == "undefined")?"":extraParams;
	append = (typeof append == "undefined")?0:append;
	appendStr = (typeof appendStr == "undefined")?"":appendStr;


  autosuggest(srcTextbox,textbox, resultsdiv, page,extraParams,append,appendStr);

}

rulian

I havent gone through your code, but first things first is to suspect if your database is capable of handling such characters.
If it's displaying, then it's not your JS, it's doing it's job. So it comes down to PHP and the database. Since it's returning something, it's also not your PHP since PHP wouldnt convert those characters over. The only thing that could effect the return and still return something would be your database. Check out how you are storing the information, and test to whether it can store and search non standard english characters. One of the biggest oversights large DBA's have is multicharacter support and that can run issues with your system, because often the littlest fix has large consequences.

rulian

If you can still click on the name to make a submission in JS however, and it works in firefox but not IE, then you have an incompability issue with IE, which to any JS developer is no suprise, you just have to troubleshoot that specific problem as well.

jaswinder_rana

Thanks.

I tested it. It's not DB problem because if I access the PHP page (which returns data for AJAX Drop Down) it shows correct characters.

Although I found the problem and fixed it. For some reason, even though I specified "UTF-8" in Content-Type META tag for the PHP page (accessed by Drop Down), it was not implementing it.

So, in PHP I forced it to return "UTF-8" type with header('Content-Type: text/html; charset=UTF-8');

It's now working fine.

Thanks for your answer though. I checked it so in the end I just did trial by error in my PHP page and it worked.

rulian

That was a good catch, I would not have thought of the character set in the header.
Remember to mark this thread solved to help others with similar problems