aurelia / framework

The Aurelia 1 framework entry point, bringing together all the required sub-modules of Aurelia.
MIT License
11.75k stars 623 forks source link

aurelia select2 load remote data not loading next page #803

Closed maryalfred closed 7 years ago

maryalfred commented 7 years ago

I’m trying to use select2 with load remote data (ajax) in aurelia , so I create a custom attribute Select2 and do the option following the documentation But I faced an issue when I scroll to the end of the drop down “loading more results” message appear but doesn’t load data more or call the api (using same api from the select2 documentation to make sure I’m not missing anything)

import { customAttribute, inject , bindable, bindingMode} from 'aurelia-framework';
import 'jquery';
import 'select2'; 

@customAttribute('select2')
@inject(Element)
export class Select2CustomAttribute {
element;

constructor(element) {
    this.element = element;
}

attached() {

           var self=this;

    $(this.element).select2(
        {
           // closeOnSelect: false,
             allowClear: true,        
            ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
  return {
    q: params.term, // search term
    page: params.page
  };
},
processResults: function (data, params) {
  // parse the results into the format expected by Select2
  // since we are using custom formatting functions we do not need to
  // alter the remote JSON data, except to indicate that infinite
  // scrolling can be used
  params.page = params.page || 1;

  return {
    results: data.items,
    pagination: {
      more: (params.page * 30) < data.total_count
    }
  };
},
cache: true
  },
                escapeMarkup: function (markup) { return markup; }, 
                minimumInputLength:0,
                templateResult: function( repo )
                            {
                                if (repo.loading) return repo.text;

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
  "</div>" +
  "</div></div>";

  return markup;

                        },
                         templateSelection: function (repo) { return repo.full_name || repo.text; } ,

        }
    ).on('change', evt => {
            if (!evt.originalEvent) {
                try{
                    this.element.dispatchEvent(new Event('change'));
                }catch(e){
                    // IE 11+
                    try{
                        let evt = document.createEvent('HTMLEvents');
                        evt.initEvent('change', false, true);
                        this.element.dispatchEvent(evt);
                    }catch(e){
                        console.log(e);
                    }
                }
            }
        });

}
}
AshleyGrant commented 7 years ago

The issue template explicitly states that questions should be posted to Stack Overflow, which you have already done here: https://stackoverflow.com/questions/45171359/aurelia-select2-load-remote-data-not-loading-next-page

We'll do our best to help you over on Stack Overflow, but this issue will need to be closed.

@EisenbergEffect, please close this issue.

maryalfred commented 7 years ago

Sorry but in the template mention that bug or issue to be posted in both. And still its not fixed and shouldn't be closed untill find solution as if anyone face the same issue and find it closed he will mot got reference

Regards, Mary Alfred Senior Software Engineer [Description: Description: Description: Description: ITWORX-LOGO copy.png (293?95)] www.itworx.com href='http://www.itworx.com/' target='_blank'>http://www.itworx.com/http://<br/www.itworx.com<>

On Tue, Jul 18, 2017 at 8:24 PM +0200, "Ashley Grant" notifications@github.com<mailto:notifications@github.com> wrote:

The issue template explicitly states that questions should be posted to Stack Overflow, which you have already done here: https://stackoverflow.com/questions/45171359/aurelia-select2-load-remote-data-not-loading-next-page

We'll do our best to help you over on Stack Overflow, but this issue will need to be closed.

@EisenbergEffecthttps://github.com/eisenbergeffect, please close this issue.

- You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/aurelia/framework/issues/803#issuecomment-316153350, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AZHBkcI2q1vzVc8uCq67HLErX8J9QSEnks5sPPjigaJpZM4Objlk.

AshleyGrant commented 7 years ago

The template states

SUPPORT REQUESTS/QUESTIONS: If you have a support request or question please submit them to StackOverflow using the tags aurelia and aurelia-framework http://stackoverflow.com/questions/tagged/aurelia or the Aurelia Gitter https://gitter.im/aurelia/discuss

SUPPORT REQUESTS SUBMITTED HERE WILL BE CLOSED.

The issue you have found is an issue in your code, and likely not in Aurelia.