How to bind javascript keyup event on text input in soy template

[Christian Schlaefcke]

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

[Sean Curtis · Accepted solution]

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);
    });
});

[Christian Schlaefcke]

This works perfectly - Thank you!

[Dmitry_Zharikhin]

Hi!

I think you need to use live events because there's no #my-search-field-id on AJS.toInit.

https://api.jquery.com/on/

or run that event binding code on dialog show method

[Christian Schlaefcke]

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?

[Dmitry_Zharikhin]

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

[Christian Schlaefcke]

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?

[Dmitry_Zharikhin]

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/