[SalesForce] Why does Visualforce ignore setting apex:selectList and apex:inputCheckbox values if manipulated (disabled) by jQuery

I have a VF Page where I wanted to alter an <apex:selectList value="{!dependentSelection}">'s options dynamically like a dependent picklist with another apex:selectList. I felt using apex:actionSupport took too long to update, so I manipulated the dependent apex:selectList's options with jQuery, but in doing so, Visualforce would no longer set dependentSelection in the controller.

I found a question, Apex:selectList value not getting set in controller, and the solution is to use an HTML and then set it's value to an <apex:hiddenInput value="{!dependentSelection}"/>.

Also in this VF Page, I denoted many selections with an <apex:inputCheckbox> and altered their checked and disabled properties so that only one selection per section could be chosen and that one selection is always selected:

Example:

<apex:repeat value="{!section.itemList}" var="item">
    <tr>
        <td><apex:inputCheckbox value="{!item.isSelected}" styleClass="selection" onclick="validateSelection(this);"/></td>
        <td><apex:outputField value="{!item.record.Label__c}"/></td>
    </tr>
</apex:repeat>

With JavaScript

var j$ = jQuery.noConflict;

// on load
j$('.selection:checked').prop('disabled', true);

function validateSelection(thar){
    j$('.selection').each(function(){
        if(this == thar)
            j$(this).prop('checked', true).prop('disabled', true);
        else
            j$(this).prop('checked', false).prop('disabled', false);
}

Using this technique worked fine for me in my sandbox, and when I tested this in production with my browser it also worked.

Weird Part # 1

I tried this same technique in a new VF Page (using the same API Version 31) but it did not work. The variables were mysteriously not getting set in the controller (all the inputCheckbox variables came back as false in the controller). The culprit turned out to be using the validateSelection jQuery function and the problem was the same as Apex:selectList value not getting set in controller so the solution was again using a hiddenInput.

The weird part was the old VF Page's validateSelection would still work fine without hidden inputs, but the new VF Page's validateSelection would not work without hidden inputs.

Weird Part #2

In testing, everything would work fine on the old VF Page for my boss using Chrome version 34, but it did not work for our Client using Chrome version 37. There is word that updating to Chrome (beta) version 38 does work for this technique on inputCheckboxes. Could this be a browser compatability issue? Testing on IE 11 works for my boss, but I still have run my own tests.

Now how can it work for me on one Page but not another?? I'm curious to what the reason is behind this (like what's going on behind the scenes with Visualforce) and if there is any hope that this technique may be supported in the future.

Currently, I believe it is necessary use the hiddenInput technique now and in the future, but please confirm this is necessary.

Also, I believe the hiddenInput technique is necessary only if JavaScript is altering an input's properties or child options. (Using j$(this).addClass('highlight'); causes no issues.)

Best Answer

Disabled form elements are not "successful controls" and the browser is not required to submit those with the form data. I'm not sure why your old page works, I suspect it's not doing exactly what you think it's doing but that's really beside the point.

Proper form state is key, if the data is to be submitted by the browser to the server it must be in a successful control. Controls which are disabled cannot be successful and therefore aren't posted.

W3.org 17.13 Form Submission

As an alternate solution, I would suggest that your script sets the readonly attribute instead of the disabled attribute.

W3.org 17.12.2 Read-only controls

var j$ = jQuery.noConflict;

// on load
j$('.selection:checked').prop('readonly', true);

function validateSelection(thar){
    j$('.selection').each(function(){
        if(this == thar)
            j$(this).prop('checked', true).prop('readonly', true);
        else
            j$(this).prop('checked', false).prop('readonly', false);
}

Related Solutions

[SalesForce] Apex:selectList value not getting set in controller

I have had the same problem. The solution was to use tha native html select list and an visualforce hidden field. After each change on the selectlist the currently selected value is saved to the hidden field:

<!-- Here is the native select list. 
     It is empty, we fill it later with own options.
     Notice, that by onchange the selected value will be send to the hidden field. -->
<select id="someList" onchange="jQuery('[id$=selectedItemHidden]').val(jQuery(this).val());">
</select>

<!-- Hidden field with a reference to the apex variable -->
<apex:inputHidden value="{!selectedAccount}" id="selectedItemHidden"/>

<!-- Here we fill the select list with some options -->
<script>
for(var i = 0; i < optionsArray.length; i++)
{
    var opt = new Option(optionsArray[i],optionsArray[i]);
    jQuery("select#someList").append(opt);
}
<script>

You can pre fill the html select list with options from the database:

Controller:

public class MyClass{
    // Here we define the list with accounts
    public List<Account> accounts { get; set; }

    // In constructor we will read the accounts
    public MyClass(){
        accounts = [ Select Id, Name From Account Limit 10 ];
    }
}

Page:

<!-- Here we just use repeat function to iterate the list -->
<select id="someList">
    <apex:repeat value="{!accounts}" var="a">
        <option value="{!a.id}">{!a.name}</option>
    </apex:repeat>
</select>

[SalesForce] Passing value from visualforce to apex controller

The constructor is called before your getButtonsControl, and so it will indeed be null. In fact, that code, by itself, doesn't have any particular purpose, because you're not using the parameter with a function call of some sort. Here'd be a typical usage:

<apex:repeat value="{!ButtonsControl}" var="btnlist" id="btnsid" >
  <apex:commandButton action="{!doSomething}" value="Do Something" reRender="form">
    <apex:param name="LikedUserName" value="{!btnlist.Option_Name__c}" assignTo="{!actionBTN}" />
  </apex:commandButton>
</apex:repeat>

This will call the function doSomething (not currently defined in your controller), and actionBTN will contain the appropriate value for that instance of the button within your action function.