Search code examples
javascripthtmllistjs

List.JS - Cannot read property 'childNodes' of undefined

I cannot seem to figure this out. I've already tried $(document).ready and still doesn't work for me. I've also tried making a for loop specifically for these two value names to save the results to a var and pass it in that way. I've also tried putting the input with the class and id with search inside of the parent div and outside. Essentially like it in the nav bar. Using list.js & knockout.js btw. Im getting my venues using an ajax request using foursquares api.

JS:

        var options = {
        valueNames: ['name', 'category']
    };

    var userList = new List('search', options);

HTML: 

<body>
<nav>
    <h1 class="formattedH1">Downtown SA,TX</h1>
    <span>
      <input type="search" placeholder="Search" class="search" id="search">
      <input type="button" class="sort searchButton" value="List"></input>
    </span>
</nav>
<div id="map" class="map"></div>
<div class="list">
    <input type="search" placeholder="Search" class="search" id="search">
    <h1>My Top 5</h1>
    <!-- Square card -->
    <div class="card" id="favViewModel" data-bind="foreach: favList">
        <div class="expand">
            <h2 class="venueName" data-bind="text:name"></h2>
        </div>
        <div class="cardSupport" data-bind="attr: {src: image()}">
        </div>
        <div class="cardSupport" data-bind="text:address">
        </div>
        <a data-bind="attr: {href: website()}">Website</a>
    </div>
    <h1>Foursquare Recommended</h1>
    <div class="card" id="recViewModel" data-bind="foreach: recommendedSpotList  ">
        <div class="expand">
            <h2 class="venueName" data-bind="text:name"></h2>
        </div>
        <div class="cardSupport" data-bind="text:location">
        </div>
        <div class="cardSupport" data-bind="text:category">
        </div>
        <div class="cardSupport" data-bind="text:rating">
        </div>
    </div>
    <script src="js/tester123.js"></script>

Solution

  • I found my answer browsing other similar projects, so simple now. Thought it might help someone in case they ran across this. It was that since I was making an ajax call I had to to place the call to ko.applybindings inside the ajax request. The binding was out of scope, if you think about it make's sense especially if your request fails. Why even attempt to still bind the values of the request. HTML as above, and for JS ajax request please see below:

    JS: 

    $.ajax({
    url: 'https://api.foursquare.com/v2/venues/explore',
    dataType: 'json',
    data: 'data',
    async: true,
    success: function(data) {

        venues = data['response']['groups'][0]['items'];

        //This is where I had to place the binding to get it to render properly.
        ko.applyBindings(new recommendedViewModel(), document.getElementById('recViewModel'));

    },
    error: function() {
        alert("An error occurred.");
    }
});