You need to sign in to do that
Don't have an account?
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:addAccountsJS();">
<img src="/s.gif" alt="Add" class="rightArrowIcon" title="Add"/>
</a>
</div>
<div class="text">
<a href="javascript: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; } }