{"id":230262,"date":"2022-12-08T17:04:00","date_gmt":"2022-12-08T14:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230262"},"modified":"2022-12-07T11:54:34","modified_gmt":"2022-12-07T08:54:34","slug":"dlaczego-i-jak-niestandardowe-zdarzenia-jquery","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pl\/dlaczego-i-jak-niestandardowe-zdarzenia-jquery\/","title":{"rendered":"Dlaczego i jak niestandardowe zdarzenia jQuery?"},"content":{"rendered":"\n<p>Ju\u017c w wersji 1.0 jQuery udost\u0119pnia funkcj\u0119 <a href=\"https:\/\/api.jquery.com\/trigger\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wyzwalacza<\/a>, kt\u00f3ra pozwala nam:<\/p>\n<blockquote>\n<p>Wykonaj wszystkie procedury obs\u0142ugi i zachowania do\u0142\u0105czone do dopasowanych element\u00f3w dla danego typu zdarzenia.<\/p>\n<\/blockquote>\n<p>Ale dopiero w wersji 1.3 ta konkretna funkcja sta\u0142a si\u0119 znacznie bardziej u\u017cyteczna, przynajmniej je\u015bli o mnie chodzi. M\u00f3wi\u0119 tak, poniewa\u017c wtedy uzyskali\u015bmy mo\u017cliwo\u015b\u0107 definiowania niestandardowych zdarze\u0144, a nast\u0119pnie ustawiania ich obs\u0142ugi.<\/p>\n<p>Jaki jest jednak prawdopodobny przypadek u\u017cycia, w kt\u00f3rym niestandardowe zdarzenia jQuery s\u0105 przydatne w kontek\u015bcie WordPressa? Poza czubkiem g\u0142owy mo\u017cesz wymy\u015bli\u0107 wiele. Albo mo\u017ce nie.<\/p>\n<p>Dopiero ostatnio u\u017cywam ich znacznie cz\u0119\u015bciej ni\u017c zwykle. Pomy\u015bla\u0142em wi\u0119c, \u017ce podziel\u0119 si\u0119 tym, jak ich u\u017cywam, je\u015bli teraz z innego powodu ni\u017c pokazanie, jak pod\u0142\u0105czy\u0107 je do swojej pracy.<\/p>\n<h2>Niestandardowe zdarzenia jQuery<\/h2>\n<p>Je\u015bli masz do\u015bwiadczenie w JavaScript \u2013 waniliowym lub nie \u2013 prawdopodobnie znasz podstawowe procedury obs\u0142ugi zdarze\u0144. Oznacza to, \u017ce gdy kto\u015b kliknie element, mamy ustawion\u0105 funkcj\u0119 odpalania, kt\u00f3ra co\u015b robi.<\/p>\n<p>Niestandardowe zdarzenia jQuery s\u0105 bardzo podobne, z wyj\u0105tkiem tych zdarze\u0144, kt\u00f3re definiujemy. Oznacza to, \u017ce nie musimy polega\u0107 na tym, \u017ce kto\u015b najedzie mysz\u0105 na element lub gdy kliknie na element.<\/p>\n<p>Zamiast tego mo\u017cemy wyzwoli\u0107 zdarzenie, a nast\u0119pnie skonfigurowa\u0107 procedur\u0119 obs\u0142ugi, kt\u00f3ra odpowiednio zareaguje. Oto przyk\u0142ad.<\/p>\n<h3>Przygotowanie do wydarzenia niestandardowego<\/h3>\n<p>Za\u0142\u00f3\u017cmy, \u017ce pracujesz nad projektem i ma on stron\u0119 administracyjn\u0105 odpowiedzialn\u0105 za pobieranie danych z zewn\u0119trznego interfejsu API. Przep\u0142yw kontroli wygl\u0105da\u0142by mniej wi\u0119cej tak:<\/p>\n<ol>\n<li>U\u017cytkownik klika przycisk,<\/li>\n<li>\u017b\u0105danie Ajax jest inicjowane i \u017c\u0105da informacji od strony trzeciej,<\/li>\n<li>Podczas realizacji \u017c\u0105dania przyciski na ekranie powinny by\u0107 wy\u0142\u0105czone,<\/li>\n<li>Po zako\u0144czeniu \u017c\u0105dania przyciski mo\u017cna ponownie w\u0142\u0105czy\u0107,<\/li>\n<li>Opcjonalnie na ekranie mo\u017cna zapisa\u0107 komunikat o stanie.<\/li>\n<\/ol>\n<p>Aby tak si\u0119 sta\u0142o, oczekuje, \u017ce istnieje co najmniej jeden przycisk (jak w elemencie <strong>wej\u015bciowym<\/strong>) i opcjonalne pole tekstowe lub obszar tekstowy, <strong>w<\/strong> kt\u00f3rym mo\u017ce wyst\u0105pi\u0107 stan \u017c\u0105dania.<\/p>\n<p>Gdy u\u017cytkownik kliknie zdarzenie, mo\u017cemy wywo\u0142a\u0107 zdarzenie niestandardowe. Mo\u017cemy nazwa\u0107 to zdarzenie <strong>acme.ajax.processing<\/strong>. Nast\u0119pnie mo\u017cemy u\u017cy\u0107 funkcji <a href=\"https:\/\/api.jquery.com\/jquery.ajax\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">done<\/a> dostarczonej przez jQuery, aby obs\u0142u\u017cy\u0107 wszystko, co chcemy p\u00f3\u017aniej posprz\u0105ta\u0107, lub mo\u017cemy u\u017cy\u0107 naszej niestandardowej funkcji, je\u015bli jest co\u015b, z czym r\u00f3wnie\u017c chcemy si\u0119 zaj\u0105\u0107 na ko\u0144cu.<\/p>\n<p>W tym przypadku przyjrzymy si\u0119 obu. Mamy wi\u0119c r\u00f3wnie\u017c zdarzenie o nazwie <strong>acme.ajax.complete<\/strong>.<\/p>\n<p>Zajmujemy si\u0119 wi\u0119c:<\/p>\n<ul>\n<li>stworzenie wydarzenia na zam\u00f3wienie,<\/li>\n<li>wyzwalanie go,<\/li>\n<li>skonfigurowanie dla niego obs\u0142ugi zdarze\u0144,<\/li>\n<li>zako\u0144czenie po zako\u0144czeniu \u017c\u0105dania.<\/li>\n<\/ul>\n<p>I to w\u0142a\u015bnie zrobimy.<\/p>\n<h3>Definiowanie zdarzenia niestandardowego<\/h3>\n<p>Tak wi\u0119c, gdy u\u017cytkownik kliknie przycisk, zostanie wykonane \u017c\u0105danie Ajax. Jednocze\u015bnie spowoduje to r\u00f3wnie\u017c wyzwolenie zdarzenia <strong>acme.ajax.processing<\/strong>, kt\u00f3re b\u0119dzie mia\u0142o swoj\u0105 procedur\u0119 obs\u0142ugi zdarze\u0144.<\/p>\n<p>Wi\u0119c najpierw utw\u00f3rzmy \u017c\u0105danie Ajax. <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-00-button-handler-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">W tym<\/a><\/strong> celu zak\u0142adam, \u017ce przycisk odpowiedzialny za wywo\u0142anie \u017c\u0105dania Ajax jest po prostu okre\u015blany jako <strong>$button:<\/strong><\/p>\n<pre><code>$button.on('click', function(evt) {\n  evt.preventDefault();\n  $(document).trigger('acme.ajax.processing');\n\n  $.get(ajaxurl, {\n    \/\/ Your action and security measures here.\n  }, function(response) {\n    \/\/ Your response behavior here.\n  });\n});<\/code><\/pre>\n<p>Zauwa\u017c, \u017ce pierwsz\u0105 rzecz\u0105, kt\u00f3r\u0105 chcemy zrobi\u0107, jest wyzwolenie zdarzenia przetwarzania, a nast\u0119pnie wykonanie \u017c\u0105dania.<\/p>\n<h3>Obs\u0142uga zdarzenia niestandardowego<\/h3>\n<p>Nast\u0119pnie chcemy si\u0119 upewni\u0107, \u017ce mamy skonfigurowan\u0105 procedur\u0119 obs\u0142ugi zdarze\u0144, kt\u00f3ra wy\u0142\u0105cza przycisk podczas trwania \u017c\u0105dania.<\/p>\n<p>Jest to \u0142atwe do zrobienia i utrzymania tego prostego, i zamierzam <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-01-disable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">wy\u0142\u0105czy\u0107 przycisk:<\/a><\/strong><\/p>\n<pre><code>$(document).on('acme.ajax.processing', function() {\n  $button.attr('disabled', 'disabled');\n});<\/code><\/pre>\n<p>\u0141atwe, prawda?<\/p>\n<h3>Obs\u0142uga innego zdarzenia niestandardowego<\/h3>\n<p>Nast\u0119pnie musimy poradzi\u0107 sobie z sytuacj\u0105, gdy \u017c\u0105danie Ajax zostanie zako\u0144czone. Musimy wi\u0119c upewni\u0107 si\u0119, \u017ce zdarzenie zosta\u0142o wyzwolone, a nast\u0119pnie musimy je obs\u0142u\u017cy\u0107.<\/p>\n<p>Wyzwolenie zdarzenia <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-02-request-complete-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">jest \u0142atwe:<\/a><\/strong><\/p>\n<pre><code>$button.on('click', function(evt) {\n  evt.preventDefault();\n  $(document).trigger('acme.ajax.processing');\n\n  $.get(ajaxurl, {\n    \/\/ Your action and security measures here.\n  }, function(response) {\n    \/\/ Your response behavior here.\n  })\n  .done(function() {\n     $(document).trigger('acme.ajax.complete');\n  });\n});<\/code><\/pre>\n<p>A obs\u0142ug\u0119 zdarzenia mo\u017cna zmieni\u0107 na kod <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-03-enable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">, kt\u00f3ry ju\u017c mamy:<\/a><\/strong><\/p>\n<pre><code>$(document)\n  .on('acme.ajax.processing', function() {\n    $button.attr('disabled', 'disabled');\n  })\n  .on('acme.ajax.complete', function() {\n    $button.removeAttr('disabled');\n  });<\/code><\/pre>\n<p>Mo\u017cna go po\u0142\u0105czy\u0107 w \u0142a\u0144cuch, poniewa\u017c dzieje si\u0119 to na obiekcie <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumentu<\/a> \u2013 a nie na osobnym elemencie.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162324-61e73b9885ab3.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162324-61e73b9885ab3.png\" alt=\"Dlaczego i jak niestandardowe zdarzenia jQuery?\" ><\/a><\/p>\n<p>W tym celu, wi\u0119c jest o wiele \u0142atwiejszy w obs\u0142udze.<\/p>\n<h2>Tylko jeden przyk\u0142ad<\/h2>\n<p>Oczywi\u015bcie jest to tylko jeden z przyk\u0142ad\u00f3w obs\u0142ugi niestandardowych zdarze\u0144 jQuery.<\/p>\n<p>Istnieje wiele innych sposob\u00f3w na zrobienie tego i mo\u017cesz z tym zrobi\u0107 kilka do\u015b\u0107 skomplikowanych rzeczy; jednak powinno to zapewni\u0107 wystarczaj\u0105c\u0105 ilo\u015b\u0107 informacji na temat pracy ze zdarzeniami niestandardowymi na podstawowym poziomie.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jaki jest jednak prawdopodobny przypadek u\u017cycia, w kt\u00f3rym niestandardowe zdarzenia jQuery s\u0105 przydatne w kontek\u015bcie WordPressa? I jak mo\u017cemy je w\u0142a\u015bciwie wykorzysta\u0107 w naszej codziennej pracy?<\/p>\n","protected":false},"author":1,"featured_media":236464,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[721,732,897,836],"tags":[1169],"class_list":["post-230262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deweloper","category-javascript-7","category-kod","category-przewodnik-dla-poczatkujacych","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/230262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/comments?post=230262"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/posts\/230262\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media\/236464"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/media?parent=230262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/categories?post=230262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pl\/wp-json\/wp\/v2\/tags?post=230262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}