[Mapbender-dev] Working with jQuery in Mapbenders mainframe... a testscript and a suggestion

Tue Nov 13 06:43:01 EST 2007

Hi devs,

as discussed on monday there are certain things to be considered  when 
you want to use jQuery. Please rebuild this testcript(s):

File 1 (the parent | mainframe in Mapbender):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
    <script src="./tree21/jquery-1.2.1.pack.js" 
type="text/javascript"></script>
  </head>
  <body>
    <iframe src="test2.php">
    </iframe>
    <div id="parentdiv">I shall disappear first</div>
  </body>
</html>

File 2 (the child | any frame embeded in Mapbenders mainframe):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
    <script type="text/javascript">
    /**
     * Map over parent's jquery to this frame's "$"/"jQuery".
     * Keep the second parameter to work in other contexts.
     *
     * @todo check thoroughly.
     * @author Marc Jansen <jansen at terrestris.de>
     */
    if (typeof $ == 'undefined' && typeof parent.$ != 'undefined' && 
typeof jQuery == 'undefined' && typeof parent.jQuery != 'undefined') {
        jQuery = function(param, context) {
            return parent.jQuery(param, context || window.document);
        };
        $ = jQuery;
    }
    // a test setting
    window.setTimeout(function() {
        alert('working in parent');
        $('#parentdiv', parent).each(function() {
            alert(this);
        }).hide();
        alert('working in child');
        $('#iframediv').each( function() {
            alert(this);
        }).hide();
        alert('has everything disappeared?');
     }, 3000 );
    </script>
    </head>
  <body>
    <div id="iframediv">I shall disappear later</div>
  </body>
</html>

Try to rebuild the two files and you'll understand what is happening 
here. Needs to be checked in detail!

I suggest to test this further and to use this:
    /**
     * Map over parent's jquery to this frame's "$"/"jQuery".
     * Keep the second parameter to work in other contexts.
     *
     * @todo check thoroughly.
     * @author Marc Jansen <jansen at terrestris.de>
     */
    if (typeof $ == 'undefined' && typeof parent.$ != 'undefined' && 
typeof jQuery == 'undefined' && typeof parent.jQuery != 'undefined') {
        jQuery = function(param, context) {
            return parent.jQuery(param, context || window.document);
        };
        $ = jQuery;
    }
when you want to use jQuery.

Bye,

-- Marc