Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
LithiumsLithiums 

Making the hidden panel visible

I have craeted a page and using apex:repeat i am creating multiple div and assiging them dynamic id's. On load want only one div to be visible and later based on certain actions, I would make other visible.

 

So on load I am getting the id of the div which needs to be visible and using setAttribute making it visible, but somehow it is still hidden.Can some one please look into the issue

 

<apex:pagetabStyle="Opportunity"standardController="Opportunity"extensions="LSOpportunityDetailsController"sidebar="false"showHeader="false">

 

<apex:includeScriptvalue="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"  />

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

<apex:stylesheetvalue="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.theme.css"/>

<apex:stylesheetvalue="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.base.css"/>

 

<scripttype="text/javascript">

    $(document).ready(function() {

        getRemoteValidation();

    });                                               

</script>

<scripttype="text/javascript">

    function getRemoteValidation() {        

       

     

        document.getElementById(phaseBlock{!currentP}).setAttribute("style","visibility:visible;");

}

    </script>

   

<apex:form>

    <apex:pageblocktitle="Test">

        <tablecellspacing="0"style="border:1px dotted #999999;">

                <tr>

                    <apex:repeatvalue="{!phases}"var="phaseWrapper"id="theRepeat">

                        <td  valign="top"id="phaseBlock{!phaseWrapper.phase.Name}"style="visibility:hidden">

                            <table>

                                <tr height="35">

                                    <td style="background-color:#E4ECFF" width="950" valign="top">

                                        <table >

                                            <tr>

                                                <td><apex:outputText value="{!phaseWrapper.phase.Name}" id="theValue" style="font-size:10pt;"/></td>

                                            </tr>

                                        </table>                                                    

                                    </td>

                                </tr>                                                               

                            </table>                                   

                        </td> 

                    </apex:repeat>

                </tr>

            </table>

    </apex:pageblock>

</apex:form>

</apex:page>

Best Answer chosen by Admin (Salesforce Developers) 
Maros SitkoMaros Sitko
I am sorry I spliced lines in your code, my mistake.
Have you add quetes around phaseBlock{!currentP}?

document.getElementById("phaseBlock{!currentP}").setAttribute("style","visibility:visible;");

if you have firebug, can you look into console, if you get some error?

All Answers

Maros SitkoMaros Sitko

Visualforce add some more charst to your ID, try to look via source code of page. So you must use jquery with special selector $j('[id$=phaseBlock{!currentP}]') or use this javascript function

 

RegExp.quote = function(str) {
     return str.replace(/([.?*+^$[\]\\(){}-])/g, "\\$1");
}; // from http://stackoverflow.com/questions/494035/#494122

String.prototype.endsWith = function(suffix) {
    return !!this.match(new RegExp(RegExp.quote(suffix) + '$'));
};

function getInputsThatEndWith(text) {
    
    var results = [],
        inputs = document.getElementsByTagName("input"),
        numInputs = inputs.length,
        input;
    
    for(var i=0; i < numInputs; i++) {
        var input = inputs[i];
        if(input.id.endsWith(text)) results.push(input);
    }
    
    return results;
}

 

to get right element and then

 

function getRemoteValidation() {        
        getInputsThatEndWith("phaseBlock{!currentP}").setAttribute("style","visibility:visible;");
}

 

OR second option:

try to use style classes instead of id, then salesforce will not add extra charst to your id, but agin you must find javascript function to get element by Class
LithiumsLithiums

Thanks for the reply, I looked at the source code and there are no char added to the html tags. I see that additional characters are added to the vf tags.

 

Can you please take a look at it and advice me.
Maros SitkoMaros Sitko
I am sorry I spliced lines in your code, my mistake.
Have you add quetes around phaseBlock{!currentP}?

document.getElementById("phaseBlock{!currentP}").setAttribute("style","visibility:visible;");

if you have firebug, can you look into console, if you get some error?
This was selected as the best answer
LithiumsLithiums

i tried doing it via CSS 

 

<style>

[id ^="phaseBlock"] {visibility:hidden;}

[id *="phaseBlock"{!currentP}] {visibility:visible;}

</style>

 

but in the page source i dont see the value combined as you can see below.Still the div is hidden

 

[id ^="phaseBlock"] {visibility:hidden;}

[id *="phaseBlock"Confirm] {visibility:visible;}
LithiumsLithiums

Thanks alot, it worked i was not using the quotes
Maros SitkoMaros Sitko
maybe you make mistake only here not in code, but is quetes " on right place? [id *="phaseBlock"{!currentP}] {visibility:visible;} should be [id *="phaseBlock{!currentP}"] {visibility:visible;}