Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Magento Error: data-category must be a number! #9

Closed
rajoriya654 opened this issue Apr 30, 2016 · 9 comments
Closed

Magento Error: data-category must be a number! #9

rajoriya654 opened this issue Apr 30, 2016 · 9 comments

Comments

@rajoriya654
Copy link

rajoriya654 commented Apr 30, 2016 •
edited

Hello there,

I m using the Filterizr library for the sorting. But I am getting the problem when I declare the data category like this data-category="2, 4" error is "plugins.js:951 Uncaught Error: Filterizr: the value of data-category must be a number, starting from value 1 and increasing."

I don't why it is getting Error. my code is given below please tell me where I am wrong.

   <ul class="simplefilter filters-filteringModeSingle" id="filteringModeSingle">
          <li class="active filtr" data-fltr="all">Customizable</li>
          <li class="filtr" data-fltr="1">Accessories</li>
          <li class="filtr" data-fltr="2">Jewelry</li>
   </ul>

<div class="filtr-container layout-pane filteringModeSingle">
      <div class="col-xs-6 col-sm-4 col-md-2 filtr-item" data-category="2, 4"> <img class="img-responsive" src="{{media url="wysiwyg/media/img1.jpg"}}" alt="sample image"> </div>
      <div class="col-xs-6 col-sm-4 col-md-2 filtr-item" data-category="2"> <img class="img-responsive" src="{{media url="wysiwyg/media/img2.jpg"}}" alt="sample image"> </div>
      <div class="col-xs-6 col-sm-4 col-md-2 filtr-item" data-category="7"> <img class="img-responsive" src="{{media url="wysiwyg/media/img3.jpg"}}" alt="sample image"> </div>
 </div>

jQuery(document).ready(function() {
    var filteringModeSingle = jQuery('.filteringModeSingle').filterizr({
        delay: 25,
        setupControls: false
    });
    //Filtering section nav
    jQuery('#filteringModeSingle li').click(function() {
        jQuery('.filters-filteringModeSingle .filtr').removeClass('active');
        jQuery(this).addClass('active');
        var filter = jQuery(this).data('fltr');
        filteringModeSingle.filterizr('filter', filter);
    });
});

screen1
@giotiskl
Copy link
Owner

giotiskl commented Apr 30, 2016 •
edited

Hello @rajoriya654 your controls look fine.
The problem is probably caused by the values used in your data-category attributes. The values of your categories must start from the integer 1 and go on incrementally.
For example if you have 5 categories, you must use numbers 1...5 and NOT 0...4 or 2...6 or anything else.
Hope this helps.

@rajoriya654
Copy link
Author

Hello @giotiskl thanks for the reply.

But I am not satisfied with your answer. I am still facing the same error. know I am using according to you 1, 2.

please tell me the correct syntax.

@giotiskl
Copy link
Owner

giotiskl commented May 2, 2016 •
edited

show me the HTML of your whole gallery and also take a look at the HTML of the index file of the dev_example directory for a working sample.

@kazasoft
Copy link

hi. i have this problem too.
but in my situation problem with mootools
in string 950 array [1,10,15,41] have N=12
some $family and else...
look at this...
http://tatd.ru/pod
on console
Sorry for English

@rajoriya654
Copy link
Author

This is code is working perfect, but don't know why it's not working with mootools

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://tatd.ru/templates/yoo_moreno/styles/white/css/theme.css">
</head>

<body>
<div>
  <style>
    /* Filter controls */
.simplefilter li, .multifilter li, .sortandshuffle li {
    color: white;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    padding: 1rem 2rem;
}
.simplefilter li {
    background-color: #585858;
}
.simplefilter li.active {
    background-color: #212121;
}
.multifilter li {
    background-color: #4b9eff;
}
.multifilter li.active {
    background-color: #2265b4;
}
    </style>
  <div class="row">
    <h4>Литературные предпочтения</h4>
    <ul class="multifilter">
      <li data-multifilter="1">Русская классическая литература</li>
      <li data-multifilter="2">Зарубежная классическая литература</li>
      <li data-multifilter="3">Современная и советская литература</li>
      <li data-multifilter="4">Патриотическая литература</li>
      <li data-multifilter="5">Детская литература</li>
      <li data-multifilter="6">С друзьями или коллегами</li>
      <li data-multifilter="7">Только с подругами</li>
      <li data-multifilter="8">С детьми (до 12 лет)</li>
      <li data-multifilter="9">Семейный поход (12+)</li>
      <li data-multifilter="10">С любимым человеком</li>
      <li data-multifilter="11">Встреча с русским национальным театром</li>
      <li data-multifilter="12">Посмеяться от души</li>
      <li data-multifilter="13">Задуматься о жизни</li>
      <li data-multifilter="14">Провести приятный вечер</li>
      <li data-multifilter="15">Настроиться на романтику</li>
      <li data-multifilter="16">Погрустить о любви</li>
      <li data-multifilter="17">Расширить кругозор ребенка (первое знакомство с театром)</li>
    </ul>
  </div>
  <div style="padding: 0px; position: relative;" class="filtr-container uk-grid">
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 9, 11, 13" data-sort="И всё-таки я Вас без памяти люблю!"> <img src="http://tatd.ru/images/repertoire/i_vse_taki_ya_vas_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 9, 10, 11, 13, 15" data-sort="Валентин и Валентина"> <img src="http://tatd.ru/images/repertoire/valentin_and_valentina_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 9, 11, 13, 16" data-sort="Варвары"> <img src="http://tatd.ru/images/repertoire/varvars_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 9, 11, 13" data-sort="Вишневый сад"> <img src="http://www.tatd.ru/images/afisha/feb2015/vishneviy_sad_800x800.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 9, 13, 16" data-sort="Господин, который платит"> <img src="http://tatd.ru/images/repertoire/gospodin_kot_platit_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 6, 7, 12, 14" data-sort="Донна Люция или Здравствуйте, я ваша тетя"> <img src="http://tatd.ru/images/repertoire/donna_lucia_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 10, 11, 12, 14" data-sort="Женитьба Белугина"> <img src="http://tatd.ru/images/repertoire/belugin_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 7, 13, 16" data-sort="История любви"> <img src="http://tatd.ru/images/repertoire/istoria_lubvi_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 6, 12, 14" data-sort="Клинический случай"> <img src="http://tatd.ru/images/repertoire/klin_sluch_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="2, 7, 13, 16" data-sort="Любовь Маргариты Готье"> <img src="http://tatd.ru/images/repertoire/gotie_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 9, 11, 13" data-sort="Маскарад"> <img src="http://tatd.ru/images/repertoire/maskarad_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="2" data-sort="Мещанская свадьба"> <img src="http://www.tatd.ru/images/afisha/feb2015/meshanskaya_svadba_800x800.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 6, 11, 12, 14" data-sort="На всякого мудреца довольно простоты"> <img src="http://tatd.ru/images/repertoire/mudrec/mudrec_480x480.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 6, 11, 14" data-sort="Ревизор"> <img src="http://tatd.ru/images/repertoire/revizor_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 9, 11, 13" data-sort="Сердце не камень"> <img src="http://tatd.ru/images/repertoire/serdce_ne_kamen_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="2, 6, 12, 14" data-sort="Слуга двух господ"> <img src="http://tatd.ru/images/repertoire/sluga_dvuh_gospod_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="2, 10, 12, 14, 15" data-sort="Собака на сене"> <img src="http://tatd.ru/images/repertoire/sobaka_na_sene_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 10, 13, 14, 15" data-sort="Третье слово (Дикарь)"> <img src="http://tatd.ru/images/repertoire/dikar_800x800_b.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 6, 12, 14" data-sort="Ужин дураков"> <img src="http://tatd.ru/images/repertoire/ujin_durakov_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 6, 12, 14" data-sort="№13 (Беспорядок)"> <img src="http://tatd.ru/images/repertoire/13_500x500.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 7, 11, 14" data-sort="Благотворительница"> <img src="/images/repertoire/blagotvoritelnica/blagotvoritelnica_480x480.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 7, 11, 14, 14" data-sort="Медведь"> <img src="http://tatd.ru/images/repertoire/medved_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="4, 8, 13" data-sort="Михаил Тверской"> <img src="http://tatd.ru/images/repertoire/mihail_tverskoy_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 7, 13" data-sort="На закате солнца"> <img src="http://tatd.ru/images/repertoire/na_zakate_solnca_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 6, 9, 13, 14" data-sort="Норвежский круиз"> <img src="http://tatd.ru/images/repertoire/norvejskiy_kruiz_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 9, 10, 13, 13, 16" data-sort="С тобой"> <img src="http://tatd.ru/images/repertoire/s_toboy_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 8, 9, 11, 14" data-sort="Смешно и грустно"> <img src="http://tatd.ru/images/repertoire/smeshno_i_grustno_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="2, 7, 16" data-sort="Стеклянный зверинец"> <img src="http://tatd.ru/images/repertoire/steklyanniy_zverinec_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="2, 9, 13" data-sort="Трудные родители"> <img src="http://tatd.ru/images/repertoire/trudnie_roditeli_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3" data-sort="Поздняя любовь"> <img src="http://tatd.ru/images/repertoire/pozdnyaa_lubov_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 7, 15, 16" data-sort="Безымянная звезда"> <img src="http://tatd.ru/images/repertoire/a_bez_zvezda_477x477_n.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="1, 7, 11, 16" data-sort="Темные аллеи"> <img src="http://tatd.ru/images/repertoire/temnie_allei_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="5, 8, 17" data-sort="Красная шапочка"> <img src="http://tatd.ru/images/repertoire/red_head_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="5, 8, 17" data-sort="Бременские музыканты"> <img src="http://tatd.ru/images/repertoire/bremenskie_muzikanti_477x477.png"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="4, 8, 13" data-sort="Не покидай меня"> <img src="http://tatd.ru/images/repertoire/viktor.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 6, 10, 14, 15" data-sort="Квадратура круга"> <img src="http://tatd.ru/images/repertoire/kvadratura_kruga/kvadratura_kruga_480x480.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3" data-sort="Вечер русской поэзии"> <img src="/images/vecher_russ_poezii_800x800.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="3, 6, 12, 13" data-sort="Провинциальные анекдоты"> <img src="http://tatd.ru/images/repertoire/anekdot_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="5, 8, 17" data-sort="Золотой ключик"> <img src="http://tatd.ru/images/repertoire/zolotoy_klyuchik_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="11" data-sort="О вещая душа моя (Вечер поэзии Федора Тютчева)"> <img src="http://tatd.ru/images/repertoire/tutchev_477x477.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="11" data-sort="Дорогая Памела (Как пришить старушку)"> <img src="http://tatd.ru/images/repertoire/pamela/pamela_480x480.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="11" data-sort="Визит"> <img src="http://tatd.ru/images/repertoire/vizit/vizit_477x477n.jpg"> </div>
    <div class="filtr-item uk-width-1-2 uk-width-large-1-6 uk-width-medium-1-4" data-category="11" data-sort="Не всё коту масленица"> <img src="http://tatd.ru/images/repertoire/ne_vse_kotu_maslenica/ne_vse_kotu_m_480x480.jpg"> </div>
  </div>
  <a href="/afisha" class="uk-text-small">Перейти в Афишу <i class="fa fa-arrow-right"></i></a> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
  <script src="http://yiotis.net/filterizr/res/js/jquery.filterizr.js"></script> 
  <script src="http://tatd.ru/media/filterizr/controls.js"></script> 

  <!-- Kick off Filterizr --> 
  <script type="text/javascript">
        jQuery(function() {
            //Initialize filterizr with default options
            jQuery('.filtr-container').filterizr();
        });
    </script> 
</div>
</body>
</html>

@giotiskl
Copy link
Owner

Hello @rajoriya654. So everything breaks down when you add mootools to the project?

@kazasoft
Copy link

@giotiskl look in console
when loop "for (var n in ret)" ret have "some" items... this items is "proto". i think this not mootools. this is uikit.

maybe we must look at clear "data-category="1, 9, 11, 13, 16"" and destroy all bad items?

@giotiskl
Copy link
Owner

giotiskl commented May 17, 2016 •
edited

I have managed to solve your problem, it was because by the for...in loops, they need to be replaced by simple for loops, because mootools apparently adds some function as a property to Arrays and Filterizr tries to parse it as a number.

I will include a fix for this in the next patch, for the time being I'm posting pictures to show what must be done to fix this. Make the following changes to the jquery.filterizr.js file:
mootools_fix

Again, I will include this in a hot fix in the next days.

@giotiskl giotiskl mentioned this issue May 17, 2016
Closed
@giotiskl
Copy link
Owner

@kazasoft , @rajoriya654 this issue is now resolved in v1.2.3 and I am thus closing it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kazasoft @rajoriya654 @giotiskl