Click here to Skip to main content
13,588,580 members
Rate this:
 
Please Sign up or sign in to vote.
I have this error in the console.log which says:

Uncaught TypeError: Cannot read property 'width' of null at HTMLDivElement.handleDrop

In this process I access the images data by filtering it using a drop-down list and view it in the div element. I have no problem with this but only when using it in the canvas.
I do not have any idea why this is happening but it may have something to do with fetching images in the server. Thanks in advance for your time and effort.


THIS IS THE PROCESS I HAVE MADE:

1. Creating a function to fetch data to server without page reloading and redirecting the page using PHP-AJAX. this is place in the HTML head element. Source code from W3schools.com on PHP category

<script>
		function showUser(str) {
			if (str=="") {
			    document.getElementById("txtHint").innerHTML="";
			    return;
			} 
			if (window.XMLHttpRequest) {
			    // code for IE7+, Firefox, Chrome, Opera, Safari
			    xmlhttp=new XMLHttpRequest();
			} else { // code for IE6, IE5
			    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			xmlhttp.onreadystatechange=function() {
				if (this.readyState==4 && this.status==200) {
				    document.getElementById("txtHint").innerHTML=this.responseText;
				}
			}
			xmlhttp.open("GET","getImage.php?q="+str,true);
				xmlhttp.send();
		}
</script>


2. Placing the function in the select element inside the form element. This is placed inside the body element

<form>
				<select id = "objects" name="users" onchange="showUser(this.value)">
		    		<option value="">Select Category</option>
		    		<option value="City">City</option>
		    		<option value="Animals">Animals</option>
		    		<option value="Town">Town</option>
		    		<option value="Home">Home</option>
		    		<option value="Park">Park</option>
		  		</select>
</form>


3. Creating a div inside the body to place the target path for viewing images from database result

<div class = "images"><div class = "a"  id="txtHint">Image Category</div></div>


4. This is the getImage.php code for fetching data from database

<?php
$query = mysqli_connect("localhost","root","","imagecategory");
// Check connection
if (mysqli_connect_errno()){echo "Failed to connect to MySQL: " . mysqli_connect_error();}
mysqli_select_db($query, 'imgDropdown');

$q = $_GET['q'];
$sql="SELECT * FROM tbl_uploadimg WHERE imgCategory = '".$q."'";
$result2 = mysqli_query($query,$sql);

while($row = mysqli_fetch_array($result2)) {
    echo '<img draggable="true" src="uploads/'.$row["imgUrl"].'">';
}
mysqli_close($query);
?>


5. lastly this is the picture of my sql code. Database name: imageCategory on table tbl_uploadimg

<img alt="IMG example" src="https://ibb.co/mcnMSb" />


What I have tried:

Sorry but unfortunately I do not have any solution on this
Posted 10-Nov-17 1:55am
Updated 10-Nov-17 1:59am
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web02-2016 | 2.8.180615.1 | Last Updated 10 Nov 2017
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100