javascriptjsfrichfaces

uncaught TypeError: Cannot read property 'action' of null with delayed handler


I have following problem:

This is my xhtml part.

 <h:panelGroup id="#{id}suggestionPanel" rendered="#{rendered}">
     <a4j:jsFunction name="autocompleteHandler"
            action="#{autocompleteBean.prepareAction(suggestionAction)}">
         <a4j:actionparam name="param1" assignTo="#{searchString}"/>
     </a4j:jsFunction>
 ...
 <h:inputText value="#{searchString}"
              rendered="#{validationId == null}"
              id="#{id}search"
              onkeyup="delayedHandler(300, this)"/>

The javascript method for handling this is given here:

var _timer = 0;
function delayedHandler(ms, thisElement)
{
    if (_timer) window.clearTimeout(_timer);
    _timer = window.setTimeout(function()
    {
        autocompleteHanlder(thisElement.value)
    }, ms);
}

So what problems do I have?

I get this Error when executing this code:

Uncaught TypeError: Cannot read property 'action' of null framework.pack.js.xhtml:2791
A4J.Query framework.pack.js.xhtml:2791
A4J.AJAX.PrepareQuery framework.pack.js.xhtml:2562
A4J.AJAX.Submit framework.pack.js.xhtml:2592
autocompleteHandler

The cool thing about this is if my javascript doesnt call the handler in a delayed manner like this

function delayedHandler(ms, thisElement)
{            
    autocompleteHanlder(thisElement.value);            
}

There isn't a problem in the delay part of the javascript function since I've already tested it with some alerts.

Somehow with this delaying it can't read the property action of <a4j:jsFunction.

Anyone knows how to solve this?


Solution

  • I actually solved this problem. You don't need any JavaScript calls to delay your execution. a4j:jsfunction has an attribute called 'requestDelay' that handles all such needed timeouts. So basicly the code would look something like

    <a4j:jsFunction name="autocompleteHandler"
                    action="#{suggestionTestBean.prepareAction(suggestionAction)}"
                    requestDelay="1200">
    </a4j:jsFunction>
    

    for a delay of 1.2 seconds, then you would call your delayed execution like this:

    <h:inputText value="#{searchString}"
                 rendered="#{validationId == null}"
                 id="#{id}search"
                 onkeyup="autocompleteHandler()"/>