jQuery: open a widescreen dialog (in top.document) from any nested iframe/frame

A problem that I had some days ago was to open a  dialog with jQuery from a nested iframe but using all the document's width/height. If the dialog is inside of the iframe, the modal view (and the position ) depends just about the iframe scope.

Indeed, every time that you execute a line like  $("#dialogDiv").dialog(), the init will set the parameters about the position  and dimentions of the caller object, i.e., if do you want to make a dialog() call from a iframe/frame that just have a few pixels (or just don't have them), the dialog window will not see ok.


One possible solution is to define a dialog div (with id=dialogDiv) in the top.document file. But we can not activate the dialog from the iframe/frame. To solve this, we need add a javascript code like this in the top.document file:

<script type="text/javascript">
var top.window.docDialog=null;
$(document).ready( function() {
$("#main",top.document).prepend("<div id='dialog' title=''></div>");
top.window.docDialog=$("#dialog");
top.window.docDialog.dialog({
bgiframe: true,
minHeight: 30,
minWidth: 200,
height: 100,
width: 250,
autoOpen: false,
modal: true
});
});
</script>

Where the code is adding a div (id=dialog) inside of another existing div (id=main). Then you assign the jQuery object to a variable of the top.window. Thus, we can locate the docDialog variable from any iframe/frame, allowing us to interact with the dialog div defined.


In this hand, if assume that in the nested iframe/frame an error occurs and want to activate the message (dialog), just use a code like this:

<script type="text/javascript">
top.window.docDialog
.html("<div style='font-size:14px;paddig:0;margin:0;color:#FF1111;'><center>No se puede Ingresar en este momento</center></div>")
.dialog('option', 'title', 'ERROR')
.dialog('open');
</script>

Note that the top.window.docDialog object is a jQuery object. Also, this works with Internet Explorer and FireFox.

jQuery: To select elements from a iframe/frame

When we use jQuery selectors is necesary to deliver an argument of  document, ie, a HTMLDocument object. The problem is that don't work to use  .document or .contentDocument. To make work both,  IE and FF, we need to use  .contentWindow.document.

Ex: suppose a document with an iframe(id=frame_selector) inside it, and the document inside of the iframe have a form(id=sel_indice). We need to set a input element inside of the form with the count of the checked checkboxes before to run a submit of the form. We can use the follows code:

<script>
function doSubmit() {
var docSel=null;
$('#frame_selector').each( function(){ docSel=this.contentWindow.document;});
$("#sel_indice input[id='Cantidad']",docSel).val($("#sel_indice input[id*='check']",docSel).filter(":checked").length);
$("#sel_indice",docSel).submit();
}
</script>

The important is the second code line. If you try to do a selector like  $("#sel_indice"), without the second argument, you will get a empty array as return of the jQuery selector, because jQuery uses the content of the DOM that include the iframe/frame definition as default  HTMLDocument, but not the DOM contained by the iframe/frame. Again, this works using Internet Explorer or FireFox.

Internet Explorer and CSS classes

Programming with jQuery an interactive menu to my work website, I realize a curious behavior of Internet Explorer(IE), why not.

Everytime that you  use jQuery code like this: 

$(this).addClass("clicked");

You will see an erratic behavior. If the element (this) have more than one class, the IE have problems to resolve the heritance and procedence to finaly apply the desired style. But this works with others browsers like Firefox(FF) or Chrome.

The only way I know to avoid this, it is use the css jQuery function. In facts, this function does a style attribute definition in the element. By example, suppose a li element like the following:

<li id="li_0" class="classLi otherClass andOtherClass">
<a href="#">Testing element</a>
</li>

and run this jQuery code:

$("#li_0").css( { 'background-color' : '#C0C0C0', 'color': '#FFFFFF'} );

The li element inside the DOM will be setting like this:

<li id="li_0" class="classLi otherClass andOtherClass" style="background-color: #C0C0C0; color: #FFFFFF;">
<a href="#">Testing Element</a>
</li>

And because the style attribute of an element has dominance over every previous CSS definitions, you will get the desired effect. Using this, IE and FF can have the same final behavior.

Useful link: http://www.visualjquery.com/

jQuery

This entry doesn't need any comment. If somebody is writing a lot of javascript, try with jQuery.  This tool is  very powerful  because has selectors and useful predefined functions.

The official website is  http://www.jquery.com.

I recomended to take a look to UI website too,  http://jqueryui.com/.
I resolved to use jQuery because exists a widget called datepicker that solves many problems that I have with other similar javascript artifact to give support to IE 6.0.

When you feel comfortable, visit this 7 things I wish I had know about jQuery, and this Working with Events part 1, and if you want to check some blogs, look at this: 15 blogs to follow for jQuery lovers.



Others important links:
http://plugins.jquery.com/ site with a lot of jQuery's plugins.
http://jquerylist.com/ a list with plugins and useful widgets.
http://www.visualjquery.com/ very useful site to search jQuery functions references.
http://www.addedbytes.com/cheat-sheets/download/javascript-cheat-sheet-v1.png  An useful "cheat sheet" to whom knows javascript programming lenguage and just needs a memory help.