This is just a basic snippet of jQuery information\u00a0from an SAP point of view to hep point myself and other SAP developer in the right direction when integrating Javascrip and jQuery into your\u00a0BSP applications.<\/p>\n
I needed to understand this\u00a0because I had a BSP that was displaying a table of\u00a0editable data, when the user updated an individual field it had implication for other fields. The application therefore\u00a0captured 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\u00a0event triggers were lost when the AJAX re-drew the table. I then spent ages trying to find a way around this or\u00a0to reload the\u00a0instructions. Its turned out I just needed to use\u00a0Delegated method described below and everything worked fine.<\/p>\n
$(“#tabDiv”).delegate(‘input[name=”myfield”]’, ‘focus’, function() { Your instruction is assigned to the overall container (ID=tabDiv)\u00a0so that any input fields with the name “myfield” within the container\u00a0 will trigger this functionality. This means that if further fields are added within the container\u00a0via ajax\/javascript they will be picked up.<\/p>\n This is very useful when you are displaying values which are updated using an\u00a0AJAX function, because even if the\u00a0function 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.<\/p>\n Using the direct method each input\u00a0field with name “myfield” is\u00a0assigned the instruction on an\u00a0individual basis.\u00a0\u00a0If any new fields get create or\u00a0these fields get re-created via\u00a0AJAX, they won’t have been there to hear the instruction and therefore will not respond.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" This is just a basic snippet of jQuery information\u00a0from an SAP point of view to hep point myself and other SAP developer in the right direction when integrating Javascrip and jQuery into your\u00a0BSP applications. I needed to understand this\u00a0because I had a BSP that was displaying a table of\u00a0editable data, when the user updated an […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[],"yoast_head":"\n
\nDelegated jQuery\u00a0instructions – <\/strong>Delegates the\u00a0job of catching an event\u00a0to the overall container.<\/p>\n
\nalert(‘delegate’);
\n});<\/p>\n
\nNon-delegated (direct) jQuery\u00a0instructions\u00a0– <\/strong>Individual\u00a0elements are directly responsible for any relevant events
\n$(‘input[name=”myfield”]’).focus(function() {
\nalert(‘non_delagate’);
\n});<\/p>\n