Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript / Ajax

Posted on 2014-07-24
12
Medium Priority
?
133 Views
Last Modified: 2014-08-19
Hi,

Please see the attached javascript function. There is a search filed on the form like this:

<input type="text" size="50" onkeyup="showHint(this.value)" onChange="chk_blnk(this.value);">

The <select> element is like this:

<select class="pt9" name="cnms" ID="cnms" size="23" onChange="go_cust();">
                                    
</select>

Everything works perfectly, except, for the end customer, if enough characters are typed that there is only ONE match in the database (i.e., ONE <option> in the options list), that item visibly appears twice. This (they report) happens in Win 7, Chrome browser & Macbook, Chrome.

I have Win 7 & it works in Chrome & Firefox; that is, if there is just ONE item matching the characters typed, only ONE appears. It also works correctly on the iPad (IOS, Safari). I have used the same character patterns that the cusomer uses to get duplicates.

I'm thinking, why fight it, just prevent another option item being inserted if one with the same option.text is already there. What would be the code I could insert in the JavaScript to make that work?

Thanks

My thinking is that
showhint.js
0
Comment
Question by:Richard Korts
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 2
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40218312
Got a live link?
Are you sure you are not getting confused with the selected value in the dropdown and the option value which is two different things giving the appearance of the same value twice.
0
 

Author Comment

by:Richard Korts
ID: 40218341
I can't give a live link unless there is a way to protect it; this is all password protected.

Is there a way in ee to do that where the general public DOES NOT see it?

I trust you, I could give you a guest login.

FYI, I CANNOT make it happen myself, but the customer sends screen shots. You PROBABLY could not see it either.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40218344
You can make a question private so it doesn't show up in the search engines but not after the fact.

Though if you cannot see it then I likely cannot either.
Can you attach the screenshot
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

Author Comment

by:Richard Korts
ID: 40218366
Screen Shot
dupe-names.jpg
0
 
LVL 58

Expert Comment

by:Gary
ID: 40218372
Well that is definitely duplicated.
Best check your server side code. Can you post it?
0
 

Author Comment

by:Richard Korts
ID: 40219705
Gary,

Attached is the code for the one upon which it produces duplicates.

But when I do this SAME one, no duplicates.

Thanks
get-cname1.php
0
 
LVL 58

Accepted Solution

by:
Gary earned 1200 total points
ID: 40219722
Code looks fine - no reason for a duplicate
Can you post js
What browser/os are they using do you know - it maybe an hooky bug

To be sure there isn't two entries in the table? You are saying the exact same name works fine for you?
0
 

Author Comment

by:Richard Korts
ID: 40219843
They use at least 2 environments; Win 7, Chrome and Macbook, Chrome.

I tried Win7, Chrome; works fine for me.

Attached is a screen shot of "SELECT * from customer where lastname like "ab%".

Richard
0
 
LVL 58

Expert Comment

by:Gary
ID: 40219850
Dunno then, without a link this cannot be really taken any further.
0
 
LVL 111

Expert Comment

by:Ray Paseur
ID: 40221815
JavaScript Code:

function showHint(str) {
	gstr = str;
	ml = 3;
	if (document.getElementById("n").checked) {
		ml = 5;
	}
	if (document.getElementById("w").checked) {
		ml = 6;
	}	
	if (str.length<ml) {
		document.getElementById("cnms").options.length = 0;
		return;
	}
	document.getElementById("cnms").options.length = 0;
	var xmlhttp=new XMLHttpRequest();
	xmlhttp.onreadystatechange=function() {
		if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			name_array=xmlhttp.responseText;
			if (name_array != "") {
				cnames = name_array.split(",");
				nr = cnames.length;
				var x = document.getElementById("cnms");
				for (i = 0; i < nr; i++) {
					tname = cnames[i];
					bgc = get_bgcolor(tname);
					ln = tname.length;
					bgcl = "";
					if (bgc != "") {
						tname = tname.substr(3,ln-3);
						if (bgc == 'r') {
							bgcl = "background-color:red;";
						}
						if (bgc == 'g') {
							bgcl = "background-color:green;";
						}
						if (bgc == 'y') {
							bgcl = "background-color:yellow;";
						}
						if (bgc == 'p') {
							bgcl = "background-color:#800080;";
						}
					}	
					cnum = tname.substr(0,5);
					ln = tname.length;
					tname = tname.substr(5,ln-5);
					var opt = document.createElement('option');
					opt.text = tname.replace("&#39;", "'");
					opt.value = cnum;
					if (cid != 0) {
						if (cid == cnum) {
							opt.selected = true;
							document.getElementById("cnms").selectedIndex = i;
						}
					}		
					if(bgcl != "") {
						opt.style=bgcl;
					}
					x.appendChild(opt);	
				}	
			}
		}

	}
	var timestamp = new Date();
	qstr = encodeURIComponent(str);
	if (document.getElementById("c").checked) {
		xmlhttp.open("GET","get_cname1.php?q="+qstr,true);
	}
	if (document.getElementById("a").checked) {
		xmlhttp.open("GET","get_addrn.php?q="+str,true);
	}
	if (document.getElementById("p").checked) {
		xmlhttp.open("GET","get_phonen.php?q="+str,true);
	}	
	if (document.getElementById("m").checked) {
		xmlhttp.open("GET","get_commentsn.php?q="+qstr,true);
	}
	if (document.getElementById("n").checked) {
		xmlhttp.open("GET","get_cnumbern.php?q="+str,true);
	}
	if (document.getElementById("w").checked) {
		xmlhttp.open("GET","get_wonumn.php?q="+str,true);
	}
	if (document.getElementById("e").checked) {
		xmlhttp.open("GET","get_emailn.php?q="+str,true);
	}	
	xmlhttp.send();
}

Open in new window

PHP Code:

<?
function get_color($x) {
	$r = '';
	if ($x['donotservice'] == 'Y') {
		$r = 'r';
	}	
	if ($x['vip'] == 'Y') {
		$r = 'p';
	}
	if ($x['lawngevity'] != "0000-00-00") {
		$r = 'g';
	}
	if ($x['commc'] == 'Y') {
		$r = 'y';
	}
	return $r;
}	
// ajax file to search for customer name
include "db_connect.php";
$str = urldecode(strtoupper($_GET['q']));
// break into two if a space is in it
$possp = strpos($str, " ");
if ($possp !== false) {
	$ss = explode (" ",$str);
	$qry = "SELECT * from customer where cid <> 0 and ((lastname like '%" . $ss[1] . "%' and firstname like '%" . $ss[0] . "%') or (lastname like '%" . $str . "%' or firstname like '%" . $str . "%')) order by lastname";
	//echo "qry = " . $qry . "<br>";
} else {	
	$qry = "SELECT * from customer where cid <> 0 and (lastname like '%" . $str . "%' or firstname like '%" . $str . "%') order by lastname";
}	
$res = mysql_query ($qry, $Link);
$nr = mysql_num_rows($res);
if ($nr == 0) {
	echo "no match";
} else {
	$r = "";
	for ($i = 0; $i < $nr; $i++) {
		$c = mysql_fetch_array($res);
		$cl = get_color($c);
		$cn = $c['cid'] . $c['firstname'] . " " . $c['lastname'];
		if ($cl != "") {
			$cn = "/" . $cl . "/" . $cn;
		}	
		if ($r == "") {
			$r = $cn;
		} else {
			$r = $r . "," . $cn;
		}
	}
}
echo $r;
exit;	
?>

Open in new window

0
 
LVL 111

Assisted Solution

by:Ray Paseur
Ray Paseur earned 800 total points
ID: 40221818
Here's what you want to learn about.  It's a pretty well understood design pattern.  I think it would be best to start over with the industry-standard solution rather than try to write your own cross-browser replacement for jQuery Autocomplete.
http://jqueryui.com/autocomplete/
http://api.jqueryui.com/autocomplete/
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question