AutoComplet AJAX response

**pzoli** · Mar 10th, 2012, 03:31 AM

(sorry for my english)
I used command on Linux:

Code:

svn co https://src.springframework.org/svn/spring-samples/webflow-primefaces-showcase/

to check out sample apps.
AutoComplet doesn't work with 3.0 - 3.2RC1 primefaces.

I packed a primefaces-3.1.1-debug.jar from svn with modified pom.xml for debugable JavaScript.

Code:

svn checkout http://primefaces.googlecode.com/svn/primefaces/tags/3_1_1/

pom.xml:
yuicompressor-maven-plugin (searched text: compress)

plugin-> configuration -> aggregations -> aggregation <removeIncluded>false</removeIncluded>

plugin-> configuration -> excludes
<exclude>**/*.js</exclude>

plugin-> configuration
<nomunge>true</nomunge>

cp jquery.1.7.1.js META-INF/resources/primefaces/jquery/jquery.js

Maven
mvn package

It's made an unpacked JavaScript (primefaces.js) to target directiry of primefaces.3.1.1-debug.
But sample application is died. TabView UI onclick event doesn't work with unpacked JavaScript.

local URL for tab 1: http://localhost:8088/WebflowFaces/a..._idt10:j_idt22
AutoComplete URL: http://localhost:8088/WebflowFaces/a...execution=e1s1

JavaScript detected bugs :
(primefaces.js 5313. row, occured on page loaded)

Code:

PrimeFaces.widget.SelectCheckboxMenu.prototype.setupDialogSupport = function() {
    var dialog = this.jq.parents('.ui-dialog:first');
    
    if(dialog.length == 1) {
        this.panel.css('position', 'fixed');
    }
}

this.jq is undefined

(primefaces.js 1228. row, occured on input box click)
(before PrimeFaces.widget.AutoComplete.prototype.bindDynam icEvents)

Code:

       if (e.pageX < offset.left ||
            e.pageX > offset.left + _self.panel.width() ||
            e.pageY < offset.top ||
            e.pageY > offset.top + _self.panel.height()) {
            _self.hide();
        }

offset is null

I typed "1" into input box with id="j_idt11:stringValue_input".

Posted request is:

Code:

j_idt11=j_idt11&j_idt11%3AstringValue_input=1&j_idt11%3Aperson_input=&j_idt11%3Aperson_hinput=&javax.faces.ViewState=e1s1&javax.faces.partial.ajax=true&javax.faces.source=j_idt11:stringValue&javax.faces.partial.execute=j_idt11:stringValue&javax.faces.partial.render=j_idt11:stringValue&j_idt11:stringValue=j_idt11:stringValue&j_idt11:stringValue_query=1

Server response is:

Code:

<?xml version='1.0' encoding='UTF-8'?>
<partial-response><changes><update id="j_idt11:stringValue"><![CDATA[<ul class="ui-autocomplete-items ui-autocomplete-list ui-widget-content ui-widget ui-corner-all ui-helper-reset"><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="10" data-item-value="10">10</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="11" data-item-value="11">11</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="12" data-item-value="12">12</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="13" data-item-value="13">13</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="14" data-item-value="14">14</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="15" data-item-value="15">15</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="16" data-item-value="16">16</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="17" data-item-value="17">17</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="18" data-item-value="18">18</li><li class="ui-autocomplete-item ui-autocomplete-list-item ui-corner-all" data-item-label="19" data-item-value="19">19</li></ul>]]></update><update id="javax.faces.ViewState"><![CDATA[e1s1]]></update></changes></partial-response>

HTML code in browser:

Code:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><link type="text/css" rel="stylesheet" href="/WebflowFaces/app/javax.faces.resource/theme.css?ln=primefaces-aristo" /><link type="text/css" rel="stylesheet" href="/WebflowFaces/app/javax.faces.resource/primefaces.css?ln=primefaces&amp;v=3.1.1" /><script type="text/javascript" src="/WebflowFaces/app/javax.faces.resource/jquery/jquery.js?ln=primefaces&amp;v=3.1.1"></script><script type="text/javascript" src="/WebflowFaces/app/javax.faces.resource/primefaces.js?ln=primefaces&amp;v=3.1.1"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>JSF 2, Spring Web Flow, and PrimeFaces Showcase</title>
	<link rel="stylesheet" href="/WebflowFaces/app/resources/styles/blueprint/screen.css" type="text/css" media="screen, projection" />
	<link rel="stylesheet" href="/WebflowFaces/app/resources/styles/blueprint/print.css" type="text/css" media="print" />
	<!--[if lt IE 8]>
		<link rel="stylesheet" href="/app/styles/blueprint/ie.css" type="text/css" media="screen, projection" />
	<![endif]--></head><body>
<div class="container">

	<div>
		<h1>JSF 2, PrimeFaces, and Spring Web Flow</h1>
		<h3 class="alt">Auto-complete
		</h3>
		<hr />
	</div>
	<div>
	<h5>Comments:</h5>

	<p>
	  	Flow artifacts in <span class="alt">src/main/webapp/WEB-INF/flows/autocomplete</span><br />
	  	Java classes in package <span class="alt">~/autocomplate</span>
	</p>
	<hr />
	</div>
	<div>

<form id="j_idt11" name="j_idt11" method="post" action="/WebflowFaces/app/autocomplete?execution=e1s1" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt11" value="j_idt11" />
<div id="j_idt11:j_idt12" class="ui-messages ui-widget"></div>
	<p><label for="j_idt11:stringValue">
String Value (type anything): </label><br /><span id="j_idt11:stringValue" class="ui-autocomplete"><input id="j_idt11:stringValue_input" name="j_idt11:stringValue_input" type="text" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all" autocomplete="off" /><div id="j_idt11:stringValue_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div></span><script id="j_idt11:stringValue_s" type="text/javascript">$(function(){PrimeFaces.cw('AutoComplete','widget_j_idt11_stringValue',{id:'j_idt11:stringValue'});});</script>
	</p>
	<p><label for="j_idt11:person">
Person (start with 'j'): </label><br /><span id="j_idt11:person" class="ui-autocomplete"><input id="j_idt11:person_input" name="j_idt11:person_input" type="text" class="ui-autocomplete-input ui-inputfield ui-widget ui-state-default ui-corner-all" autocomplete="off" autocomplete="off" /><input id="j_idt11:person_hinput" name="j_idt11:person_hinput" type="hidden" autocomplete="off" /><div id="j_idt11:person_panel" class="ui-autocomplete-panel ui-widget-content ui-corner-all ui-helper-hidden ui-shadow"></div></span><script id="j_idt11:person_s" type="text/javascript">$(function(){PrimeFaces.cw('AutoComplete','widget_j_idt11_person',{id:'j_idt11:person'});});</script>
	</p>

	<br />
	<p><button id="j_idt11:j_idt23" name="j_idt11:j_idt23" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({formId:'j_idt11',source:'j_idt11:j_idt23',process:'@all',update:'j_idt11'});return false;" type="submit"><span class="ui-button-text">Suggest</span></button><script id="j_idt11:j_idt23_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_j_idt11_j_idt23',{id:'j_idt11:j_idt23'});</script> 
		<button id="j_idt11:j_idt25" name="j_idt11:j_idt25" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="PrimeFaces.ab({formId:'j_idt11',source:'j_idt11:j_idt25',process:'@all'});return false;" type="submit"><span class="ui-button-text">Exit</span></button><script id="j_idt11:j_idt25_s" type="text/javascript">PrimeFaces.cw('CommandButton','widget_j_idt11_j_idt25',{id:'j_idt11:j_idt25'});</script><br />
	<hr />
	</p><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="e1s1" />
</form>
	</div>
</div></body>

</html>

I read about other solutions:
http://forum.primefaces.org/viewtopi...16565&start=10

Is ther any easy way to debug js files?
I found RichFaces forum, like this:
http://stackoverflow.com/questions/3...nder-richfaces

THX.

**pzoli** · Mar 13th, 2012, 01:34 PM

I found this warning on tomcat log:
WARNING: JSF1064: Unable to find or serve resource, undefined/undefined.js, from library, primefaces.

HTTP Get log:
GET http://localhost:8080/WebflowFaces/a...efaces&v=3.1.1 404 (Not Found)
jQuery.fn.extend.appendjquery.js:5771
jQuery.fn.extend.domManipjquery.js:5973
jQuery.fn.extend.appendjquery.js:5769
PrimeFaces.createWidgetprimefaces.js:198
PrimeFaces.cwprimefaces.js:185
(anonymous function)

**pzoli** · Mar 14th, 2012, 03:59 AM

primefaces.js (185, 198)
cw: function(widgetConstructor, widgetVar, cfg, resource)
createWidget: function(widgetConstructor, widgetVar, cfg, resource) -> resource = undefined

anonymous function (home: 75)
<script id="j_idt10_s" type="text/javascript">PrimeFaces.cw('TabView','widget_j_idt1 0',{id:'j_idt10'});</script>
the last resource parameter doesn't exist

PrimeFaces.cw('TabView', -> svn/3_1_1/src/main/java/org/primefaces/component/tabview/TabViewRenderer.java

Code:

    protected void encodeScript(FacesContext context, TabView tabView) throws IOException {
        ResponseWriter writer = context.getResponseWriter();
        String clientId = tabView.getClientId(context);
        boolean dynamic = tabView.isDynamic();

        startScript(writer, clientId);
        
        writer.write("PrimeFaces.cw('TabView','" + tabView.resolveWidgetVar() + "',{");
        writer.write("id:'" + clientId + "'");
        
        if(dynamic) {
            writer.write(",dynamic:true");
            writer.write(",cache:" + tabView.isCache());
        }
        
        if(tabView.getOnTabChange() != null) writer.write(",onTabChange: function(index) {" + tabView.getOnTabChange() + "}");
        if(tabView.getOnTabShow() != null) writer.write(",onTabShow:function(index) {" + tabView.getOnTabShow() + "}");

        if(tabView.getEffect() != null) {
            writer.write(",effect: {");
            writer.write("name:'" + tabView.getEffect() + "'");
            writer.write(",duration:'" + tabView.getEffectDuration() + "'");
            writer.write("}");
        }
        
        encodeClientBehaviors(context, tabView);

        writer.write("});");

        endScript(writer);
    }

There are more PrimeFaces.cw call in *Renderer.java files without resource parameter.

Code:

find ./|xargs grep -l "PrimeFaces.cw('.*',"|less

found more visual component source files

**pzoli** · Mar 14th, 2012, 08:34 AM

I found partially created Primefaces.widget objects on sample page load.

This code is run on else section because PrimeFaces.widget['TabView'] is undefined.

Code:

if(PrimeFaces.widget[widgetConstructor]) {
            window[widgetVar] = new PrimeFaces.widget[widgetConstructor](cfg);
        }
        else {
            var scriptURI = $('script[src*="/javax.faces.resource/primefaces.js"]').attr('src').replace('primefaces.js', resource + '/' + resource + '.js'),
            cssURI = $('link[href*="/javax.faces.resource/primefaces.css"]').attr('href').replace('primefaces.css', resource + '/' + resource + '.css'),
            cssResource = '<link type="text/css" rel="stylesheet" href="' + cssURI + '" />';

List of created widget constructors:

Code:

PrimeFaces.widget: Object
AccordionPanel: function (cfg) 
AjaxStatus: function (cfg) 
AutoComplete: function (cfg) 
BaseWidget: function () 
Button: function (cfg) 
Calendar: function (cfg)
Carousel: function (cfg)
CommandButton: function (cfg)
ConfirmDialog: function (cfg)
Dashboard: function (cfg)
DataGrid: function (cfg)
DataList: function (cfg)
DataTable: function (cfg)
Dialog: function (cfg)
Draggable: function (cfg)
Droppable: function (cfg)
Effect: function (cfg)
Fieldset: function (cfg)
InputText: function (cfg)
InputTextarea: function (cfg)
PrimeWebSocket: function (cfg)
RadioButton: function (cfg)
SelectBooleanButton: function (cfg)
SelectBooleanCheckbox: function (cfg)
SelectCheckboxMenu: function (cfg)
SelectListbox: function (cfg)
SelectManyButton: function (cfg)
SelectManyCheckbox: function (cfg)
SelectOneButton: function (cfg)
SelectOneMenu: function (cfg)
SelectOneRadio: function (cfg)
__proto__: Object

So, there is no TabView constructor defined. But a constructor definition is exists in concatenated primefaces.js file.
Why not appearence?

**pzoli** · Mar 14th, 2012, 10:28 AM

Fine! From primefaces-3.2 release <nomunge>true</nomunge> working well in pom.xml and I can debug Javascript now in runtime.
That's great!

Thread: AutoComplet AJAX response

Thread Tools

Display

AutoComplet AJAX response

Posting Permissions