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.