I'm having the "Could not find scroll element" error when using ClusterizeJS

[bfang711]

I met the same issue as well. Do we know the answer now?

[helloitsm3]

Yes. It's due to the placement of the Javascript code. It needs to be in a certain order

[bfang711]

Can you please let me know how you do that in some more details? Here is what I do. I try to put that clusterize into a REACT element.

import Clusterize from 'clusterize.js';
export class TheTable extends React.Component {

   componentDidMount() {
        console.log(this.refs.contentArea);
        var data = ["<div>1</div>", "<div>2</div>"];
        var clusterize = new Clusterize({
            rows: data,
            scrollId: this.refs.scrollArea,
            contentId: this.refs.contentArea,
        });
    }
   render() {
        return (
               <div id="scrollArea" ref="scrollArea" className="clusterize-scroll">
                <div id="contentArea" ref="contentArea" className="clusterize-content">
                  <div className="clusterize-no-data">Loading data…</div>
                </div>
              </div>
);}
}

One more quick question if you don't mind. I ultimately would like to use some array of React DOM to fill in data. I know Clusterize only support string in data part. I just wonder if anyone ever use that way, instead of just simple number/strings. thank you.

[NeXTs]

scrollId parameter should be string of "id" since you provide DOM element, use

  scrollElem: this.refs.scrollArea,
  contentElem: this.refs.contentArea

[BonnotJordan]

Yes. It's due to the placement of the Javascript code. It needs to be in a certain order

But what order ?

[NeXTs]

Script that initializes clusterize should be placed AFTER clusterize elements

<clusterize />
<script> script that initializes clusterize </script>

or you may place initialization code before cluster elements but listen for document ready event, here's example with jQuery

<script>
$(function() {
  // init clusterize
})
</script>
<cluserize/>