function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Gaurav Gulanjkar 18Gaurav Gulanjkar 18 

Jquery dialog popup not working

Hi,

I have a custom details page button which pops out a visualforce page in an Iframe. I am using jquery postmessage and receivemessage to communicate between the cross domain. I am not able to understand how to debug the postmessage and receivemessage. I have two buttons "OK" and "Close". On click of "OK" I want to run a logic and upon "close" the popup should be closed and the parent record window should be displayed. Following is the code I am using reffered from the link (http://www.valnavjo.com/blog/modal-dialog-on-a-standard-salesforce-page/) :

I am using custom ORG URL

Custom button code :
{!REQUIRESCRIPT('/soap/ajax/26.0/connection.js')}
{!REQUIRESCRIPT('/js/functions.js')}
{!REQUIRESCRIPT('/resource/Jquery/Jquery/jquery-1.8.2.min.js')}
{!REQUIRESCRIPT('/resource/Jquery/Jquery/jquery-ui.min.js')}
{!REQUIRESCRIPT ('/resource/Jquery/Jquery/postmessage/jquery.ba-postmessage.min.js')}
{!REQUIRESCRIPT ('/resource/Jquery/Jquery/bbq/jquery.ba-bbq.min.js')}


requireCssFile('/resource/Jquery/Jquery/jquery-ui.min.css');

function requireCssFile(filename) {
    var fileref = document.createElement('link');
    fileref.setAttribute('rel', 'stylesheet');
    fileref.setAttribute('type', 'text/css');
    fileref.setAttribute('href', filename);
    document.getElementsByTagName('head')[0].appendChild(fileref);
}

var j$ = jQuery.noConflict();
var iframeurl = '{!URLFOR("/apex/CPSolicitorReassignPopup")}';
var child_domain = iframeurl.substring(0, iframeurl.indexOf('/', 9));
var parent_domain = window.location.protocol + '//' + window.location.host+ '/' +'{!Case.Id}';

j$.receiveMessage(
    function(e){
        alert(e.data);
        var cross_result = j$.deparam(e.data);
        if (cross_result.action == 'Close') {
            j$modalDialog.dialog('Close');
        }
    },
    child_domain
);

var j$modalDialog = j$('<div></div>')
       .html('<iframe id="iframeContentId" src="' + iframeurl + '?parent_domain=' + parent_domain + '" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />')
       .dialog({
            autoOpen: false,
            title: 'Alert!',
            resizable: false,
            width:350,
            height:200,
            autoResize: true,
            modal: true,
            draggable: false
});
 
j$modalDialog.dialog('open');
Visualforce page :
<apex:page controller="CP_SolicitorReassignPopupController" sidebar="false" showHeader="false">
    <head>
        <apex:includeScript value="{!URLFOR($Resource.Jquery, '/Jquery/jquery-1.8.2.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.Jquery, '/Jquery/postmessage/jquery.ba-postmessage.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.Jquery, '/Jquery/bbq/jquery.ba-bbq.min.js')}"/>
        <script type="text/javascript">
            var j$ = jQuery.noConflict();
     
            var parent_domain = '{!JSENCODE($CurrentPage.parameters.parent_domain)}';
            alert('-Parent-'+parent_domain);
     
            j$(document).ready(function() {
                j$('input[id$=btnCloseModalDialog]').click(function(event) {
                    event.preventDefault();
                    closeModalDialog();
                });
            });
             
            function closeModalDialog() {
                var cross_result = new Object();
                cross_result.action = 'Close';
             
                j$.postMessage(
                    cross_result,
                    parent_domain,
                    parent
                );
            }
    </script>
    </head>
    <apex:form >
        <apex:panelGroup >
            Please confirm as this action will close the current Instruction Case from the Solicitor and close any open tasks.
            <br/><br/>
            Once confirmed new Instruction page will be presented for you to reassign &amp; confirm the instructions.
        </apex:panelGroup>
        <br/><br/><br/>
        <div align="center" draggable="false" >
            <apex:commandButton value="OK" style="align:center"/>
            <apex:commandButton value="Close" style="align:center" id="btnCloseModalDialog"/>
        </div>
    </apex:form>
</apex:page>
James LoghryJames Loghry
You're likely running into at least 1 or more javascript errors when trying to pop the modal screen.

Try opening the Developer Tools plugin in Chrome (or Javasript consoles in FF, IE, whatever browser you are using), and look for any errors that could be impacting your application.

You could also add debugger; statements to your Javascript, which will tell Developer Tools (if open) to stop at the breakpoint of your debugger; statement.  From there, you can use the console to print out variables like your iframe URL and investigate / troubleshoot your javascript issues further.