Filter und Ajax problem

brizzi · 09.01.2015

Hallo liebe Community,
ich brauche eure hilfe.
Habe ein Problem mit dem Isotop filter. Das Problem ist folgendes, in miener Datei befinden sich 10 vorgaldene elemente die durch das Isotop filter super gefiltert werden. Nun kommt das problem, unter diesen 10 elemente habe ich ein button mit dem weitere 10 elemente eingelsen werden( also angezeigt werden). Das klappt ja auch über meine AJAX Funktion. Das ding ist nur, dass mein Isotop Filter diese nicht erkennt undsomit nicht filter.

Habt ihr eventuell eine Idee wie ich es lösen könnte oder woran es liegt?

hier ist der link zu der Seite. Könnte etwas Kaotisch vorkommen. Muss halt nioch komplett aufgeräumt werden.

Ciao,
brizzi

Duddle · 09.01.2015

Isotope hat mehrere Methode um neue Elemente bekannt zu machen, u.a. http://isotope.metafizzy.co/methods.html#appended
Das machst du nach erfolgreichem Ende der AJAX-Funktion und alles sollte funktionieren.

Duddle

brizzi · 10.01.2015

Hey,

habe das jetzt mal so umgesetzt wie du es gesagt hast, zumindest hoffe ich das es so richitg ist, jedoch bekomme ich in Firebug die Fehlermeldung --> $.data(...) is undefined; return $.data(elem,'isotope-sort-data')[sortBy];

Weißt du wieso das kommt und iwe ich das verhindern kann?

Ciao,
brizzi

Duddle · 10.01.2015

Was muss ich klicken um zu diesem Ergebnis zu kommen? Ich sehe im Firefox schon andere JS-Fehler beim Seitenaufruf und kann daher das Isotope nicht testen.

Duddle

brizzi · 10.01.2015

hi,

warte lade für dich die datei hoch wo dieser Fehler auftritt.

Die anderen js fehler, tretten auf, weil es noch paar datei fehlen, da diese auf einer Probeseite geladen ist.

du müsst auf dezember unten klicken

Ciao,
brizzi

brizzi · 10.01.2015

Hi,

ach ja klick als erstes auf Streetvoting Men, und dann auf vorheriger Monat. Sobald du das gemacht hast wähle beispielsweiße Casual an und dann tritt der von mir bennante fehler auf.

Jedoch wenn ich den ganzen Kontent nicht auswechseln lasse, sondern nur erweitere komt keine Fehlermeldung, jedoch reagieren die neuen elemente nicht. das kann ich dir dann auch gleich mal zeigen.

Ciao,
brizzi

Duddle · 10.01.2015

Du benutzt von Isotope, ich habe auf die Dokumentation/Methode von Version 2 gelinkt. Vielleicht / wahrscheinlich gibt es da Unterschiede, auch in Bezug auf die jQuery-Version.
Ich kann jetzt nicht erkennen ob das die Ursache ist, aber solche grundsätzlichen Auffälligkeiten sollten zuerst beseitigt werden.

Ausserdem bekomme ich weiterhin JS-Fehler beim Erstaufruf der Seite.

Duddle

brizzi · 10.01.2015

Hast du den eine Idee wie ich es am besten lösen kann?

hier ist mien Isotop script :

Javascript:

 <script>
/*jshint browser:true, undef: true, unused: true, jquery: true */

var $container;
var filters = {};

$(function mehr(){

  $container = $('.filtera');
  var $filterDisplay = $('#filter-display');

   /*$container.isotope();*/
  // do stuff when checkbox change
  $('#options').on( 'change', function( jQEvent ) {
    var $checkbox = $( jQEvent.target );
    manageCheckbox( $checkbox );

    var comboFilter = getComboFilter( filters );

    $container.isotope({ filter: comboFilter });

    $filterDisplay.text( comboFilter );
  });

});


var data = {
  brands: 'Streetwear Casual Sportwear Shoes'.split(' '),
  productTypes: 'type1 type2 type3 type4'.split(' '),
  colors: 'red blue yellow green'.split(' '),
  sizes: 'uk-size8 uk-size9 uk-size10 uk-size11'.split(' ')
};

function getComboFilter( filters ) {
  var i = 0;
  var comboFilters = [];
  var message = [];

  for ( var prop in filters ) {
    message.push( filters[ prop ].join(' ') );
    var filterGroup = filters[ prop ];
    // skip to next filter group if it doesn't have any values
    if ( !filterGroup.length ) {
      continue;
    }
    if ( i === 0 ) {
      // copy to new array
      comboFilters = filterGroup.slice(0);
    } else {
      var filterSelectors = [];
      // copy to fresh array
      var groupCombo = comboFilters.slice(0); // [ A, B ]
      // merge filter Groups
      for (var k=0, len3 = filterGroup.length; k < len3; k++) {
        for (var j=0, len2 = groupCombo.length; j < len2; j++) {
          filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
        }

      }
      // apply filter selectors to combo filters for next group
      comboFilters = filterSelectors;
    }
    i++;
  }

  var comboFilter = comboFilters.join(', ');
  return comboFilter;
}

function manageCheckbox( $checkbox ) {
  var checkbox = $checkbox[0];

  var group = $checkbox.parents('.option-set').attr('data-group');
  // create array for filter group, if not there yet
  var filterGroup = filters[ group ];
  if ( !filterGroup ) {
    filterGroup = filters[ group ] = [];
  }

  var isAll = $checkbox.hasClass('all');
  // reset filter group if the all box was checked
  if ( isAll ) {
    delete filters[ group ];
    if ( !checkbox.checked ) {
      checkbox.checked = 'checked';
    }
  }
  // index of
  var index = $.inArray( checkbox.value, filterGroup );

  if ( checkbox.checked ) {
    var selector = isAll ? 'input' : 'input.all';
    $checkbox.siblings( selector ).removeAttr('checked');


    if ( !isAll && index === -1 ) {
      // add filter to group
      filters[ group ].push( checkbox.value );
    }

  } else if ( !isAll ) {
    // remove filter from group
    filters[ group ].splice( index, 1 );
    // if unchecked the last box, check the all
    if ( !$checkbox.siblings('[checked]').length ) {
      $checkbox.siblings('input.all').attr('checked', 'checked');
    }
  }

}

</script>

und das ist meine Ajax-Datei:

Javascript:

function vorherigermonat(){
    var userID=$(".zahl:last").val();
    var monat = $('#jetziges_monat').val();
    var year = $('#jetziges_jahr').val();
     $.ajax({
            type:"GET",
            url:"voting_male_iso.php",
            data: "zahl="+userID+"&monat="+monat+"&year="+year,
            success: function(data){   
            $('#vorheriger_monat').remove();
            $('#mehr_items').html(data);
            $container.isotop('insert',data);
            },
            error: function (request, status, error) {
            alert(request.responseText);
            }
    });
    return false;
};

bin gerade was verzwifelt. Wäre cool wenn du ein Ansatz hättest, oder mir kurz sagen könntest wo ich die version 2 bekomme, den auf der Seite gibt es kein download link und weiß gerade nicht, wie ich es umsetze bzw. einarbeite.

Ich bedanke mich an dieser stelle schon mal bei dir für deine Hilfe.

Ciao,
brizzi

brizzi · 10.01.2015

Bin gerade dein text nochmal innerlich am durch gehen, da fällt mir gerade ein, dass Jquery mässig sich eing. nichts ändert, weil immer last.jquery eingebunden ist. Soweit ich weiß, bzw. meines Wissen, wird dann doch immer das aller neueste Jquery eingesetzt oder nicht?

Duddle · 10.01.2015

brizzi schrieb:
Soweit ich weiß, bzw. meines Wissen, wird dann doch immer das aller neueste Jquery eingesetzt oder nicht?

Das ist korrekt.
Es kann aber sein dass ein neueres jQuery Funktionen ersetzt oder verworfen hat, Stichwort "deprecated". Wenn dann ein altes Script auf den alten Funktionen aufsetzt, funktioniert es nicht mehr oder anders mit den neuen Funktionen. Ich sage nicht, dass das hier der Fall ist, sondern dass es das sein kann.

brizzi schrieb:
mir kurz sagen könntest wo ich die version 2 bekomme, den auf der Seite gibt es kein download

Wie wäre es mit dem großen "Download isotope"-Knopf auf der Startseite direkt unter der Überschrift?

Falls du eine neue Version einsetzt musst du wahrscheinlich auch deinen Code ändern, Beispiele gibt es ja aber auch für v2.
Ausserdem solltest du beachten, dass du das Script (scheinbar) in einem kommerziellen Umfeld einsetzen willst, ergo benötigst du laut Lizenzbestimmung eine kommerzielle Lizenz - zumindest wenn du rechtlich sauber arbeiten willst. Das gilt auch für Version 1.

Du kannst übrigens Beiträge auch editieren, dann vermeidest du mehrfach-Posts.

Duddle

brizzi · 11.01.2015

ja das mit dem Download habe ich auch gesehen, später. Ja ich versuche es ganze zeit und muss es jetzt umdenken, weil mein script mehrere auswahl möglichkeiten kombeiniert sind und es über checkboxen funktioniert. Da muss ich was genauer drauf achten. Linzenz dazu ist vorhanden meines wissen.
Du hast auch keine Idee wie ich das mit dem jetzigen script in verbindung bringen kann oder?
Weil ich schon einiges versucht habe und gegooglet habe, jedoch bis jetzt erfolglos.

Ciao,
brizzi

Duddle · 11.01.2015

brizzi schrieb:
Du hast auch keine Idee wie ich das mit dem jetzigen script in verbindung bringen kann oder?

Was ist hier "das"?
Wenn du das anfügen neuer Elemente meinst, dann gilt meine vorige Antwort - vorausgesetzt du nutzt v2. Wenn du v1 nutzt, müsstest du eben nutzen.

Edit: ich habe selbst mal rumgespielt und wenn ich dein Filterzeug , funktioniert es wie erwartet.

Duddle

brizzi · 13.01.2015

Hey,
sry für die späte Antwort. Das was du mir noch geschickt hast mit den erweiterung für version1 haben mir sehr viel weiter geholfen. Habe das auch hinbekommen, dank deiner Hilfe.

Wollte mich nochmals bei dir bedanken und dich auch was fragen, ob du weißt wie ich die nach geladene Elemente vor vorhandenen Elemnte laden lasse bzw. mir dort auftauchen?
Es gibt ja dieses sortBy aber i-wie macht er es nicht. Oder ich setze es Falsch ein. Wo nach sortiert den sortBy? nach der classe oder nach einer data-... .
Weißt du es zufällig?

Ciao,
brizzi

Duddle · 13.01.2015

Steht alles in der Doku:

http://isotope.metafizzy.co/options.html#sortby

Duddle

brizzi · 14.01.2015

Hey,

ich muss dich leider wieder nerven. Iregendwie will das nicht funktionieren. Habe das jetzt mal eingebunden und angepasst, jedoch setzt er die Elemente immernoch unter den Vorhandenen Elementen ein. Hier mal den Code Shnipsel.

Javascript:

$( function() {
  // init Isotope
  var $container = $('.filtera').isotope({
    itemSelector: '.item',
    layoutMode: 'fitRows',
    getSortData: {
      number: '.number parseInt'
    },
    // sort by color then number
    sortBy: [ 'number' ]
  });

  // bind sort button click
  $('#sorts').on( 'click', 'button', function() {
    var sortValue = $(this).attr('data-sort-value');
    // make an array of values
    sortValue = sortValue.split(',');
    $container.isotope({ sortBy: sortValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });
 
});

    alert('sortieren');
}

Ich verstehe nicht warum er das nicht aktiviert. bzw. es wird aktiviert, aber man sieht keinen unterschied. Diese funktion wird nach dem Insert aufgerufen.

Ich verstehe gerade nichts mehr irgendwie.

Ciao,
brizzi

Duddle · 14.01.2015

Wo ist ein Beispiel, in dem man den Fehler nachvollziehen kann?
Vergiss ausserdem nicht, dass das reine Hinzufügen unsortiert passiert, so steht es in der Doku. Danach musst du neu sortieren lassen.

Duddle

brizzi · 15.01.2015

Das ding ist es wird mir kein Fehler angezeigt, wenn ich mir in Firebug den HTML anschaue dann macht er eine anderung nur die Position lässt er stehen. Also ändert das script zu dem wie es schon ist.

Hier ist das zu sehen.
Ja das habe ich auch gelesen, nur bis auf das ich ein monat im vorraus laden möchte war es bis jetzt kein problem.

Ciao,
brizzi

brizzi · 15.01.2015

hey,

also ich habe das jetzt mal so hinbekommen, dass die Neuen elementen die ich über die vorherigen Elementen sein sollten sind. Nur bekomme ich jetzt diese fehlermeldung ind firebug --> cannot call methods on isotope prior to initialization; attempted to call 'reloadItems'
ausserdem funktionieren meine Filter nicht mehr. Kann es an der art wie ich das hinbekommen habe liegen? das wäre die .prepend Lösung. Habe alles andere ausprobiert aber das war jetzt das einzige was so geklappt hat.

Ciao,
brizzi

brizzi · 15.01.2015

Hey, habe es jetzt hinbekommen. danke vielmals für deine Hilfe und den zahlreichen Tipps.

Ciao,
brizzi