jQuery events

Triggers are a great way to keep code clean and untangled.

see: http://docs.jquery.com/Events/trigger

If you need integrate with other javascript on your page, you can write a custom template for your channel and hook into the ‘added’ and ‘killed’ events.

‘killed’ means ‘removed’ (silly name, sorry)

Two triggers/signals are sent: ‘added’ and ‘killed’. These are sent to the $(“#{{html_id}}_on_deck”) element. That is the area that surrounds the currently selected items.

Extend the template, implement the extra_script block and bind functions that will respond to the trigger:

AutoCompleteSelectMultipleField:

// yourapp/templates/ajax_select/autocompleteselectmultiple_{channel}.html

{% block extra_script %}
<script type="text/javascript">
    $("#{{html_id}}_on_deck").bind('added', function() {
      var id = $("#{{html_id}}").val();
      console.log('added id:' + id );
    });
    $("#{{html_id}}_on_deck").bind('killed', function() {
      var current = $("#{{html_id}}").val()
      console.log('removed, current is:' + current);
    });
</script>
{% endblock %}

AutoCompleteSelectField:

// yourapp/templates/ajax_select/autocompleteselect_{channel}.html

{% block extra_script %}
<script type="text/javascript">
  $("#{{html_id}}_on_deck").bind('added', function() {
    var id = $("#{{html_id}}").val();
    console.log('added id:' + id );
  });
  $("#{{html_id}}_on_deck").bind('killed', function() {
    console.log('removed');
  });
</script>
{% endblock %}

AutoCompleteField (simple text field):

// yourapp/templates/ajax_select/autocomplete_{channel}.html

{% block extra_script %}
<script type="text/javascript">
  $('#{{ html_id }}').bind('added', function() {
    var entered = $('#{{ html_id }}').val();
    console.log('text entered:' + entered);
  });
</script>
{% endblock %}

There is no remove with this one as there is no kill/delete button in a simple text auto-complete. The user may clear the text themselves but there is no javascript involved. Its just a text field.

Re-initializing

If you are dynamically adding forms to the page (eg. by loading a page using Ajax) then you can trigger the newly added ajax selects widgets to be activated:

$(window).trigger('init-autocomplete');