Dynamically add new item to data-filter-class in ajax success callback,but the filter ignore the new item.

[wangjunji]

Hi,sebobo,I ve met the same issue some others had posted before while it is closed now,so i have to create a new issue.

I dynamically change the data-filter-class in ajax success callback and succeed(shown in Chrome dev console),but I cannnot filter the newly-added item out unless I refresh the page(not the result i want)

here is the snippet of my code:

<script>
       //global variables
        var option=...
        var handler=...
        var filter=...

 (function ($) { $('#tiles').imagesLoaded(function () {
                 //wookmark ..
        })
        })(jQuery);

        function addfav(obj, user_id, pic_id) {
            $.ajax({
                type: 'post',
                url: 'Image/AddFav',
                data: { uid: user_id, pid: pic_id },
                dataType: 'json',
                success: function (data) {
                    if (data.flag == 1) {
                        $(obj).html('cancel<i class="fa fa-star red"></i>')
                        $(obj).attr('onclick', 'delfav(' + user_id + "," + pic_id + ")");
                        var oldtag = $(obj).closest('li').attr('data-filter-class');
                        $(obj).closest('li').attr('data-filter-class', oldtag.replace('[', '[\"favorite\",'));
                        handler.wookmarkInstance.updateFilterClasses();  //not working
                    }
                }
            })
        }
      ...
</script>

[Sebobo]

Hi,

difficult question, but I would guess, that something is wrong with the way you update the filter classes. You should put a breakpoint into the updateFilterClasses method and check what's in the resulting array. Maybe it's a simple syntax error. Or you can call on the object from the console and output the data-filter-class and check if everything is there.

Regards

[samik3k]

Wookmark.prototype.updateFilterClasses = function() { // Collect filter data var i = 0, j = 0, k = 0, filterClasses = {}, itemFilterClasses, $item, filterClass, possibleFilters = this.possibleFilters, possibleFilter;

  for (; i < this.handler.length; i++) {
    $item = this.handler.eq(i);

    // Read filter classes and globally store each filter class as object and the fitting items in the array

/// stupid fix start itemFilterClasses = JSON.parse($item.attr('data-filter-class')); /// stupid fix end

    if (typeof itemFilterClasses == 'object' && itemFilterClasses.length > 0) {
      for (j = 0; j < itemFilterClasses.length; j++) {
        filterClass = cleanFilterName(itemFilterClasses[j]);

        if (typeof(filterClasses[filterClass]) === 'undefined') {
          filterClasses[filterClass] = [];
        }
        filterClasses[filterClass].push($item[0]);
      }
    }
  }

  for (; k < possibleFilters.length; k++) {
    possibleFilter = cleanFilterName(possibleFilters[k]);
    if (!(possibleFilter in filterClasses)) {
      filterClasses[possibleFilter] = [];
    }
  }
  this.filterClasses = filterClasses;
};

Found a problem, we have current array in $item, but we've got shit in cached (why cached?) $item.data('filterClass')... I think it will fix the problem. But i think, maybe you can fix it properly.

[Sebobo]

Hi,

strange. Which version of jQuery are you using and do you have any additional library running? There are also libs which do some additional selector caching.

Regards

[Sebobo]

Should work better now with 2.0