Click here to Skip to main content
14,388,814 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.


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 on PHP category

		function showUser(str) {
			if (str=="") {
			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) {

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

				<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>

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

$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"].'">';

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

<img alt="IMG example" src="" />

What I have tried:

Sorry but unfortunately I do not have any solution on this
Updated 10-Nov-17 2:59am

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

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