function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
PedroLPedroL 

Problems with Visualforce and jquery

 

Hello,

 

I have been working on creating a configuration page with two lists where the user would select from the available options and then reorder if necessary how those options should be displayed. I ended up implementing it using jquery but I ran into browser issues and SF recommended it keeping it all in Visualforce.

 

However, I wanted to understand what was happening so I decided to do a simple test with very limited functionality (based on a sample SF provided me).

 

Basically I have an input field and from the you can choose to add it to the list (I do this using jquery). My problem is that when I hit the Save button the method is not running. I does if I don't add anything to the list.

 

Any help is greatly appreciated.

 

Thanks,

 

Pedro

 

 

<apex:page Controller="C05423993">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"/>
    <apex:form title="Customize" styleClass="oRight">
        <apex:pageBlock title="Case Views">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!Save}" id="saveButton" value="Save"/>
                <apex:commandButton value="Cancel" action="{!Cancel}"/>
            </apex:pageBlockButtons>
            <apex:inputText value="{!OptionTextbox}" id="textbox"/>
            <script>
                var textBox ='{!$Component.textbox}';
            </script>         
            <div class="duelingListBox" id="duel">
                <table class="layout">
                    <tr>
                         <td class="buttonCell">
                            <div class="text">Add</div>
                            <div class="text">
                                <a href="javascript&colon;addAccountsJS();">
                                    <img src="/s.gif" alt="Add"  class="rightArrowIcon" title="Add"/>
                                </a>
                            </div>
                            <div class="text">
                                <a href="javascript&colon;removeAccountsJS();">
                                    <img src="/s.gif" alt="Remove"  class="leftArrowIcon" title="Remove"/>
                                </a>
                            </div>
                            <div class="duelingText">Remove</div>
                        </td>
                    </tr>
                </table>
            </div>
            <apex:selectList value="{!OptionIndex}" size="10" id="List">
                <apex:selectOptions value="{!Options}" />
            </apex:selectList>
            <script>
                var list ='{!$Component.List}';
            </script>
        </apex:pageBlock>
    </apex:form>
   
    <script>
   
        var j$ = jQuery.noConflict();
        var selectListB = j$(esc(list));                  
               
        function esc(myid) {
            return '#' + myid.replace(/(:|\.)/g,'\\\\$1');
        }
 
        function addAccountsJS(){
            alert(j$(esc(textBox)).attr('type'));
            selectListB.append("<option selected='true' value='" + j$(esc(textBox)).attr("value") + "'>" + j$(esc(textBox)).attr("value") + "</option>");
        }
        function removeAccountsJS(){
            j$(esc(textBox)).attr('value','');
            alert('Remove');     
        }
 
    </script>   
</apex:page>
public class C05423993 { private Integer rowID = 0; public String OptionTextbox { get; set; } public String OptionIndex { get; set; } public List<SelectOption> Options { get { System.debug('Executing Getter'); if (Options == null) { Options = new List<SelectOption>(); } return Options; } private set; } public PageReference AddEntry() { Options.add(new SelectOption(String.valueOf(rowID++), OptionTextbox)); return null; } public PageReference RemoveEntry() { Integer position = -1; for (SelectOption so : Options) { position++; if (so.getValue() == OptionIndex) { Options.remove(position); break; } } return null; } public PageReference Save() { pagereference newPage = new PageReference('/500T0000002o01S'); newPage.setRedirect(true); System.debug(OptionTextbox); System.debug(Options); return newPage; } public PageReference Cancel() { System.debug(OptionTextbox); return null; } }