Getting error on jQuery Tag-it UI widget Failed to load resource

Question

I am using jQuery UI widget TagIt in Asp.net. Code is working fine but i want to highlight the tags which is not available into the list.

Previously I asked the question and using the same method Highlight tags which is not available into the list

My code is

.aspx Code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link href="../CSS/jquery.tagit.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
          <script src="../JavaScript/tag-it.js"></script>
        <link href="../CSS/tagit.ui-zendesk.css" rel="stylesheet" />
    <script>
    $(function () {
        $.ajax({
            url: 'UpdateSingImgKwds.aspx/GetKeywords',
            type: 'GET',
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            success: function (res) {

                console.log(res.d);


                $('#singleFieldTags').tagit({
                    caseSensitive: false,
                    availableTags: res.d,
                    allowSpaces: true,
                    singleField: true,
                    singleFieldNode: $('#txtCompKwds'),
                    beforeTagAdded: function (event, ui) {
                        if ((res.d).indexOf(ui.tagLabel.toLowerCase()) == -1) {
                            $(ui.tag).css('background', '#F9999A')
                        }
                    }

                });



            },
            failure: function (err) {
                alert(err);
            }
        });   


    });

CS Code

   [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public static string[] GetKeywords()
    {
        List<string> lst = new List<string>();
        string queryString = "select Keyword from SIB_KWD_Library";
        using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["vConnString"].ToString()))
        {
            using (SqlCommand command = new SqlCommand(queryString, connection))
            {
                connection.Open();
                using (SqlDataReader reader = command.ExecuteReader())
                {

                    while (reader.Read())
                    {
                        lst.Add(reader["Keyword"].ToString());
                    }
                }
            }
        }
        lst = lst.ConvertAll(d => d.ToLower());
        return lst.ToArray();
    }

When length of array list is Up-to 7345 its getting error resource: the server responded with a status of 500 (Internal Server Error)

JS Fiddle

Stuck with the issue please help.

Answer 1

Okay the problem was with the length of data you were sending back as result and when traced I used to get below error message in console:

Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.

So you need to make a setting in your web.config file to allow maxJsonLength for jsonSerialization like one below:

<system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="2147483644"/> //This is the max value for integer
      </webServices>
    </scripting>
</system.web.extensions>

and I would like to make few changes to your webmethod and the way of loading source as below:

Webmethod

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static List<string> GetKeywords()
{
    List<string> lst = new List<string>();
    string queryString = "select Keyword from SIB_KWD_Library";
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["vConnString"].ToString()))
    {
        connection.Open();
        using (SqlCommand command = new SqlCommand(queryString, connection))
        {

            using (SqlDataReader reader = command.ExecuteReader())
            {

                while (reader.Read())
                {
                    lst.Add(reader["Keyword"].ToString());
                }
            }
        }
    }
    lst = lst.ConvertAll(d => d.ToLower());
    return lst; //return it as list itself
}

Now the way you call the ajax source:

$(document).ready(function () {
     var source = []; //declare a source array
     $.when(//get the source first
            $.ajax({
                url: '<%= ResolveUrl("Default.aspx/GetKeywords") %>',
                type: 'GET',
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                success: function (res) {
                    source = res.d;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            })
     ).done(function () { //once done assign it as you cannot directly assign the source as availableTags:res.d
            $('#mySingleFieldTags').tagit({
                  caseSensitive: false,
                  availableTags: source,
                  allowSpaces: true,
                  singleField: true,
                  singleFieldNode: $('#txtCompKwds'),
                  beforeTagAdded: function (event, ui) {
                       console.log(source);
                       if ((source).indexOf(ui.tagLabel.toLowerCase()) == -1) {
                            $(ui.tag).css('background', '#F9999A')
                        }
                  }
             });
     });
});

Check the console once everything is done. You will have the array of values.

Note : To check the error just remove the above setting in web.config file and keep all the other codes mentioned and check the console once done!!