I'm on about hour 5 of this and figure it's time to ask for help. I'm trying to use AJAX+php to upload an image and some text data on a form to a database. The total system is:
an input page with a form, social.php
a php processing page, postMsg.php
and a javascript function postMsg() that posts the form to the php processing page and is supposed to return the results to a div on social.php
The problem is that the $.parseJSON(data) command in the javascript results in an "unexpected end of input" error:
Failed:
SyntaxError {stack: (...), message: "Unexpected end of input"}
(index):156
Uncaught SyntaxError: Unexpected end of input jquery.js:4235
b.extend.parseJSON jquery.js:4235
(anonymous function) (index):158
c jquery.js:4611
p.fireWith jquery.js:4687
k jquery.js:10335
r
I thought there was an issue with my javascript, but I code-checked it and it's fine:
function postMsg() {
console.log("submit event");
var fd = new FormData(document.getElementById("commentSubmit"));
fd.append("label", "WEBUPLOAD");
document.getElementById('progressBar').style.display = 'block';
$.ajax({
url: "postMsg.php",
type: "POST",
xhr: function() { // Custom XMLHttpRequest
var myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // Check if upload property exists
myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
}
return myXhr;
},
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( data ) {
console.log("PHP Output:");
console.log( data );
try {responseData = $.parseJSON(data)}
catch (e) {console.log('Failed: ', e, data);}
var items = $.parseJSON(data);
document.getElementById('progressBar').style.display = 'none';
});
return false;
}
Then I thought there was an issue with my php, but replaced it all with a simple command and it still resulted in the same error:
$json_array = array('selfie'=>'hello');
Then I thought there might be an issue with my input form, so I rewrote that, but it's still returning the same error:
echo '<div data-role="fieldcontain" style="margin-top: -30px;margin-bottom: -30px;border-bottom: 0px;">
<form method="post" name="commentSubmit" id="commentSubmit">
<div style="width=100%; font-size:.9em;" data-role="fieldcontain">
<label class="ui-input-text" for="msg_txt">Chip in:</label>';
// $selfie = get_selfie($uid);
echo '<div style="margin-top: 10px; margin-bottom: 10px; display: block; font-size:.9em">';
echo '<input name="file" type="file">';
echo '<textarea style="width:100% text-align:left; font-weight:normal;" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-btn-up-c" data-iconshadow="true" data-shadow="true" data-corners="false" cols="23" rows="1" name="msg_txt" id="msg_txt"></textarea>';
echo '<a style="border-radius:8px" class="ui-btn ui-btn-inline ui-btn-icon-notext ui-corner-right ui-controlgroup-last ui-btn-up-c" title="My button" data-wrapperels="span" data-iconshadow="true" onclick="postMsg();" data-shadow="true" data-corners="true" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true"><span class="ui-btn-inner ui-corner-right ui-controlgroup-last"><span class="ui-btn-text">My button</span><span class="ui-icon ui-icon-search ui-icon-shadow"> </span></span></a>';
echo '<div id="photoUploaded" style="display: none;
position: relative;
text-align: center;
background-color: white;
opacity: .5;
color: black;
float: right;
vertical-align: middle;
font-family: sans-serif;
border-radius: 10px;
padding: 10px;">photo loaded</div>';
echo '<input name="refresh" value="1" id="refresh" type="hidden">
<input name="uname" value="'.get_name($uid).'" id="uname" type="hidden">
<input name="uid" value="'.$uid.'" id="uname" type="hidden">
</form>
Any ideas?
console.log( data );?$json_array = array('selfie'=>'hello');