Skip to Content

Introduction 

After a long time away, the ABAP Freak Show returns to SDN. Now we high resolution video – as well as alternative downloads for lower bandwidth and mobile devices. I had asked Craig Cmehil for a suggestion of a video hosting site that would allow for all of these features. He suggested blip.tv.  Shortly after I got the recomendation, I also noticed that Michael Cote of Redmonk was using blip.tv with very nice results for his excellent RIA Weekly podcasts. Let me know how the quality and options work out for everyone.

In this return video we explore the open source library jQuery – which simpliifies JavaScript and AJAX coding.  It turns out this is a perfect fit for BSP and we demo its use in a nice AJAX enabled input autocompleter.  This research was a long time coming as Dan McWeeney had mentioned jQuery to me almost a year ago. I’ve been wanting to try it out ever since then.  After playing with jQuery for only a short time, I’m already wish I had tried it out sooner.

image

The Video

Supporting Links

Here are some of the links mentioned in the episode as well as the locations where you can download the source code. You can also download the video for offline viewing and access different bandwidth versions of the video.

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. Nigel James
    You are always doing such great stuff. As you noted it is tricky to see the code in the video. Is it possible to ‘zoom in’ to just show the code pane when showing the code?

    Wrapping up jQuery into an extension element is a great idea.

    The only downside of this is to perhaps for people to think about what they use this sort of query against. Putting it on a field with a few million records might not be the best use of traffic and resources shen a new query is triggered with every keystroke. Your example was excellent though.

    Thanks again for doing the hard yard and looking for the best way to share this great info with the community.

    Looking forward to the new episodes.

    Cheers,

    Nigel

    (0) 
  2. Former Member
    Thomas,

    This was great to see even more capabilities of integration with current web technologies into BSPs.  

    The show on blip.tv looks great.  While I was watching though, I kept having this odd feeling of familiarity.  Dr. Evil Thomas

    (0) 
  3. Former Member
    Hi Thomas

    I’m not at all familiar with BSP but I imported your nugget to give it a go.  Unfortunately I get the following BSP error:

    “An attempt was made to call a non-implemented interface method ‘IF_BSP_ELEMENT~DO_AT_BEGINNING’, in the’ZCL_BSP_EL_JQUERY_HEADER’ class. When a class of a global interface implements, not all methods need to be implemented. There is no syntax error, rather a warning in the implementing class. The first calling of a non-implemented method results in a runtime error. This has happened here.”

    What am I missing?

    TIA
    Gareth

    (0) 
    1. Thomas Jung Post author
      This might very weel be a bug in SAPlink.  Dan, Ed, and I saw something very similiar at TechEd Hacker night.  There seemed to be a problem with non-implemented, inherited, redefined methods like those used in BSP extensions.  However when we reimported the nugget to debug, the problem didn’t occur a second time. 

      So try just importing them again. If that doesn’t work go into the class ZCL_BSP_EL_JQUERY_HEADER and try redefining and then then un-redefining the method DO_AT_BEGINNING. 

      Either way you probably want to make sure you have the latest version of SAPlink and to open an issue on the SAPlink project page. 

      If the problems persist, you can always try using the transport version instead of the SAPlink version. 

      (0) 
  4. Former Member
    Here,

    seems, that a method must be changed:

    BUILD_AJAX_URL:


        IF l_page_context->m_caller IS NOT INITIAL.
      data: l_controller type ref to CL_BSP_CONTROLLER2.

          l_controller ?= l_page_context->m_caller.
          l_page = l_controller->CONTROLLER_NAME.
        ELSE.

          l_page = l_page_context->m_page_name.
        ENDIF

    instead only l_page = l_page_context->m_page_name

    Regards, Stefan

    (0) 
  5. Erwin Löser
    hi Thomas, your implementation of the autocomplete is really great. I want to use it in our application to store all data entries of the user in a server cookie.

    I ‘ve one little problem for that you hopefully can give me a hint (btw. i will send you a screenshot via email to illustrate my problem)

    When I select an item from my autocomplete list with return  the ‘submit_on_enter’-event for the inputfield is automatically fired.
    But unfortunately before the selected value from the autocomplete is written into the inputfield. That means that the old value ist used as search-value.
    Is it possible to transfer the selected list item while scrolling through the list? Or is it possible first change the value and then fire autosubmit?

    thx in advance

    Erwin

    (0) 
    1. Thomas Jung Post author
      Well the submitOnEnter is SAP supplied JavaScript for the inputfield and the autocomplete is custom JavaScript – so it doesn’t suprise me that the two don’t necessarily mix the way you want them to.

      I don’t know what it might take to adjust to the standard onEnter – which you probably wouldn’t want to do anyway. 

      I would suggest that you avoid the stand onEnter event and instead adjust the JavaScript of the autoComplete to also fire a custom Server Side event (which can be generated for you via the BSP:htmlbEvent extension element).

      (0) 
    2. Erwin Löser
      Thomas, thx for your quick response.
      Do you see a chance for the other opportunity i mentioned? (to transfer the selected list item while scrolling through the list)?
      (0) 
        1. Erwin Löser
          i changed the code in the jquery.automcomplete.js and now it works as expected.

          I changed the moveselect(). It calls now a
          new method selectCurrentNoHide, which is derived from selectCurrent  

          If someone is interested i would send the complete jquery.automcomplete.js via email

          (0) 
        2. Prabaharan Asokan

          Hello Tom,

          Your blog is interesting.

          Q1.Can you throw some lights on achieving this autocomplete feature in Mobile devices when using BSP framework via jquerymobile?

          Q2.Also i installed the Nugget file you gave and checked the application but auto-complete feature is not working.Any ideas?Your valuable thoughts are appreciated.

          Thanks

          prabaharan

          (0) 

Leave a Reply