Web Images Videos Maps News Shopping Gmail more »
Recently Visited Groups | Help | Sign in
Google Groups Home
Group info
Recent pages and files
Basic jQuery HTML page using multiple frames    
Copy the following into a blank text file, and save as HTML.  Then follow the instructions in the comments to replace the necessary settings.  This gives you the basic shell to present two result frames based on the same search query, either from two hosts, or you can rearrange the code to use the same host and two different frontends, or any combination.  Enjoy!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>iGuide</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
        <script>

            jQuery(document).ready(function() { 
                var loc = new String(window.location); 
        // Set your host names
                var host1 = new String('http://GSA1.domain.com');
                var host2 = new String('http://GSA2.domain.com');
        // Fill in <collection> and <frontend> desired settings
        // You could have two of these, if you want different settings in your frames
        // Also check filter= to set it to what you need, and add any other parameters necessary
                var search = new String('/search?site=<collection>&client=<frontend>&proxystylesheet=<frontend>&output=xml_no_dtd&filter=p&getfields=*&btnG=Search&q=');
        // Since we're loading the page, initialize the frames to a basic, "empty" search
                jQuery('#search-frame1').attr('src', host1 + search);
                jQuery('#search-frame2').attr('src', host2 + search);

        // Button click function to set SRC attributes for both frames when form button is clicked
                jQuery('#btnG').click(function() {
                    var a = search + encodeURI(jQuery('#q').val());
                    jQuery('#search-frame1').attr('src', host1 + a);
                    jQuery('#search-frame2').attr('src', host2 + a);
                    return false;
                });

        // Override standard submit function, to prevent odd behavior if enter key is used
                jQuery('#search-form').submit(function() {
                    jQuery('#btnG').trigger('click');
                    return false;
                });
            });

    </script>
    </head>
    <body>
        <div id="page">
            <div id="main">
                <div id="header">
                    <div id="basic-search-form" style="position:absolute;top:0;right:0;">
                        <form method="GET" action="" name="search-form" ID="search-form">
                            <input type="text" name="q" size="32" maxlength="256" value="" ID="q" />
                            <input type="submit" name="btnG" value="Search" ID="btnG" />
                        </form>
                    </div>
                </div>
                <div id="search_result1">
                    <iframe src="" id="search-frame1" name="search-frame1" width="1000" height="500"></iframe>
                </div>
                <div id="search_result2">
                    <iframe src="" id="search-frame2" name="search-frame2" width="1000" height="500"></iframe>
                </div>
            </div>
        </div>
    </body>
</html>

Version: 
Create a group - Google Groups - Google Home - Terms of Service - Privacy Policy
©2009 Google