Javascript/jQuery and JSF

I'm trying to implement a custom JSF component using JSF 2.0 and Javascript/jQuery. The component I'm trying to make is a sortable list whose order can be bound to a collection in the backing bean and whose event (order changed) can be caught with a listener. My question is how would I link the Javascript event so that JSF can catch it (since a list item is not an input component, or button or link)? I know I could listen to the Javascript event and then fire a click event on a hidden commandButton but I'm wondering if there's a more elegant solution (since I'd also prefer a custom event rather than just ActionEvent). Any help would be very much appreciated. Thank you.

OK, now I'm really green at this so I don't imagine that I can be much help. I'm new to JSF and trying to learn it myself, but I too have an interest in creating components using jQuery. I really don't have a handle on this stuff...yet, but if I had to guess: I'd say your best bet would be to use the new built-in ajax features of JSF 2.0. <f:ajax render="..." event="valueChange"/> Java Server Faces has implemented it's own valueChange event. I don't know how to use this stuff yet though so I can't be of any help other than making this suggestion. Creating your own custom event may be a bit more difficult. I'm guessing you might need to dig into the guts of the expression language and mess with ELResolver and what not. I don't know yet, I'm still studying it.
Mark

Similar Messages

  • JSON, Javascript, PHP and JQUERY

    Hi,
    In my earlier post, I decided to go with PHP and leave
    ASP.NET 3.5 for the time being. I now need your help in charting a
    way to learn PHP.
    I am a Web Designer and I have started using JQuery
    extensively in the websites, as I love JQuery and it makes the life
    so much easier. What I want to know from you all that :
    Q1) What is JSON and do I need to learn it if I am getting
    into PHP?
    Q2) Since, I am using JQuery, do I need to learn Javascript
    from bottom to top? Does it help to master Javascript thoroughly?
    Q3) What should be my learning path? Should I start with PHP
    or Javascript first?
    There are so many things to learn and very less time. Also,
    if you all can tell me some books (apart from David's :-)) ) which
    will help me in learning.
    Thanks to all.
    Gaurav

    gaurav_ch wrote:
    > Q1) What is JSON and do I need to learn it if I am
    getting into PHP?
    JSON is JavaScript Object Notation. It's a shorthand way of
    transmitting
    data. You don't need to know it for PHP, although PHP does
    have support
    for JSON>
    > Q2) Since, I am using JQuery, do I need to learn
    Javascript from bottom to
    > top? Does it help to master Javascript thoroughly?
    No, you don't need to learn JavaScript from bottom to top to
    use jQuery.
    However, a good understanding of JavaScript will improve your
    ability to
    use jQuery or any other JavaScript framework.
    > Q3) What should be my learning path? Should I start with
    PHP or Javascript
    > first?
    I would start with PHP first. PHP is a server-side language,
    so your
    content is delivered to all users. JavaScript is normally
    used on the
    client-side (within the browser), so the small percentage of
    people who
    browse with JavaScript disabled don't see content or effects
    delivered
    by JavaScript. It's also important to realize that search
    engines don't
    spider content that is generated by JavaScript.
    > Also, if you all can
    > tell me some books (apart from David's :-)) ) which will
    help me in learning.
    I find "Programming PHP" by Kevin Tatroe and Rasmus Lerdorf
    very useful.
    "Pro PHP Security" by Chris Snyder and Michael Southwell is
    also
    essential reading.
    For jQuery, "jQuery in Action" by Bear Bibeault and Yehuda
    Katz is
    excellent.
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • Facelets and jsf-extensions problem.

    I'm fairly certain I've run into a problem between facelets and jsf-extensions. I'm working with JSF 1.2 RI, Woodstock, Facelets 1.1.13, on Tomcat 6.
    When trying to get Woodstock autoValidation to work I get a javascript error the "I has no properties". The error occurs in the com_sun_faces_ajax.js file in the jsf-extensions-dynamic-faces-0.1.jar (I've used both the RC4 and a build today ,10/18/07 from source with the same results). Here is the code snippet where it happens (with my comment).
    var I = G.getElementsByTagName("components")[0];
    var C = I.getElementsByTagName("render");
    for(var F = 0; F < C.length; F++) {
    In the second line there it looks like the variable I is null, but based on the post response below I don't know why.
    The response from the post looks like this:
    <partial-response><components><render id="PayableForm:vendorGci"><markup><![CDATA[{"valid":true,"id":"PayableForm:vendorGci"}]]></markup></render></components>
    However the server side code (validation method) never gets executed. I'm willing to do some digging and debug work, but I'd need to be pointed in the right direction.
    The following is more potentially useful code snippets.
    Here is the textField code:
    <w:form id="PayableForm">
    <w:textField style="display:none;" />
    <w:message for="vendorGci" />
    <w:label id="vendorGciLabel" for="vendorGci" text="Vendor: " />
    <w:textField id="vendorGci" autoValidate="true"
    text="${vendorBean.searchGci}" maxlength="8" required="true"
    validatorExpression="#{ vendorBean.validateVendor}" />
    Here is the javascript in the page (the init function is called from the body: onLoad="setTimeout('init();', 0);" , this does happen):
    <w:script type="text/javascript">
    function VendorListener(){
    function VendorNotify(props){
    alert("VendorNotify called!"); <--------------- I never see this alert message
    if ( props.id != "PayableForm:vendorGci") { return; }
    var field = document.getElementById("PayableForm:vendorGciLabel");
    field.setProps({
    valid: props.valid
    VendorListener.prototype.notify = VendorNotify;
    function initAccountRows(){
    var table = document.getElementById("PayableForm:vendorAccountTable");
    table.initAllRows();
    function init(){
    initAccountRows();
    var listener = new VendorListener();
    dojo.subscribe(
    webui.suntheme.widget.textField.event.validation.endTopic ,
    listener, listener.notify);
    Here is the validator method. It currently doesn't do anything, just trying to get something to work. I never see the output, and I never hit the breakpoint in the method.
    public void validateVendor(FacesContext context, UIComponent comp, Object value){
    System.out.println("**********************************");
    System.out.println("validateVendor called");
    System.out.println(value);
    System.out.println("**********************************");
    }

    Actually I don't need a global variable. I need to refer in my included template the actual backing bean used in the current page. As all my backing bean extends a abstract class I could bind my component to a property of the current backing bean, no matters which one. Just like a polymorphic call but without the parameter. Let's imagine I could get this object of the facesContext object I would be able to do:
    <rich:datascroller renderIfSinglePage="false" align="right" for="listagem" maxPages="12" fastStep="10"
    pageIndexVar="pageIndex" pagesVar="pages" stepControls="show" fastControls="hide" boundaryControls="show"
    inactiveStyleClass="paginacaoInativa" selectedStyleClass="paginacaoSelecionada"
    styleClass="paginacao" tableStyleClass="paginacaoTabela"
    binding="#{facesContext.currentBackingbean.formDataScroller}" id="paginacao">
    Instead of pass the backing bean to the ui:param of this template... Dou you get the point?

  • How to work JQuery and content editor webpart functionality in sharepoint 2013?

    Hi all,
    I have a requirement to display the list data in share-point page by using JQuery and content editor web-part. could you please any one suggest the process to display the list data using JQuery and ContentEditorWebpart.
    Thanks in advance.
    Thanks,
    phani kumar
    Phani kumar

    Hi,
    From your description, my understanding is that you want to show a list data in a page using jQuery and Content Query Web Part.
    You could use SharePoint REST API to accomplish your requirement, please refer to this code below:
    <div id="listData">
    </div>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script><script type="text/javascript">
    $(document).ready(function(){
    //replace your list title
    $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('customlist03')/items",
    type: "GET",
    headers: {"accept": "application/json;odata=verbose"},
    success: function (data) {
    if (data.d.results) {
    var obj = data.d.results;
    for(var i = 0; i < obj.length; i++)
    $("#listData").append("<div>title "+obj[i].Title+"</div>");
    error: function (xhr) {
    alert(xhr.status + ': ' + xhr.statusText);
    </script>​​
    The screenshot below is my result:
    Please refer to these articles:
    Working with lists and list items with REST
    https://msdn.microsoft.com/en-us/library/office/dn292552.aspx
    SharePoint 2013 – CRUD on List Items Using REST Services & jQuery
    http://www.plusconsulting.com/blog/2013/05/crud-on-list-items-using-rest-services-jquery/
    You can also get list data using JavaScript Client Object Model(JSOM), you could refer to this article:
    How to: Complete basic operations using JavaScript library code in SharePoint 2013
    https://msdn.microsoft.com/en-us/library/office/jj163201.aspx?f=255&MSPPError=-2147217396
    Here is a link about how to add code into page via Content Editor Web Part:
    http://blogs.msdn.com/b/sharepointdev/archive/2011/04/14/using-the-javascript-object-model-in-a-content-editor-web-part.aspx
    Best Regards,
    Vincent Han
    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
    [email protected]

  • Struts and JSF Integration in OPDk-java based portlet

    Hi,
    thanks in advance for your help.
    I'm developing a PDK java based portlet. For some reasons I cannot use the JSF bridge but I would like to integrate Struts and Jsf in my portlet, using Struts to manage actions and navigation and JSF (with ADF Faces components) for the view. I'm using the Strus-Faces library.
    When I try to submit my portlet form, I receive the error "request URL not found on this server". I'm posting some exstracts of my code.
    It's made of three pages: the main one "Integration1ShowPage", "error" and "result". The MainAction.java displays my mainPage, where there's a form. To keep it easy, when the user submits this form, the ActionName returns "success" and the "result" page should be displayed.
    The MainAction works properly: the portlet is displayed but when I tried to submit the form I receive
    The requested URL /provaDeploy/htdocs/integration1/integration1ShowPage.do was not found on this server.Could you please suggest me something?
    Many many thanks,
    B.
    <struts-config>
    <action-mappings>
      <action path = "/mainAction" type = "strutsjsfintegration1.MainAction">
        <forward name = "success" path = "/faces/htdocs/integration1/integration1ShowPage.faces"/>
      </action>
      <action path = "/nameAction" name = "nameForm"
      input = "/faces/htdocs/integration1/integration1ShowPage.faces" scope = "request"
      type = "strutsjsfintegration1.NameAction">
        <forward name = "success" path = "/faces/htdocs/integration1/result.faces"/>
        <forward name = "failure" path = "/faces/htdocs/integration1/error.faces"/>
        <forward name = "again" path = "faces/htdocs/integration1/integration1ShowPage.faces"/>
      </action>
    </action-mappings>
    <controller>
      <set-property property = "processorClass"
       value="org.apache.struts.faces.application.FacesRequestProcessor"/>
       </controller>
    <message-resources parameter="definitiveStrutsPortlet.ApplicationResources"/>
    </struts-config>

    Hi,
    have a look at this whitepaper for how to use JavaScript in ADF.
    http://www.oracle.com/technetwork/developer-tools/jdev/1-2011-javascript-302460.pdf
    This link here (http://www.oracle.com/technetwork/developer-tools/adf/learnmore/index-101235.html --> see sample 71) shows an integration sample between a Java Applet and ADF. Its a similar use case to yours
    Frank

  • Dreamweaver template files updating, but javascript/jquery not being called on random pages.

    Hello,
    I have been tasked with updating the navigation on a site that is using a Dreamweaver template (DWT) as the base file. The navigation was originally built using jQuery navigation UI, however this did not address all of our needs and I have updated it with another version of an accordion.
    The .dwt file only is only controlling the navigation and the head of the site.
    I have integrated the new xhtml structure and added/removed javascript/jquery into the .dwt file. I saved the file, therefore updating all of the relevant .html files, and verified that the accordion works.
    However - the accordion does not work for all of the xhtml files. Some files, seemingly at random, are not pulling in the javascript.
    When opening the relevant .html files, I can verify that they have all been updated with the new xhtml and the correct javasctipt. However, when viewing the .html files that are not displaying correctly with FireBug, I can see that none of the jquery/javascript is being applied to the navigation (classes are missing that are injected into the xhtml, but the structure and css is correct).
    I've done some research and the only issues I've been able to find are related to .xhtml files not being updated with the correct code, but in my case all of the affected files have the correct xhtml and scripts in the head.
    Does anyone have any light to shed on this subject? I am quite puzzled.

    While I understand that looking at code is the ultimate way to find a solution, the intent of my question was not "how do i fix this" or "what is wrong with my code" but rather "does anyone have any idea as to why this would be happening". Or even, "where would you start to troubleshoot this".
    I made my question general as such because I intended on trying to troubleshoot on my own in order to better understand the issue.
    Thank you for stating the obvious, not all first time forum posters are completely unaware of how to ask questions properly.

  • Javascript API and Player Control

    Spent hours the last few days digging through the forums, documentation, and WIKI to see if I could find some answers.  Unofrtunately, thus far, the data is sparse.  Can somebody direct me to some documentation on the Javascript API and what events ara available to control the player?  For example, how do I send the player an event to "mute" the volume?  Or, how do I send the player an event to "seek" to a point in time in the video?  Or, how do I "listen" for a point in time in the video and then use javascript to do something else (like play another clip).
    I have found some very sparse information on the use of JQuery, but, we do not use that (at least, not yet).  Simple javascript through an API is ideal.  Any help would be greatly appreciated.

    <html>
      <head>
      $("#PlayerHolder").html("<span id='PlayerDiv'></span>");
      x = x.replace(/&/g,'%26')
      var flashvars = {};
      flashvars.verbose="true";
      flashvars.poster="http://"+server+"/thumbnails/thumb_"+x+".png";
      flashvars.plugin_watermark="swfs/WatermarkPlugin.swf";
      flashvars.watermark_namespace="http://osmf.realeyes.com/plugins/watermark";
      flashvars.watermark_url="ct-vector_small4.png";
      flashvars.watermark_vAlign="top";
      flashvars.watermark_hAlign="right";
      flashvars.key="hello";
      flashvars.optimizeBuffering=false;
      flashvars.bufferTime=5;
      flashvars.urlIncludesFMSApplicationInstance=cloudfront;
      var parameters = {};
      if(rtmpt){
      parameters.flashvars="src=rtmpt://"+server+"/recorder/s3/vid_"+x;
      }else{
      parameters.flashvars="src=rtmp://"+server+"/recorder/s3/vid_"+x;
      parameters.allowscriptaccess="always";
      parameters.wmode="direct";
      parameters.allowfullscreen="true";
      var attributes = {};
      attributes.name="player";
      attributes.id="player";
      swfobject.embedSWF("StrobeMediaPlayback.swf?ID="+Math.random()*100,"PlayerDiv","470","320 ","11.2","scripts/expressInstall.swf", flashvars, parameters, attributes);
      function thisMovie(movieName) {
      if(navigator.appName.indexOf("Microsoft") != -1) {
      return window[movieName];
      } else {
      return document[movieName];
      function doPlay(){
      thisMovie("player").play2();
      </script>
      </head>
      <body>
      <input type="button" value="doPlay" onClick="doPlay()"/>
    </body>
    </html>
    Try something like this.

  • SPServices, jQuery, and GetPermissionsByToken

    I wanted to use GetPermissionsByToken in order to get the broken permissions to folders in a document library. Is there some other web service I call, I can use SPServices to access the permisison on document library folders, only? I need to do this only
    in a CEWP , client-side, using jQuery and SPServices, or just javascript in order to access this particular method of Permissions webservice. Or if there is some other service I could feed the ID of the folder(s) in question, to in order to retireve just the
    permisisons for each folder, please let me know.? I am in MOSS 3.0./SharePoint 2007

    I get what you're saying, but from what I've dealt with/understand SiteData.asmx only goes to the granualarity of the site object, and permissions down to the list.
    If you're able to get that working on the item level, can you share the code?
    If not, I can walk you through setting up a custom webservice that would call out the item you are looking for by passing the item Id and List Id as parameters and return the permissions.
    Brandon James SharePoint Developer/Administrator

  • Mixing Non JSF and JSF components

    Hi All,
    I wanted to mix non jsf and jsf components and I able to do this
      <f:verbatim>
                                    <input type="radio" name="selectBidder" value="#{currentRow['BID_ID]}"/>
                                </f:verbatim>But the problem is bean value is not getting binded.
    The rendered output is containing same string i.e.
    value="#{currentRow['BID_ID]}"
    How to bind bean value to non jsf component.
    And No Javascript please
    Thanks
    Sudhakar

    Basically I am trying to implement something like below
    <h:dataTable binding="#{consumer$Select_Provider.dataTable1}" headerClass="list-header" id="dataTable1"
                            rowClasses="list-row-even,list-row-odd" style="left: 48px; top: 48px; position: absolute"
                            value="#{consumer$Select_Provider.dataTable1Model}" var="currentRow">
                            <h:column binding="#{consumer$Select_Provider.column6}" id="column6">
                                <h:outputText binding="#{consumer$Select_Provider.outputText11}" id="outputText11" value="#{currentRow['USER_LNAME']} #{currentRow['USER_FNAME']}"/>
                                <f:facet name="header">
                                    <h:outputText binding="#{consumer$Select_Provider.outputText12}" id="outputText12" value="Bidder"/>
                                </f:facet>
                            </h:column>
                            <h:column binding="#{consumer$Select_Provider.column1}" id="column1">
                                <h:outputText binding="#{consumer$Select_Provider.outputText1}" id="outputText1" value="#{currentRow['BID_PRICE']}"/>
                                <f:facet name="header">
                                    <h:outputText binding="#{consumer$Select_Provider.outputText2}" id="outputText2" value="Bid Price"/>
                                </f:facet>
                            </h:column>
                            <h:column binding="#{consumer$Select_Provider.column3}" id="column3">
                                <f:verbatim>
                                    <input name="selectBidder" type="radio" value="#{currentRow['BID_ID]}"/>
                                </f:verbatim>
                                <f:facet name="header">
                                    <h:outputText binding="#{consumer$Select_Provider.outputText6}" id="outputText6" value="Select Bidder"/>
                                </f:facet>
                            </h:column>
                        </h:dataTable>Thanks
    Sudhakar

  • Dreamweaver CS6-  jquery and jquery cycle to have 5 images slide (as a fade) in a banner code failure- help?

    Dreamweaver CS6- I am trying to use jquery and jquery cycle to have 5 images slide (as a fade) in a banner. I thought I got the code right but it stacked the images. I suspect I have the incorrect code for the position or I haven't properly added cycle.
    my head code:
    <title>slider</title>
    <script type="text/javascript" src="JS/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="JS/jquery.cycle2.min.js"></script>
    <script type="text/javascript">
    $('#slider').cycle({
    </script>
    <style type="text/CSS">
    #slider {margin:auto;}
    </style>
    My div code:
    <div id="slider">
      <p> 
        <img src="Leather web page/DSC_0531_4925.JPG"/>
        <img src="Leather web page/DSC_0035_edited-1.JPG"/>
        <img src="Leather web page/DSC_1593_edited-1.jpg"/>
        <img src="Leather web page/DSC_1595_edited-1.jpg"/>
        <img src="Leather web page/DSC_1821.jpg"/>
        </div>
    Any help would be greatly appreciated.

    1. You can use a constructor to change the defaults. The default values can be seen in jquery.cycle2.js starting at line 659 as per the following. As you can see at the bottom, the code automatically runs the slideshow(s)
    // @see: http://jquery.malsup.com/cycle2/api
    $.fn.cycle.defaults = {
        allowWrap:        true,
        autoSelector:     '.cycle-slideshow[data-cycle-auto-init!=false]',
        delay:            0,
        easing:           null,
        fx:              'fade',
        hideNonActive:    true,
        loop:             0,
        manualFx:         undefined,
        manualSpeed:      undefined,
        manualTrump:      true,
        maxZ:             100,
        pauseOnHover:     false,
        reverse:          false,
        slideActiveClass: 'cycle-slide-active',
        slideClass:       'cycle-slide',
        slideCss:         { position: 'absolute', top: 0, left: 0 },
        slides:          '> img',
        speed:            500,
        startingSlide:    0,
        sync:             true,
        timeout:          4000,
        updateView:       0
    // automatically find and run slideshows
    $(document).ready(function() {
        $( $.fn.cycle.defaults.autoSelector ).cycle();
    2. To center the slideshow, merely center the container as in
    div.cycle-slideshow {
        width: 1000px;
        margin: auto;

  • JavaFx and JSF

    Hello,
    Is it all right to use JavaFX with JSF. Any problems can be experienced getting JavaFx and JSF work together.
    Regards

    My problem is before the client-server communication starts. I have to pass some information to the standalone JavaFX application from a web application. These information is needed to load specific data from the backend. On the startup of the application I could use the jnlp properties, but if the user does another selection in the web application and the JavaFX application is already open, I have to provide the selection to the JavaFX app. This inter process communication could be completely on the client side I think. So I have seen that ActiveMQ provides a javascript api to send JMS messages. Probably this could be a solution if it is possible to set up the JMS queue on client without application server. I do not know if this is possible by now.

  • How to do Javascript validations in JSF

    Hi ,
    I want to know about the javascript validation in JSF. I want to know simple validations like field should not be empty.
    I have a problem with my code can any one suggest me on this. for your reference here i'm attaching my code.
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
    <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
    <f:view>
         <%@ include file="../includes/header.jsp"%>
         <h:form id="createForm">
              <script>   
             function validate() { 
                 if((document.createForm.courseId.value=='') ||(document.createForm.courseId.value==null))
                    alert("Please Enter Course Id");     
                     return false; 
                 if(document.createForm.fileName.value=='')
                    alert("Please Enter File Name");     
                     return false; 
                   retutrn true;
                         </script>
              <table width="768" height="100%" border="0" cellpadding="0"
                   cellspacing="0">
                                  <tr>
                                                      <td width="200" height="25" align="left" class="formtext">
                                                           Course Id:
                                                      </td>
                                                      <td height="25" align="left">
                                                           <h:inputText id="courseId"  value="#{bean.courseId}"  required="true"  />
                                                      </td>
                                                 </tr>
                                                 <tr>
                                                      <td width="200" height="25" align="left" class="formtext">
                                                           File Name:
                                                      </td>
                                                      <td height="25" align="left">
                                                           <h:inputText id="fileName" value="#{bean.fileName}" />
                                                      </td>
                                                 </tr>
                                            </table>
                                  <tr>
                                       <td colspan="2" align="center" class="formtext">
                                            <h:commandButton value="Create"
                                                 action="#{control.getSelectedItems}"
                                                 onclick=" return validate();" />
                                       </td>
                                  </tr>
                             </table>
                        </td>
                        <td width="12" valign="top" background="images/tile_left_right.jpg">
                             <img src="images/tile_left_right.jpg" width="6" height="1" />
                        </td>
                   </tr>
              </table>
         </h:form>
         <%@ include file="../includes/footer.jsp"%>
    </f:view>

    Have you checked the element ID's? Maybe you have overlooked the woodstocked ID's. Look in the generated HTML source and base your Javascript on this.

  • Javascript & Jquery Question?

    Dear all,
    I need to interactively enable and disable input fields (text, textarea, checkboxes, radiobutton) within APEX application. I have tried using javascript with jquery and was able to achieve some success but the problem is that the form clears the inputted values during the post back phase. This means that when ever I disable any of the input fields, these fields will have the value cleared on post back. I am using the jquery syntax $(this).attr("disabled", "disabled"); to disable the fields.
    I have the suspicion that when I disabled the fields APEX does check the checksum of some kind to determined that the fields are modified and this clear or invalidate the stored value. I would like to know if their is a better way to get around the problem. Thanks.
    Regards,

    KA,
    I remember Carl showing us a little trick with a function he called "kinadisabled" or something like that... He basically gave an item the "feel" of being disabled by changing the background color from white to gray and made it so that if the user tried to focus on the element it would blur - very interesting.
    I've not tested this code but it should give you the idea.
    if (some_condition) {
       $yourJqueryElmt.css('background-color','#FFFFFF').unbind('focus');
    } else {
       $yourJqueryElmt.css('background-color','#CCCCCC').bind('focus', function() {
          $(this).blur();
    }Regards,
    Dan
    http://danielmcghan.us
    http://sourceforge.net/projects/tapigen

  • $CQ, $, JQuery, and JQPlot

    Can someone explain the use of $CQ versus $ in more detail for JQuery?  I already know that $CQ refers to CQ's built-in version of JQuery and that $ refera to any secondary jquery package that I may load.
    Let me be more precise.  My app requires charts and JQPlot seems one of the best plotting solutions available.  By default (as you would expect) jqplot.js file refers to JQuery through $.  My expectation would be that this would not work in CQ unless I renamed all the $ to $CQ in the jqplot.js file.  Oddly this wasn't true.  I simply added jqplot.js to my clientlib folder and was able to start rendering graphs.
    Very odd!  Why is that?
    The primary reason for asking is that while the JQuery base package is working, a JQPlot plugin (Cursor) is not...and I can only track it down to some issue between referring to $ versus $CQ.
    Thanks!

    CQ5 appears to use jQuery for some of the contributor / authour mode functionality. Wisely Adobe has name-spaced the version of jQuery they use for CQ5 in their $CQ alias.
    Open a javascript console in your browser and enter $CQ.fn.jquery --> "1.7"
    Next enter $.fn.jquery --> "1.X.X"
    You might need a specific version of jQuery for your jQplot plugin, and maybe you dont want to mess with upgrading CQ5's version of jQuery which is name-spaced in $CQ.
    Pretend jQplot depends on jQuery version "1.8.2", if you've addded a link to the newer version of jQuery on your page, the 1.8.2 version of jQuery will be aliased to "$" by default. This "$" is just for your convienience so you don't have to type jQuery("#foo").doSomthing(...); and can instead type $("#foo").doSomthing(...);
    You can therefore have both versions of jQuery running in the same page at the same time. Because jQuery 1.7 is referenced using $CQ and 1.8.2 is referenced via $
    Of course you could create your own namespace for jQuery
    var $JQ = jQuery.noConflict();
    $jQ("#foo").doSomthing(...)
    More to the point, if you've loaded both versions of jQuery on the same page...
    var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]); <--- uses jQuery version "1.8.2"
    var plot2 = $CQ.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]); <--- uses jQuery version "1.7"
    Its best not to load two versions jQuery unless there's some compeling reason to do so.
    Of course all this really depends on how you're loading jQuery. See jQuery's docs for more on working with jQuery with other libraries.
    http://docs.jquery.com/Using_jQuery_with_Other_Libraries

  • I am trying to use java  file as Model layer and jsf as presentation layer

    I am trying to use java file as Model layer and jsf as presentation layer and need some help
    I successfully get the value of h:outputText from java file by doing simple binding operation but I am facing problems when I am trying to fill h:dataTable
    I create java file
    package oracle.model;
    import java.sql.;*
    import java.util.;*
    *public class TableBean {*
    Connection con ;
    Statement ps;
    ResultSet rs;
    private List perInfoAll = new ArrayList();
    *public List getperInfoAll() {*
    perInfoAll.add(0,new perInfo("name","username","blablabla"));
    return perInfoAll;
    *public class perInfo {*
    String uname;
    String firstName;
    String lastName;
    *public perInfo(String firstName,String lastName,String uname) {*
    this.uname = uname;
    this.firstName = firstName;
    this.lastName = lastName;
    *public String getUname() {*
    return uname;
    *public String getFirstName() {*
    return firstName;
    *public String getLastName() {*
    return lastName;
    right click on the file and choose 'create data control'
    then i wrote the jsf file:
    *<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>*
    *<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>*
    *<f:view>*
    *<h:dataTable id="dt1" value="#{bindings.perInfoAll}"*
    var="item" bgcolor="#F1F1F1" border="10"
    cellpadding="5" cellspacing="3" rows="4" width="50%"
    dir="LTR" frame="hsides" rules="all"
    *>*
    *<f:facet name="header">*
    *<h:outputText value="This is 'dataTable' demo" id="ot6"/>*
    *</f:facet>*
    *<h:column id="c2">*
    *<f:facet name="header">*
    *<h:outputText value="First Name" id="ot1"/>*
    *</f:facet>*
    *<h:outputText style="" value="#{item.firstName}"*
    id="ot2"/>
    *</h:column>*
    *<h:column id="c4">*
    *<f:facet name="header">*
    *<h:outputText value="Last Name" id="ot9"/>*
    *</f:facet>*
    *<h:outputText value="#{item.lastName}" id="ot8"/>*
    *</h:column>*
    *<h:column id="c3">*
    *<f:facet name="header">*
    *<h:outputText value="Username" id="ot7"/>*
    *</f:facet>*
    *<h:outputText value="#{item.uname}" id="ot4"/>*
    *</h:column>*
    *<f:facet name="footer">*
    *<h:outputText value="The End" id="ot3"/>*
    *</f:facet>*
    *</h:dataTable>*
    *</center>*
    *</af:document>*
    *</f:view>*
    but nothing is appear in my table
    I know that there is something wrong in calling the binding object
    I need help pls and where can i find some help to deal with another tag types
    thanks

    i dragged the "perInfoAll" from my "Data Controls" and choosed adf table (even I know that new table with adf tags well be generated and i want table with jsf tags)
    and this code is generated
    *<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"*
    *"http://www.w3.org/TR/html4/loose.dtd">*
    *<%@ page contentType="text/html;charset=UTF-8"%>*
    *<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>*
    *<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>*
    *<%@ taglib uri="http://xmlns.oracle.com/adf/faces/rich" prefix="af"%>*
    *<f:view>*
    *<af:document id="d1">*
    *<af:messages id="m1"/>*
    *<af:form id="f1">*
    *<af:table value="#{bindings.perInfoAll1.collectionModel}" var="row"*
    *rows="#{bindings.perInfoAll1.rangeSize}"*
    *emptyText="#{bindings.perInfoAll1.viewable ? 'No data to display.' : 'Access Denied.'}"*
    *fetchSize="#{bindings.perInfoAll1.rangeSize}"*
    *rowBandingInterval="0"*
    *selectionListener="#{bindings.perInfoAll1.collectionModel.makeCurrent}"*
    *rowSelection="multiple" id="t1">*
    *<af:column sortProperty="uname" sortable="false"*
    *headerText="#{bindings.perInfoAll1.hints.uname.label}"*
    *id="c1">*
    *<af:inputText value="#{row.bindings.uname.inputValue}"*
    *label="#{bindings.perInfoAll1.hints.uname.label}"*
    *required="#{bindings.perInfoAll1.hints.uname.mandatory}"*
    *columns="#{bindings.perInfoAll1.hints.uname.displayWidth}"*
    *maximumLength="#{bindings.perInfoAll1.hints.uname.precision}"*
    *shortDesc="#{bindings.perInfoAll1.hints.uname.tooltip}"*
    *id="it3">*
    *<f:validator binding="#{row.bindings.uname.validator}"/>*
    *</af:inputText>*
    *</af:column>*
    *<af:column sortProperty="firstName" sortable="false"*
    *headerText="#{bindings.perInfoAll1.hints.firstName.label}"*
    *id="c2">*
    *<af:inputText value="#{row.bindings.firstName.inputValue}"*
    *label="#{bindings.perInfoAll1.hints.firstName.label}"*
    *required="#{bindings.perInfoAll1.hints.firstName.mandatory}"*
    *columns="#{bindings.perInfoAll1.hints.firstName.displayWidth}"*
    *maximumLength="#{bindings.perInfoAll1.hints.firstName.precision}"*
    *shortDesc="#{bindings.perInfoAll1.hints.firstName.tooltip}"*
    *id="it2">*
    *<f:validator binding="#{row.bindings.firstName.validator}"/>*
    *</af:inputText>*
    *</af:column>*
    *<af:column sortProperty="lastName" sortable="false"*
    *headerText="#{bindings.perInfoAll1.hints.lastName.label}"*
    *id="c3">*
    *<af:inputText value="#{row.bindings.lastName.inputValue}"*
    *label="#{bindings.perInfoAll1.hints.lastName.label}"*
    *required="#{bindings.perInfoAll1.hints.lastName.mandatory}"*
    *columns="#{bindings.perInfoAll1.hints.lastName.displayWidth}"*
    *maximumLength="#{bindings.perInfoAll1.hints.lastName.precision}"*
    *shortDesc="#{bindings.perInfoAll1.hints.lastName.tooltip}"*
    *id="it1">*
    *<f:validator binding="#{row.bindings.lastName.validator}"/>*
    *</af:inputText>*
    *</af:column>*
    *</af:table>*
    *</af:form>*
    *</af:document>*
    *</f:view>*
    but when run it i see the following errors
    *Class oracle.adf.model.adapter.bean.BeanDataControl can not access a member of class nl.amis.hrm.EmpManager with modifiers "private"*
    *Object EmpManager of type DataControl is not found.*
    *java.lang.NullPointerException*
    *Class oracle.adf.model.adapter.bean.BeanDataControl can not access a member of class nl.amis.hrm.EmpManager with modifiers "private"*
    *Object EmpManager of type DataControl is not found.*
    *java.lang.NullPointerException*
    :(

Maybe you are looking for