SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Umm. PHP Guru....Naaaah jaswinder_rana's Avatar
    Join Date
    Jul 2004
    Location
    canada
    Posts
    3,193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    AJAX Drop Down Problem

    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
    PHP Code:

    <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}');">
                    
    (Close)
                </
    a>
                <
    div>
                    {
    $count_list_personsrecord(sfound.
                </
    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
    Code:
    <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)
    PHP Code:
    <!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
    Code:
    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);
    
    }
    ---------------------------
    Errors = Improved Programming.
    My Site

  2. #2
    Umm. PHP Guru....Naaaah jaswinder_rana's Avatar
    Join Date
    Jul 2004
    Location
    canada
    Posts
    3,193
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please somebody?
    ---------------------------
    Errors = Improved Programming.
    My Site


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •