Bootstrap Typeahead AJAX

Question

I'm using a modified version of typeahead for Twitter Bootstrap ( https://github.com/biggora/bootstrap-ajax-typeahead ), which simplifies using remote data. The problem I've run into is that my AJAX call url depends on the selected option in my select input.

var subjectId = $('#chapters-open-subject option:selected').val();      
    $('#chapters-edit-title').typeahead({
        onSelect: function(item){
            $('#chapters-edit-submit').attr('disabled',false).removeClass('btn-default').addClass('btn-primary');
        },
        ajax: {
            url: '/admin/misc/chapters/search/'+subjectId
        },
        displayField: 'naslov'
    });

The problem is that even though I change the option in my select box, the url in AJAX request stays the same and is not changed accordingly. How could I resolve this issue?

Answer 1

You might be able to get away with something like this:

var subjectId = $('#chapters-open-subject option:selected').val();

var $typeahead = $('#chapters-edit-title').typeahead({
    onSelect: function(item){
        $('#chapters-edit-submit').attr('disabled',false).removeClass('btn-default').addClass('btn-primary');
    },
    ajax: {
        url: '/admin/misc/chapters/search/' + subjectId
    },
    displayField: 'naslov'
});

$('#chapters-open-subject').on('change', function() {
    subjectId = $(this).val();
    $typeahead.data('typeahead').options.ajax.url = '/admin/misc/chapters/search/' + subjectId;
});

If that doesn't work, I'd suggest posting an issue with the library on GitHub. It does not seem to have the capability to change the URL easily after it is set.

Answer 2

ajax : 
{
  preDispatch : function() { return { q: $("#subjectId").val() }},
  url: '/admin/misc/chapters/search/'+ ,
  method : 'get',
  displayField : 'naslov',
}