ajax call to do action when onclick checkbox in ofbiz

Question

I want to use checkboxes with options say id1,id2.when i choose id1 a ajax will run through javascript and call the appropriate action and return the response.i dont want to reload the page.please post some freemarker, controller.xml, java codes to do this.

Answer 1

Based on my understanding of the question, the following script might be helpful you:

in ftl file itself/ in seperate js file you add the following script:

  <script type="text/javascript">
   jQuery(document).ready(function(){


   jQuery("#id1").click(function(){

         if(jQuery(this).is(":checked")) {
           var reqUrl= "checkbox1_Url";
            sendAjaxRequest(reqUrl);             
               }

        });

    jQuery("#id2").click(function(){

         if(jQuery(this).is(":checked")) {
           var reqUrl= "checkbox2_Url";
            sendAjaxRequest(reqUrl);             
               }

        });
     });

  function sendAjaxRequest(reqUrl){
    jQuery.ajax({

     url    : reqUrl,
     type   : 'POST',
     data   : {'var1': 'val1', 'var2' : 'val2'}, //here you can pass the parameters to  
                                                   //the request if any.
     success : function(data){

              //You handle the response here like displaying in required div etc. 
               },
      error : function(errorData){

              alert("Some error occurred while processing the request");
              }


    });

   }
   </script>

In freemarker,

  <input type="checkbox" id="id1" name="checkbox1" />
  <input type="checkbox" id="id2" name="checkbox2" />

In controller.xml:

 <request uri="checkbox1_Url">
   <!-- fire if any events are here -->
   <response name="success" type="view" value="ViewName1" />
   <response name="error" type="view" value="errorViewName" />
 </request>

<request uri="checkbox2_Url">
   <!-- fire if any events are here -->
   <response name="success" type="view" value="ViewName2" />
   <response name="error" type="view" value="errorViewName" />
 </request>



  <view-map name="ViewName1" type="screen" page="component://.../widget/screensFileName#screenName"/>

  <view-map name="ViewName2" type="screen" page="component://.../widget/screensFileName#screenName"/>

You define two screens in widgets as specified in the above path(page="...." attribute of view-map tag).

Answer 2

   jQuery(function() { 
     jQuery('input[type = checkbox]').bind('click',function() {

          var categoryId =""; 
         if(jQuery(this).is(':checked')) {
            categoryId = jQuery(this).val();
           }
         var reqUrl= "categoryurl";  
        sendAjaxRequest(reqUrl, categoryId);             
       });
    });



 function sendAjaxRequest(reqUrl, categoryId){
  jQuery.ajax({

 url    : reqUrl, // Here the Url will have to return the all products related to                
                  //passed category
 type   : 'POST',
 data   : {'categoryId': categoryId}, //here you can pass the parameters to  
                                               //the request if any.
 success : function(data){

          //You handle the response here display all products in a div  etc. 
           },
  error : function(errorData){

          alert("Some error occurred while processing the request");
          }


     });

    }

 <input type="checkbox" id="id1" name="checkbox1"  value="yandamuri_cat"/><label for="id1">YandaMuri</label>
 <input type="checkbox" id="id2" name="checkbox2" value="chetanBhagat_cat"/><label for="id2">Chetan Bhagath</label>

In Controller.xml:

   <request uri="categoryurl">
       <!-- fire if any events are here -->
       <response name="success" type="view" value="ViewName" />
       <response name="error" type="view" value="errorViewName" />
    </request>

 <view-map name="ViewName" type="screen" page="component://.../widget/screensFileName#screenName"/>

Define a screen in appropriate location/path specified in above page attribute of viw-map tag. Here, the screen may be without decorator, so that the response will come without decorator and so you can display them in the current page, without reloading. Entire page.

I guess this might help you.