{"id":397,"date":"2021-10-06T10:48:15","date_gmt":"2021-10-06T13:48:15","guid":{"rendered":"https:\/\/hackerzone.com.br\/blog\/?p=397"},"modified":"2021-10-06T10:49:56","modified_gmt":"2021-10-06T13:49:56","slug":"how-to-refresh-select2-dropdown-menu-after-ajax-loading-different-content","status":"publish","type":"post","link":"http:\/\/hackerzone.com.br\/blog\/how-to-refresh-select2-dropdown-menu-after-ajax-loading-different-content\/","title":{"rendered":"How to refresh Select2 dropdown menu after ajax loading different content?"},"content":{"rendered":"

Como atualizar o menu suspenso Select2 ap\u00f3s o carregamento de conte\u00fado diferente do Ajax?<\/h2>\n

Depois que o conte\u00fado \u00e9 carregado via ajax voc\u00ea n\u00e3o pode mais atacar de forma gen\u00e9rica como, por exemplo, ‘select2’. Pois agora outros elementos possuem essa classe como o span gerado pelo select2.
\nEnt\u00e3o voc\u00ea precisa ap\u00f3s o carregamento do ajax chamar um m\u00e9todo para verificar se o select2 j\u00e1 esta instanciado e instanciar individualmente.<\/p>\n

Once the content is loaded via ajax you can no longer attack generically like eg ‘select2’. Because now other elements have this class as the span generated by select2.
\nSo after loading ajax you need to call a method to check if select2 is already instantiated and instantiate it individually.<\/p>\n

\r\n        jQuery('select.select2').each(function (i, obj) {\r\n            if (!jQuery(obj).hasClass("select2-hidden-accessible")) {                \r\n                jQuery(obj).select2();\r\n            }\r\n        });\r\n<\/pre>\n
Dessa forma deve funcionar.
\nThat way it should work.<\/p>\n
Links \u00dateis:
\nhttps:\/\/select2.org\/programmatic-control\/methods<\/a>
\nhttps:\/\/stackoverflow.com\/questions\/17818210\/how-to-refresh-select2-dropdown-menu-after-ajax-loading-different-content<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Como atualizar o menu suspenso Select2 ap\u00f3s o carregamento de conte\u00fado diferente do Ajax? Depois que o conte\u00fado \u00e9 carregado via ajax voc\u00ea n\u00e3o pode mais atacar de forma gen\u00e9rica como, por exemplo, ‘select2’. Pois agora outros elementos possuem essa classe como o span gerado pelo select2. Ent\u00e3o voc\u00ea precisa ap\u00f3s o carregamento do ajax […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,182],"tags":[183,185,186,184],"class_list":["post-397","post","type-post","status-publish","format-standard","hentry","category-javascript","category-select2","tag-select2","tag-select2-ajax","tag-select2-bug","tag-select2-refresh","cat-29-id","cat-182-id"],"_links":{"self":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":6,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions"}],"predecessor-version":[{"id":404,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions\/404"}],"wp:attachment":[{"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/media?parent=397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/categories?post=397"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hackerzone.com.br\/blog\/wp-json\/wp\/v2\/tags?post=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}