Methods not calling in isotope.js

StackOverflow https://stackoverflow.com/questions/22315703

  •  12-06-2023
  •  | 
  •  

Pergunta

I am using jQuery 1.11 min and isotope.js I downloaded January 2014. It seems to get a little stuck calling some methods. Error messages are as follows in latest Safari version (v6.1.2): On loading and initializing the page:

[Error] cannot call methods on isotope prior to initialization; attempted to call 'appended' (anonymous function) (isotope-docs.min.js, line 1) (anonymous function) (isotope-docs.min.js, line 1) complete (js_asana.js, line 143) (anonymous function) (js_asana.js, line 216)

And using reLayout I get this:

[Error] no such method 'reLayout' for isotope instance (anonymous function) (isotope-docs.min.js, line 1) (anonymous function) (isotope-docs.min.js, line 1) switchMismatch (js_asana.js, line 179) (anonymous function) (js_asana.js, line 206) each (jquery-1.11.0.min.js, line 2) (anonymous function) (js_asana.js, line 191)

Maybe I'm not declaring things properly. Initializing jQuery and isotope in the head of the html page:

<head>
<meta charset="utf-8">
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/isotope-docs.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/js_asana.js" charset="utf-8"></script>
</head>

The "js_asana.js" page is a separate javascript page with the code:

$( document ).ready(function() {
 var $container1 = $('#container');
 var $container2 = $('#container2');
function complete(t, dd, i, c) {
///this function is passed along from a array built from a JSON GET call
///that part works ok and passes along the variables
var $newEls = $('<div class="element ' + e_type + more + ' isotope-item" data-category="lanthanoid" style="font-size:1em;" id="' + i + '"><p class="number">' + due_date_text + '</p><h3 class="symbol">' + c + '</h3><h2 class="name">' + t + '</h2></div>');
        if (c == true) {
             //code
             $container2.append( $newEls ).isotope( 'appended', $newEls );
        }else{
        $container1.append( $newEls  ).isotope( 'appended', $newEls );
        }
return false;
      }

That's not the complete code, but if anyone needs a demo, I can provide in an edit.

Here is the function using the reLayout. Maybe I shouldn't call these methods inside of a function? Note that all functions are within the document.ready function

function switchMismatch(s, n, d, i, c){
             ///this function is in case a task is completed
             /// ...or moved from 'complete' to 'incomplete for whatever reason.
             var $which_container
             s == 1 ? $which_container = $container1 : $which_container = $container2 ;
             var $removable = i;
             complete(n, d, i, c);
             jQuery('#' + i).remove();
             $container1.isotope( 'reLayout');
             $container2.isotope( 'reLayout');
             return false;
}
Foi útil?

Solução

Before you use method like .isotope('appended',...), you'll need to first initialize Isotope, with a generic .isotope(). Try adding this inside doc ready:

$( document ).ready(function() {
  // init isotope
  var $container1 = $('#container').isotope();
  var $container2 = $('#container2').isotope();
  ...
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top