1

First, forgive me for language, I'm a web coder by practice, self-teaching a lot of VisualForce/Apex, and a complete newbie.

I have a custom VF page I'm creating for my team with "industry news" twitter feeds [each feed is an individual component to make it easier to update].

The code is working how I want it to [a drop down offers choices, once choice is selected, new component renders below], except for the fact that the below components are rendering more or less on "mouse-over" instead of "on-click"... so, unless you are holding your mouse button down when you look at the drop down menu, it grabs the first drop-down choice and refreshes - not allowing you to choose the other drop down choices.

Any help on how to make it render AFTER the click of a selection would be much appreciated!

My page code:

    <apex:page controller="tweetfeedDropdown">

    <apex:pageBlock title="Twitter Feeds">
        Please choose what you would like to see in your feed.<br/><br/>
            <apex:form>
            <apex:actionregion>
            <apex:selectList value="{!selectedValue}" size="1" >
            <Apex:selectOptions value="{!someList}"/>
                <apex:actionSupport event="onclick" action="{!updateData}"  />    
            </apex:selectList> <br/><br/>
            </apex:actionregion>
            </apex:form>

        <apex:pageblocksection  id="TweetFeed_Initial" rendered="{!TweetFeed_Initial}" >
            <c:tweetfeed_1></c:tweetfeed_1>
        </apex:pageblocksection>

        <apex:pageblocksection  id="TweetFeed_2" rendered="{!TweetFeed_2}" >
            <c:tweetfeed_2></c:tweetfeed_2>
        </apex:pageblocksection>

        <apex:pageblocksection  id="TweetFeed_3" rendered="{!TweetFeed_3}" >
            <c:tweetfeed_3></c:tweetfeed_3>
        </apex:pageblocksection>


  </apex:pageBlock></apex:page>

And my controller:

public class tweetfeedDropdown {
  public Boolean TweetFeed_Initial {get; set;}
  public Boolean TweetFeed_2 {get; set;}
  public Boolean TweetFeed_3 {get; set;}
  public List<Selectoption> someList {get; set;}
  public String selectedValue {get; set;}

  public tweetfeedDropdown() {
    TweetFeed_Initial = true;
    TweetFeed_2 = false;
    TweetFeed_3 = false;
    someList = new List<SelectOption>{new selectoption('TFInitial','Choose a Feed Category'),
                                      new selectoption('TF2','Feed Title 2'),
                                      new Selectoption('TF3','Feed Title 3')};
  }

  public pageReference updateData() {
     if(selectedValue == 'TFInitial') {
          TweetFeed_Initial = true;
          TweetFeed_2 = false;
          TweetFeed_3 = false;
     } else if(selectedValue == 'TF2') {
          TweetFeed_Initial = false;
          TweetFeed_2 = true;
          TweetFeed_3 = false;
     } else if(selectedValue == 'TF3') {
          TweetFeed_Initial = false;
          TweetFeed_2 = false;
          TweetFeed_3 = true;             
     }
     return null;
  } 

}

Thoughts?

  • Thank you Mark! that is exactly what was wrong - and explains why it felt like a hover action instead of when the change is committed. It's working now! – LindseyG Jun 26 '15 at 18:10
1

No sure on the mouseover as I do not see anything that would cause that (It may be there but not in your question)

However, you need to change the event on your actionSupport to "onchange" instead of "onclick"

<apex:actionSupport event="onchange" action="{!updateData}"  />
  • To add some color: The change event is fired when a change to the element's value is committed by the user, whereas the click event is fired when a button is pressed and released. change is the correct event to use in this case because you do not want the action to be executed when clicking on the list to display the selections which is what is happening currently. – Mark Pond Jun 26 '15 at 15:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.