wrappers and JavaScript pop-up?

Question

Use Case:

What i want is a list of records, and allow this user to choose 2 of those records, then click a button to go to a new VF page, if the user selects more than 2, i want him to get a notification of some kind saying you need to select 2 records, I do not want the page refeshed though.

Strategy:

I'm creating a wrapper class for the records like this: http://wiki.developerforce.com/page/Wrapper_Class and i have that part going by creating a custonm controller... I need the notification part working.

Problem:

I don't know how to call methods from the customController in javascript Also, i do not want to refresh the entire page. I just want them to go back to where they were. I was thinking a pop-up notification but I'm flexible..

Answer 1

You need to use an <apex:actionFunction> tag.

Here is the documentation: http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_actionFunction.htm

This will let you access controller actions, do partial page refresh on other VF components via the rerender method, etc.

Answer 2

First you will need to write some Javascript or JQuery in order to count the number of selected checkboxes on the front end. I prefer Javascript if you don't have any other front-end code apart from this, there is no need to import the whole JQuery library.

That said, first thing you need to do is add the actionFunction between a form tag:

<apex:actionFunction name="yourActionFunctionName" action="{!yourControllerMethodThatRedirects}" rerender="yourFormIdOrAnything" />

Then you'll need to add class attribute for HTML or styleClass for inputField checkboxes.

If you have an apex:commandButton you will need to change it to html input - <input type="button" value="Submit" onclick="validateCheckboxes();" />

The Javascript part - Inside your page add the following:

<script type="text/javascript">
/* Cross Browser getElementsByClassName */
Node.prototype.getElementsByClassName = function(cn) 
{
    for (var r = [], e = this.getElementsByTagName('*'), i = e.length; i--;) 
    {
        if ((' ' + e[i].className + ' ').indexOf(' ' + cn + ' ') > -1)
        {
            r.push(e[i]); 
        }
    }
    return r;
}

/* Get the actual elements */
function validateCheckboxes()
{
    var checkboxes = document.getElementsByClassName('YOURCLASSNAMEHERE');
    var counter = 0;
    for (var i = 0; i < checkboxes.length; i++)
    {
        if (checkboxes[i].checked)
        {
            counter++;
        }
    }

    if (counter == 2)
    {
        yourApexFunctionName();
    }
    else
    {
        alert('Your message here when they have selected less or more than 2 checkboxes');
    }
}
</script>

I haven't tested the code but you should be able to figure out some minor changes if required.