SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation jQuery AJAX Call preventing JQuery UI Combobox Select Firing

    Hi,

    I have the following code which populates a combobox from an existing select field and then makes an AJAX call to a JSONP feed.

    This is all working and the dropdown list is populating however when I place the following code inside the AJAX call the combobox select function is not fired when the item is selected.

    Code JavaScript:
     return $("<li></li>").append("<a>" + item.label + results.id + "</a>").appendTo(ul);

    Any help would be much appreciated.

    Kind Regards,

    Richard

    Code JavaScript:
    data("autocomplete")._renderItem = function (ul, item) {
                    $.ajax({
                        url: 'http://myurl.com/oauth.php?fb=' + item.fbid,
                        dataType: "jsonp",
                        async: false,
                        cache: true,
                        success: function (results) {
                            console.log(results.id);
                            // Select not fired on click when placed here
                            return $("<li></li>").append("<a>" + item.label + results.id + "</a>").appendTo(ul);
                        }
                    });
      // Select fired on click but need results.id returned from JSON
        //                    return $("<li></li>").append("<a>" + item.label + results.id + "</a>").appendTo(ul);
                };



    Full Code:
    Code JavaScript:
    $.widget("ui.combobox", {
        _create: function () {
            var self = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "";
            var input = this.input = $("<input>").insertAfter(select).val(value).autocomplete({
                delay: 0,
                minLength: 1,
                source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(select.children("option").map(function () {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text))) return {
                            label: text,
                            value: text,
                            option: this,
                            fbid: this.value
                        };
                    }));
                },
                select: function (event, ui) {
                    alert("Item Selected");
                    ui.item.option.selected = true;
                    self._trigger("selected", event, {
                        item: ui.item.option
                    });
                },
            }).data("autocomplete")._renderItem = function (ul, item) {
                    $.ajax({
                        url: 'http://myurl.com/oauth.php?fb=' + item.fbid,
                        dataType: "jsonp",
                        async: false,
                        cache: true,
                        success: function (results) {
                            console.log(results.id);
                            // Select not fired on click when placed here 
                            return $("<li></li>").append("<a>" + item.label + results.id + "</a>").appendTo(ul);
                        }
                    });
      // Select fired but need results.id returned from JSON
        // return $("<li></li>").append("<a>" + item.label + results.id + "</a>").appendTo(ul); 
                };
        },
    });
    $("#combobox").combobox();

  2. #2


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •