Javascript Popup Search.

azzeretti · 14-03-2012 3:44pm #1

I'm stuck on a bit of Javascript (I don't know a whole lot of client side stuff) at the moment and I can't figure it out.

I have a search button that calls a little popup screen. This popup displays the results of a SQL query (the search button passed the search term to the perl script and the pop is the results). The problem is I need to pass back the clicked on results to the parent window.

I don't have any problem opening a popup, typing text in multple input boxes and sending them back to the parent as I know the name, id and value of the input boxes. The trouble with the dynamic SQL query is that the results could be one row or 100 rows and I can't figure out how to deal with this in Javascript.

Does anyone have any pointers!?

Evil Phil · 14-03-2012 4:03pm

Post some code to illustrate where you're having problems. But I would say that perhaps your JavaScript is not where you want to be addressing the issue, it may be that you need to address it in the SQL statement.

azzeretti · 14-03-2012 4:25pm

Evil Phil wrote: »

Post some code to illustrate where you're having problems. But I would say that perhaps your JavaScript is not where you want to be addressing the issue, it may be that you need to address it in the SQL statement.

The problem is not related to the SQL as I can recreate the problem with a static page. Basically, it is because I can't have more than one elementid or elementname - with the same name - on the page otherwise the Javascript will only use the value of the first elementid found on that page. So, in the example below, no matter what button I press, the input boxes on the parent page is always sent "John" and "Smith" which are the first two values with the input id="firstname" and "surname".

I can clearly see why it is a problem but I am struggling with a way to overcome it (although I have a feeling it is a stupidly easy fix!)

Child Page:

<script language="javascript" type="text/javascript">
function SendValueToParent() {
 var firstName = document.getElementById('firstname').value;
 var surName = document.getElementById('surname').value;
 window.opener.GetValueFromChild(firstName,surName);

 window.close();
 return false;
}

</script>

.....

print "<br />Firstname: <input id=\"firstname\" type=\"text\" value=\"John\"/> <br />
Surname: <input id=\"surname\" type=\"text\" value=\"Doe\"/>
<input id=\"btn1\" type=\"button\" value=\"Send Value to Parent\" onclick=\"javascript:return SendValueToParent();\" />";

print "<br />Firstname: <input id=\"firstname\" type=\"hidden\" value=\"John\"/> <br />
Surname: <input id=\"surname\" type=\"text\" value=\"Smith\"/>
<input id=\"btn1\" type=\"button\" value=\"Send Value to Parent\" onclick=\"javascript:return SendValueToParent();\" />";

Giblet · 14-03-2012 4:40pm

You need to handle this in an event, and you need to trigger the event somehow.
So, on the click on an input box, you can tell your function to pass the values of the item you clicked to the server or however you would like.

You will need a structure to handle the dynamic nature of the listing.

<ul>
  <li><input type="text">John</input><input type="text">Smith</input>
  <li><input type="text">Jane</input><input type="text">Smith</input>
<ul>

With that structure, we can assign an event to the <ul>, which will handle any event coming from the <li> when clicked, will look for it's child inputs.

<!DOCTYPE html>
<html>
	<head>
		<style>li { background-color:red; border-bottom:1px solid #000}</style>
	</head>
	<body>
		<ul id="inputs-list">
			<li><input type="text" value="John" /><input type="text" Value="Smith" />
			<li><input type="text" value="Joan" /><input type="text" Value="Smith" />
			<li><input type="text" value="Jane" /><input type="text" Value="Smith" />
		</ul>	
		<script>	
                        //Scaffolding (can be an external file)
			var html;
			function isHostObjectProperty(object, property) {
				return !!(typeof(object[property]) == 'object' && object[property]);
			};
			function isHostMethod(object, method) {
				var reFeaturedMethod = new RegExp('^(function|object)$', 'i');
				var type = typeof object[method];
				return !!((reFeaturedMethod.test(type) && object[method]) || type == 'unknown');
			};
			if(isHostObjectProperty(document, 'documentElement')) {
				html = document.documentElement;
			}

			function getElementTag(el){
				var elTag = (el.tagName || el.nodeName).toLowerCase();
				return elTag.indexOf('html:') > -1 ? elTag.substring(5) : elTag;
			}
		
			var attachListener;			
			if(html && isHostMethod(html, 'addEventListener')) {
				attachListener = function(el, eventType, fn) { 
					el.addEventListener(eventType, fn, false); 
				};
			} 
			else if(html && isHostMethod(html, 'attachEvent')) {
				attachListener = function(el, eventType, fn) { 
					el.attachEvent('on'+eventType, fn); 
				};
			}
			function getParent(tagName, child){				
				var parentFound = false;
				var element = child;
				while(!parentFound){
					var elTag = getElementTag(element);
					if(elTag === tagName){
						parentFound = true;							
					}
					else {
						if(element.parentNode != document.documentElement){
							element = element.parentNode;
						}
						
						else {
							break;
						}
					}
				}
				if(parentFound){
					return element;
				}
				else {
					return null;
				}
			}			
			var getEventTarget = function(e) { 
				var target = e.target; 
			    if (target) { 			
					if (1 != target.nodeType) { 				
						target = target.parentNode; 
					} 
			    } 
			    else { 
				    target = e.srcElement; 
			    } 
			    return target; 
			}
                        
                        //Custom code for this solution
                        //Always check in case a script fails to load
			if('function' === typeof attachListener){
				var ul = document.getElementById('inputs-list');				
				if(ul){									
					attachListener(ul,'click',function(e){							
						var delegateTarget = getParent('li',getEventTarget(e));
						if(delegateTarget){
							myFunctionForDealingWithInputs(delegateTarget);
						}						
					},false);										
				}				
			}
			function myFunctionForDealingWithInputs(li){
				var firstName = li.childNodes[0];
				var lastName = li.childNodes[1];
				alert(firstName.value + ' ' + lastName.value);
			}
		</script>
		
	</body>
</html>

Click on the red area beside the result to see the name popup (you can handle this whatever way you want in "myFunctionforDealingWithInputs"

azzeretti · 15-03-2012 12:02pm

Giblet, thanks for this, it is exactly what I need.

MagicRon · 15-03-2012 2:15pm

Surely the JQuery solution would be more readable and a lot easier to understand!

Giblet · 15-03-2012 2:27pm

Helpful as always Ron

It wouldn't work in IE5.5 ;P

Javascript Popup Search.

Comments