Sending dual searches--Chrome/Safari issue

[Ryujin]

I wrote this script that enables user to send a search to a library catalog and/or a group of article databases. It works roughly as hoped in IE and in Firefox, but in Safari and in Chrome it refuses to send two searches simultaneously (the third button on the prompt screen).

In Safari & Chrome it will always send the search that is on the lowest line, but never both at once as it's supposed to.

Here is a chunk of the script that I've been fooling with; do you see any way I could get it to trigger both the document.searchForm.submit() and the document.catsearch.submit() ?

"Both": function() {
					$( this ).dialog( "close" );
					document.catsearch.Search_Arg.value = searchterm;
					document.catsearch.submit() ;
					document.searchForm.submit();
					
                         if ((is_chrome == true) || (is_safari == true))
						
				{       document.searchForm.submit();
					document.catsearch.submit(); } }
						 } }    });

[sunwebsite]

try this

if(document.catsearch.submit())
{
   document.searchForm.submit();
}

[Airshow]

Javascript's form.submit() initiates traditional html form submission unconditionally. If your forms have onsubmit handlers, they will not be called when forms are submitted in this way. Added to that, browser behaviour is not standardised should a second html form submission be ordered before the first has taken effect.

Therefore it's maybe not surprising that you get behavioural differences between browsers. You may even get differences for the same browser running on different computers, depending on the speed their motherboards react to browser-generated http requests.

The workaround is to ensure that at least the first form is submited via AJAX. Depending on what effect you want and how the two responses are to interact, the second submission can be:

• AJAX call in parallel with the first AJAX call.
• AJAX call in cascade with the first AJAX call (ie made from the first AJAX call's response handler).
• Regular HTML submission in cascade with the first AJAX call.

Airshow

[Ryujin]

Thanks much Airshow for the cogent and instructive explanation. I did try your suggestion, Sunwebsite, but later on the most recent post explained why it doesn't work. This is a case where what seems to make sense, doesn't, and my little knowledge thus becomes a dangerous thing.

You've inspired me to drink more deeply from that Pierian Ajax spring. In trying to wrap my feeble skull around the XMLHttpRequest object I got hold of Peachpit's Javascript & Ajax book plus a lot of web tutorials. To pathetically little avail thus far.

If I'm understanding this properly, it seems I need a backstop page to process the value entered in the text box. I've done so with this version of the page.

What tangles me up is in what happens next. The searchform page must receive the value from the PHP backstop page, and somehow plug this value in to the hidden form as well as to the alert screen ("Your search for [VALUE] will...)

Correct me if I'm wrong: The Both button on the alert screen then initiates an Ajax request, instead of trying (impossibly) to trigger submission of both forms through JavaScript? Airshow, your list of three possible scenarios is crystal clear; I don't know what is holding me up from making it happen...

[Ryujin]

Well. I'm truly taking a pounding here.

Below is what's behind the Both button that follows a search at this page. Airshow, is it anywhere near what you mean by an Ajax call to submit one of the forms?

The code worked in isolation for sending+retrieving data from a PHP page. When I put it in this context, though, nothing--all that the below does is to call the other search ('catsearch,' on the hidden form).

$( this).dialog( "close" );  
  
function getXmlHttpRequestObject() {
	if (window.XMLHttpRequest) {
		return new XMLHttpRequest(); //Not IE
	} else if(window.ActiveXObject) {
		return new ActiveXObject("Microsoft.XMLHTTP"); //IE
	} else {
		alert("Your browser doesn't support the XmlHttpRequest object.");
	}
 }

var DBendSearch = getXmlHttpRequestObject(); 

   function dbaseSearch() {                              
		   if ((DBendSearch.readyState == 0) || (DBendSearch.readyState == 4))
//I confirmed that the variable exists; its readyState turns out to be 0 at this point
	   {
	 	DBendSearch.open("GET",'http://scholar.google.com/scholar',true);
	 { 			 
	 	DBendSearch.send ();    }     }    }
 
	onclick="dbaseSearch()";   
	document.catsearch.Search_Arg.value = document.forms.searchForm.q.value; 				
		 	document.catsearch.submit(); 
							 			        
 },
[I]
// The other two buttons follow...[/I]

[Airshow]

Ryujin,

As you are already using jQuery, it will be easier to use the jQuery approach to AJAX.

When I get home (some time in the next 24 hours), I will dig out a suitable pattern.

Meanwhile, here is some background reading for you.

Airshow

[Airshow]

Ryujin,

I have got something working but I have only just realises that the seraches are conducted on 3rd-party servers (ie. not your server and not the user's computer).

Most browsers don't natively support ajax calls to 3rd-party domains but there's a flash solution called "flensed" which I have used successfully on another project.

I need to test with flensed in several browsers before posting the code.

Airshow

[Ryujin]

Hi Airshow, thank you again.

Yes, that's right: one search will go to the library catalogue (which is hosted on an external server to the library's site) and the other to a 'federated search' tool (ditto).

As it happens, when we try to offer both those searches even from separate forms, users are endlessly confused about what they see so that mediation screen asking for a choice is a key to helping them make sense of their results.

The doubled search from a single form is similar to what sites like Twingine do, with the important difference that I don't need to process nor display search results: instead, must gather the user's search term, show the prompt screen, dispatch the term to the proper search tool(s) based on her choice, and be done with it.

So the puzzle of how to kick off dual searches at one go is the main concern. The possibility of having the prompt screen show the search term would be brilliant, but not essential--yet I haven't succeeded at even that. (As it now stands, browsers that show a term--i.e. not Chrome--are one screen behind. When first called the prompt screen shows an empty value, then subsequently shows the previous search term.)

[Airshow]

Ryujin,

... with the important difference that I don't need to process nor display search results: instead, must gather the user's search term, show the prompt screen, dispatch the term to the proper search tool(s) based on her choice, and be done with it.

I think I understand. Each of the two searches fires into a named target window. Your document in the main window does not need to process/display the results.

I'm now wondering whether my good advice about using AJAX was correct. I incorrectly assumed that the results were to be displayed in the main window.

Maybe there's another way to cajole Opera/Chrome into playing ball. With a bit of luck, a very light modification to your existing code will suffice for these browsers - namely add a timeout delay to the second form submission after user clicks "both".

// ....
	document.catsearch.submit();
	setTimeout(function(){document.searchForm.submit()}, 1000);//delay by x milliseconds
	// ....

Maybe you would like to test this.

Airshow

[Airshow]

Ryujin,

On my computer FF and Opera were OK ("both" opened two windows) whilst IE not OK (only one window).

I have no blocker installed in FF or Opera. IE, worked fine once I had disabled the blocker.

The following code should work subject only to popup blocking, which I am unable defeat. You will need to include a note to your users to inform them of the need to disable popup blocking for the sites in question. Alternatively, the two search results can be loaded into iframes on the main page without interference from popup blockers.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="jQuery/jqueryui/css/ui-lightness/jquery-ui-1.8.7.custom.css" />
<style type="text/css">
form {
	margin: 0;
}
#searchTerm {
	width: 201px;
	font-size: x-large;
	color: #003300;
	background-color: lime;
}
#opener {
	width: 51px;
	height: 36px;
	font-weight: bold;
	color: white;
	background: red;
	position: relative;
	left: -5px;
	bottom: 3px;
}
#fillIn {
	font-weight: bold;
}
</style>
<script src="jQuery/jquery-1.4.4.min.js"></script>
<script src="jQuery/jqueryui/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	var searchForm  = $("#searchForm");
	var catForm     = $("#catForm");
	var articleForm = $("#articleForm");

	var fillIn = $("#fillIn");
	var search_Arg = $("#search_Arg");
	var q = $("#q");

	var $dialog = $('<div>').
		html('Your search for "<span id="fillIn"></span>" will open the Rohrbach Library book & film catalog in a new window labeled PILOT.' + '<br /><br />' + 'Clicking <em>Both</em> opens the same search in Google Scholar. The full-text results may astonish you!<br /><br />To search either source on its own, simply click the corresponding button.').
		dialog({
			autoOpen: false,
			modal: true,
			width: 560,
			buttons: {
				"Both": function() {
					$(this).dialog("close");
					articleForm.submit();
					catForm.submit();
				},
				"Book/Film Catalog": function() {
					$(this).dialog("close");
					catForm.submit();
				},
				"Article Collections": function() {
					$(this).dialog("close");
					articleForm.submit();
				}
			}
		});

	searchForm.submit(function() {
		var searchterm = this.searchTerm.value;
		fillIn.html(searchterm);
		search_Arg.attr('value',searchterm);
		q.attr('value',searchterm);
		$dialog.dialog("open");
		return false;
	});
});
</script>
</head>

<body>

<!-- This form gets the search started but is not submitted -->
<form id="searchForm" name="searchForm" action="#">
	Search through <strong><em>everything</em></strong>--books, articles, the whole darn shebang!<br>
	<input type="text" name="searchTerm" id="searchTerm" value="Hello Sailor!" size="25" maxlength="255">
	<input type="submit" id="opener" value="Bang!" />
</form>

<!-- Book/Film Catalog search form -->
<form id="catForm" name="catForm" action="http://pilot.passhe.edu:8042/cgi-bin/Pwebrecon.cgi" method="POST" target="catSearch">
	<input type="hidden" name="DB" value="local" />
	<input type="hidden" name="CNT" value="90" />
	<input type="hidden" name="Search_Arg" id="Search_Arg" class="box" value="" maxlength="100" />
	<input type="hidden" name="Search_Code" value="FT*" />
</form>

<!-- Article Collections search form -->
<form id="articleForm" name="articleForm" action="bridget2.php" method="GET" target="articleSearch">
	<input type="hidden" name="hl" value="">
	<input type="hidden" name="q"  id="q" value="">
</form>

</body>
</html>

You will need to adjust the relative paths of the jquery and jqueryui scripts.

Airshow

[Ryujin]

After much hammering and pounding--not all of it by me--here is what looks to be a good working version. Thank you Airshow for your help in getting it there.