Question

I am having trouble displaying results recieved from asp.net WebMethod. I have a HTML template and fill in the results from JSON response. The problem is that the first response is being displayed once, the second is displayed 2 times, the third 4 times, the fourth 8 times and so on . Here is the jQuery (I need to reference “d” first because the response is comming from asp.net and they put it there automatically)

     function fnGetContent(keyword) {
            var NewKeyword = keyword.tag;
            var type = keyword.type
            var oldresults = $("#fillresultsdiv").html()
            $('#hidQueryType').val('tagsearch');
            $.ajax({
                type: "POST",  //GetEvents(iType As Integer, sSearch As String)
                url: "Default.aspx/GetEvents",
                data: "{'iType':'" + type + "','sSearch' : '" + NewKeyword + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function (msg) {
                    var events = [];
                    var obj = $.parseJSON(msg.d);

                    $.each(obj.res, function() {
                        var newRow = $('.Template').clone();

                        // Now loop through the object
                        for (var prop in this) {
                            if (this.hasOwnProperty(prop)) {

                                // Lucky for you, the keys match the classes :)
                                $('.' + prop, newRow).text(this[prop]);
                            }
                        }
                        $('#fillresultsdiv').append(newRow);
                    });

There is only one entry in the JSON for each event, it is the jQuery code that is making this happen, sample response:

 {"d":"{\"res\":[{\"day\":\"26\",\"dayofweek\":\"Tue\",\"month\":\"Jun\",\"title\":\"Glen Hansard\"
       ,\"venue\":\"Vic Theatre\",\"time\":\"7:00 PM\",\"ticketurl\":
        \"http://seatgeek.com/glen-hansard-tickets/chicago-illinois....

Answer 1

Each time you call

var newRow = $('.Template').clone();

You are creating a copy of all the elements that have the “Template” class. You are then appending all these copies to your element with id “fillresultsdiv”. Each one of these copies also has this “Template” class applied to it, so the next time you clone, you are picking up the previously cloned copies.

The first time you call it there is only one row, the second time 2, then 4, then 8, etc.

You can probably just change the cloning line to

var newRow = $('.Template').clone().removeClass("Template");