{"id":4911,"date":"2020-06-03T14:13:23","date_gmt":"2020-06-03T14:13:23","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=4911"},"modified":"2020-06-09T13:13:53","modified_gmt":"2020-06-09T13:13:53","slug":"js-events","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/nl\/wp-grid-builder\/js-evenementen\/","title":{"rendered":"JS-evenementen"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t
\n
\n

JS Events<\/h1>\n<\/div>\n<\/div>\n
\n

JS Events are triggered every time change occurs. It can be triggered by an user interaction or reflects a programmatically change. Events are emitted in certain order as described in this documentation.<\/p>\n

Events can be catched directly in your grid settings or in your own JS script.<\/p>\n

All Event examples presented in this documentation can be directly applied in your grid settings under customization tab in the JS field and will be triggered only for this grid. In this case the variable wpgb<\/code> represents the main instance of the plugin holding all sub instances of the current grid.<\/p>\n

\n

[pastacode lang=”javascript” manual=”console.dir(%20wpgb%20)%3B%20%2F%2F%20Holds%20all%20instances.%0A%0A%0A%2F%2F%20Where%20’instanceName’%20can%20be%3A%20facets%2C%20grid%2C%20carousel%2C%20lightbox.%0A%2F%2F%20Where%20’eventName’%20is%20the%20event%20name%20attached%20to%20an%20instance%0A.wpgb.instanceName.on(%20’eventName’%2C%20function(%20args%20)%20%7B%20%0A%09%0A%09console.log(%20’eventName’%2C%20args%20)%3B%0A%0A%7D%20)%3B%0A” message=”” highlight=”” provider=”manual”\/]<\/p>\n<\/div>\n

To use your own .js file to listen events from the plugin, you need at first to register your script to Gridbuilder \u1d42\u1d3e thanks to this PHP filter:<\/p>\n

\n

[pastacode lang=”php” manual=”function%20prefix_register_script(%20%24scripts%20)%20%7B%0A%09%0A%09%24scripts%5B%5D%20%3D%20%5B%0A%09%09’handle’%20%3D%3E%20’my-script’%2C%0A%09%09’source’%20%3D%3E%20’my-url%2Fscript.js’%2C%0A%09%09’version’%20%3D%3E%20’1.0.0’%2C%20%0A%09%5D%3B%20%0A%09%0A%09return%20%24scripts%3B%0A%0A%7D%0A%0A%09%09%0Aadd_filter(%20’wp_grid_builder%2Ffrontend%2Fregister_scripts’%2C%20’prefix_register_script’%20)%3B” message=”” highlight=”” provider=”manual”\/]<\/p>\n<\/div>\n

Now that we have registered our own script we will be able to listen events from the plugin.<\/p>\n

Because a page can contain several grids and facets (attached to each grid), we need to listen for each grid initialization thanks to the global event manager of the plugin stored in the global window object WP_Grid_Builder<\/code><\/p>\n

\n

[pastacode lang=”javascript” manual=”%2F%2F%20We%20listen%20every%20time%20a%20grid%2Ftemplate%20is%20initialized.%20%0Awindow.WP_Grid_Builder%20%26%26%20WP_Grid_Builder.on(%20’init’%2C%20function(%20wpgb%20)%20%7B%20%0A%09%0A%09console.dir(%20wpgb%20)%3B%20%2F%2F%20Holds%20all%20instances.%20%0A%09%0A%09%0A%09%2F%2F%20Where%20’instanceName’%20can%20be%3A%20facets%2C%20grid%2C%20carousel%2C%20lightbox.%20%0A%09%2F%2F%20Where%20’eventName’%20is%20the%20event%20name%20attached%20to%20an%20instance.%20%0A%09wpgb.instanceName.on(%20’eventName’%2C%20function(%20args%20)%20%7B%0A%09%09console.log(%20’eventName’%2C%20args%20)%3B%0A%09%7D%20)%3B%0A%0A%7D%20)%3B” message=”” highlight=”” provider=”manual”\/]<\/p>\n<\/div>\n<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"

JS Events JS Events are triggered every time change occurs. It can be triggered by an user interaction or reflects a programmatically change. Events are emitted in certain order as described in this documentation. Events can be catched directly in your grid settings or in your own JS script. All Event examples presented in this…<\/p>","protected":false},"author":2,"featured_media":4996,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[44,55,43],"tags":[],"class_list":["post-4911","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-documentation","category-js-events","category-wp-grid-builder","category-44","category-55","category-43","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/4911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/comments?post=4911"}],"version-history":[{"count":2,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/4911\/revisions"}],"predecessor-version":[{"id":5105,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/4911\/revisions\/5105"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/media\/4996"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/media?parent=4911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/categories?post=4911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/tags?post=4911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}