Reputation: 11
I am trying to upload an image and some strings/numbers using AJAX. The code is working fine (as in, everything is getting into the database) except for one very important problem. I very much want the "character" variable to be unique, and every attempt I use to bring up an error message for trying a character name that has already been taken does not work. Here is my code:
AJAX:
function CSubmit() {
clearInterval(MoveDrawTimer);
var a=document.forms['form-id']["thefiles"].value; if (a == "") { document.getElementById("info").innerHTML="You must upload an image."; return };
if (showFileSize() > 5000000) { document.getElementById("info").innerHTML="File is too big. Maximum size is 5,000,000 bytes."; return };
var accepted = [".gif",".png",".jpg",".jpeg"];
if (Ext in oc(accepted) == true) {
var dataURLToBlob = function(dataURL) {
var BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) == -1) {
var parts = dataURL.split(',');
var contentType = parts[0].split(':')[1];
var raw = parts[1];
return new Blob([raw], {type: contentType});
}
var parts = dataURL.split(BASE64_MARKER);
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType}); };
newImage = dataURLToBlob(dataURL); } else { document.getElementById("info").innerHTML="Cannot send file. Check your extensions."; return };
var canvas = document.getElementById("Cinfo");
var context = canvas.getContext("2d");
context.clearRect(0, 0, 400, 400);
var TotalSpent = StrPts + IntPts + WisPts + SpdPts + MovPts;
var theform = document.getElementById("CharName");
if (theform.value == "") { document.getElementById("info").innerHTML="Your character must have a name."; return }
if ( /[^a-zA-Z0-9]/.test(theform.value) ) {
document.getElementById("info").innerHTML="Name must contain only letters and / or numbers."; return }
if (theform.value.length > 14) { document.getElementById("info").innerHTML="Character names must be 14 characters max."; return }
if (TotalSpent !== 2) { document.getElementById("info").innerHTML="You must spend exactly 2 points."; return }
var fd = new FormData();
fd.append('data', newImage);
fd.append('character', theform.value);
fd.append('str', StrPts);
fd.append('int', IntPts);
fd.append('wis', WisPts);
fd.append('spd', SpdPts);
fd.append('mov', MovPts);
//beginning of server transmission. above is javascript front end authentication.
//sending the following information:
//theform.value // character name
//StrPts, IntPts, WisPts, SpdPts, MovPts // the character stats
var xmlhttp;
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(){ xmlhttp.addEventListener("progress", document.getElementById("info").innerHTML="Please wait . . ." , false);
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
if (xmlhttp.responseText.length <= 14) {
document.getElementById("info").innerHTML="Congratulations, " + xmlhttp.responseText + " has been approved.";
SelectScreen();} } }
xmlhttp.open("POST","CHunique.php",true);
xmlhttp.send(fd);
};
As you can see, I am appending everything to a form and then sending it to CHunique.php, which is the following (currently an incomplete test page for demonstration of problem):
<?php
@$con=mysqli_connect("$db_host","$db_username","$db_pass", "$db_name") or die ("Could not connect to the database. Please try again later.");
mysqli_set_charset($con,"UTF8");
$Err = "fine";
session_start();
$login = $_SESSION['account'];
$CHresult = mysqli_query($con,"SELECT * FROM CHstats");
while($row = mysqli_fetch_array($CHresult)) {
$thecharacters = $row['character'];
if (strtolower($character) === strtolower($thecharacters)) { $Err = " Character name already in use."; break; }; }
The problem here is that I do not get any response back from the server at all. It stays infinitely on its "progress" function, which is to say "Please wait . . . " This is true for ALL while loops that I attempt on the php page...the server just gets stuck in loading. This is a huge problem because I need to use a while loop to loop through all the characters in order to see if the user's name is unique or not.
Again, everything is working fine, including the image upload, EXCEPT for this check. This check is very important, and I'm wondering why every single while loop I try in the php page just results in an infinite load time?? Please help.
Also keep in mind I do not use JQuery.
Upvotes: 1
Views: 870
Reputation: 11
YES! I actually solved it all on my own after several hours of frustration. The answer lies in my stupid AJAX conditional: if (xmlhttp.responseText.length <= 14). The responses were more than 14 characters and thus caused the server to load indefinitely.
Upvotes: 0
Reputation: 36511
Why not just change your query to do the work for you, doesn't really make sense to do the comparison in PHP
$query = sprintf("SELECT * FROM CHstats WHERE LOWER(character) = LOWER('%s')", $thecharacters);
$result = mysqli_query($con, $query);
if(mysqli_num_rows($result) > 0){
// duplicate character name
}
Also, are you sure that the while loop is what's causing your page to hang? It is very likely that the connection to mysql isn't being made or is taking a long time. If you haven't already, move a die statement around your code to see where it is getting hung up.
Upvotes: 1