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
JN22JN22 

Assign Variable Value Based Upon IMG Tag ID

Hello,

 

I have the following VF Page code which allows a user to toggle between 3 different images (red, yellow, green).  The toggle works, but now I need to assign a value to a custom number variable based upon the image that the user toggles to.  Does anyone know how I can accomplish this or where I might find some code to do it?  Thanks,

 

<apex:page standardController="Account_Plan__c" tabStyle="Account" ShowHeader="TRUE">


<apex:outputPanel id="msgs">
<apex:pageMessages />
</apex:outputPanel>

 

<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<apex:includeScript value="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" />

 

<script type="text/javascript">


$(document).ready(function () {
$('.icon').click(function () {
$(this).hide();
var next = $(this).next();
console.log(next.length);
if (next.length == 0)
next = $(this).parent().find('.icon').first();

next.show();
});
});
</script>

 

<style type="text/css">
#StatusIcon
{
position: relative;
}

.icon
{
position: absolute;
left: 0px;
top: 0px;
display: none;
}

.icon.default
{
display: block;
}
</style>

 

<apex:form >


<div id="StatusIcon">
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G"/>
</div>

 

</apex:form>

</apex:page>

Best Answer chosen by Admin (Salesforce Developers) 
izayizay

Yes, I didn't add quotes to selectors. Also, I changed the code a bit to get the correct value and prevent conflict with other javascript libraries used by SFDC. 

 

Use the code below:

 

<script type="text/javascript">

$j = jQuery.noConflict();
$j(document).ready(function () {

$j(".numberField").val("1");//Set the initial value to 1
$j('.icon').click(function () {
$j(this).hide();
var next = $j(this).next();
if (next.length == 0)
next = $j(this).parent().find('.icon').first();

next.show();

if(next.attr("id") == "R"){

    $j(".numberField").val("1");

}else if(next.attr("id") == "Y"){

    $j(".numberField").val("2");

}else if(next.attr("id") == "G"){

   $j(".numberField").val("3");

}


});
});
</script>

 

Remove the style of the inputField to make it visible while debuggin.

 

 

All Answers

izayizay

Hi JN22,

 

You can add the custom field to the page and make it hidden. Then change its value as the images change. Ex.

 

JS

<script type="text/javascript">


$(document).ready(function () {
$('.icon').click(function () {
$(this).hide();
var next = $(this).next();
console.log(next.length);
if (next.length == 0)
next = $(this).parent().find('.icon').first();

next.show();

 

if($(this).attr("id") == "R"){

    $(.numberField).val("1");

}else if($(this).attr("id") == "Y"){

    $(.numberField).val("2");

}else if($(this).attr("id") == "G"){

   $(.numberField).val("3");

}


});
});
</script>

 

VF

<apex:inputField value="{!Account_Plan__c.Custom_Number__c}"  styleClass="numberField" style="visibility:hidden"/>

 

This will give the custom number field a value based in the selected image. You need to save the record to commit the change.

 

Hope this helps!
JN22JN22

Thanks for the help.  However, when I add the code you specified, the toggle function no longer works.  Is there something missing that I need to add?  Thanks.
izayizay

Yes, I didn't add quotes to selectors. Also, I changed the code a bit to get the correct value and prevent conflict with other javascript libraries used by SFDC. 

 

Use the code below:

 

<script type="text/javascript">

$j = jQuery.noConflict();
$j(document).ready(function () {

$j(".numberField").val("1");//Set the initial value to 1
$j('.icon').click(function () {
$j(this).hide();
var next = $j(this).next();
if (next.length == 0)
next = $j(this).parent().find('.icon').first();

next.show();

if(next.attr("id") == "R"){

    $j(".numberField").val("1");

}else if(next.attr("id") == "Y"){

    $j(".numberField").val("2");

}else if(next.attr("id") == "G"){

   $j(".numberField").val("3");

}


});
});
</script>

 

Remove the style of the inputField to make it visible while debuggin.

 

 

This was selected as the best answer
JN22JN22

Hi Izay,

 

That did the trick!  Thanks so much!!
JN22JN22

Hi Izay,

 

I have one other question.  I need to have the toggle ability and capture the values for multiple questions.  Do I need to replicate the code you provided for each question or is there a way to make it so that it works for each question and provides the individual values of each?  Thanks.
izayizay

I'm asuming that you will place the status icon images by each question.

  

If this is the case, you can add a name attibute to the icon images based in the question they refer to. And add that name in the image to the styleClass attribute of the hidden field. Ex

 

<p>Question 1?<p>

<div id="StatusIcon">
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R" name="q1"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y" name="q1"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G" name="q1"/>
</div>

<apex:inputField value="{!Account_Plan__c.Custom_Number__c}"  styleClass="q1numberField" style="visibility:hidden"/>

 

<p>Question 2?<p>

<div id="StatusIcon">
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP7" class="icon default" id="R" name="q2"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP8" class="icon" id="Y" name="q2"/>
<img src="/servlet/servlet.FileDownload?file=015S0000000PrP6" class="icon" id="G" name="q2"/>
</div>

<apex:inputField value="{!Account_Plan__c.Custom_Number__c}"  styleClass="q2numberField" style="visibility:hidden"/>

 

Then, you can use this in the code to set the value for the corresponding hidden <apex:inputField>. Ex.

 

<script type="text/javascript">

$j = jQuery.noConflict();
$j(document).ready(function () {

$j(".numberField").val("1");//Set the initial value to 1
$j('.icon').click(function () {
$j(this).hide();
var next = $j(this).next();
if (next.length == 0)
next = $j(this).parent().find('.icon').first();

next.show();

 

setFieldValue(next.attr("name"), next.attr("id")); //Pass the name and id of selected icon to function


});
});

 

function setFieldValue(name, color){

   var selector = "." + name + "numberField"; //The selector is the styleClass for the hidden field

    if(color == "R"){

        $j(selector).val("1");

    }else if(color == "Y"){

        $j(selector).val("2");

    }else if(color == "G"){

        $j(selector).val("3");

    }

}
</script>

 

Remember to add the name="q#" to each icon image given its corresponding question. And also to add the styleClas="q#numberField" to each hidden field. Also, make field visible while debuggin to make sure that the correct field is being updated.

 

Hope this helps!
JN22JN22

Excellent!  It works great!
JN22JN22

Hi Izay,

 

Sorry to bother you again, but I've run into another issue with my toggled images.  Everything works fine when editing, and it saves the values I assign.  When I go back in to edit, the values are still there, however, the images revert to the default.  Is there a way to have the image show based on the value that was saved (e.g., if it was saved as green can it re-open as green when editing)?  Thanks for all your help!
Izay IrizarryIzay Irizarry

Hi JN22,

 

Yes, this is possible. Use the code below.

*Note: if this doen't work try removing the quotes from the numbers in red.

 

<script type="text/javascript">

$j = jQuery.noConflict();
$j(document).ready(function () {

          //Set a loop to get values in hidden fields and set the correct icon based in value
    //The 5 here represents the number of questions... change as needed
    for(var i = 1; i <= 5; i++){
        var selector = ".q" + i + "numberField"; //The selector is the styleClass for the hidden field
        var value = $j(selector).val();//Hold the value in the hidden field to this question
        //If the field has no value... set its value to 1
        if(value == null || value = ""){
            $j(selector).val("1");
            value = "1";
        }
        var iconName = "q" + i;//The name for the icons related to this question
        //Iterate trough each icon related to this question...
        $j("[name='" + iconName +"']").each(function(j){
            //If the icon has the correct id given the value...
            if(value == "1" && $j(this).attr("id") == "R"){
                $j(this).show();
            }else if(value == "2" && $j(this).attr("id") == "Y"){
                $j(this).show();
            }else if(value == "3" && $j(this).attr("id") == "G"){
                $j(this).show();
            }else{
                $j(this).hide();
            }
        });
    }
    
    $j(".icon").click(function () {
        $j(this).hide();
        var next = $j(this).next();
        if (next.length == 0)
            next = $j(this).parent().find('.icon').first();

            next.show();

            setFieldValue(next.attr("name"), next.attr("id")); //Pass the name and id of selected icon to function

    });
});

 

function setFieldValue(name, color){

   var selector = "." + name + "numberField"; //The selector is the styleClass for the hidden field

    if(color == "R"){
        $j(selector).val("1");
    }else if(color == "Y"){
        $j(selector).val("2");
    }else if(color == "G"){
        $j(selector).val("3");
    }

}
</script>
JN22JN22

Hi Izay,

 

Thanks for your response.  When I add the code you provided, I am no longer able to toggle through the images.  The current script I have is below.  I think it may also not work based on my naming convention for each image.  The name attribute is s#q# (e.g., s1q1) but is also followed by an "n", "u", or "r" depending upon the type of the Opportunity. Would this complicate things too much in the Javascript script?  I think I may be able to accomplish the image being remembered using an <apex:outputPanel> and render attribute changing the default image based on the value of numberfield. 

 

 

//Javascript section to handle red/yellow/green ball toggle for qualifier status
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function () {

//Set a loop to get values in hidden fields and set the correct icon based in value
//The 5 here represents the number of questions... change as needed
for(var s = 1; s <= 5; s++){
for(var i = 1; i <= 7; i++){
var selector = ".s" + s + "q" + i + "numberField"; //The selector is the styleClass for the hidden field
var value = $j(selector).val();//Hold the value in the hidden field to this question

//If the field has no value... set its value to 1
if(value == null || value = ""){
$j(selector).val("0");
value = "0";
}
var iconName = "s" + s + "q" + i;//The name for the icons related to this question

//Iterate trough each icon related to this question...
$j("[name='" + iconName +"']").each(function(j){

//If the icon has the correct id given the value...
if(value == "0" && $j(this).attr("id") == "R"){
$j(this).show();
}else if(value == "1" && $j(this).attr("id") == "Y"){
$j(this).show();
}else if(value == "2" && $j(this).attr("id") == "G"){
$j(this).show();
}else{
$j(this).hide();
}
});
}
}


$j('.icon').click(function () {
$j(this).hide();
var next = $j(this).next();
if (next.length == 0)
next = $j(this).parent().find('.icon').first();
next.show();

setFieldValue(next.attr("name"), next.attr("id")); //Pass the name and id of selected icon to function

});
});
function setFieldValue(name, color){
var selector = "." + name + "numberField"; //The selector is the styleClass for the hidden field
if(color == "R"){
$j(selector).val("0");
}else if(color == "Y"){
$j(selector).val("1");
}else if(color == "G"){
$j(selector).val("2");
}
}
izayizay

Hey,

 

I'm gonna assume that you have multiple sections and each section has multiple questions and that you have 3 hidden field per question, one per oppty record type. Then, you can use the code below.

 

*Note that to make things simpler change the styleClass for hidden field to be the same as icon img name.

 

JS

<script type="text/javascript">

$j = jQuery.noConflict();
$j(document).ready(function () {

    //Set a loop to get values in hidden fields and set the correct icon based in value
    //The 5 here represents the number of questions... change as needed
    for(var s = 1; s <= 5; s++){
        for(var i = 1; i <= 7; i++){
            var selectorN = ".s" + s + "q" + i + "n"; //The selector is the styleClass for the hidden field
            var selectorY = ".s" + s + "q" + i + "y"; //The selector is the styleClass for the hidden field
            var selectorR= ".s" + s + "q" + i + "r"; //The selector is the styleClass for the hidden field
                        
            var valueN = $j(selectorN).val();//Hold the value in the hidden field to this question
            
            //If the field has no value... set its value to 1
            if(valueN == null || valueN == ""){
                $j(selectorN).val("1");
                valueN = "1";
            }
            
            var valueY = $j(selectorY).val();//Hold the value in the hidden field to this question
                        
            //If the field has no value... set its value to 1
            if(valueY == null || valueY == ""){
                $j(selectorY).val("1");
                valueY = "1";
            }
            
            var valueR = $j(selectorY).val();//Hold the value in the hidden field to this question
                        
            //If the field has no value... set its value to 1
            if(valueR == null || valueR == ""){
                $j(selectorR).val("1");
                valueR = "1";
            }
                      
            var iconNameN = "s" + s + "q" + i + "n";//The name for the icons related to this question
            var iconNameY = "s" + s + "q" + i + "y";//The name for the icons related to this question
            var iconNameR = "s" + s + "q" + i + "r";//The name for the icons related to this question
            
            //Iterate trough each icon related to this question...
            $j("[name='" + iconNameN +"']").each(function(j){
                //If the icon has the correct id given the value...
                if(valueN == "1" && $j(this).attr("id") == "R"){
                    $j(this).show();
                }else if(valueN == "2" && $j(this).attr("id") == "Y"){
                    $j(this).show();
                }else if(valueN == "3" && $j(this).attr("id") == "G"){
                    $j(this).show();
                }else{
                    $j(this).hide();
                }
            });
            
            $j("[name='" + iconNameY +"']").each(function(j){
                //If the icon has the correct id given the value...
                if(valueY == "1" && $j(this).attr("id") == "R"){
                    $j(this).show();
                }else if(valueY == "2" && $j(this).attr("id") == "Y"){
                    $j(this).show();
                }else if(valueY == "3" && $j(this).attr("id") == "G"){
                    $j(this).show();
                }else{
                    $j(this).hide();
                }
            });
            
            $j("[name='" + iconNameR +"']").each(function(j){
                //If the icon has the correct id given the value...
                if(valueR == "1" && $j(this).attr("id") == "R"){
                    $j(this).show();
                }else if(valueR == "2" && $j(this).attr("id") == "Y"){
                    $j(this).show();
                }else if(valueR == "3" && $j(this).attr("id") == "G"){
                    $j(this).show();
                }else{
                    $j(this).hide();
                }
            });
        }
    }
    
    $j(".icon").click(function () {
        $j(this).hide();
        var next = $j(this).next();
        if (next.length == 0)
            next = $j(this).parent().find('.icon').first();

            next.show();

            setFieldValue(next.attr("name"), next.attr("id")); //Pass the name and id of selected icon to function

    });
    
});

 

function setFieldValue(name, color){

   var selector = "." + name//The selector is the styleClass for the hidden field

    if(color == "R"){
        $j(selector).val("1");
    }else if(color == "Y"){
        $j(selector).val("2");
    }else if(color == "G"){
        $j(selector).val("3");
    }

}
</script>

 

 

 

VFPage sample for Section 2

<div id="s2">

    <p>Question 1?</p>
    </apex:outputPanel rendered="{!RecType=='n'}">
        <div id="StatusIcon">
            <img src="/img/samples/light_red.gif" class="icon default" id="R" name="s2q1n"/>
            <img src="/img/samples/light_yellow.gif" class="icon" id="Y" name="s2q1n"/>
            <img src="/img/samples/light_green.gif" class="icon" id="G" name="s2q1n"/>
        </div>
        <br/><br/>
        <apex:inputField value="{!Field__c}"  styleClass="s2q1n" style=""/>
    </apex:outputPanel>
    
    <apex:outputPanel rendered="{!RecType=='y'}">
        <div id="StatusIcon">
            <img src="/img/samples/light_red.gif" class="icon default" id="R" name="s2q1y"/>
            <img src="/img/samples/light_yellow.gif" class="icon" id="Y" name="s2q1y"/>
            <img src="/img/samples/light_green.gif" class="icon" id="G" name="s2q1y"/>
        </div>
        <br/><br/>
        <apex:inputField value="{!Field__c}"  styleClass="s2q1y" style=""/>
    </apex:outputPanel>
    
    <p>Question 2?</p>
    <apex:outputPanel rendered="{!RecType=='n'}">
        <div id="StatusIcon">
            <img src="/img/samples/light_red.gif" class="icon default" id="R" name="s2q2n"/>
            <img src="/img/samples/light_yellow.gif" class="icon" id="Y" name="s2q2n"/>
            <img src="/img/samples/light_green.gif" class="icon" id="G" name="s2q2n"/>
        </div>
        <br/><br/>
        <apex:inputField value="{!Field__c}"  styleClass="s2q2n" style=""/>
    </apex:outputPanel>
    
    <apex:outputPanel rendered="{!RecType=='y'}">
        <div id="StatusIcon">
            <img src="/img/samples/light_red.gif" class="icon default" id="R" name="s2q2y"/>
            <img src="/img/samples/light_yellow.gif" class="icon" id="Y" name="s2q2y"/>
            <img src="/img/samples/light_green.gif" class="icon" id="G" name="s2q2y"/>
        </div>
        <br/><br/>
        <apex:inputField value="{!Field__c}"  styleClass="s2q2y" style=""/>
    </apex:outputPanel>

</div>

 

 
izayizay

You can do this also. Instead of having multiple apex:panels you can have one set of icon img per question with the name given the opty rec type. This will probably make the code better to manage.

 

Example:

 

<p>Question 2?</p>
    <div id="StatusIcon">
        <img src="/img/samples/light_red.gif" class="icon default" id="R" name="{!IF(RecTYpeName=='n', 's2q2n', IF(RecTypeName=='y', 's2q2y', IF(RecTypeName=='r', 's2q2r', '')))}" />
        <img src="/img/samples/light_yellow.gif" class="icon" id="Y" name="{!IF(RecTYpeName=='n', 's2q2n', IF(RecTypeName=='y', 's2q2y', IF(RecTypeName=='r', 's2q2r', '')))}" />
        <img src="/img/samples/light_green.gif" class="icon" id="G" name="{!IF(RecTYpeName=='n', 's2q2n', IF(RecTypeName=='y', 's2q2y', IF(RecTypeName=='r', 's2q2r', '')))}" />
    </div>
    <br/><br/>
    <apex:inputField value="{!Field__c}"  styleClass="s2q2n" style="" rendered="{!RecTypeName=='n'}"/>
    <apex:inputField value="{!Field__c}"  styleClass="s2q2y" style="" rendered="{!RecTypeName=='y'}"/>
    <apex:inputField value="{!Field__c}"  styleClass="s2q2r" style="" rendered="{!RecTypeName=='r'}"/>

 

 
JN22JN22

Thanks so much Izay!  I will give them a try.  You've been a HUGE help!!!