13 Replies Latest reply on Dec 28, 2010 4:16 AM by Ilya Sorokoumov

    Is possible : javascript to get bean list value during onload?

    Eswara MoorthyNEC Newbie

      Hi,

       

            I have populate some value using c:forEach tag. I want to get those value during page load.

       

      But i can able to get during <a4j:commandButton>  click,  use 'data' attribute.

       

      By problem is : how to extract c:forEach tag value during onloading time.

       

       

      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />
                  
        <script type="text/javascript">
      
           function getEachValue(data)
           {
               for(var i=0; i<data.length; i++)
               {
                    //i can iterate student data
               }
         
      
               function getBeanDataOnload()
               {
                   // how to iterate the student data
                   // otherwise how to get bean List value
               }
                     
      
               Or
      
               jQuery(document).ready(function()
               {
                    // How to iterate the student data here
                    // Or How to get backing bean List value here
               });                 
         </script>
      
      </head>
      <body onload="getBeanDataOnload()">
                  
            <h:form id="dataForm" >
                      
                <c:forEach items="${DataBean.studentList}" var="student">
                     <c:out value="${student.number} : "/>
                     <c:out value="${student.percentage} "/>
                </c:forEach>
      
                 <a4j:commandButton id="getvalue" value="GetValue"
                                    data="#{DataBean.studentList}" 
                                    oncomplete="getEachValue(data)"/>                               
                  </h:form>
      </body>
      

       

       

      Is any other approach to get the BeanList  Value during page loading time.

       

      Thanks valuable effort.

        • 2. Re: Is possible : javascript to get bean list value during onload?
          Eswara MoorthyNEC Newbie

          Thanks for your response.

          In my application , show the student result using piechart. That piechart fully write javascript code.

          So i need to pass the value into that piechart.

          I want to iterate the bean value in javascript and pass the value (number , percentage) into piechart.

          • 3. Re: Is possible : javascript to get bean list value during onload?
            Ilya Sorokoumov Master

            This is an example from one of my applications:

            <script type="text/javascript">
                            //<![CDATA[
                            var usersOnlineCount = [];
                            var requestsCount = [];
                            var averageRequestTime = [];
                            var maximumRequestTime = [];
                            //]]>
                                <c:forEach items="#{statisticBean.items}" var="item">
                                usersOnlineCount.push([${item.finishedUTC}, ${item.usersOnlineCount}]);
                                </c:forEach>
                                <c:forEach items="#{statisticBean.items}" var="item">
                                requestsCount.push([${item.finishedUTC}, ${item.requestsCount}]);
                                </c:forEach>

            <script type="text/javascript">

                            //<![CDATA[

                            var requestsCount = [];

                            //]]>

             

                                <c:forEach items="#{statisticBean.items}" var="item">

                                requestsCount.push([${item.finishedUTC}, ${item.requestsCount}]);

                                </c:forEach>

             

            //<![CDATA[

             

            jQuery.plot(jQuery("#requestsCount"),

                            [ { data: requestsCount, label: "Reuests Count" },

                            ],

                            {

                                xaxis: { mode: 'time' },

                                yaxis: { min: 0 },

                                legend: { position: 'sw' } });

             

            //]]>

             

                        </script>

            • 4. Re: Is possible : javascript to get bean list value during onload?
              Eswara MoorthyNEC Newbie


              Thanks for your reply.

              But i can't pass the bean data into pieChart.

               

              First i want to show static content in piechart (i used highChart)

               

               

              <script type="text/javascript">
              
                jQuery(document).ready(function() {
              
                       var optionsPie = {
                             chart: {
                                  renderTo: 'container',
                                  defaultSeriesType: 'pie'
                                  },
                                  series: [{
                                              data: [
                                                  ['1001',   45],
                                                  ['1002',   80],
                                                  ['1003',   60],
                                                  ['1004',   75],
                                              ]
                                          }]
                                  };
                                  chart = new Highcharts.Chart(optionsPie);                    
                              });                                                                
                             
                          </script>
              

               

               

              Here, in my above script i use static content "1001,45" "1002,80" "1003,60" 1004,75".

               

               

              My problem :

              onload i want to read c:forEach tag content and pass into pieChart .

              Because the piechart content read from backing bean and store into c:forEach.

               

              Otherwise any otherway, javascript to read the backing beanlist value??

               

               

              <script type="text/javascript">
              
                 jQuery(document).ready(function() {
              
                     var optionsPie = {
                         chart: {
                             renderTo: 'container',
                             defaultSeriesType: 'pie'
                         },
                         series: []
                     };
              
                     getForEachDataAndPassToChart();        // This method for get data for forEach tag and 
                                                            // those data pass into piechart
                                                     
                 });      
              
                 function getForEachDataAndPassToChart()
                 {
              
                    //Here i want write code to get data from forEach tag and pass that data into chart
                      ....
                      ....
                      chart = new Highcharts.Chart(optionsPie);
                 }                                                        
                            
               </script>
              

               

              Is possible to pass? Otherwise give me a some sample to pass content into piehart.

              • 5. Re: Is possible : javascript to get bean list value during onload?
                Ilya Sorokoumov Master

                If I understand you right this is what you need:

                 

                <script type="text/javascript">
                   jQuery(document).ready(function() {
                     //defining array
                                var loadedData= [];
                //pusing datanto array 
                        <c:forEach items="${DataBean.studentList}" var="student">
                                    loadedData.push([${student.number}, ${student.percentage}]);
                          </c:forEach>
                //using array data for chart
                       var optionsPie = {
                           chart: {
                               renderTo: 'container',
                               defaultSeriesType: 'pie'
                           },
                          series: [{
                                                data: loadedData
                                            }]
                       };
                       chart = new Highcharts.Chart(optionsPie);
                                                      
                   });     
                              
                </script>

                <script type="text/javascript">

                 

                   jQuery(document).ready(function() {

                     //defining array

                                var loadedData= [];

                     //pusing datanto array 

                        <c:forEach items="${DataBean.studentList}" var="student">

                                    loadedData.push([${student.number}, ${student.percentage}]);

                          </c:forEach>

                 

                //using array data for chart

                       var optionsPie = {

                           chart: {

                               renderTo: 'container',

                               defaultSeriesType: 'pie'

                           },

                          series: [{

                                                data: loadedData

                                            }]

                       };

                 

                       chart = new Highcharts.Chart(optionsPie);

                 

                   });     

                 

                </script>

                • 6. Re: Is possible : javascript to get bean list value during onload?
                  Ilya Sorokoumov Master

                  I suddenly understood that you might need to load data using AJAX. So if you realy want to load some data for your chart from the server at the moment when the page is aleady loaded you should use AJAX call. You can use servlet/jsp/jsf to form XML/JSON and pass it to client. I suggest you to use aj4:jsFunction. You may use 'data' attribute of this tag and simply form JSON on the server. Then just use eval and "enjoy" JS development.

                  • 7. Re: Is possible : javascript to get bean list value during onload?
                    Eswara MoorthyNEC Newbie

                    More thanks to you.

                     

                    Its worked for me...

                    1 of 1 people found this helpful
                    • 8. Re: Is possible : javascript to get bean list value during onload?
                      Nick Belaevski Master

                      Use ScriptUtils#toScript to serialize into JavaScript.

                      • 9. Re: Is possible : javascript to get bean list value during onload?
                        Ilya Sorokoumov Master

                        Nick Belaevski wrote:

                         

                        Use ScriptUtils#toScript to serialize into JavaScript.

                        Is it possible to use ScriptUtils#toScript on a xhtml page directly?

                        • 10. Re: Is possible : javascript to get bean list value during onload?
                          Nick Belaevski Master

                          Hi Ilya,

                           

                          It's possible via bean or by wrapping as custom EL function.

                          • 12. Re: Is possible : javascript to get bean list value during onload?
                            Eswara MoorthyNEC Newbie

                            Hi, I have another problem regarding this post.

                             

                            I write this script code in one seperate file. But not work.

                             

                            pieScript.js

                             

                             

                            function pieLoad()
                            {
                                alert("start 1...........");           //This alert showed successfully
                            
                                var loadedData= [];
                                <c:forEach items="${DataBean.studentList}" var="student">
                            
                                loadedData.push(['${student.number}', ${
                                    student.percentage
                                    }]);
                            
                                </c:forEach>
                            
                                alert("Start 2 ........");                 //This alert message not execute
                            
                                var optionsPie = {
                                    chart: {
                                        renderTo: 'chartForm:container',
                                        defaultSeriesType: 'pie'
                                    },
                                    series: [{
                                        data: loadedData
                                    }]
                                };
                                chart = new Highcharts.Chart(optionsPie);
                            
                                 alert("pieload end!!!");                  //This alert also not came...
                            }
                            

                             

                            pie.jsp

                             

                            <head>
                                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                            
                                        <a4j:loadScript src="resource:///org/richfaces/renderkit/html/scripts/jquery/jquery.js" />
                                        <a4j:loadScript src="highcharts.js"/>           
                                        <a4j:loadScript src="pieScript.js"/>
                                        <script type="text/javascript">
                            
                                            jQuery(document).ready(function() 
                                            {                   
                                                pieLoad();                                 
                                            });
                                             
                                        </script>
                            
                             </head>
                            
                            

                             

                            If i use this script same page then its worked..

                             

                            help me.

                            Thanks in advance...

                            • 13. Re: Is possible : javascript to get bean list value during onload?
                              Ilya Sorokoumov Master

                              It does not work because JS files are not processed by FacesServet and it's not a JSP so Servlets Container does not process it either. That is why c:forEach does not work. You still can generate your JS file by servlet or jsp page. Like this

                              <a4j:loadScript src="pieScript.jsp"/>