1

Is there any convention for functions written in jQuery that are to be called from a child document (i.e. inside an <iframe>) to the parent document?

Following on from my question yesterday, regarding the use of an iFrame in a jQuery UI .dialog... I need the page inside the iframe to alter the size of the dialog at a particular time.

I already have this working, with the following code in the child document...

window.parent.$("#myDiv").dialog("option", "height", 180).dialog("option", "width", 300);

However, I think it would be cleaner and easier to understand if the code (which is much more complex than just that line) was included with the original .dialog code in the parent document.

This could obviously be done simply having the following in the parent document...

function resizeDialog() {
  $("#myDiv").dialog("option", "height", 180).dialog("option", "width", 300);
}

... and the following in the child document

window.parent.resizeDialog();

However, I want to know if there is any convention for including the resizeDialog function as part of the $("#myDiv") so that it be called with something like...

$window.parent.$("#myDiv").resize();

Update

I guess the question I'm trying to ask is this:

Is it considered unacceptable to have a function like this when using jQuery...

function resizeDialog() {
  $("#myDiv").dialog("option", "height", 180).dialog("option", "width", 300);
}

If so, then what is the format for having a jQuery function that can be called from outside of the current document?

Community
  • 1
  • 1
freefaller
  • 19,368
  • 7
  • 57
  • 87

1 Answers1

0

You need to create a custom jQuery plugin for that

    (function ($) {
    // plugin definition
    $.fn.resizeDialog = function () {

       this.dialog("option", "height", 180).dialog("option", "width", 300);
       }
   })(jQuery);

If the above code gives you some error, you can check the exact syntax here

Update: If you want to apply your method to jQuery dialogs only then you can write a function in the $.widget( "ui.dialog", { }); function. eg. syntax:

_resizeDialog : function() {// your code here}
Rajesh Dhiman
  • 1,888
  • 1
  • 17
  • 30
  • Thanks Rajesh. Does that mean that the `.resizeDialog` would become available on ALL objects within jQuery? I will add an extra part to my question to see if it makes more sense – freefaller Jan 29 '14 at 13:27
  • Yes that will be available to all objects. – Rajesh Dhiman Jan 29 '14 at 13:33
  • In that case, it's not what I'm looking for.. but thanks anyway – freefaller Jan 29 '14 at 13:34
  • Ok I am confused if you want to use your method like `$("#myDiv").resizeDialog();' then this method have to be a jQuery method that acts on jQuery objects '$("#myDiv")` in your case. and if you want to use this method only for specific elements you have to define its scope. – Rajesh Dhiman Jan 29 '14 at 13:52
  • Fair enough - then how do I define its scope? – freefaller Jan 29 '14 at 13:55