We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

JavaScript Functions

Medium Priority
624 Views
Last Modified: 2012-05-06
Dear EE community,

I'm trying to implement a lookup function onto my system. A user enters a value into a form text field and presses a hotkey which I've assigned. The system then does an ODBC lookup and if the value in the text field matches that in the lookup database, JavaScript and PHP populates the Contact Name, Company Name, Telephone Number and Email fields.

I have also borrowed bits of code from OpenJS.com (this does the keyboard hotkey). Basically I would like to know if this is possible i.e. can it all be executed on the same page or should I go one step back and abuse $_GET?

At the moment I keep getting a fatal error on "an undefined function SalesRefLookup()" so probably best if we can work that one out before seeing if the keyboard shortcut key and event works.

Thank you.
<!-- this is a snip of my code, figured it would be easier this way than having you lot trawl through everything -->
 
<html>
<head>
<script type="text/javascript" src="hotkey.js"></script>
<script type="text/javascript">
function Show(elem) {
  document.getElementById(elem).style.display = '';
}
function Hide(elem) {
  document.getElementById(elem).style.display = 'none';
}
function showhide(elem0,elem1) {
  Show(elem0);
  Hide(elem1);
}
 
function SalesRefLookup() {
	var SalesRefField = document.GetElementByID('fSalesRef')
}
 
shortcut.add("F2",function() {
	var SalesRefField = document.GetElementByID('fSalesRef');
	});
</script>
</head>
 
<body>
 
<?php 
$sql_salesref = "SELECT * FROM division WHERE oprano = ". SalesRefLookup() ." ";
$rs = odbc_exec($odbc_conn,$sql_salesref);
while (odbc_fetch_row($rs))
{
	$divname=odbc_result($rs,"divname");
}
odbc_close($odbc_conn);
 
?>
 
<table>
<tr>
<td>Sales Ledger Ref No <form id="fSalesRef" name="fSalesRef" method="post" action=""><input name="fSalesRef" type="text" /></td>
<tr>
<td>Company Name <form id="fCompany" name="fCompany" method="post" action="">
      		<input type="text"  value="<?php if (SalesRefLookup() <> "") { echo SalesRefLookup(); } ?>" name="fCompany" /></td>
</table>
</body>
</head>
 
<!-- Just stuck to the Company Name field for now...figured if we can get this to work, the rest will as well -->
 
 
 
 
<!-- and here is the code which I borrowed for the keyboard hotkey, just in case you need it -->
 
/**
 * http://www.openjs.com/scripts/events/keyboard_shortcuts/
 * Version : 2.01.B
 * By Binny V A
 * License : BSD
 */
shortcut = {
	'all_shortcuts':{},//All the shortcuts are stored in this array
	'add': function(shortcut_combination,callback,opt) {
		//Provide a set of default options
		var default_options = {
			'type':'keydown',
			'propagate':false,
			'disable_in_input':false,
			'target':document,
			'keycode':false
		}
		if(!opt) opt = default_options;
		else {
			for(var dfo in default_options) {
				if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
			}
		}
 
		var ele = opt.target;
		if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
		var ths = this;
		shortcut_combination = shortcut_combination.toLowerCase();
 
		//The function to be called at keypress
		var func = function(e) {
			e = e || window.event;
			
			if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
				var element;
				if(e.target) element=e.target;
				else if(e.srcElement) element=e.srcElement;
				if(element.nodeType==3) element=element.parentNode;
 
				if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
			}
	
			//Find Which key is pressed
			if (e.keyCode) code = e.keyCode;
			else if (e.which) code = e.which;
			var character = String.fromCharCode(code);
			
			if(code == 188) character=","; //If the user presses , when the type is onkeydown
			if(code == 190) character="."; //If the user presses , when the type is onkeydown
 
			var keys = shortcut_combination.split("+");
			//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
			var kp = 0;
			
			//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
			var shift_nums = {
				"`":"~",
				"1":"!",
				"2":"@",
				"3":"#",
				"4":"$",
				"5":"%",
				"6":"^",
				"7":"&",
				"8":"*",
				"9":"(",
				"0":")",
				"-":"_",
				"=":"+",
				";":":",
				"'":"\"",
				",":"<",
				".":">",
				"/":"?",
				"\\":"|"
			}
			//Special Keys - and their codes
			var special_keys = {
				'esc':27,
				'escape':27,
				'tab':9,
				'space':32,
				'return':13,
				'enter':13,
				'backspace':8,
	
				'scrolllock':145,
				'scroll_lock':145,
				'scroll':145,
				'capslock':20,
				'caps_lock':20,
				'caps':20,
				'numlock':144,
				'num_lock':144,
				'num':144,
				
				'pause':19,
				'break':19,
				
				'insert':45,
				'home':36,
				'delete':46,
				'end':35,
				
				'pageup':33,
				'page_up':33,
				'pu':33,
	
				'pagedown':34,
				'page_down':34,
				'pd':34,
	
				'left':37,
				'up':38,
				'right':39,
				'down':40,
	
				'f1':112,
				'f2':113,
				'f3':114,
				'f4':115,
				'f5':116,
				'f6':117,
				'f7':118,
				'f8':119,
				'f9':120,
				'f10':121,
				'f11':122,
				'f12':123
			}
	
			var modifiers = { 
				shift: { wanted:false, pressed:false},
				ctrl : { wanted:false, pressed:false},
				alt  : { wanted:false, pressed:false},
				meta : { wanted:false, pressed:false}	//Meta is Mac specific
			};
                        
			if(e.ctrlKey)	modifiers.ctrl.pressed = true;
			if(e.shiftKey)	modifiers.shift.pressed = true;
			if(e.altKey)	modifiers.alt.pressed = true;
			if(e.metaKey)   modifiers.meta.pressed = true;
                        
			for(var i=0; k=keys[i],i<keys.length; i++) {
				//Modifiers
				if(k == 'ctrl' || k == 'control') {
					kp++;
					modifiers.ctrl.wanted = true;
 
				} else if(k == 'shift') {
					kp++;
					modifiers.shift.wanted = true;
 
				} else if(k == 'alt') {
					kp++;
					modifiers.alt.wanted = true;
				} else if(k == 'meta') {
					kp++;
					modifiers.meta.wanted = true;
				} else if(k.length > 1) { //If it is a special key
					if(special_keys[k] == code) kp++;
					
				} else if(opt['keycode']) {
					if(opt['keycode'] == code) kp++;
 
				} else { //The special keys did not match
					if(character == k) kp++;
					else {
						if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
							character = shift_nums[character]; 
							if(character == k) kp++;
						}
					}
				}
			}
			
			if(kp == keys.length && 
						modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
						modifiers.shift.pressed == modifiers.shift.wanted &&
						modifiers.alt.pressed == modifiers.alt.wanted &&
						modifiers.meta.pressed == modifiers.meta.wanted) {
				callback(e);
	
				if(!opt['propagate']) { //Stop the event
					//e.cancelBubble is supported by IE - this will kill the bubbling process.
					e.cancelBubble = true;
					e.returnValue = false;
	
					//e.stopPropagation works in Firefox.
					if (e.stopPropagation) {
						e.stopPropagation();
						e.preventDefault();
					}
					return false;
				}
			}
		}
		this.all_shortcuts[shortcut_combination] = {
			'callback':func, 
			'target':ele, 
			'event': opt['type']
		};
		//Attach the function with the event
		if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
		else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
		else ele['on'+opt['type']] = func;
	},
 
	//Remove the shortcut - just specify the shortcut and I will remove the binding
	'remove':function(shortcut_combination) {
		shortcut_combination = shortcut_combination.toLowerCase();
		var binding = this.all_shortcuts[shortcut_combination];
		delete(this.all_shortcuts[shortcut_combination])
		if(!binding) return;
		var type = binding['event'];
		var ele = binding['target'];
		var callback = binding['callback'];
 
		if(ele.detachEvent) ele.detachEvent('on'+type, callback);
		else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
		else ele['on'+type] = false;
	}
}

Open in new window

Comment
Watch Question

Hi,

It certainly can be achieved from a single page through the use of AJAX style functions.  In order to debug the applications, first break it into sections.

1) Your hotkey control
2) Your information look-up page
3) Implement the AJAX call function
4) Your results display.

1) Start by simply altering the hotkey function to simply perform an "alert('Hotkey Works!')".  This will verify that there are no bugs in your hotkey function.

2) In order to display data without a full-page postback, you need to create a 'background page' which will provide the resulting data.  When achieveing similar results, I used to create JSON style page outputs, using server side coding, I would write out data to the page in the following format:

{CompanyName:"My Company Ltd.", PhoneNumber:"01234 56789", Email:"company@companyltd.com"}

The above would be all the text that (if the page was called on a browser) would be returned, ie there is no <html> or other tags.  This data is then called via AJAX javascript methods.

3) Using an AJAX method, you can call your 'results' page.  The AJAX HTTP call will provide a method of "responseText" which is what you're interested in.  Once your ajax call is performed, call:

var ResponseData = myajaxcall.responseText();


4) Now, to output this data, simply place empty DIV or SPAN html elements in the positions where you want to display the data and give them an ID:

ie:  <div id="ResultCompanyName"></div>

Finally, to add the result data to the div field, perform the assignment just below your ResponseData assignment:

document.getElementById("ResultCompanyName").innerHTML = ResponseData.CompanyName;


This should get you going.
Cheers
Anubis

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Hi Bentham Ltd,

From the looks of it you'll need to use AJAX to handle the database lookup if you want everything to happen on the same page without having reload it.

At the minute, you are trying to call your javascript function SalesRefLookup() using PHP (which is why you are getting the error "undefined function SalesRefLookup()".

Basically, your requirement can be simplified as follows:

1. User enters 'SalesRef' and presses the 'F2' button
2. Javascript picks up the value of 'SalesRef' and then (using AJAX) passes it to your database lookup
3. The response is then passed back to javascript which then updates the other form items with the results (if any were found).

Making the most out of AJAX will involve a good understanding of Javascript. I can recommend the 'Prototype.js' framework which simplifies many methods http://www.prototypejs.org/

Regards,

Andy

Author

Commented:
Thanks for the replies so far both. Wow....this looks complicated. Never been a JavaScript person, I'm more of a HTML, PHP and ASP man. So, reckon I could still parse my ODBC PHP lookup over AJAX or would it be a case of doing it on the page in question?

Any chance you could provide any further code examples?

Blimey...for such a small feature this looks to be onehellova challenge. But I won't resort to $_GET just yet... :)

Author

Commented:
Actually, thinking about it, and the fact that project deadline is ever imminent...I'm gonna chicken out and do it using bog-standard PHP and HTML requests. Thank you both though for all your help.
Pleasure. When you get some spare time, search for 'javascript autocomplete prototype' or 'javascript autocomplete' there are plently of tutorials to get your teeth into. I also found this one: http://www.devbridge.com/projects/autocomplete/ which is a good starting point.

Hope this helps

Andy
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.