Uncaught TypeError for <apex:actionSupport> inside <apex:image>

Question

I am trying to set up a demo with a few different images that allow you to click on an image and show the next one. For simplicity sake, I figured I could just set this up using an incrementing integer that goes up on click and use the MOD function to just return remainders.

The issue I am having below is that when I click on the image, I get a Javascript error (and the actionSupport doesn't seem to work). I have the counter, called index, displayed in the outputPanel I am rerendering, and the number stays the same (I am assuming due to the JS error).

Uncaught TypeError: Cannot read property 'action' of null

I tried making my increment() method of type void and PageReference, though that didn't make much of a difference. It appears that for whatever reason the actionSupport is being read as some sort of null object.

VF Page (there is more to the page, but this is the snippet that matters):

<apex:page controller="myController">
    <apex:outputPanel layout="none" id="myImages">
        {!index}
        <apex:image styleClass="phs-image" value='{!URLFOR($Resource.MyImages, "pic1.png")}' rendered="{!index == 0}">
            <apex:actionSupport event="onclick" action="{!increment}" reRender="myImages"/>
        </apex:image>
        <!-- There are 4 more images with different "rendered" criteria -->
    </apex:outputPanel>
</apex:page>

Apex Class:

public with sharing class myController 
{
    private Integer index = 0;

    public PageReference increment()
    {
        index++;
        return null;
    }

    public Integer getIndex()
    {
        return Math.mod(index, 5);
    }
}

Answer 1

Just a suggestion :) If I were you I would do :

<apex:page controller="myController_val">
<apex:form >
{!index}
         <apex:commandLink action="{!increment}">
             <apex:image value="{!$Resource.Customer_Buisness}"/>
         </apex:commandLink>
</apex:form>
</apex:page>

Answer 2

The reason you got this compile error is because your <apex:actionSupport> tag was not nested within an <apex:form> tag. The compiler allows it, but you'll get a runtime error exactly as you specified.

Working Markup:

<apex:page controller="myController">
    <apex:form>
        <apex:outputPanel layout="none" id="myImages">
            {!index}
            <apex:image styleClass="phs-image" value='{!URLFOR($Resource.MyImages, "pic1.png")}' rendered="{!index == 0}">
                <apex:actionSupport event="onclick" action="{!increment}" reRender="myImages"/>
            </apex:image>
            <!-- There are 4 more images with different "rendered" criteria -->
        </apex:outputPanel>
    <apex:form>
</apex:page>