1

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);
    }
}
2
  • I see an apex:image tag how are you making it clickable? value only brings the image from the resource. May be I am missing something obvious please clarify
    – Rao
    Feb 7 '14 at 21:31
  • My assumption based on using other <apex> tags in the past was that enclosing an actionSupport inside the tag let me capture the event. It does react to clicks -- just with an error message. Feb 7 '14 at 22:21
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>
1
  • Thanks, this got me on the right track for what I was hoping to do. Still a strange error... Feb 7 '14 at 23:54
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.