javascript - jsf.ajax.addOnEvent works only if I explicitly include javax.faces:jsf.js -

i using jsf 2.2.4 following in head tag:

<h:outputscript library="javax.faces" name="jsf.js" /> 

later found following post , removed above code included automatically: renaming jsf.js.jsf jsf.js.xhtml

when checked found included automatically said getting error script put in head of common template. error script getting object jsf undefined. purpose of script show common loader jsf ajax calls. script given below:

//to display loading indicator jsf f:ajax calls. jsf.ajax.addonevent(function(data) {   var ajaxstatus = data.status; // can "begin", "complete" , "success"   switch (ajaxstatus) {     case "begin": // called right before ajax request been sent.       wizshowajaxloader();       break;     case "complete": // called right after ajax response received.       wizhideajaxloader();       break;     case "success": // called when ajax response processed.       // noop.       break;   } }); 

i wonder why working when explicitly include jsf.js. when remove this, script showing jsf object undefined.

you need make sure script invoked after javax.faces:jsf.js being included, simple reason jsf defined in javascript scope when javax.faces:jsf.js has been included (and executed).

in nutshell, need make sure javascript code flow below:

var jsf = ...; ... jsf.ajax.addonevent(...); 

and not so:

jsf.ajax.addonevent(...); ... var jsf = ...; 

one way of ensuring include script <h:outputscript> in <h:body> target set head.

<h:head>     ... </h:head> <h:body>     <h:outputscript name="yourscript.js" target="head" />     ... </h:body> 

jsf ensure ends in html head after auto-included scripts.

an alternative keep in <h:head>, set target body.

<h:head>     ...     <h:outputscript name="yourscript.js" target="body" /> </h:head> 

jsf ensure ends in end of html body, it's executed right before dom loaded event.