Jquery ajax page is automatically redirecting on post request

Question

Trying to upload multiple files through ajax but after uploading its redirecting to another blank page automatically, showing only the name of upload files

Following is the html tag

Here is the javascript function

function upload(){

 var projectId = document.getElementById("projectId").children[0].value;
   var referenceNo = document.getElementById("referenceNo").value;
   var createdBy = document.getElementById("initiatedBy").value;
if(projectId == null)
{
    alert('Please select project first');
    return;
}

var formData = new FormData();
var imageFiles = document.getElementById("fileId"),
filesLength = imageFiles.files.length;
for (var i = 0; i < filesLength; i++) {
  document.write(imageFiles.files[i].name);
    formData.append('files',imageFiles.files[i]);   

}

$("#fileId").val('');

var methodName = 'uploadBPMFiles';
formData.append('refId',referenceNo);   
formData.append('projectId',projectId);
formData.append('uploadedBy',createdBy);
formData.append('processType','EOT');

$.ajax({
    url: webUrl+methodName,
    data: formData,
    processData: false,
    type: 'POST',
    cache:false,
    dataType: "json",  
    contentType: false, 
    enctype     : "multipart/form-data",
    success: function(responseData) {
    alert('success');
    /**console.log('responseData: '+responseData);
    console.log('responseData: '+responseData);
    var obj = (responseData.downloadURLs);
    console.log(obj)
    for (var i in obj) {
      console.log(obj[i]);
      //$("response")<a href="http://www.test.com/b6">World</a>
      //$('#response').append('<a href="'+obj[i]+'">Link</a>');

    }
    //console.log($('#response').val());
    //console.log('end');   
**/
    }   
    ,
    error: function (responseData) {
        console.log('POST failed.');
    }
  });

}

I think your code is fine .. Please post form html and form submit event or the function you run the ajax inside — Mohamed-Yousef, Nov 13 '15 at 07:41
Try to use return false; at the end of your function .. to prevent reloading — Mohamed-Yousef, Nov 13 '15 at 07:59
Actually i think there is the restriction of the environment. Actually i'm using bonita bpm — Imran Ali, Nov 13 '15 at 08:24
I really don't know anything about bonita .. sorry.. but I don't think its restriction of the environment (maybe) .. I will upvote your question may anyone help .. Good Luck — Mohamed-Yousef, Nov 13 '15 at 08:31

score 2 · Answer 1 · answered Nov 13 '15 at 08:54

Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.

document.write(imageFiles.files[i].name); will clear your document. You have to append a new Element with the names of your files to display them on your site. To do this you can create a new Element using jQuery

$("<span>").text(imageFiles.files[i].name).appendTo("body");

score 0 · Accepted Answer · answered Nov 13 '15 at 08:47

0

Actually I was writing the uploaded file names in document. So i've removed the below line

document.write(imageFiles.files[i].name);

answered Nov 13 '15 at 08:47

Imran Ali

539
4
17

Jquery ajax page is automatically redirecting on post request

2 Answers2