{"id":230379,"date":"2022-12-08T17:11:00","date_gmt":"2022-12-08T14:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230379"},"modified":"2022-12-07T11:54:29","modified_gmt":"2022-12-07T08:54:29","slug":"kohandatud-jquery-suendmuste-miks-ja-kuidas","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/kohandatud-jquery-suendmuste-miks-ja-kuidas\/","title":{"rendered":"Kohandatud jQuery s\u00fcndmuste miks ja kuidas"},"content":{"rendered":"\n<p>Alates versioonist 1.0 on jQuery pakkunud <a href=\"https:\/\/api.jquery.com\/trigger\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e4\u00e4stikufunktsiooni<\/a>, mis v\u00f5imaldab meil:<\/p>\n<blockquote>\n<p>K\u00e4ivitage k\u00f5ik antud s\u00fcndmuset\u00fc\u00fcbi jaoks sobitatud elementidele lisatud k\u00e4itlejad ja k\u00e4itumised.<\/p>\n<\/blockquote>\n<p>Kuid alles 1.3 muutus see konkreetne funktsioon oluliselt kasulikumaks, v\u00e4hemalt minu jaoks. \u00dctlen seda sellep\u00e4rast, et just siis saime v\u00f5imaluse m\u00e4\u00e4ratleda kohandatud s\u00fcndmusi ja seej\u00e4rel m\u00e4\u00e4rata neile t\u00f6\u00f6tlejad.<\/p>\n<p>Mis on aga t\u00f5en\u00e4oline kasutusjuht, mille puhul kohandatud jQuery s\u00fcndmused on WordPressi kontekstis kasulikud? Pealt lahkudes v\u00f5ite v\u00f5ib-olla palju v\u00e4lja m\u00f5elda. V\u00f5i \u00e4kki mitte.<\/p>\n<p>Alles viimasel ajal olen neid tavap\u00e4rasest oluliselt rohkem kasutanud. Seega m\u00f5tlesin, et jagan, kuidas ma neid kasutan, kui praegu muul p\u00f5hjusel kui n\u00e4itan teile, kuidas neid oma t\u00f6\u00f6ga \u00fchendada.<\/p>\n<h2>Kohandatud jQuery s\u00fcndmused<\/h2>\n<p>Kui olete JavaScriptiga kogenud \u2013 kas vanilje v\u00f5i mitte \u2013 olete t\u00f5en\u00e4oliselt tuttav p\u00f5hiliste s\u00fcndmuste k\u00e4itlejatega. See t\u00e4hendab, et kui keegi kl\u00f5psab elemendil, on meil k\u00e4ivitatud funktsioon, mis teeb midagi.<\/p>\n<p>Kohandatud jQuery s\u00fcndmused on palju sarnased, v\u00e4lja arvatud need s\u00fcndmused, mille me m\u00e4\u00e4ratleme. See t\u00e4hendab, et me ei pea lootma sellele, kui keegi viib hiire elemendi kohale v\u00f5i kl\u00f5psab elemendil.<\/p>\n<p>Selle asemel saame k\u00e4ivitada s\u00fcndmuse ja seej\u00e4rel seadistada t\u00f6\u00f6tleja, et reageerida asjakohaselt. Siin on n\u00e4ide.<\/p>\n<h3>Kohandatud s\u00fcndmuseks valmistumine<\/h3>\n<p>Oletame, et t\u00f6\u00f6tate projekti kallal ja sellel on haldusleht, mis vastutab andmete hankimise eest kolmanda osapoole API-st. Juhtimisvoog n\u00e4eks v\u00e4lja umbes selline:<\/p>\n<ol>\n<li>Kasutaja kl\u00f5psab nuppu,<\/li>\n<li>Ajaxi p\u00e4ring algatatakse ja see n\u00f5uab teavet kolmandalt osapoolelt,<\/li>\n<li>Taotluse t\u00e4itmise ajal tuleks ekraanil olevad nupud keelata,<\/li>\n<li>Kui taotlus on t\u00e4idetud, saab nupud uuesti lubada,<\/li>\n<li>Soovi korral saab ekraanile kirjutada olekuteate.<\/li>\n<\/ol>\n<p>Selleks eeldatakse, et p\u00e4ringu olek v\u00f5ib esineda v\u00e4hemalt \u00fche nupu (nagu <strong>sisestuselemendis<\/strong>) ja valikulise tekstiv\u00e4lja v\u00f5i tekstiala<strong>.<\/strong><\/p>\n<p>Kui kasutaja kl\u00f5psab s\u00fcndmusel, saame k\u00e4ivitada kohandatud s\u00fcndmuse. Seda s\u00fcndmust v\u00f5ime nimetada <strong>acme.ajax.processing<\/strong>. Seej\u00e4rel saame kasutada jQuery pakutavat <a href=\"https:\/\/api.jquery.com\/jquery.ajax\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">valmis<\/a> funktsiooni, et k\u00e4sitleda k\u00f5ike, mida tahame hiljem puhastada, v\u00f5i saame kasutada oma kohandatud funktsiooni, kui tahame ka midagi teha.<\/p>\n<p>Selle m\u00f5lema puhul vaatame m\u00f5lemat. Nii et meil on ka \u00fcritus nimega <strong>acme.ajax.complete<\/strong>.<\/p>\n<p>Seega oleme mures:<\/p>\n<ul>\n<li>kohandatud s\u00fcndmuse loomine,<\/li>\n<li>k\u00e4ivitades selle,<\/li>\n<li>selle jaoks s\u00fcndmuste t\u00f6\u00f6tleja seadistamine,<\/li>\n<li>l\u00f5petada, kui taotlus on t\u00e4idetud.<\/li>\n<\/ul>\n<p>Ja seda me teemegi.<\/p>\n<h3>Kohandatud s\u00fcndmuse m\u00e4\u00e4ratlemine<\/h3>\n<p>Nii et kui kasutaja kl\u00f5psab nupul, tehakse Ajaxi p\u00e4ring. Samal ajal k\u00e4ivitab see ka s\u00fcndmuse <strong>acme.ajax.processing<\/strong>, millel on s\u00fcndmuste t\u00f6\u00f6tleja.<\/p>\n<p>Nii et k\u00f5igepealt loome Ajaxi p\u00e4ringu. <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-00-button-handler-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Selle<\/a><\/strong> jaoks eeldan, et nuppu, mis vastutab Ajaxi p\u00e4ringu k\u00e4ivitamise eest, nimetatakse lihtsalt <strong>$ nupuks:<\/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>Pange t\u00e4hele, et esimene asi, mida tahame teha, on k\u00e4ivitada t\u00f6\u00f6tlemiss\u00fcndmus, seej\u00e4rel esitame taotluse.<\/p>\n<h3>Kohandatud s\u00fcndmuse k\u00e4sitlemine<\/h3>\n<p>J\u00e4rgmiseks tahame veenduda, et meil on seadistatud s\u00fcndmuste t\u00f6\u00f6tleja, mis keelab nupu p\u00e4ringu t\u00e4itmise ajal.<\/p>\n<p>Seda on lihtne teha ja see j\u00e4\u00e4b lihtsaks ning ma <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-01-disable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">keelan nupu:<\/a><\/strong><\/p>\n<pre><code>$(document).on('acme.ajax.processing', function() {\n  $button.attr('disabled', 'disabled');\n});<\/code><\/pre>\n<p>Lihtne, eks?<\/p>\n<h3>Teise kohandatud s\u00fcndmuse k\u00e4sitlemine<\/h3>\n<p>J\u00e4rgmiseks peame lahendama olukorra, kui Ajaxi taotlus on t\u00e4idetud. Seega peame s\u00fcndmuse k\u00e4ivitama ja seej\u00e4rel s\u00fcndmusega hakkama saama.<\/p>\n<p>S\u00fcndmuse k\u00e4ivitamine <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-02-request-complete-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">on lihtne:<\/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>Ja s\u00fcndmuse haldamise saab muuta koodiks, mis <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/61bd05c60b40d9f3ecd9eb81e5cb3f86#file-03-enable-button-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">meil juba on:<\/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>Seda saab aheldada, kuna see toimub <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Document\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">dokumendiobjektil<\/a>, mitte eraldi elemendil.<\/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=\"Kohandatud jQuery s\u00fcndmuste miks ja kuidas\" ><\/a><\/p>\n<p>Selleks on seda palju lihtsam k\u00e4sitseda.<\/p>\n<h2>Vaid \u00dcks n\u00e4ide<\/h2>\n<p>Loomulikult on see vaid \u00fcks n\u00e4ide kohandatud jQuery s\u00fcndmuste k\u00e4sitlemisest.<\/p>\n<p>Selleks on palju muid viise ja sellega saab teha p\u00e4ris keerulisi asju; see peaks aga andma piisavalt teavet selle kohta, mida vajate kohandatud s\u00fcndmustega p\u00f5hitasemel t\u00f6\u00f6tamiseks.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mis on aga t\u00f5en\u00e4oline kasutusjuht, mille puhul kohandatud jQuery s\u00fcndmused on WordPressi kontekstis kasulikud? Ja kuidas me saaksime neid oma igap\u00e4evases t\u00f6\u00f6s tegelikult kasutada?<\/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":[718,729,833,894],"tags":[1165],"class_list":["post-230379","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-javascript-4","category-juhend-algajatele","category-kood","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/230379","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=230379"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/230379\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/236464"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=230379"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=230379"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=230379"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}