CODEWITHSUNDEEP
jquerytwitter-bootstraptypeahead.js
vegas2033
vegas2033

Reputation: 250

trigger bootstrap typeahead item

I am using typeahead.js to dynamically display a list of project numbers. When the user pick one project, I have an Ajax function that fetches the project balances and display them. All this works fine. My problem is when I refresh the page and repopulate the form. The selected project id is populated but I don't know how to trigger the Ajax script again.

This is the code I originally use to trigger the code when the user selects a project: $('input.typeahead').on('typeahead:selected', function (event, selection) { typeaheadSelected(selection, event); });

This is the ajax function called:

function typeaheadSelected($prsy, event) {
            $('#project-distribution-loading').show();

            //set the id of the selected bloc
            if (event != null) {
                var id = event.target.id;
                $id = id.slice(-1);
            } else {
                $id = 0;
            }
            if (!$.isNumeric($id)) {
                $id = 0;
            }
            $.ajax({
                url: "../Helper/GetProjectDetails",
                data: ({ prsy: $prsy }),
                type: "GET",
                success: function (data) {
                    $('#pi-details-panel').show(500);
                    data = JSON.parse(data);
                    if ($id == 0) {
                        $('#project-id-details').html($prsy);
                    }
                    else {
                        $('#project-id-details-' + $id).html($prsy);
                    }

                    //Convert amounts to currencies
                    $('#currency-transformation').val(data.FundAvailableAmount).currency();
                    $fundAmt = $('#currency-transformation').val();
                    if ($id == 0) {
                        $('#project-availability-details').html($fundAmt);
                    } else {
                        $('#project-availability-details-' + $id).html($fundAmt);
                    }
                    $('#currency-transformation').val(data.PendingRFApprovalOTPSAmount).currency();
                    $pendAmt = $('#currency-transformation').val();
                    $('#currency-transformation').val(data.NetAvailableAmount).currency();
                    $netAmt = $('#currency-transformation').val();

                    //Populate popover content
                    if ($id == 0) {
                        $popoverContent = "<span>Fund Amount</span><span class='right' id='popover-funding'>" + $fundAmt + "</span><br/>" +
                                      "<span>Pending Amount</span><span class='right' id='popover-funding'>" + $pendAmt + "</span><br/>" +
                                      "<span>Total Amount</span><span class='right' id='popover-funding'>" + $netAmt + "</span><br/><br/>" +
                                      "<a href='#' data-toggle='modal' data-target='#project-funding-history-modal' id='funding-history-modal'><i class='glyphicon glyphicon-stats'></i>&nbsp;&nbsp;Project Budget & Expense Report</a>";
                        $('#funding-popover').attr('data-content', $popoverContent);
                    } else {
                        //Populate popover content
                        $popoverContent = "<span>Fund Amount</span><span class='right' id='popover-funding-" + $id + "'>" + $fundAmt + "</span><br/>" +
                                          "<span>Pending Amount</span><span class='right' id='popover-funding-" + $id + "'>" + $pendAmt + "</span><br/>" +
                                          "<span>Total Amount</span><span class='right' id='popover-funding-" + $id + "'>" + $netAmt + "</span><br/><br/>" +
                                          "<a href='#' data-toggle='modal' data-target='#project-funding-history-modal-" + $id + "' id='funding-history-modal-" + $id + "'><i class='glyphicon glyphicon-stats'></i>&nbsp;&nbsp;Project Budget & Expense Report</a>";
                        $('#funding-popover-' + $id).attr('data-content', $popoverContent);
                    }

                    //popover tooltip
                    $popoverId = "";
                    if ($id == 0) {
                        $popoverId = '#funding-popover';
                        $fundingTable = '#project-funding-history-modal';
                    } else {
                        $popoverId = '#funding-popover-' + $id;
                        $fundingTable = '#project-funding-history-modal-' + $id;
                    }

                    var popover = $($popoverId).popover({ trigger: "manual", html: true, animation: true })
                        .on("mouseenter", function () {
                            var _this = this;
                            $(this).popover("show");
                            $(".popover").on("mouseleave", function () {
                                $(_this).popover('hide');
                            });
                        }).on("mouseleave", function () {
                            var _this = this;
                            setTimeout(function () {
                                if (!$(".popover:hover").length) {
                                    $(_this).popover("hide");
                                }
                            }, 300);
                        });

                    //Build the funding history
                    $($fundingTable).find("tr:gt(0)").remove();

                    if (data.ProjectBudgetAndExpenseSummaryData.PostingBalance != null) {

                        $.each(data.ProjectBudgetAndExpenseSummaryData.PostingBalance, function (i, item) {
                            $row = "<tr><td>" + item.Account + "</td><td>" + item.AccountName + "</td><td>" + item.Budget + "</td><td>" + item.Enc + "</td><td>" + item.Ptd + "</td><td>" + item.Avl + "</td></tr>";
                            $($fundingTable).find('tbody').append($row);
                        });

                    }
                    $('#project-distribution-loading').hide();
                    if ($id == 0) {
                        $('#project-number-label').hide();
                        $('#project-distribution-details').show();
                    } else {
                        $('#project-number-label-' + $id).hide();
                        $('#project-distribution-details-' + $id).show();
                    }
                    return false;
                },
                error: function (data) {
                    alert("error");
                    return false;
                }
            });

Is there in jQuery to select the first item of a typeahead list of all input with a '.typeahead' class?

Thanks in advance.

Upvotes: 0

Views: 664

Answers (2)

hmd
hmd

Reputation: 970

I'm using twitter bootstrap angular-ui typeahead in angularjs. And for triggering the typeahead (which already has a value) by code I used below method:

function triggerTheTypeAhead($target) {
    var origVal = $target.eq(0).val();
    $target.eq(0).val('').trigger('input')
    .eq(0).val(origVal).trigger('input');
}

It accepts typeahead DOM element as an argument i.e. triggerTheTypeAhead($('#yourTypeAhead')), you can call this method whenever you need to trigger the typeahead search.

You can also use the same functionality in angularjs directive, but being a directive it will cause unwanted multiple transactions that may affect the functionality.

Upvotes: 1

vegas2033
vegas2033

Reputation: 250

In the end, I had to find a hack for it because I couldn't find anything in the documentation. In order to trigger the typeahead automatically, I have to set the focus on each input to populate the dataset and then use the element ID and recall the ajax script (which I had to modify to access ID numbers rather than an event).

I'm sure there are cleaner ways to do it and if you find a better solution, I'll gladly change my code.

Thanks

Upvotes: 0

Related Questions