How to save inline editing of PageBlockTable with dependent picklist

Question

I have a PageBlockTable with inline editing. When I go to save the new values are not being passed to the controller.

Visualforce page with the command button :

<apex:commandButton value="save" action="{!saveRow}" rerender="Components">
     <apex:param name="rowid" value="{!a.Id}" assignTo="{!SelectedRowId}"/>
     <apex:param name="prod" value="{!a.product__c}" assignTo="{!product}"/>
     <apex:param name="cat" value="{!a.component_category__c}" assignTo="{!category}"/>
</apex:commandButton>

<apex:column headerValue="Component Category">
     <apex:outputField value="{!a.Component_Category__c}"/>
</apex:column>

Apex Controller:

 public pageReference saveRow(){
        app_components__c selectedComponent = getAppComponent();
        if (selectedComponent == null){
            return null;
        }else{                        
            update selectedComponent;
        }
        return null;        
    }

public app_components__c getAppComponent(){
        list<App_Components__c> appComponents = getAppComponents();
        if (appComponents.size() > 0){
            for(app_components__c appComponent : appComponents ){
                if (appComponent.id == SelectedRowId){
                    return appComponent;
               }
            }
        }        
        return null;       

    }

Method 2 with Javascript from Visualforce: (from a stack post saying that inline may not work with picklists and checkboxes)

    <apex:actionFunction action="{!saveRow}" name="saveFields" reRender="Components" >
    <apex:param name="rowid" value="" assignTo="{!SelectedRowId}"/>
    <apex:param name="prod" value="" assignTo="{!product}"/>
    <apex:param name="cat" value="" assignTo="{!category}"/>
    </apex:actionFunction>
    <input type="text" id="focusMe" style="display:none"/>

    <apex:commandButton value="save2" onclick="focusAndSave('{!a.Id}', '{!a.product__c}', '{!a.component_category__c}'); return false;">

    </apex:commandButton>  

    <script>    
        // workaround is necessary since inline editing of VF picklist
// and/or checkboxes won't commit changes before action if the user 
// doesn't "click out" first.  
        function focusAndSave(id, product, cat) {
            document.getElementById('focusMe').click();
            alert(id+ product+ cat);  //NEW CHANGED VALUES ARE NOT PASSED
            saveFields(id,product,cat);
        }
        </script>

Answer 1

What you should probably do here given that the dependent picklists will be on the same page is set a popup containing these dependent picklists to popup when one of the two are being edited. This way both of the fields will be in edit mode at the same time. you can achieve that in javascript and set an ondblclick handler for the field so that way you can render the popup and then save the changes following with the page save method that you are using.