CODEWITHSUNDEEP
javascriptphphtmlajax
Webtron
Webtron

Reputation: 473

Cannot set property 'innerHTML' of null in AJAX Call

I have looked through about 30 different articles about this error on this site and have not found the answer I need.

I am getting the dreaded Cannot set property 'innerHTML' of null message when I click a cell in my div table i created. I have checked the order of the page load to make sure that the JS is below the html tags. I think is may have to do with using a variable name in the getElementById syntax.

Here is my code I am using (sorry for the noobish style of coding):

<HTML>
</HEAD>
<BODY>
<table border=1>
<tr><td colspan="11"><center><h2>Away Team</h2></center></td></tr>
        <?php 
        $ROWMAX=3;
        $COLMAX=3;
        //Rows = j
        for($j=-1;$j<=$ROWMAX-1;$j++){
            echo "<tr>";
            //Columns = i
            for($i=-1;$i<=$COLMAX-1;$i++) { 
                if($i == -1 && $j == -1){
                    echo "<th class='header-cols'></th>"; }
                elseif($i == -1 && $j >= 0){
                    echo "<th class='header-rows'><h1>$j</h1></th>";
                }
                elseif($j<0){
                    echo "<th class='header-cols'><h1>$i</h1></th>";
                }
                else {
                    $sql = "SELECT name FROM picks WHERE col=$i AND row=$j LIMIT 1";
                    $data = $conn->query($sql);
                    while($rows=$data->fetch_assoc()){
                        $currName = $rows['name'];
                        $cellStatus = $rows['status'];
                    }
                    echo "<td class='grid-cells'>
                            <div id='cell-$j-$i' class='$cellStatus' onclick='setCoords($j,$i);'>
                                <div class='grid-num'>" . (($i+1)+($j*$COLMAX)) . "</div>
                                <div class='grid-name-$j-$i'>$currName</div>
                            </div>
                        </td>";
                    $currName="";
                } 
            }
            echo "</tr>";
        } ?>
</table>
<form method="post" onSubmit="setSquare()">
        <div>
          <h3>Submit Your Picks:</h3>
          <label for="name" class="ui-hidden-accessible">Name:</label>
          <input type="text" name="name" id="nameid" placeholder="Name"><br />
          <label for="email" class="ui-hidden-accessible">Email:</label>
          <input type="text" name="email" id="emailid" placeholder="Email"><br />
          <input type="submit" data-inline="true" id='submitbtn' class='btndisabled' value="Make Picks" disabled>
          <div id='row-div'></div>
          <div id='col-div'></div>
        </div>
</form><SCRIPT>

function setCoords(row_coords, col_coords){
    var txt_name = document.getElementById("nameid").value;
    var txt_email = document.getElementById("emailid").value;
    if (txt_name != "" && txt_email != ""){ 
        document.getElementById("cell-"+row_coords+"-"+col_coords).className = "picked";
        setSquare(row_coords, col_coords);
        document.getElementById("submitbtn").className = "btnenabled";
    }
    else
    { alert("Please fill in your name and email before making a pick"); }
}

function setSquare(row,col)
{
    //get id vales from form
    var name_id = document.getElementById("nameid").value;
    var email_id = document.getElementById("emailid").value;
    var row_id = row;
    var col_id = col;
    var gridname = "grid-name-"+row+"-"+col;
    //run the ajax code here
    if(name_id != ""){
        if(window.XMLHttpRequest){
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if(this.readyState == 4 && this.status == 200) {
                document.getElementById(gridname).innerHTML = this.responseText;
                //alert("grid-name-"+row_id+"-"+col_id);
                //alert(this.responseText);
            }
        };
        xmlhttp.open("POST","save-square.php?name="+name_id+"&email="+email_id+"&row="+row_id+"&col="+col_id,true);
        xmlhttp.send();
    }
}
</SCRIPT>
</BODY>
</HTML>

Upvotes: 1

Views: 1307

Answers (2)

Charles Guo
Charles Guo

Reputation: 170

Change the Html code below

<div class='grid-name-$j-$i'>$currName</div>

to

<div id='grid-name-$j-$i'>$currName</div>

Because you are reference them by ID in your code

document.getElementById(gridname).innerHTML = this.responseText;

Upvotes: 2

Marc B
Marc B

Reputation: 360702

Spot the differences:

<div id='cell-$j-$i' class='$cellStatus' onclick='setCoords($j,$i);'>
     ^^
     <div class='grid-name-$j-$i'>$currName</div>';
          ^^^^^

var gridname = "grid-name-"+row+"-"+col;
document.getElementById(gridname).innerHTML = this.responseText;
                     ^^

class is NOT an id, and will NOT be found by a getElementById() - note the ID part of that function name.

Upvotes: 2

Related Questions