Develop Reference

How do I solve this error: Cannot set properties of null (setting 'innerHTML')

I recently live hosted my website and got this error. Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') at response (home:2593) at XMLHttpRequest. (home:2560)
This error did not occur on the local server but it occurred on a public server. I saw a few threads regarding this error and I heard that you should use addEventListener instead of onclick in your code. However, I'm not sure how to implement it into my code so it would be great if you could help me.
This is the line where the error occurred:
info_element.innerHTML = obj.info;
This is the JS:
<script type="text/javascript">
function ajax_send(data, element) {
var ajax = new XMLHttpRequest();
ajax.addEventListener('readystatechange', function() {
if (ajax.readyState == 4 && ajax.status == 200) {
response(ajax.responseText, element);
}
});
data = JSON.stringify(data);
ajax.open("post", "<?= ROOT ?>ajax.php", true);
ajax.send(data);
}
function response(result, element) {
if (result != "") {
var obj = JSON.parse(result);
if (typeof obj.action != 'undefined') {
if (obj.action == 'like_post') {
var likes = "";
if (typeof obj.likes != 'undefined') {
likes =
(parseInt(obj.likes) > 0) ?
'<svg fill="#1877f2" width="22" height="22" viewBox="0 0 24 24"><path d="M21.216 8h-2.216v-1.75l1-3.095v-3.155h-5.246c-2.158 6.369-4.252 9.992-6.754 10v-1h-8v13h8v-1h2l2.507 2h8.461l3.032-2.926v-10.261l-2.784-1.813zm.784 11.225l-1.839 1.775h-6.954l-2.507-2h-2.7v-7c3.781 0 6.727-5.674 8.189-10h1.811v.791l-1 3.095v4.114h3.623l1.377.897v8.328z"/></svg>' :
'<svg fill="#626a70cf" width="22" height="22" viewBox="0 0 24 24"><path d="M21.216 8h-2.216v-1.75l1-3.095v-3.155h-5.246c-2.158 6.369-4.252 9.992-6.754 10v-1h-8v13h8v-1h2l2.507 2h8.461l3.032-2.926v-10.261l-2.784-1.813zm.784 11.225l-1.839 1.775h-6.954l-2.507-2h-2.7v-7c3.781 0 6.727-5.674 8.189-10h1.811v.791l-1 3.095v4.114h3.623l1.377.897v8.328z"/></svg>';
element.innerHTML = likes;
}
if (typeof obj.info != 'undefined') {
var info_element = document.getElementById(obj.id);
info_element.innerHTML = obj.info;
}
}
}
}
}
function like_post(e) {
e.preventDefault();
var link = e.currentTarget.href;
var data = {};
data.link = link;
data.action = "like_post";
ajax_send(data, e.currentTarget);
}
</script>
This is where I implemented like_post in my HTML:
<a onclick="like_post(event)" href="<?= ROOT ?>like/post/<?php echo $ROW['postid'] ?>" style="text-decoration:none;float:left;position:relative;top:2px;">
<svg id="icon_like" fill="<?= $Like_color ?>" width="22" height="22" viewBox="0 0 24 24">
<path d="M21.216 8h-2.216v-1.75l1-3.095v-3.155h-5.246c-2.158 6.369-4.252 9.992-6.754 10v-1h-8v13h8v-1h2l2.507 2h8.461l3.032-2.926v-10.261l-2.784-1.813zm.784 11.225l-1.839 1.775h-6.954l-2.507-2h-2.7v-7c3.781 0 6.727-5.674 8.189-10h1.811v.791l-1 3.095v4.114h3.623l1.377.897v8.328z" />
</svg>
</a>
I also did some debugging using console.log. This is what I received when I console.log(obj.id):
info_
It's supposed to return some values after info_ eg.143884
This is the code in ajax.php:
<?php
include("classes/autoload.php");
$data = file_get_contents("php://input");
if($data != ""){
$data = json_decode($data);
}
if(isset($data->action) && $data->action == "like_post"){
include("ajax/like.ajax.php");
}
This is the code in like.ajax.php:
<?php
if(!empty($data->link)){
$URL = split_url_from_string($data->link);
}
$_GET['type'] = isset($URL[5]) ? $URL[5] : '';
$_GET['id'] = isset($URL[6]) ? $URL[6] : '';
$_id = $_GET['id'] ? htmlspecialchars( $_GET['id'], ENT_QUOTES) : '';
$_type = $_GET['type'] ? htmlspecialchars( $_GET['type'], ENT_QUOTES) : '';
$_SESSION['mybook_userid'] = isset($_SESSION['mybook_userid']) ? $_SESSION['mybook_userid'] : 0;
$login = new Login;
$user_data = $login->check_login($_SESSION['mybook_userid'],false);
//check if not logged in
if($_SESSION['mybook_userid'] == 0){
$obj = (object)[];
$obj->action = "like_post";
echo json_encode($obj);
die;
}
/*
$query_string = explode("?", $data->link);
$query_string = end($query_string);
$str = explode("&", $query_string);
foreach ($str as $value) {
# code...
$value = explode("=", $value);
$_GET[$value[0]] = $value[1];
}
*/
$_id = addslashes($_id);
$_GET['type'] = addslashes($_GET['type']);
if(isset($_GET['type']) && isset($_id)){
$post = new Post();
if(is_numeric($_id)){
$allowed = array('post', 'user', 'comment');
if(in_array($_GET['type'], $allowed)){
$user_class = new User();
$post->like_post($_id,$_GET['type'],$_SESSION['mybook_userid']);
if($_GET['type'] == "user"){
$user_class->follow_user($_id,$_GET['type'],$_SESSION['mybook_userid']);
}
}
}
//read likes
$likes = $post->get_likes($_id,$_GET['type']);
//create info
/////////////////
$likes = array();
$info = "";
$i_liked = false;
if(isset($_SESSION['mybook_userid'])){
$DB = new Database();
$sql = "select likes from likes where type='post' && contentid = '$_id' limit 1";
$result = $DB->read($sql);
if(is_array($result)){
$likes = json_decode($result[0]['likes'],true);
$user_ids = array_column($likes, "userid");
if(in_array($_SESSION['mybook_userid'], $user_ids)){
$i_liked = true;
}
}
}
$like_count = count($likes);
if($like_count > 0){
$info .= "<br/>";
if($like_count == 1){
if($i_liked){
$info .= "<div style='text-align:left;'>You liked this post </div>";
}else{
$info .= "<div style='text-align:left;'> 1 person liked this post </div>";
}
}else{
if($i_liked){
$text = "others";
if($like_count - 1 == 1){
$text = "other";
}
$info .= "<div style='text-align:left;'> You and " . ($like_count - 1) . " $text liked this post </div>";
}else{
$info .= "<div style='text-align:left;'>" . $like_count . " others liked this post </div>";
}
}
}
/////////////////////////
$obj = (object)[];
$obj->likes = count($likes);
$obj->action = "like_post";
$obj->info = $info;
//$obj->id = "info_$_GET[id]";
$obj->id = 'info_'.$_id;
echo json_encode($obj);
}

Probably it's related to a syntax error in your $_GET['id'] variable.
That's why console.log(obj) returned an empty id.
<?php echo $_GET[id]; // id is not enclosed by quotes ?>
Won't work on most servers running php7.x.
Make sure to always enclose your variable name in quotes (most of the time you did this, anyway).
<?php echo $_GET['id']; ?>
To simplify escaping, save your $_GET['id'] to a variable and sanitize it before you pass it to a sql query.
Try this:
Setting $_GET['id']
Replace null with '' – this way you save a lot of additional isset() checking e.g.
$_GET['id'] = isset($URL[6]) ? $URL[6] : '';
$_GET['type'] = isset($URL[5]) ? $URL[5] : '';
Saving to a sanitized variable:
You can now operate with this sanitized $_id variable instead of $_GET['id'].
$_id = $_GET['id'] ? htmlspecialchars( $_GET['id'], ENT_QUOTES) : '';
$_type = $_GET['type'] ? htmlspecialchars( $_GET['type'], ENT_QUOTES) : '';
Don't sanitize $_GET/$_POST (and other superglobals) variables by redefining them.
Better leave them as the are but sanitize variables before any further usage (like echoeing, returning, passing to other functions etc.)
See also this thread: Sanitizing user's data in GET by PHP
DB query (the previous code also contained the enclosing issue):
$sql = "select likes from likes where type='post' && contentid = '$_id' limit 1";
Create your object data
$obj->id = 'info_'.$_id;
Code simplification and tweaks
As our ids and type variables are always defined (but maybe empty), you can focus on checking the values.
if( $_id && $_type ){ }
instead of
if(isset($_GET['type']) && isset($_GET['id'])){
The 'allowed array' might also cause some php warnings (depending on your php version etc.) – since you add array items to an array that hasn't been defined before. Better write it like this:
$allowed = array('post', 'user', 'comment');
JS part
if(info_element){
info_element.innerHTML = obj.info
}
You should keep this condition as it just prevents the 'Cannot set properties of null' console.error.
The main problem should be solved by the aforementioned php fixes.

Ajax insert data not returning response - PHP & MySQL

I am working on a scanner reader, so I used ajax when the code is read by the scanner, it should insert data to the database. The problem is the data is not inserting.
Inside the script / Ajax - query is the variable I used to get the data (name)
var query = $('#scanned-QR').val();
fetch_customer_data(query);
$(document).on('keyup', '#scanned-QR', function(){
var query = $(this).val();
fetch_customer_data(query);
});
function fetch_customer_data(query = '')
{
$.ajax({
url:"validScan.php",
method: 'GET',
data:{query:query},
dataType: 'json',
success:function(data) {
console.log(data);
if (data.status == '1') {
decoder.stop();
alert('Sucess!');
}
else if(data.status=='0'){
decoder.stop();
alert('Fail!');
}
},
error:function(err){
console.log(err);
}
});
}
My Input/Textarea
<textarea id="scanned-QR" name="scanQR" readonly></textarea>
MySQL
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$link = mysqli_connect("localhost","root","");
mysqli_select_db($link, "schedule");
$query = $_GET['query'];
$res = mysqli_query($link,"INSERT INTO attendance (name) VALUES ('$query')");
if (mysqli_num_rows($res) > 0) {
$respose = array('status'=>'1');//1 for success
echo json_encode($respose );
} else {
$respose = array('status'=>'0');//0 for fail
echo json_encode($respose );
}
mysqli_close($link);
?>

For insert query, result will return as boolean, So mysqli_num_rows($res) won't accept boolean argument. mysqli_num_rows() expects parameter 1 to be mysqli_result
So you can simply check by below, whether it is inserted or not:
if ($res) {
$respose = array('status'=>'1');//1 for success
echo json_encode($respose);
exit;
} else {
$respose = array('status'=>'0');//0 for fail
echo json_encode($respose);
exit;
}
mysqli_close($link);

You should use exit try following code :
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
$link = mysqli_connect("localhost","root","");
mysqli_select_db($link, "schedule");
$query = $_GET['query'];
$res = mysqli_query($link,"INSERT INTO attendance (name) VALUES ('$query')");
if (mysqli_num_rows($res) > 0) {
$respose = array('status'=>'1');//1 for success
echo json_encode($respose );
exit;
} else {
$respose = array('status'=>'0');//0 for fail
echo json_encode($respose );
exit;
}
mysqli_close($link);
exit;

mysqli_num_rows() is for getting the number of rows returned from a SELECT query. You need to check the number of affected rows instead.
You should also be using a prepared statement, and I also recommend that you set up MySQLi to throw errors. I also prefer the object-oriented approach.
<?php
// Configure MySQLi to throw exceptions on failure
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
// Init connection
$link = new mysqli("localhost", "root", "", "schedule");
$response = [];
// Prepare the statement and execute it
$stmt = $link->prepare("INSERT INTO attendance (name) VALUES (?)");
$stmt->bind_param("s", $_GET['query']);
$stmt->execute();
// Check the number of inserted rows
if ($stmt->affected_rows) {
$response['status'] = 1;
} else {
$response['status'] = 0;
}
// Close the statement and connection
$stmt->close();
$link->close();
echo json_encode($response);

echo is adding a new line to what i output in PHP

I am sending echoing some data to be received in Javascript however when i debug it, it seems that a new line has been added.
PHP
<?php
header("Content-Type: application/json; charset=UTF-8");
require './connection.php';
$obj = json_decode($_POST["x"], false);
$usernamequery = "SELECT * FROM User WHERE username='$obj->newUser'";
$result = mysqli_query($db, $usernamequery);
$row = mysqli_fetch_assoc($result);
if($row["Username"] == null){
$updatequery = "UPDATE User SET User='$obj->newUser' WHERE username ='$obj->username'";
$result = mysqli_query($db, $updatequery);
echo "valid";
} else{
echo "invalid";
}
?>
JS
///// USERNAME
$(document).ready(function () {
$("#userSubmitForm").on("click", function(e) {
$username = document.getElementById("user").value;
$newUser = document.getElementById("newUser").value;
user = $newUser;
obj = { "username":$username, "newUser":$newUser};
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
validity = this.responseText;
if (validity === "valid"){
$('#usernameModal .modal-header .modal-title').html("Result");
$('#usernameModal .modal-body').html("Your Username Has Been Changed to '$newUser'");
$("#passSubmitForm").remove();
$("#userCloseForm").remove();
window.setTimeout(redirect,3000);
} else{
$('#error').html("This Username Already Exists"); ;
}
}
};
What is happening is responseText will be receive "valid"/"Invalid" as "valid[newline]"/"invalid[newline]"

As stated at http://php.net/manual/en/function.echo.php that can't be a "problem" of the echo. There must be some newline-character after your -tags

A simple solution would be to just trim your response text like this: var validity = this.responseText.trim(); in order to strip it from unwanted space/tab/newline characters.

ALERT ,when searched word not found in mysql database

my coding is all about
1)fetch the data from mysql thro php
2)get data from php to d3 based on input by using PHP URL
I want to set alert when the text in the input field is not found in mysql database..
now when I try with the word other than mysql data, it shows
this console
how can i alert when wrong word(other than mysql database value) is submitted
HTML FORM
<form name="editorForm">
<input type="text"name="editor" id="editor"
onchange="document.getElementById('editorForm').submit();">
<input type="submit"value="butn">
</form>
JQUERY TO FETCH THE DATA FROM PHP BASED ON URL
$(function () {
$('form').submit(function (e) {
e.preventDefault();
var t=$('form').serialize();
var u='http://localhost:8888/saff/indexi.php?'+t;
if(u==null){
alert("not found");
}
else{
funn();
}
D3 CODES
function funn(){
d3.json(u, function(treeData) {
//D3 CODES
});
}
my php code
<?php
$con=mysqli_connect("localhost","root","admin","data");
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$name=$_GET['editor'];
$sql="SELECT * FROM phptab where value LIKE '%".$name."%'";
$r = mysqli_query($con,$sql);
$data = array();
while($row = mysqli_fetch_assoc($r)) {
$data[] = $row;
}
function buildtree($src_arr, $parent_id = 0, $tree = array())
{
foreach($src_arr as $idx => $row)
{
if($row['parent'] == $parent_id)
{
foreach($row as $k => $v)
$tree[$row['id']][$k] = $v;
unset($src_arr[$idx]);
$tree[$row['id']]['children'] = buildtree($src_arr, $row['id']);
}
}
ksort($tree);
return $tree;
}
function insertIntoNestedArray(&$array, $searchItem){
if($searchItem['parent'] == 0){
array_push($array, $searchItem);
return;
}
if(empty($array)){ return; }
array_walk($array, function(&$item, $key, $searchItem){
if($item['id'] == $searchItem['parent']){
array_push($item['children'], $searchItem);
return;
}
insertIntoNestedArray($item['children'], $searchItem);
}, $searchItem);
}
$nestedArray = array();
foreach($data as $itemData){
//$nestedArrayItem['value'] = $itemData['value'];
$nestedArrayItem['id'] = $itemData['id'];
$nestedArrayItem['name'] = $itemData['name'];
$nestedArrayItem['parent'] = $itemData['parent'];
$nestedArrayItem['tooltip'] = $itemData['tooltip'];
$nestedArrayItem['color'] = $itemData['color'];
$nestedArrayItem['level'] = $itemData['level'];
$nestedArrayItem['children'] = array();
//$data[]=$dat;
insertIntoNestedArray($nestedArray, $nestedArrayItem);
}
header('Content-Type: application/json');
$json= json_encode($nestedArray,JSON_UNESCAPED_UNICODE);
echo $json = substr($json, 1, -1);
?>
works as expected when the word used is exist in the database
and the page looks like this
getting correct json format in the mozilla console.but design is not shown in the page...but in chrome ,everything works fine..

You need to test if the page is empty in the json function of the d3
function funn(){
d3.json(u, function(treeData) {
if(!treeData.length){
alert("not found");
}else {
//D3 CODES
}
});
}
Make sure that you return a empty object from the page when not found

Ajax database insert isnt working

I am trying to insert values from an input field into a database with ajax as part of a conversation system.I am using an input form as follows.
<input data-statusid="' .$statuscommentid. '" id="reply_'.$statusreplyid.'" class="inputReply" placeholder="Write a comment..."/>
with the following jquery I carry out a function when the enter key is pressed by the user.
$(document).ready(function(){
$('.inputReply').keyup(function (e) {
if (e.keyCode === 13) {
replyToStatus($(this).attr('data-statusid'), '1',$(this).attr("id"));
}
});
});
within this function is where I am having the problem ,I have no problems calling the function with jquery but I have done something wrong with the ajax and I don't know what?
$.ajax({ type: "POST", url: $(location).attr('href');, data: dataString, cache: false, success: function(){ $('#'+ta).val(""); } });
Additionally this is the php I am using to insert into the database
<?php //status reply input/insert
//action=status_reply&osid="+osid+"&user="+user+"&data="+data
if (isset($_POST['action']) && $_POST['action'] == "status_reply"){
// Make sure data is not empty
if(strlen(trim($_POST['data'])) < 1){
mysqli_close($db_conx);
echo "data_empty";
exit();
}
// Clean the posted variables
$osid = preg_replace('#[^0-9]#', '', $_POST['sid']);
$account_name = preg_replace('#[^a-z0-9]#i', '', $_POST['user']);
$data = htmlentities($_POST['data']);
$data = mysqli_real_escape_string($db_conx, $data);
// Make sure account name exists (the profile being posted on)
$sql = "SELECT COUNT(userid) FROM user WHERE userid='$userid' LIMIT 1";
$query = mysqli_query($db_conx, $sql);
$row = mysqli_fetch_row($query);
if($row[0] < 1){
mysqli_close($db_conx);
echo "$account_no_exist";
exit();
}
// Insert the status reply post into the database now
$sql = "INSERT INTO conversation(osid, userid, postuserid, type, pagetext, postdate)
VALUES('$osid','$userid','$postuserid','b','$pagetext',now())";
$query = mysqli_query($db_conx, $sql);
$id = mysqli_insert_id($db_conx);
// Insert notifications for everybody in the conversation except this author
$sql = "SELECT authorid FROM conversation WHERE osid='$osid' AND postuserid!='$log_username' GROUP BY postuserid";///change log_username
$query = mysqli_query($db_conx, $sql);
while ($row = mysqli_fetch_array($query, MYSQLI_ASSOC)) {
$participant = $row["postuserid"];
$app = "Status Reply";
$note = $log_username.' commented here:<br />Click here to view the conversation';
mysqli_query($db_conx, "INSERT INTO notifications(username, initiator, app, note, date_time)
VALUES('$participant','$log_username','$app','$note',now())");
}
mysqli_close($db_conx);
echo "reply_ok|$id";
exit();
}
?>
Thanks in advance for any help it will be much appreciated

Why didn't you set the proper URL for Ajax calls instead of using location.href?
var ajax = ajaxObj("POST", location.href);
In additional, I guess ajaxObj is not defined or well coded. You are using, jQuery, why don't you try jQuery ajax?
http://api.jquery.com/jquery.ajax/

var ajax = ajaxObj("POST", location.href);
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
var datArray = ajax.responseText.split("|");
if(datArray[0] == "reply_ok"){
var rid = datArray[1];
data = data.replace(/</g,"<").replace(/>/g,">").replace(/\n/g,"<br />").replace(/\r/g,"<br />");
_("status_"+sid).innerHTML += '<div id="reply_'+rid+'" class="reply_boxes"><div><b>Reply by you just now:</b><span id="srdb_'+rid+'">remove</span><br />'+data+'</div></div>';
_("replyBtn_"+sid).disabled = false;
_(ta).value = "";
alert("reply ok!");
} else {
alert(ajax.responseText);
}
ajax.send("action=status_reply_ok&sid="+sid+"&user="+user+"&data="+data);
}
}