jQuery results set keeping populating

Question

I have jQuery function that makes an ajax call that builds a HTML string to populate the <ul></ul> feature. the problem is there is link on the page that does a refresh of the page, the problem is that the HTML that got added the jQuery ajax call adds the HTML to the page again so that the result is not doubled. if you do it again the result gets added again.

So my question is how can i clear the HTML so the result is repeated multiple times? or what is the best way to solve this problem?

// Expand copy to group modal groups $(".groupZones .expand").live('click', function() { $(this).siblings('.contract').show(); $(this).css('display', 'none'); $(this).parent().parent().siblings('.groupDetails').css('display', 'block'); $(this).parent().parent().siblings('.groupDetails').find('ul.device').find('ul .list').after(''); var cwpUserId = $('#ctl00_cphBody_hfCwpId').val(); var groupId = $(this).parent().siblings('.add').find('input').val(); sortOn = "Location"; var mode = "dayparts"; var groupUl = $(this).parent().parent().siblings('.groupDetails').find('ul').find('ul li.head'); var groupDetails = $(this).parent().parent().siblings('.groupDetails'); //Get the zone details.. // Load.

            $.ajax({
                type: "POST",
                url: "ajax/DaypartMessagingGroups.asmx/GetDetailsForCopyToGroup",
                data: "{'groupId':" + groupId + ",'cwpUserId':" + cwpUserId + ",'pageNum':0,'pageSize':5, 'sortOn':'" + sortOn + "','sortDirection':'" + sortDirection + "','mode':'" + mode + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    //$(btn).parents("ul.list-group-zones").children("li:.head").after(msg.d);
                    $(groupUl).after(msg.d);
                    $('.location').find('.contract').hide();

                    var copyZonePerPage = 5;
                    //var copyZoneItemsCount = $(groupUl).siblings('#hfAllGroupZones').val();
                    var copyZoneItemsCount = $('#hfAllGroupZones').val();
                    var copyZonePages = Math.ceil(copyZoneItemsCount / copyZonePerPage);
                    var copyZoneHtml = '';
                    var copyZoneCurLink = 0;
                    var current_copyzone_pagination_set = 1;
                    var num_of_pagination_shown = 0;
                    alert('Line 2113 CBG');

                    if (copyZonePages > 20) {
                        //var pagesAdded = (parseInt(current_copyzone_pagination_set) - 1) * 10;

                        while (num_of_pagination_shown < 20) {
                            copyZoneHtml += '<a class="page_link_clicked" longdesc="' + copyZoneCurLink + '">' + (copyZoneCurLink + 1) + '</a>';
                            copyZoneCurLink++;
                            num_of_pagination_shown++;
                        }

                        copyZoneHtml += '<a class="page_link" id="btnNextZoneSet" longdesc="' + copyZoneCurLink + '">...</a>';

                    }
                    else {
                        while (copyZonePages > copyZoneCurLink) {
                            copyZoneHtml += '<a class="page_link_clicked" longdesc="' + copyZoneCurLink + '">' + (copyZoneCurLink + 1) + '</a>';
                            copyZoneCurLink++;
                        }
                    }

                    $(groupUl).parent().parent().find('ul li.footer').html(copyZoneHtml);
                    $('.page_link_clicked[longdesc=0]').addClass('current');

                },
                error: function(err) {
                    var err = eval("(" + err.responseText + ")");
                    if (ShowModalLogin(err.ExceptionType)) {
                        alert("An error occurred.");
                    }
                }
            });

        });

Answer 1

Assuming the content you add is wrapped by a container (your <ul>), simply clear the contents of the container prior to adding the new content.

You can use the jQuery .remove() function to accomplish this.

Answer 2

Before you insert the content from the string, I'd ask the <ul> if it is empty.

var $ul = $('#myUL');

if( $ul.is(':empty') )
   $ul.append( content );

or a shorter version:

$('#myUL:empty').append(content);

• http://api.jquery.com/empty-selector/

Note that :empty means completely empty, including spaces.

---

EDIT:

If the page refreshing is an unneeded side effect of some other action, you can prevent it in your handler for those <a> elements using event.preventDefault().

$('a.myLink').click(function( e ) {
    e.preventDefault(); // prevents the default behavior of the <a> element.
    // run your code
});