I have a custom button on my Account object that uses OnClick Javascript to display a modal popup. Currently in the Javascript, from that modal popup, the "Run Tool" button executes a VF page passing in the Account.Id. I have a picklist on the modal popup with related Accounts. What I need to do is pass the related Account Id that is selected in picklist into my Javascript to be able to execute my VF page for whatever Account Id is selected. The Related Account Ids are custom fields on the Account object. I haven't had any luck finding an example of how to pass the picklist value from the child/modal popup back to the Javascript in the OnClick code. Is this even possible?
OnClick Javascript
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')}
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')}
var j$ = jQuery.noConflict();
try{
j$(function() {
/*Append the jQuery CSS CDN Link to the Head tag.*/
j$('head').append('<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" type="text/css" />');
/*Create the HTML(DIV Tag) for the Dialog.*/
var html = '<div id="dialog" title="Select account to run"><p>Do you want to go to the Home tab ?</p></div>';
/*Check if Dialog(DIV Tag) already exists if not Append same to the Body tag.*/
if(!j$('[id=dialog]').size()){
j$('body').append(html);
}
var iframe_url = '{!URLFOR("/apex/ProductPenetrationPopup?id="+Account.Id )}'
var tool_url = '{!URLFOR("/apex/ProductPenetration?id="+Account.Id )}'
/*Open the jQuery Dialog.*/
j$( "#dialog" ).html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />')
.dialog({
autoOpen: true,
modal: true,
resizable: false,
width: 500,
height: 300,
show: {duration: 10},
hide: {duration: 10},
buttons: {
"Run Tool": function() {
window.location = tool_url; /*currently runs Product tool using the Account.ID*/
j$( this ).dialog( "close" );
},
Cancel: function() {
j$( this ).dialog( "close" );
}
}
});
});
}
catch(e){
alert('An Error has Occured. Error: ' + e);
}
I have added an item to an existing list. The new item is an expanding/contracting list with secondary expanding/contracting sub items. The second level items have check boxes under them.
The problem I am having is when I contract the Main Item (Labor Scope) without first contracting theSub Item (Cabinet) the checkboxes are still visible. (second screenshot below)
Here is what it looks like.
The new list item when fully expanded
The list expands fine and the data is saved correctly. The list contracts correctly when the Sub Item (Cabinet) is contracted before contracting the Main Item(Labor Scope)
Contract main list without contracting Sub Items(Cabinet) the related checkboxes are still visible but I want them hidden
I am relatively new to Visualforce and the jQuery in this page is the first I have worked with. I have done a lot of research and have seen similar code to what I have but haven't been able to figure out how to get my list to collapse correctly. I am thinking in my jQuery script I need to relate the list with parent/child. I'm just sure how to do so. Again, I inherited the program so I have only added to it to get my collapsible list.
Here is my jQuery related to the new list item and the added list
// -------- This is the code related to the parent Expand/Collapse Icon --------
$(".laborScopePlusIcon").toggle(function(){
$('.laborScopeTask').show();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/Collapse.png')}";
}, function() {
$('.laborScopeTask').hide();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}";
});
// -------- This is the code related to the Child Expand/Collapse Icon --------
$(".laborScopeSubPlusIcon").toggle(function(){
$('.laborScopeSubTask').show();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/Collapse.png')}";
}, function() {
$('.laborScopeSubTask').hide();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}";
});
Is it possible to have a picklist with values that are not selectable and sub values that are? I've been searching the board and haven't seen an example of what I'm trying to do.
I have a custom button on my Account object that uses OnClick Javascript to display a modal popup. Currently in the Javascript, from that modal popup, the "Run Tool" button executes a VF page passing in the Account.Id. I have a picklist on the modal popup with related Accounts. What I need to do is pass the related Account Id that is selected in picklist into my Javascript to be able to execute my VF page for whatever Account Id is selected. The Related Account Ids are custom fields on the Account object. I haven't had any luck finding an example of how to pass the picklist value from the child/modal popup back to the Javascript in the OnClick code. Is this even possible?
OnClick Javascript
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js')}
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js')}
var j$ = jQuery.noConflict();
try{
j$(function() {
/*Append the jQuery CSS CDN Link to the Head tag.*/
j$('head').append('<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/start/jquery-ui.css" type="text/css" />');
/*Create the HTML(DIV Tag) for the Dialog.*/
var html = '<div id="dialog" title="Select account to run"><p>Do you want to go to the Home tab ?</p></div>';
/*Check if Dialog(DIV Tag) already exists if not Append same to the Body tag.*/
if(!j$('[id=dialog]').size()){
j$('body').append(html);
}
var iframe_url = '{!URLFOR("/apex/ProductPenetrationPopup?id="+Account.Id )}'
var tool_url = '{!URLFOR("/apex/ProductPenetration?id="+Account.Id )}'
/*Open the jQuery Dialog.*/
j$( "#dialog" ).html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />')
.dialog({
autoOpen: true,
modal: true,
resizable: false,
width: 500,
height: 300,
show: {duration: 10},
hide: {duration: 10},
buttons: {
"Run Tool": function() {
window.location = tool_url; /*currently runs Product tool using the Account.ID*/
j$( this ).dialog( "close" );
},
Cancel: function() {
j$( this ).dialog( "close" );
}
}
});
});
}
catch(e){
alert('An Error has Occured. Error: ' + e);
}
I have added an item to an existing list. The new item is an expanding/contracting list with secondary expanding/contracting sub items. The second level items have check boxes under them.
The problem I am having is when I contract the Main Item (Labor Scope) without first contracting theSub Item (Cabinet) the checkboxes are still visible. (second screenshot below)
Here is what it looks like.
The new list item when fully expanded
The list expands fine and the data is saved correctly. The list contracts correctly when the Sub Item (Cabinet) is contracted before contracting the Main Item(Labor Scope)
Contract main list without contracting Sub Items(Cabinet) the related checkboxes are still visible but I want them hidden
I am relatively new to Visualforce and the jQuery in this page is the first I have worked with. I have done a lot of research and have seen similar code to what I have but haven't been able to figure out how to get my list to collapse correctly. I am thinking in my jQuery script I need to relate the list with parent/child. I'm just sure how to do so. Again, I inherited the program so I have only added to it to get my collapsible list.
Here is my jQuery related to the new list item and the added list
// -------- This is the code related to the parent Expand/Collapse Icon --------
$(".laborScopePlusIcon").toggle(function(){
$('.laborScopeTask').show();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/Collapse.png')}";
}, function() {
$('.laborScopeTask').hide();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}";
});
// -------- This is the code related to the Child Expand/Collapse Icon --------
$(".laborScopeSubPlusIcon").toggle(function(){
$('.laborScopeSubTask').show();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/Collapse.png')}";
}, function() {
$('.laborScopeSubTask').hide();
this.src="{!URLFOR($Resource.JqueryMobile, '/JqueryMobile/images/expand.png')}";
});
Is it possible to have a picklist with values that are not selectable and sub values that are? I've been searching the board and haven't seen an example of what I'm trying to do.
