I’ve decided to use jquery for the first time in order to implement in the simplest possible way the following problem

The problem

I wanted to use an existing search/navigation mechanism to select the value of a new input field by making as little modifications as possible to the existing code. Since searching for the item implied navigating a few pages passing information along all the submits or links was impossible without extensive changes.

The idea

My idea was to use a popup to search/navigate in search of the item (nothing new until here) but in the popup to store the information required for the return in a top, invisible frame and to use jquery to detect this state and enhance the final selection window with new elements. The modifications to the initial code would imply just setting the name of a div to the id of the item.

The opener

Here is a simplification of the page containing the input to be filled:

...
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
function openProductSelectWindow(fieldId){
        aWindow = window.open('frame.html?target=single.html&fieldId=' + fieldId, 'productSelect', 'scrollbars,height=700,width=700', false);
        aWindow.focus();
}
    </script>
</head>
<body>
<form>
<input type="text" id="myField"/><a href="javascript:void(0);" onclick="openProductSelectWindow('myField');">select</a>
</form>
</body>

There is nothing special here, except that I wanted to use a more general approach and I pass as a parameter the page used for navigation.

The frame

Here is a simplification of the frame page:

  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="jquery.query-2.1.2.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
 	var targetPage = $.query.get('target');
	$('#mainframe').attr({'src': targetPage, 'name': 'product'});
});

function topAction(pId){
	window.opener.$('#'+$.query.get('fieldId')).attr('value', pId);
	window.close();
}
  </script>
</head>
<frameset rows="100%">
<frame id="mainframe"/>
</frameset>

I am using the query parsing plugin for jquery and some attributes related functions.

The application page

<script type="text/javascript">
 $(document).ready(function(){
   if(window.top != window){
   	$("#myP").css({'display':'none'});
	$("#productsTable tr td").filter(".lastColumn").css({'display':'inline'});
   }
 });

function productSelect(pId){
	if(window.top != window){
		$("#product" + pId).append('<a href="javascript:void(0);" onClick="window.top.topAction(\'' + pId + '\');">select product</a>');
	}
}
</script>
<style type="text/css">
.lastColumn {display:none;}
</style>
...

<table id="productsTable">
<tbody>
<tr id="productsTableHeader">
<td class="tableHead">Key</td>
...
<td class="lastColumn">Select</td>
</tr>
<tr>
...
<td id="product80111" class="lastColumn">
<script type="text/javascript">productSelect('80111');</script>
</td>
</tr>

The only modification required to the application page was to add a new column, modify the style file and add the extra javascript which detects it the page is opened inside a frame or not and in the first case changes the style of the otherwise hidden column. There is no risk if this column is shown otherwise because it’s content is also generated using jquery using the same type of condition.