0
Good, I have a script on a Wordpress page (which is not running) where I am submitting a form with files via ajax.
I want to show the user which files are being uploaded and which the user can remove before submitting them...
The script runs the jQuery(document).ready(function() {});
but nothing else runs. I only see the first console log.
I tried the code on localhost and it went great.
Can someone help me?
<div class="row files" id="files1">
<h2>Ficheiros</h2>
<input type="file" name="files1" id="file" multiple required/>
</span>
<br />
<ul class="fileList"></ul>
</div>
<div class="row">
<div class="span16">
<table class="zebra-striped">
<tbody class="files"></tbody>
</table>
</div>
</div>
<p> <select id="selectPastas" name="selectPastas" required>
<option value="">Escolher pasta </option>
<?php echo $pastaSelecionada ?>
</select>
</p>
<input type="hidden" value="<?php echo $userId; ?>" name="userPostingId" id="userPostingId">
<input type="hidden" value="<?php echo $q; ?>" name="userFileToId" id="userFileToId">
<input type="submit" name="btnSubmit" id="btnSubmit" value="Submeter">
</form>
<script type="text/javascript" >
jQuery(document).ready(function() {
console.log("Vai começar");
jQuery.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
var fileIdCounter = 0;
console.log("Prepara-te");
this.closest(".files").change(function (evt) {
var output=[];
console.log("E ai vaiiiiii");
for (var i = 0; i < evt.target.files.length; i++) {
fileIdCounter++;
var file = evt.target.files[i];
var fileId = sectionIdentifier + fileIdCounter;
filesToUpload.push({
id: fileId,
file: file
});
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";
output.push("<li><strong>", escape(file.name), "</strong> - ", file.size, " bytes. ", removeLink, "</li> ");
};
jQuery(this).children(".fileList").append(output.join(""));
//reset the input to null - nice little chrome bug!
evt.target.value = null;
});
jQuery(this).on("click",".removeFile",function (e) {
e.preventDefault();
var fileId = jQuery(this).parent().children("a").data("fileid");
// loop through the files array and check if the name of that file matches FileName
// and get the index of the match
for (var i = 0; i < filesToUpload.length; ++i) {
if (filesToUpload[i].id === fileId)
filesToUpload.splice(i, 1);
}
jQuery(this).parent().remove();
});
this.clear = function () {
for (var i = 0; i < filesToUpload.length; ++i) {
if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
filesToUpload.splice(i, 1);
}
jQuery(this).children(".fileList").empty();
}
return this;
};
(function () {
var filesToUpload = [];
var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");
jQuery("#formFilesToClient").on("submit", function (event) {
//Stop the form from submitting itself to the server.
event.preventDefault();
var formData = new FormData();
for (var i = 0, len = filesToUpload.length; i < len; i++) {
formData.append("files", filesToUpload[i].file);
}
jQuery.ajax({
type: "POST",
url: 'https://cliente.apostalcancada.pt/wp-content/themes/oceanwp-child-theme-master/php/submitFilesToCliente.php',
data: formData,
contentType: false,
processData: false,
cache:false,
success: function (data) {
alert(data);
jQuery('#formFilesToClient')[0].reset();
},
error: function (data) {
alert("ERROR - " + data.responseText);
}
});
});
});
});
</script> ```
You don’t even make a mistake? ajax with post method only works when you are accessing the page by localhost (or dedicated server), I am not sure the reason for this.
– Ricardo Cenci Fabris
good, The console ta cleans, I have other post requests working. It only arrives until the first console.log(will start) , after that nothing. I suspect it is incompatibility with wordpress the prototype fn
– João Moura