title: syntax error: unexpected end of input parseJSON
body: <p>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:</p>
  
  <p>an input page with a form, <code>social.php</code>
  a php processing page, <code>postMsg.php</code>
  and a javascript function <code>postMsg()</code> that posts the form to the php processing page and is supposed to return the results to a div on <code>social.php</code></p>
  
  <p>The problem is that the $.parseJSON(data) command in the javascript results in an "unexpected end of input" error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I thought there was an issue with my javascript, but I code-checked it and it's fine:</p>
  
  <pre><code>     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;
      }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>$json_array = array('selfie'=&gt;'hello');
  </code></pre>
  
  <p>Then I thought there might be an issue with my input form, so I rewrote that, but it's still returning the same error:</p>
  
  <pre><code>echo '&lt;div data-role="fieldcontain" style="margin-top: -30px;margin-bottom: -30px;border-bottom: 0px;"&gt;
                  &lt;form method="post" name="commentSubmit" id="commentSubmit"&gt;
                    &lt;div style="width=100%; font-size:.9em;" data-role="fieldcontain"&gt;
                    &lt;label class="ui-input-text" for="msg_txt"&gt;Chip in:&lt;/label&gt;';
  
  //          $selfie = get_selfie($uid);
          echo '&lt;div style="margin-top: 10px; margin-bottom: 10px; display: block; font-size:.9em"&gt;';
  
  echo '&lt;input name="file" type="file"&gt;';
          echo '&lt;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"&gt;&lt;/textarea&gt;';
          echo '&lt;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"&gt;&lt;span class="ui-btn-inner ui-corner-right ui-controlgroup-last"&gt;&lt;span class="ui-btn-text"&gt;My button&lt;/span&gt;&lt;span class="ui-icon ui-icon-search ui-icon-shadow"&gt;&amp;nbsp;&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;';
          echo '&lt;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;"&gt;photo loaded&lt;/div&gt;';
  
                    echo '&lt;input name="refresh" value="1" id="refresh" type="hidden"&gt;
                      &lt;input name="uname" value="'.get_name($uid).'" id="uname" type="hidden"&gt;
                      &lt;input name="uid" value="'.$uid.'" id="uname" type="hidden"&gt;
  
                  &lt;/form&gt;
  </code></pre>
  
  <p>Any ideas?</p>