function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
RustyboyRustyboy 

Visualforce component as modal dialog

Hi,

I am trying to use a component as a modal dialog in an existing VF page with JQuery. I am having problems conditionally displaying the dialog and closing it properly again. I have used "rendered" with a boolean to determine whether to display the component, but am having problems when the modal is closed because the boolean is still set to true when the window is closed

Here is the page containing the component:
<apex:page Controller="DemoModalController">
	<apex:form >
		<h1>Demo Modal</h1>
		<p>Now is the time for all good men to come to arms</p>
		
		<apex:pageBlock id="theDialog" >
			<apex:commandButton value="Open Dialog"
		        		     	action="{!openDialog}" 
		            		 	title="Open the modal dialog"
		            		 	rerender="theDialog"/>
		    <br />
			<apex:commandButton value="Show displayDialog Value"
			       		     	action="{!showDisplayDialog}" 
			           		 	title="Show the value of displayDialog"/>

			<apex:outputPanel id="theDialog" rendered="{!displayDialog}" >
				<c:DemoDialog showDialog="{!displayDialog}" />
			</apex:outputPanel>
		</apex:pageBlock>

	</apex:form>

</apex:page>
And the controller
public with sharing class DemoModalController {

	public boolean displayDialog {get; set;}
	
    public DemoModalController()
    {
    	displayDialog = false;
    }
	
    public PageReference openDialog()
    {            		
		displayDialog = true;
	    return null;      
    }

    public PageReference showDisplayDialog()
    {
	    return null;      
    }	
}

And here is the component
<apex:component controller="DemoDialogController">

	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" />
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js" />
	<apex:styleSheet value="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/smoothness/jquery-ui.css" />

    <apex:attribute name="showDialog"
    				assignTo="{!displayDialog}"
    				description="Should the dialog be shown?"
                    type="boolean"
                    required="true"/>
                     
    <div id="dialog">
    
        <apex:pageMessages />

		<p>This dialog box has been created using a jQuery visualforce component!</p>
        
		<apex:commandButton value="No Nothing"
		       		     	action="{!doNothing}" 
		           		 	title="Do nothing"/>
		           		 	
		<apex:commandButton value="Close Dialog"
		       		     	action="{!closeDialog}" 
		       		     	onClick="closeTheDialog()"
		           		 	title="Close the modal dialog"/>

    </div>
	    
    <script type="text/javascript">
     
	var $j = jQuery.noConflict();
	    
        $j(document).ready(function(){
            $j("#dialog").dialog(
            {
                title: '<Dialog Title here>',
                width: 700,
                height: 700,
                modal:true,
                closeable:false,
                resizable:false,
                draggable:true
            });
        }); 
 
        function closeTheDialog()
        {
            $j('#dialog').dialog('close');
        }
            
    </script>

</apex:component>

And the component controller
public with sharing class DemoDialogController {

	public boolean displayDialog;
	
	public boolean getDisplayDialog() {
		return displayDialog;
	}
	
	public void setDisplayDialog(boolean argDisplayDialog) {
		displayDialog = argDisplayDialog;            	
	}	


    public PageReference doNothing()
    {
    	displayDialog = false;
	    return null;  
    }
	    
    public PageReference closeDialog()
    {
    	displayDialog = false;
	    return null;      
    } 
    
}

I think I have 2 ways of trying to solve this problem:

1. FInd another way to conditionally display the modal windor

OR

2. Update the boolean value in the component so that it is recognised by the controller

Any help greatly appreciated.


 
Best Answer chosen by Rustyboy
RustyboyRustyboy
Hi Serglo,

Apologies, I just re-read my initial question and realissed that it is not at all clear.

The modal in the component is displaying perfectly well, but when it returns to the controller the boolean controlling the display is still set to true so the modal keeps on displying. I followed the advice of a blog from Bob Buzzard  (http://bobbuzzard.blogspot.co.uk/2011/05/updating-attributes-in-component.html)and put the boolean into a class and it now works fine.

​Thanks

All Answers

Sergio AlcocerSergio Alcocer
Try something like
<apex:outputPanel id="theDialog">
    <c:DemoDialog showDialog="{!displayDialog}" rendered="{!displayDialog}" />
</apex:outputPanel>
When you are using reRender, you are rendering the content, so when you have "rendered" on the same level, it is not evaluated.
You always have to "rerender" some parent of the conditionally rendered components.

​Regards. 
RustyboyRustyboy
Thanks Serglo, though I think that doesn't answer my question.

I can make the dialog dislay as modal, and I can close it, but the dialog keeps on re-displaying because the showDialog boolean is still set to true.
Sergio AlcocerSergio Alcocer
Maybe you could send from the controller the actions you want to call, like it is commented here https://developer.salesforce.com/forums/?id=906F00000009839IAA


Another thing I see that might cause you problems is
$j(document).ready(function(){...
You have that inside the component, but when the document is ready, the component is not yet rendered (you set the boolean used for the rendered="" to false on the constructor, and the document.ready is not called after the rerenders)

so you should put it outside that, or create a function and call it 
a) when is rendered
b) inside the onStop of an apex:actionStatus


I hope it helps and that I'm explaining my-self.
RustyboyRustyboy
Hi Serglo,

Apologies, I just re-read my initial question and realissed that it is not at all clear.

The modal in the component is displaying perfectly well, but when it returns to the controller the boolean controlling the display is still set to true so the modal keeps on displying. I followed the advice of a blog from Bob Buzzard  (http://bobbuzzard.blogspot.co.uk/2011/05/updating-attributes-in-component.html)and put the boolean into a class and it now works fine.

​Thanks
This was selected as the best answer
RustyboyRustyboy
OK, I can now display the dialog and close it properly, but the command buttons are not firing. The component is within the form of the main page, so that shouldn't be a problem.

Any ideas?