1

I am opening a html page inside jQuery ui dialog box. It is just a plain form which have 4 fields. Out of 4 fields 3 should be pre-populated.

So, I created a form like this -

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">

    <style>
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-border-red,.w3-hover-border-red:hover{border-top:1px solid #f44336!important; border-bottom:1px solid #f44336!important ; border-left:1px solid #f44336!important;border-right:1px solid #f44336!important  }
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#bbb!important}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:95%}
</style>    
   </head>

   <body>
    <form>
        From<br>
        <input id="senderemailAddresss" type="text" class="w3-input w3-border"  value=""  readonly /><br>
        To<br>
        <input id="receiveremailAddresss" class="w3-input w3-border" type="text"/><br>
        Subject<br>
        <input id="title" class="w3-input w3-border" type="text"/> <br>
        Messgae <br>
        <input id="message" class="w3-input w3-border"  style="height:60px" type="text" rows="4"/>
    </form>

   </body>
</html>

Now, I am opening it inside a jQuery dialog box like this- 

var page = "form.html";
               var $dialog = $('<div id="myDialog"></div>')
               .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 485,
                   width: 550,
                   draggable: false,
                   //title: "Send Mail",
                   buttons: { 
                        "Send": 
                        function() 
                        {   scopes.sent = 0;
                            var email = $("#receiveremailAddresss").val();
                            var title = "The Execution Detail for the Rule: "+maintitle
                            var message = $("#message").val();
                            sendEmail(email,title,message,$(this));
                        }, 
                        "Cancel": 
                        function() 
                        { $(this).dialog("close"); }

                        }, 
                   open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();
                     //  $("#title").val(maintitle);
                    $(this).find('#title').val("The title is : "+maintitle);
                    $(this).find('#message').val("Message is :"+ message );
                   $(".ui-dialog-titlebar").hide();
                   $(this).css('overflow', 'auto');
                    $(this).css({
                    'font-size' :'12px'
                    });
                   }
                  });
                 $dialog.dialog('open');

But here the problem is the fields are not pre-populated.

But if I made a form inside .html like this - 

.html('<form >From <input id=senderemailAddresss type="text" class="w3-input w3-border" value="'+mailId +'"size="25" readonly><br>To <input id=receiveremailAddresss class="w3-input w3-border" type="text"  size="25"><br>Subject<input id=title class="w3-input w3-border" type="text"> <br>Messgae <textarea id=message class="w3-input w3-border"  style="height:60px type="text" rows="4" cols="20"></form>')

It is working. What is difference here which I am not getting?

EDIT: As it was marked as a duplicate, I tried the solution given for the duplicate but here it is not giving anything on contents. The problem is iframe has no idea what is inside that page. Its only has its path.

shv22
  • 680
  • 5
  • 28
  • You can't put an entire html inside another. The html, body, head tags will be ignored. Why you want this? You can always use the rest DOM elements. In this case the *form* and its children. – Kishore Barik Jun 02 '17 at 13:35
  • Most likely the iframe is simply not done loading and parsing the document completely, which would be why your selectors in the `open` callback simply don’t find the form elements to pre-populate. – CBroe Jun 02 '17 at 13:37
  • @KishoreBarik I was thinking to externalise the form so that I will be easy to change it if I want in future – shv22 Jun 02 '17 at 13:43
  • @CBroe then what is solution for this – shv22 Jun 02 '17 at 13:43
  • @jcubic I have explained my reason why this is not a duplicate – shv22 Jun 02 '17 at 14:23
  • I am having same problem as described here https://stackoverflow.com/questions/34484112/load-html-in-iframe-and-access-the-dom – shv22 Jun 02 '17 at 14:31
  • @jcubic I have asked another question here which expains my problem exactly https://stackoverflow.com/questions/44332070/load-external-html-in-iframe-and-access-the-contents – shv22 Jun 02 '17 at 15:07
  • @shv22 just use `$(this).find('iframe').contents().find('#title').val("The title is : "+maintitle);` but the iframe need to be on the same domain as your page, otherwise it will not work because of same origin policy. If you want to use different domain page you will need to write a server side proxy script. – jcubic Jun 03 '17 at 07:59

0 Answers0