Hi,
I want to implement a ajax based page search on a custom dialog of my plugin. I followed the confluence sdk tutorials and my popup shows up with a bunch of input fields. Now I want to have a dynamic ajax search function on one of the input text fields.
For testing about how to implement this functionI tried to add this simple alert code to my already existing and working javascript resource:
AJS.toInit(function($) { ... AJS.$("#my-search-field-id").keyup(function(e) { alert('change event triggered!'); }); });
My soy templates has this input covered by a form:
<form class="aui"> ... <td class="dialog-table-rght-col"> <input class="text" id="my-search-field-id" name="some-name" title="some-title" type="text" /> </td> ... </form>
When I start up the confluence plugin environment and try to trigger my alert code nothing is happening. I think that my JS code generally works because when I change it to this:
AJS.$("#quick-search-query").keyup(function(e) { alert('change event triggered!'); });
An alert pops up whenever I enter something in the site-search text field of confluence. A assume that I just need to bind this code to my text input field more properly but I cannot find out how.
I already searched the tutorials AUI docs and atlassian answers quite heavily - unfortunately without success.
Any help would be very much appreciated!
Kind Regards,
Christian
Community moderators have prevented the ability to post new answers.
You want to use delegate events (aka "live" events). Try something like this:
AJS.$(function() { AJS.$(document.body).on('keyup', '#my-search-field-id', function (){ console.log(event); }); });
This works perfectly - Thank you!
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi!
I think you need to use live events because there's no #my-search-field-id on AJS.toInit.
or run that event binding code on dialog show method
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Dimitri, Thank you for your answer! With "there's no #my-search-field-id on AJS.toInit" you mean that AJS.toInit does not know about any of my form element id´s in my soy template? So instead of my mentioned approach from above I should do it like this? $( "#my-search-field-id" ).on( "keyup", function() { alert('change event triggered!'); }); Would this be placed outside of the AJS.toInit(function($) { ... } block then?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Yes, that's ok to put live event binding into AJS.toInit(function($) { ... } AJS.toInit execution happens before any popup is rendered and used, so it will work fine
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hmm, I still don´t get it :-( When I change my code like this: AJS.toInit(function($) { ... $("#my-search-field-id").on( "keyup", function() { alert('change event triggered!'); }); }); Nothing get´s triggered. When I change the referenced id to "#quick-search-query" the alert pops up when I type something in the site search. I think I missed something on about how to actually bind my form element´s id. Can you point me to a simple but working example?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You need to set live handler on target's ancestor which is guaranteed exists at binding moment. Here's some working example http://jsfiddle.net/1ge64sfs/
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.