Solved

Javascript / Ajax

Posted on 2014-07-24
12
123 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
  • 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
 

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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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 300 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 108

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 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 200 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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now