CODEWITHSUNDEEP
javascriptjqueryhtmljquery-uiiframe
user4621642
user4621642

Reputation:

Iframe contents are lost after opening a jquery modal dialog

I have an iframe. It was inside a modal. See code below:

<iframe id="edit-text-modal-value_ifr" src='javascript:""' frameborder="0" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;">
   #document
   <!DOCTYPE>
   <html>
        <head xmlns="http://www.w3.org/1999/xhtml">
           <style id="mceDefaultStyles" type="text/css">
               .mceResizeHandle {
                   position: absolute;
                   border: 1px solid black;
                   background: #FFF;
                   width: 5px;
                   height: 5px;
                   z-index: 10000
               }
               .mceResizeHandle:hover {
                   background: #000
               }
               img[data-mce-selected] {
                   outline: 1px solid black
               }
               img.mceClonedResizable,
               table.mceClonedResizable {
                   position: absolute;
                   outline: 1px dashed black;
                   opacity: .5;
                   z-index: 10000
               }
           </style>
           <base href="http://localhost/drupal-7.34/">
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/sites/all/libraries/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/content.css">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/themes/bartik/css/layout.css">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/themes/bartik/css/style.css">
           <link type="text/css" rel="stylesheet" href="http://localhost/drupal-7.34/themes/bartik/css/colors.css">
       </head>

       <body id="tinymce" class="mceContentBody " onload="window.parent.tinyMCE.get('edit-text-modal-value').onLoad.dispatch();" contenteditable="true" spellcheck="false" dir="ltr">
           <p>
               <br data-mce-bogus="1">
           </p>
       </body>  
   </html>
</iframe>

When I open another modal using jquery modal plugin, the iframe's content was lost. Why? How will I prevent it?

Jquery Code:

jQuery('#myid_templates_editor_insertf_field_modal').dialog('open');

My new Iframe's code :

<iframe id="edit-text-modal-value_ifr" src='javascript:""' frameborder="0" allowtransparency="true" title="Rich Text AreaPress ALT-F10 for toolbar. Press ALT-0 for help" style="width: 100%; height: 100px; display: block;">
    #document
    <html>
        <head></head>
        <body></body>
    </html>
</iframe>

Upvotes: 1

Views: 344

Answers (2)

user4621642
user4621642

Reputation: 

<script type="text/javascript"> 
    $('.the-modal').bind('shown', function() {
       tinyMCE.execCommand('mceAddControl', false, 'mce-<?=$reply["id"]?>');
    });

    $('.the-modal').bind('hide', function() {
        tinyMCE.execCommand('mceRemoveControl', false, 'mce-<?=$reply["id"]?>');
    });
</script>

It was a bug and I found a solution here.

Upvotes: 1

Ujjwal Kumar Gupta
Ujjwal Kumar Gupta

Reputation: 2376

well,ofcourse it will gone.because modal data is created dynimacally.so what you can do when you are calling another mode copy iframe object into another object-like

var tmp=document.getelememntbyid('iframeid');

and declare tmp variable gloabaly and use it again when you want.

Upvotes: 0

Related Questions