Return Visualforce Component from JavaScript remoting?

Question

I am trying to use JavaScript Remoting to return a dynamic Visualforce component. My use case is that a user can select from a variety of actions, each corresponding to a pre-defined Visualforce Component. Once they select an action the component should be rendered dynamically. When I attempt this, nothing is returned and I receive the following error in the browser's console:

Visualforce Remoting Exception: Internal Service Error: java.lang.NullPointerException (342168595-56884 (1246936158))

I've also attempted to return the Component directly from the JS Remoting method, which generated the same error.

Does anyone know what I might be doing wrong? Or if there is an alternative way of accomplishing this task (generating a specific Visualforce component from a user click)?

Here is my code:

Visualforce Page:

<apex:page controller="PageCtrl">
<script type="text/javascript">
    var openComponent = '{!$RemoteAction.PageCtrl.openComponent}';

    function open() {
        Visualforce.remoting.Manager.invokeAction(
            openComponent,
            function(result, event) {
                console.log(result);
                console.log(event);
            }
        );
    }
</script>

<apex:dynamicComponent componentValue="{!selectedComponent}" />

Page Controller:

public static ApexPages.Component selectedComponent {get; set;}

@RemoteAction
public static void openComponent()
{
    selectedComponent = new Component.ExampleComponent();
}

Answer 1

Dynamic visualforce components runs on Visualforce engine and is not stateless.

Hence, I don't think you can use it with remoting.

Workaround would be to do DOM manipulation using JavaScript or jQuery.