Opening jQuery dialog in main iframe

Question

I tried this all day long ...

I have a form in an iframe and this contains jquery validation to validate the form. I just want when the data is invalid, the jquery dialog appears on the main page, which is displayed in top.document.

this is my iframe code:

$("#dialog-message", top.document).dialog({                                                                      
             modal: true,
             autoOpen: false,
             buttons: { Ok: function() {
                 $(this).dialog('close');
               }
             }
          });

and this is a piece of code that should activate the dialog:

$("#search-form").validate({ 

        rules: { datapicker: {required: true,dateDE: true}},
        debug: true,
        messages: {
         datapicker: {
            required: "És necessari introduïr una data",  
            date: "S'ha d'afegir una data correcte: dd/mm/aaaa"
         }
        },
        errorPlacement: function(error, element) {
                error.prependTo($('#dialog-message', top.document));
        },
        errorLabelContainer: $("#dialog-message ul", top.document),
        showErrors: function () {
            $('#dialog-message',top.document).dialog('open');
            this.defaultShowErrors();
        }
});

so ... this does not work and ... If I try this instruction, everything works fine

$("#dialog-message", top.document).css(...) //works fine!

I think there might be some kind of problem with selector $ -top.document and the dialog function ... Or it may be impossible to use the dialog () for the div in different frames ...

please help !: D

early

Answer 1

iframe parent JavaScript, :

// in iframe code:
parent.doSearchFormValidate();

// parent page has definition for doSearchFormValidate().
function doSearchFormValidate() {
  $("#search-form").validate({ 
  ...
  });
}