Databases
StackOverflow2013
Postsdbo
POJQuery Ajax Calls -- Intermittent image display issues (Chrome & FF) (some PHP and MySQL)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Ajax Calls -- Intermittent image display issues (Chrome & FF) (some PHP and MySQL)
    primarykey
    data
    text
    <p>I use JQuery to pull form data and send an <code>XMLHttpRequest();</code> I open the request using the <code>POST</code> method. The image and supplementary data are passed to a PHP script that handles, resizes, and saves it to the server. The file name and location of the image are updated in the relevant fields in a MySQL database. On the <code>uploadComplete(evt)</code> I attempt to display the newly uploaded image by calling <code>.load()</code> to populate a div.</p> <p>80% of the time, the image displays correctly when the content is loaded into the div. 20% of the time, the image is displayed as if the link provided were a broken link. However, if I refresh the page, the image is displayed correctly.</p> <p><strong>Why does the image sometimes show as a broken link?</strong></p> <p><strong>How do I stop it from doing this?</strong></p> <p><em>*</em> EDIT</p> <pre><code> function loadFile() { var fileURL = $( "#url" ).val(); if(fileURL == "") { // Retrieve the FileList object from the referenced element ID var myFileList = document.getElementById('upload_file').files; // Grab the first File Object from the FileList var myFile = myFileList[0]; // Set some variables containing the three attributes of the file var myFileName = myFile.name; var myFileSize = myFile.size; var myFileType = myFile.type; // Let's upload the complete file object imageUpdate(myFile); } else { var newinfo = new Array(); newinfo[0] = "URL"; newinfo[1] = fileURL; imageUpdate(newinfo); } } function imageUpdate(newinfo) { var formData = new FormData(); // data object // extra var stylistID = $( "#editThisStylist" ).data('stylistid'); // Grab stlyistID formData.append("stylistID", stylistID); // IF URL if ( newinfo[0] == "URL" ){ formData.append("type", "URL"); formData.append("url", newinfo[1]); } // IF LOCAL FILE else { formData.append("type", "FILE"); // Append our file to the formData object // Notice the first argument "file" and keep it in mind formData.append('my_uploaded_file', newinfo); } // Create our XMLHttpRequest Object var xhr = new XMLHttpRequest(); xhr.addEventListener("progress", updateProgress, false); xhr.addEventListener("load", uploadComplete, false); xhr.addEventListener("error", transferFailed, false); xhr.addEventListener("abort", transferCanceled, false); // Open our connection using the POST method xhr.open("POST", "u/stylist_avatar.php", true); // Request headers //xhr.setRequestHeader("Content-Type", formData.files[0].type); // Send the file xhr.send(formData); } // While xhr is in progress function updateProgress(oEvent) { if (evt.lengthComputable) { //var progressBar = document.getElementById("progressBar"); //var percentComplete = oEvent.loaded / oEvent.total; //progressBar.value = percentComplete; } else { // unable to compute progress information since the total size is unkown } } // onComplete function uploadComplete(evt) { //alert("The transfer is complete."); resetForm($('#uploadImageForm')); var stylistID = $( "#editThisStylist" ).data('stylistid'); // Grab stlyistID $('#uploadImageModal').modal('toggle'); // Reload right div $( "#editStylistRight" ).load( "u/stylist_lookup.php", {stylistID: stylistID}, function (){}); // Reload stylist list var index = 0; var numRecords = 10; $( "#stylistTable" ).load( "u/stylist_lookuptable.php", {start: index, end: numRecords}, function (){}); } function transferFailed(evt) { alert("An error occurred while transferring the file."); } function transferCanceled(evt) { alert("The transfer has been canceled by the user."); } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDaniel Brown
    1. USDaniel Brown
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COI hope that you're using jQuery AJAX and not your own function. But we won't know until you show us the code
      singulars
      1. POJQuery Ajax Calls -- Intermittent image display issues (Chrome & FF) (some PHP and MySQL)
      1. USMachavity
    2. COI added my code as requested. I _think_ this is the correct way to go about it. Maybe a little hacky, but it works.
      singulars
      1. POJQuery Ajax Calls -- Intermittent image display issues (Chrome & FF) (some PHP and MySQL)
      1. USDaniel Brown
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload