Announcement Announcement Module
Collapse
No announcement yet.
AutoComplet AJAX response Page Title Module
Move Remove Collapse
X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • AutoComplet AJAX response

    (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.
    Last edited by pzoli; Mar 10th, 2012, 05:10 AM.

  • #2
    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)
    Last edited by pzoli; Mar 13th, 2012, 02:43 PM.

    Comment


    • #3
      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
      Last edited by pzoli; Mar 14th, 2012, 09:33 AM.

      Comment


      • #4
        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?

        Comment


        • #5
          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!

          Comment

          Working...
          X