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.

score 2 · Answer 1 · answered Aug 30 '13 at 09:18

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).

You mean, you need to change the actionUrl based on the value of the check box? Eg: like "yandamuri" books in "books" category. Can you give bit more info? — venky, Aug 30 '13 at 10:09
if i choose a brand, the products under the brand will appear in the page,again if i choose price then the products which are matches the price will appear in the same page. it like filters in flipkart,myntra...etc — Shankar, Aug 30 '13 at 12:16

venky · Answer 2 · 2013-08-31T07:08:32.593

   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.

venkey . can you send some tested source. i tried this way and don't get any result.please give the java source also — Shankar, Sep 02 '13 at 10:07

ajax call to do action when onclick checkbox in ofbiz

2 Answers2