This is just a basic snippet of jQuery information from an SAP point of view to hep point myself and other SAP developer in the right direction when integrating Javascrip and jQuery into your BSP applications.
I needed to understand this because I had a BSP that was displaying a table of editable data, when the user updated an individual field it had implication for other fields. The application therefore captured that a user had changed a field and re-drew the table based on the new data. When I did this using the direct jQuery assignment all the event triggers were lost when the AJAX re-drew the table. I then spent ages trying to find a way around this or to reload the instructions. Its turned out I just needed to use Delegated method described below and everything worked fine.
Delegated jQuery instructions – Delegates the job of catching an event to the overall container.
$(“#tabDiv”).delegate(‘input[name=”myfield”]’, ‘focus’, function() {
alert(‘delegate’);
});
Your instruction is assigned to the overall container (ID=tabDiv) so that any input fields with the name “myfield” within the container will trigger this functionality. This means that if further fields are added within the container via ajax/javascript they will be picked up.
This is very useful when you are displaying values which are updated using an AJAX function, because even if the function re-draws the field with the same attribute names they will not get picked up by the jQuery listener unless you use the delegated method.
Non-delegated (direct) jQuery instructions – Individual elements are directly responsible for any relevant events
$(‘input[name=”myfield”]’).focus(function() {
alert(‘non_delagate’);
});
Using the direct method each input field with name “myfield” is assigned the instruction on an individual basis. If any new fields get create or these fields get re-created via AJAX, they won’t have been there to hear the instruction and therefore will not respond.
