1

So far I've succeeded to get my BSP MVC model working.

Here is my code.

View 

<body>
    <z:form>
   <z:input binding="//c/counter"
            invisible="true"/>
    Counter : <z:write binding="//c/counter"/>
        
    <z:button fcode="incr"
                      text="Increase"/>
    <z:button fcode="decr"
                      text="decrease"/>
    </z:form>
  </body>

Controller
Through fcode I invoke the "fcode_incr" method in Controller. 'c' is a model instance of zcl_counter. it has an attribute counter which will be increased by this method.

method fcode_incr.
   c->increment( ).
endmethod.

I hope zcl_model is obvious and its code is not relevant here.

The problem when I press the "increase" button, server sends a request. When it gets the response, it refresh the page. So i get the incremented value. how can I get it working with Ajax so the page remains without refreshing?

I've already tried Ajax with "XML page with flowlogic". like "Eventhandler-->OnRequest"

request->get_form_field('variable').

Does it help any further?

The correct Ajax Call would be 

$.ajax({
        url:'ajaxController.do',
        statusCode:{
          404: function(){
            alert("not found");
          }
        },
        success: function(data){
          $('#viewData').html(data);
        }
       }).error(function(){
          alert("failed");
});
Sandra Rossi
  • 11,934
  • 5
  • 22
  • 48
kk-dev11
  • 2,654
  • 5
  • 37
  • 48

1 Answers1

2

This link explains the details: http://www.saptechnical.com/Tutorials/BSP/AJAX/create.htm

But, in essence;

  1. Integrate some javascript in your bsp page so that you can do ajax, here are some options:

    • Either take the code from that link
    • Or the better the solution is to use jQuery, either through
      • Using <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css" type="text/css" />
      • Or uploading http://code.jquery.com/jquery-1.8.2.min.js and referencing it in your code

    You can call ajax calls then like this with jQuery : http://api.jquery.com/jQuery.ajax/

  2. Create a controller in your BSP project that will be called from AJAX.

  3. Create a controller class for your controller, only re-define REQUEST and put your logic there

Done.

tomdemuyt
  • 4,572
  • 2
  • 31
  • 60
  • I have a controller named ZKTH_BSP_AJAX. How call it from Ajax? xmlhttp.open("GET",controller ??, true); in this way? – kk-dev11 Oct 11 '12 at 12:44
  • 1
    The name of the controller is the name as it is exposed to the net, I am not sure I would call it ZKTH_BSP_AJAX. Regardless, you would call it with xmlhttp.open("GET", "ZKTH_BSP_AJAX" , true); Though really, I would invest time in learning AJAX calls with the jQuery library. – tomdemuyt Oct 11 '12 at 12:50
  • I've learned Ajax calls in JQuery. But I am not sure about how to implement it. I have an method in controller called fcode_save. I should call this method, so i can catch the return value. **`$.ajax({url: controller, data: inputName etc..})`** where does the method come into? – kk-dev11 Oct 12 '12 at 10:09
  • 1
    Just to be sure, is your controller class derived from CL_BSP_CONTROLLER2 ? It must. Once you have that, you need to get the variables from the http request ( `l_year = request->get_form_field( 'year' ).` ) , call fcode_save and then return the output to the http request with `CALL METHOD response->append_cdata EXPORTING data = l_output.` – tomdemuyt Oct 12 '12 at 13:59
  • Actually it inherited CL_BSP_CONTROLLER. so now I've created a new controller ZCL_CO_KTH_AJAX2 which derived from CL_BSP_CONTROLLER2. There i have methods like Do_init, do_request, do_handle_event etc. In which method should i write `CALL METHOD response->append_cdata..`? – kk-dev11 Oct 12 '12 at 16:20
  • I have posted my code right at the bottom. I get an statusCode 404. Does it mean that it couldn't identify the controller class? – kk-dev11 Oct 12 '12 at 16:48
  • 1
    Ah, okay. You might have missed step 2. Create a controller in your BSP project that will be called from AJAX. Right click on your BSP application, create a controller with a name, say 'doSomething' and link it to your class `ZCL_CO_KTH_AJAX2`. From then on, ajax should reference `doSomething`, not `ZCL_CO_KTH_AJAX2`. Also, the method `do_request` should have the `response->append_cdata` and the `request->get_form_field`. – tomdemuyt Oct 12 '12 at 17:18
  • that's great. it worked. thank you very much for your help. Now I can start to build. :) – kk-dev11 Oct 12 '12 at 18:24