CODEWITHSUNDEEP
javascriptjqueryajaxhtml
Oblivion
Oblivion

Reputation: 635

Javascript setting innerHTML null issue

When i run an ajax query, i get back an array of results. I want to create a new element and set its inner html to the results. The results are working fine, im getting them no problem. They contain the correct data. I can create the element with an id based on the result fine as well i just get:

Uncaught TypeError: Cannot set property 'innerHTML' of null

on this line:

document.getElementById(result[i]).innerHTML = result[i];

Do you know what is the issue?

Javascript:

function SearchReviews() {
    $(document).ready(function() {

        searchData = "searchData=" + $("#searchReviews").val() + "&action=" + "searchReviews";
        urlPath = "../index.php";

        if ($.trim($("#searchReviews").val()).length > 0) { // client is typing
            // Send the search data to database
            $.ajax({
                type: "POST",
                url: urlPath,
                data: searchData,
                dataType: 'JSON',
                success: function (result) {
                    console.log(result[0]);
                    console.log(result.length);

                    $("#searchText").empty(); // we want to refresh the results

                    for (i = 0; i < result.length; i++) {
                        var html = '<p id=' + result[i] + '></p><hr>';
                        $("#searchText").append(html);
                        document.getElementById(result[i]).innerHTML = result[i];
                    }
                },
                error: function(xhr, status, error) {
                    alert("Error" + xhr.responseText);
                }
            })
        } else {
            $("#searchText").empty();
        }
    })
}

HTML

            <div class="col-sm-5">
                <p class="text-center">Reviews</p> <hr>
                <div class="input-group">
                <input type="text" class="form-control" id="searchReviews" placeholder="Search reviews" onkeydown="SearchReviews();">
                </div>
                <p class="text-center" id="searchText"></p>
            </div>

Upvotes: 0

Views: 172

Answers (2)

Bhavin Solanki
Bhavin Solanki

Reputation: 4818

You can not use your result as selector attribute ID. ID should be unique and no space for one ID.

You can try this

for (i = 0; i < result.length; i++) {
    var html = '<p id="result' + i + '">'+ result[i] +'</p><hr>';
    $("#searchText").append(html);
}

Hope this works!

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You don't need to get the element from DOM, As you can create it using jQuery and set its text.

var html = $('<p>', { id: result[i] , text : result[i] });
$("#searchText").append(html).append('<hr>');

You can just put text in <p> using string concatenation

var html = '<p id="' + result[i] + '">' + result[i] + '</p><hr>';
$("#searchText").append(html);

Note: ID attribute can't have spaces in them and should always wrap attributes in quotes.

I guess result[i] contains spaces thus you got NULL on statement document.getElementById(result[i])

Upvotes: 1

Related Questions