Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ritesh AswaneyRitesh Aswaney 

Jquery Dialog

DISCLAIMER : JQuery Novice !

I have a beefy Visualforce Page with some Jquery - had a question about refreshing a div being used to render as a jquery dialog.

 

Here's a pseudo structure of my page

 

<Jquery Dialog Definition>

 

 

<apex:repeat>

iterate over a list of objects

Edit  Button on Click = invoke JS to launch the dialog, rerender=div

</apex:repeat>

 

<div display-none dialog>

displays details of the element on which the Edit button is clicked in the repeat above.

</div>

 

Now my question is how do I refresh this dialog to reflect the details of the element on which the Edit was clicked. Although my Edit Button onClick uses Javascript remoting to set the selected element id on the controller, the dialog box never refreshes to show this content. rerender doesnt seem to cut it. Anyone know how does one refresh a section which was originally rendered (not visible though) as part of the original page.

 

Kenji775Kenji775

Quick and dirty solution would be to have your button clicks call a function that set the content of your dialog box. Something like

 

<script>
$(document).ready(function()         
{            
$( "#dialog" ).dialog({ autoOpen: false });        
})

function setBoxContent(newText)
{
$("#dialog").html(newText);
}

</script>

<input type="button" onClick="setBoxContent('This is the new content of my dialog box');" value="set content!">

<div id="'dialog">
placeholder!
</div>

 

 

 
rtuttlertuttle

Re-render doesn't work because jQuery UI code extracts your dialog and inserts it outside of the form.  This causes problems with re-rendering and form actions in some cases.  There is a way to fix it by dropping it back into the form IIRC (don't have the code on hand though).

 

Also you could close the dialog, pop open a temp loading dialog and oncomplete of rerender reload the dialog.  That should re-render the dialog content.

 

 

Psuedo-code mixed with some real code

 

<script>
$(function(){
	$('#buttonondialog').click(function(){
		$(dialogselector).dialog('close');
		// code to throw up temp loading dialog - I recommend using an actionstatus with onstart and on stop for this
		rerenderDialogContents();
		$(dialogselector).dialog('open');
	});
});
</script>


<apex:form id="theform">
<apex:actionFunction rerender="divdialog" name="rerenderDialogContents"/>
<apex:outputPanel layout="block" id="divdialog">
content
[some button for the onclick/rerender (can also attach to some other event)]
</div dialog>

</apex:form>

 

 

-Richard
Ritesh AswaneyRitesh Aswaney

Thanks Kenji and Richard.

 

@Kenji - I have a fairly busy dialog which displays dual select checkboxes to pick options relevant to the row which the Button was clicked on - not sure how I'd set the html for this.

 

@RIchard - I had come across the detaching from parent problem - for which I've used the set parent

var originalParent = jQuery( "#dialogSelection" ).parent();

 

jQuery( "#dialogSelection" ).dialog({             autoOpen: false,             modal: true, ....

 

jQuery("#dialogSelection").parent().appendTo(originalParent );

 

This doesn't seem to cause it to re-render.

 

It maybe worth me adding some detail. When I click the button I need to set the identifier of the item which the dialog should display details for, on the controller.

The dialog is bound to a controller method which returns the row specific detail.

 

I've tried passing in a parameter via an actionFunction, also javascript remoting, but the dialog wont refresh.