Apex Code Development You need to sign in to do that
Don't have an account?
irlrobins JQueryUI and Checkbox
Hey all,
JQuery novice here so apologies if this is a bit of a palm meet forehead question.
I'm trying to create a list of records (for a custom object) and use a JQuery dialog ot confirm which records the user has checked. I've got the Jquery dialog appearing, but it doesn't appear to pick up what checkboxes have been checked.
Where am I going wrong oh wise forum members?!
Page code:
<apex:page id="MyPage" showHeader="false" controller="testController">
<head><title>My Service Detail</title>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-1.6.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-ui-1.8.16.custom.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jquery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/>
<script type="text/javascript">
$(document).ready(function() {
//var j$ = jQuery.noConflict();
var $dialog = $('<div></div>')
.html('{!changes}')
.dialog({
autoOpen: false,
modal: true,
buttons: {
"Confirm": function() {
alert('test');
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
title: 'Basic Dialog'
});
$('#opener').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
</head>
<apex:form id="myForm">
Some header text blah blah blah<br/>
<apex:pageBlock id="thePageBlock1" title="Available Addons">
<apex:dataTable value="{!availableaddons}" var="a">
<apex:column value="{!a.Add_On_Description__c}" width="200px">
<apex:facet name="header">Addon</apex:facet>
</apex:column>
<apex:column value="{!a.Add_On_Cost__c}">
<apex:facet name="header">Cost</apex:facet>
</apex:column>
<apex:column >
<apex:facet name="header">Checkbox</apex:facet>
<apex:inputCheckbox value="{!a.Dummy_Checkbox__c}"/>
</apex:column>
</apex:dataTable>
<button id="opener">Open the dialog</button>
</apex:pageBlock>
<apex:pageBlock >
<apex:pageMessages />
</apex:pageBlock>
</apex:form>
</apex:page>Controller code:
public class testController {
List <Subscriber_Add_On__c> SAL = new List <Subscriber_Add_On__c>();
public testController(){
}
public List<Subscriber_Add_On__c> getAvailableAddOns(){
return SAL = [Select Add_On_Cost__c,Add_On_Description__c,Dummy_Checkbox__c
from Subscriber_Add_On__c];
}
public String getChanges() {
String newaddons = 'The following addons will be added:';
for (Subscriber_Add_On__c s : SAL) {
if (s.Dummy_Checkbox__c)
newaddons=newaddons+s.Add_On_Description__c+',';
}
return newaddons;
}
}
Subscriber_Add_On__c is a custom object with three fields; description, code and the checkbox.
Where does it set that which checkboxes to be checked? You don't have IDs as well for checkboxes.
Thanks
Well if I was to add
<apex:commandButton value="Next" action="{!next}"/>
in place of the <button> and add the following code to the controller, the items I check are displayed in the Message. I want to replicate this funtionality, with the text displaying in the JQuery Dialog.
public PageReference next() { String newaddons = 'The following addons will be added:'; for (Subscriber_Add_On__c s : SAL) { if (s.Dummy_Checkbox__c) newaddons=newaddons+s.Add_On_Description__c+','; } ApexPages.addMessage(new ApexPages.message(ApexPages.severity.INFO,'New: '+newaddons)); return null; }Try populating the SAL list in the controller since the page is loaded first and then the getter is called. Since it is java script, that particular section of the page needs to be re-rendered so that .html will be populated with {!changes} . I hope you understand what I am trying to say.
I think so. How do I rerender the javascript?
You can do that by placing the script in <apex:outputPanel id="Panel">. Use action function to populate the list and use Rerender="Panel" in action function tag.
If this doesn't work out simple call the query in the constructor.
Also, check the source of the page and see what value do you get in Java Script .html: '{!changes}'
Ok I've updated the page to:
<apex:page id="MyPage" showHeader="false" controller="testController"> <head><title>My Service Detail</title> <apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-1.6.2.min.js')}"/> <apex:includeScript value="{!URLFOR($Resource.jquery, 'js/jquery-ui-1.8.16.custom.min.js')}"/> <apex:stylesheet value="{!URLFOR($Resource.jquery, 'css/ui-lightness/jquery-ui-1.8.16.custom.css')}"/> <apex:outputPanel id="container"> <script type="text/javascript"> $(document).ready(function() { //var j$ = jQuery.noConflict(); var $dialog = $('<div></div>') .html('{!newaddons}') .dialog({ autoOpen: false, modal: true, buttons: { "Confirm": function() { alert('test'); $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } }, title: 'Basic Dialog' }); }); function onControllerReturn() { alert('test'); $dialog.dialog('open'); return false; } </script> </apex:outputPanel> </head> <apex:form id="myForm"> <apex:actionFunction name="doNext" action="{!getchanges}" rerender="container"/> Some header text blah blah blah<br/> <apex:pageBlock id="thePageBlock1" title="Available Addons"> <apex:dataTable value="{!availableaddons}" var="a"> <apex:column value="{!a.Add_On_Description__c}" width="200px"> <apex:facet name="header">Addon</apex:facet> </apex:column> <apex:column value="{!a.Add_On_Cost__c}"> <apex:facet name="header">Cost</apex:facet> </apex:column> <apex:column > <apex:facet name="header">Checkbox</apex:facet> <apex:inputCheckbox value="{!a.Dummy_Checkbox__c}"/> </apex:column> </apex:dataTable> <apex:commandButton onclick="doNext();" oncomplete="onControllerReturn()" value="Save"/> </apex:pageBlock> <apex:pageBlock > <apex:pageMessages /> </apex:pageBlock> </apex:form> </apex:page>And the controller to:
public class testController { List <Subscriber_Add_On__c> SAL = new List <Subscriber_Add_On__c>(); String newaddons; public testController(){ } public List<Subscriber_Add_On__c> getAvailableAddOns(){ return SAL = [Select Add_On_Cost__c,Add_On_Description__c,Dummy_Checkbox__c from Subscriber_Add_On__c]; } public PageReference getChanges() { newaddons = 'The following addons will be added:'; for (Subscriber_Add_On__c s : SAL) { if (s.Dummy_Checkbox__c) newaddons=newaddons+s.Add_On_Description__c+','; } return null; } public String getnewaddons(){ return newaddons; } }When I click the button the alert is shown but the dialog won't open. Examining the .html for dialog in the console after the alert I can see if's picked up the records I've checked.
Just need to get the dialog to open!
Are you getting any Java Script error?
Nope!
I think thats becaue var $dialog = $('<div></div>') is defined in document.ready() function and you are calling $dialog.dialog() in a separate function.
Declaring $dialog as a global variable might work
That did it. Thanks! Appreciate the help!
Great!
Might have spoken too soon. If I refresh the page and tick a checkbox the dialog is blank. Clicking the button again and the dialog displays with the correct text. Othertimes the text does not reflect my choices. It's a bit hit and miss....
Do you want the dialog to be displayed whenever the button is clicked only or when a checkbox is checked? If you want it to be in whenever checkbox is checked, call the same action function on OnClick event of check box.
Sorry no. My post was a bit unclear.
What I want:
1) Page loads/is refreshed
2) I checked one or more checkboxes from the list
3) I click the button and the dialog should display with the names of the items I checked
4) I close the dialog, change my selection and click the button again and the new items are displayed
What actually happens:
1) Page loads/is refreshed
2) I checked one or more checkboxes from the list
3) I click the button and the dialog is displayed but without any text
4) I close dialog and click the button and the correct items are displayed
5) I continue this checking and button and sometimes it is correct, other times it;s not. About 50/50 really.
Yeah I got it. You will have trace it using the java script alerts and see what happens. I can't explain much without using the code.
I've reduced my page down to just displaying a JS alert box instead of the a JQuery dialog to test:
<apex:form id="myForm"> <apex:outputPanel id="container"> <script> function onControllerReturn() { alert('{!newaddons}') return false; } </script> </apex:outputPanel> <apex:actionFunction name="doNext" action="{!getchanges}" rerender="container"/> Some header text blah blah blah<br/> <apex:pageBlock id="thePageBlock1" title="Available Addons"> <apex:dataTable value="{!availableaddons}" var="a"> <apex:column value="{!a.Add_On_Description__c}" width="200px"> <apex:facet name="header">Addon</apex:facet> </apex:column> <apex:column value="{!a.Add_On_Cost__c}"> <apex:facet name="header">Cost</apex:facet> </apex:column> <apex:column > <apex:facet name="header">Checkbox</apex:facet> <apex:inputCheckbox value="{!a.Dummy_Checkbox__c}"/> </apex:column> </apex:dataTable> <apex:commandButton onclick="doNext();" oncomplete="onControllerReturn()" value="Save"/> </apex:pageBlock> <apex:pageBlock > <apex:pageMessages /> </apex:pageBlock> </apex:form> </apex:page>And I'm still getting the issue where the result is correct 50/50. Anyone got any ideas?
Ok. So if you are still getting the issue, use java script variable and populate it on every click of checkbox and get rid of action function. And in .html call the variable
.html: YourJavaScriptVariable
This var should be global.
Tried that, but not very successful. Wrecking my head now.
Anyone generous enough to provide code??
Right, to recap, here is what I'm trying to do:
1) Display in a table a list of records for a custom object. The table columnds are the records description (Text), cost (currency) and a checkbox (checkbox).
2) The user selects one or more of the records using the checkboxes
3) Upon clicking buton below table, a JQueryUI dialog displays with a message along the lines of "Please confirm that you have selected X" where X is the description of the records selected in 2).
4) The dialog has two buttons, 1) a Cancel button that closes dialog and 2) a Confirm button that calls an apex method in the controller
My issue is that I can't get the dialog to correctly display what was selected. I've spent a good bit of time trying to do this but without sucess.
Can anyone help and provide code or point out where I'm going wrong in the code I've previously posted?
Thanks!