jQuery select2 with remote data and asp.net

Question

I am using select2 library for replacing select boxes. I rearranged example 7 that you can find on Select2 library page (scroll down with id $("#e7").select2 etc...). I made my own generic handler that return serialized json data:

GetData.asxh view : public class GetData : IHttpHandler { public bool IsReusable { get { return false; } }

    public class RecipesList
    {
        public int total { get; set; }
        public List<TopRecipeTable> recipes { get; set; }

        public RecipesList() { }

        public RecipesList(int total, List<TopRecipeTable> recipes)
        {
            this.total = total;
            this.recipes = recipes;
        }
    }

    private string GenerateJsonSerializedObject(int languageId, string orderBy)
    {            
        RecipesList recipeList = new RecipesList(15, DBDataBase.GetTopRecipesByNumberOfRecipes(languageId, 15));
        return new JavaScriptSerializer().Serialize(recipeList);
    }

    public void ProcessRequest(HttpContext context)
    {
        int languageId;            
        bool languageParsed = int.TryParse(context.Request["languageId"], out languageId);
        string orderBy = (string)context.Request["orderBy"];

        if (languageParsed && orderBy != string.Empty)
        {enter code here
            context.Response.ContentType = "application/json";
            var jsonValue = GenerateJsonSerializedObject(languageId, orderBy);
            context.Response.Write(jsonValue);
        }
    }

This generic handler returns the right format of json (I checked it with this URL ). My result (json) is also the same as the one in example on above mentioned page. But after this jquery doesn`t fire anymore.

My script :

$(document).ready(function () {
        $("#e8").select2({
            placeholder: "Search for a recipe",
            //minimumInputLength: 1,
            ajax: {                               
                url: "/Handlers/GetData.ashx",
                dataType: 'jsonp',
                data: function (term, page) {
                    return {
                        languageId: 1,
                        orderBy: "TA"
                    };
                },
                results: function (data, page) {
                    alert(data.total);
                    var more = (page * 10) < data.total; // whether or not there are more results available

                    // notice we return the value of more so Select2 knows if more results can be loaded
                    return { results: data.recipes, more: more };
                }
            },
            formatResult: movieFormatResult, // omitted for brevity, see the source of this page
            formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
            dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
            escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
        });
    });

I tried to write the same alert(data.total) in the original example and it worked but not in my version. So I have the right json format, the jquery calls my generic handler and also recieved parameters languageId ... and also return the right json format but than nothing. I don't know if I am missing something here, because I am sure that this thing could also work with a generic handler as well. I hope I gave enough information about my problem.

I can also add my result in jquery .ajax error handler : 
xhr.status = 200
ajaxOptions = parsererror
horwnError = SyntaxError : invalid label
If this is any helpful information

You are serializing JavaScript, which gets you a json response. Yet in the ajax call you have specified dataType of jsonp. Change it to json and it should work, unless you have other issues. — DarrellNorton, Aug 11 '14 at 00:20

score 0 · Answer 1 · answered May 04 '13 at 02:17

This question is quite old, so pretty sure you have a solution by now...but:

Remove all of these functions:

formatResult: movieFormatResult formatSelection: movieFormatSelection dropdownCssClass: ... escapeMarkup:....

You did not provide those functions to format your data did you? All of those are only needed if you are making a custom drop down of items.

You are returning data.recipes - that needs to be an array of {Text:"", Id:""} or you need to build it from what you return right there.

First, get it working with just a very basic list with very basic data...then go from there.

Additionally, when you get that working try using WebApi or ServiceStack to handle your data instead of an IHttpHandler.

jQuery select2 with remote data and asp.net

1 Answers1