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