CODEWITHSUNDEEP
javascriptjsfrichfaces
ZeDonDino
ZeDonDino

Reputation: 5352

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?

Upvotes: 0

Views: 3874

Answers (2)

Abdeldjalil Hachimi
Abdeldjalil Hachimi

Reputation: 121

I have solved this problem by making a hard reload to your the browser and clear cache, and It's done, I hope my solution makes sense and solves your problem

Upvotes: 0

ZeDonDino
ZeDonDino

Reputation: 5352

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()"/>

Upvotes: 2

Related Questions