I'm using a great plugin - dropzone.js (dropzonejs.com) to make my site a little more fancy when registering a new user.
Basically, the user fills out a form, drops a couple images into the "dropzone", and clicks "Submit", which fires an ajax call that posts the form to a php script.
I have dropzone parameters set to enqueForUpload:false, which keeps the files from auto-uploading, since I need them to upload into uploads/$userid, after the new user id has been created. I can give dropzone header params, which I'm assuming post to the url, similar to an ajax call, instead of data: {'userid': userid}, dropzone uses headers: {'userid': userid}... However, dropzone gets initialized on document.ready, and as the userid variable isn't declared yet, dropzone fails to initialize.
I'm guessing I'm going to need to initialize dropzone with document.ready, but not give it headers just yet. Then after the ajax form processing is successful and returns userid, call dropzone to upload and give it the headers at that point. Problem is, I don't know what code would need to be called to make that happen.
Initialize Dropzone on ready:
$(document).ready(function(){
$('#dropzone').dropzone({
url: 'dropzoneprocess.php',
maxFilesize: 1,
paramName: 'photos',
addRemoveLinks: true,
enqueueForUpload: false,
});
});
Then...
$('#submit').on('click', function(){
validation crap here
$.ajax({
type: 'post',
url: 'postform.php',
data: {'various': form, 'values': here}
datatype: 'json',
success: function(data){
var userid = data.userid;
/* (and this is what I can't figure out:)
tell dropzone to upload, and make it
post userid to 'dropzone.php' */
});
});
If you use the latest Dropzone version, the parameter enqueueForUpload has been removed, in favour of autoProcessQueue which makes the whole queuing easier.
So, just call myDropzone.processQueue() as soon as you want all files to be uploaded.
To add additional parameters to the XHR you can simply register to the sending event, which gets the xhr object as second and formData as third parameter, and add the data yourself. Something like this:
myDropzone.on("sending", function(file, xhr, formData) {
// add headers with xhr.setRequestHeader() or
// form data with formData.append(name, value);
});
I used enyo answer, but i used many dropzones with data-id attribute in my page so I used:
$('div.dropzone').dropzone({
url: 'img.php'
});
var sendingHandler = function(file, xhr, formData) {
formData.append('id', $(this.element).data('id'));
};
$('div.dropzone').each(function() {
Dropzone.forElement(this).on('sending', sendingHandler);
});
Related
I searched for the solution to this everywhere already. People do this all the same yet it doesn't work for me.
The relevant HTML:
<input type="file" name="file" id="file">
<button type="submit" id="submit" name="import">Import</button>
The relevant Jquery:
$(document).ready(function(){
$("button").click(function(){
var fd = new FormData();
fd.append("file", file);
alert(fd.get("file"));
$.ajax({
//URL of the PHP file
url: "readFile.php",
//fd will be send
data:fd,
//json is the type that should be returned
dataType: "json",
//To prevent processing
cache:false,
contentType: false,
processData: false,
//when successful
success: function( data ) {
console.log(data);
}
});
});
});
And lastly, the PHP I wrote to find the bug: (named readFile.php)
<?php
if(isset($_FILES["file"]["name"])){
echo json_encode("great");
}else {
echo json_encode("bad");
}
?>
This code works, except for the part where the PHP should have received the file.
That PHP checks whether it received the file. If it were there it would print out "great", yet it always prints out (console log) "bad", when I click the button.
There are two things that need to be changed in your client-side JavaScript in order for this to work.
The file variable currently holds a reference to the HTMLInputElement, and not the selected binary file(s). Elements of type file provide a files property (MDN docs) that contains the list of files selected for upload. To upload the (single) selected one, retrieve the first element like so:
fd.append("file", file.files[0]);
If no parameter is given, jQuery’s $.ajax() method will default to sending a GET request (jQuery docs). Per RFC 7231, a “payload within a GET request message has no defined semantics”. The underlying XMLHttpRequest API ignores any body for GET requests (XHR spec). Instead, you may want to send a POST request which is suitable for uploading files (PHP docs). Make sure to add the HTTP method as follows:
$.ajax({
// existing configuration
method: 'POST'
});
This should be it! Please also note that the cache property doesn’t need to be set, as POST requests aren’t cached anyway.
Well the thing is there is already a edited form with a lot of fields but all the save and validate goes trough ajax.
They asked me now to put a file upload , i tough that just will be set a input and get it on back , but since all goes trough ajax i cant.
I don't want to change all the function and go trough a submit if it's not necessary.
I looked for some uploaders of file trough ajax but all of them are type drag and drop and i don't like them because y only need a simple file.
And the ones that i found that looked simple where in flash...
Is there any simple script that allows me to upload a simple file trough ajax without need of change the type of submitting the fields.
Thank's in advance mates ;)
//the js that saves all the inputs
function _edit_campaign(){
var data = formvalues_inspinia("body");
data.action=_action;
data.status=$("#smf_ior_status").val();
$.ajax({
url: "/save_changes",
dataType: "json",
data: data,
method:"POST",
success: function (response) {
if(!response.status){
toastr_error(response.desc);
$( "#submit_confirm" ).prop( "disabled", false );
$("#"+response.camp).focus();
}else{
toastr_success(response.desc);
}
}
});
}
client side
$.ajax({
url: "ajax_php_file.php", // Url to which the request is send
type: "POST", // Type of request to be send, called as method
data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
contentType: false, // The content type used when sending data to the server.
cache: false, // To unable request pages to be cached
processData:false, // To send DOMDocument or non processed data file it is set to false
success: function(data) // A function to be called if request succeeds
{
});
server side
$sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable
$targetPath = "upload/".$_FILES['file']['name']; // Target path where file is to be stored
move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file
You can achieve this in simpler way using "ajaxSubmit".
Include jquery.form.js on your page and submit your form.
$(form).ajaxSubmit({
url: url,
type: "POST",
success: function (response) {
// do what you need with response
});
It sends all form data including file on server then you can handle these data in regular manner.
I am developing a custom emailing system for one of my clients as an add on for the CMS I built that I give to my clients. I am using jQuery Ajax to send all the information to a PHP file that formats the email, sends a query to MySQL to get all the email address from the database, and the sends the emails using the mail(). This takes some time to do, and I am wanting the jQuery ajax to display a progress bar for each time the PHP script sends an email. I have searched for something that is similar to success: function() that receives data from the PHP script through JSON allowing jquery to update the progress of the emailing.
Does anyone have a suggestion for this? Something like this is preferable:
$.ajax({
type: "POST",
url: "example.com",
data: {"test":"test","tester":"tester"},
PROGRESS: function(data){
$("div").html(data);
},
success: function(r){
alert(r);
}
});
});
You can use the xhr object and attach an event listener to the progress event
$.ajax({
//...
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.addEventListener("progress", function(e) {
var p = e.loaded / e.total;
// update your progress bar here..
});
return xhr;
}
})
You will need to wrap this inside of a setInterval() function. You can search for AJAX Polling. But the idea here is that you cannot send information back periodically from the same PHP script while it is running, the success callback is only triggered ONCE, after the script has finished.
Ok guys im a bit stuck here. I usually use jquery to do this but i found out it cant be done with jquery so im doing it this way ok so this is my code
var url = ("upload.php?loc="+uplocation);
var xhr = new XMLHttpRequest();
if(xhr.upload){ // check if upload property exists
xhr.open("POST", url, true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
}
And all it does is sends a file to a php page, but the php page doesn't upload the image which isn't what i want, so is their anyway of returning all the contents thats displayed on the page
if it was jquery i would do something like this
$.ajax({
type: "POST",
url: 'json/submitsongs.php',
data: loca,
success: function(data){
alert(data);
}
});
so my question is how to do return what ever is echoed on the php page and alert it(for debugging reasons).
thanks for your help
You would add an event listener for whatever event you desired (load, error, progress, etc). So in your case you would use the 'load' event which signifies that the file has finished loading:
xhr.addEventListener('load', onComplete, false);
The onComplete is your callback function which has the event as a parameter. This event contains the response text:
function onComplete(event) {
alert(event.target.responseText);
}
As of today, u can not upload async using Ajax.
Either use Iframes (like Google) or some nifty Flash (or Java) upload app.
Not sure, but might be HTML5 has a solution for that, but it won't be cross browser.
I have a table that outputs all my contacts via a while loop from my database.
my syntax is like this:
SELECT * FROM contacts WHERE id = $_SESSION['user_id'] ORDER BY name ASC LIMIT 5
that pulls out all my data and only gives me 5 results.
Now my goal is to have a little button that opens up a model box with jquery (this I can manage on my own) with a form asking the user to input a number then that number will be sent via post or get to $PHP_SELF and update a local variable with the number the user inputed, then that variable will be used to update the database to increase or decrease the LIMIT value.
I have looked all over the web (with google) to look for submitting a form using AJAX but all the examples i've found don't work for me.
When the user submits the number and the sql query is executed and updated for the outputed table to dynamically update according to the new LIMIT value all without ever refreshing the page to the user.
my jquery code is:
(document).ready(function(){
$("form#form").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var val = $('input[name=new_value]').attr('value');
$.ajax({
type: "post",
url: "process.php",
data: "val="+ val,
cache: false,
success: function(){
$('form#form').hide(function(){$('.success').fadeIn();});
}
});
return false;
});
});
$(document).ready(function(){ $("form#form").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var val = $('input[name=new_value]').attr('value');
$.ajax({ type: "post", url: "process.php", data: "val="+ val, cache: false, success:
function(){
$('form#form').hide(function(){$('.success').fadeIn();});
} }); return false; }); });
then my php code is:
$new_val = $_POST['new_val'];
$_val = "UPDATE `settings` SET `display_limit` = {$new_val} WHERE `user_id` = {$_SESSION['user_id']}";
mysql_query($_val) or die(mysql_error());
and my form is simple:
any suggestions? I haven't come to how to have my outputed table dynamically update yet so if anyone can point me in the right direction or provide some help that would be awesome.
thanks
EDIT:
Here is an updated jquery script I was working on, I'm able to submit the form successfully! but my only problem is that I can't see the changes until the page is refreshed with defeats the purpose of the AJAX usage... sigh
how can I now have my #results div updated and refreshed with the form submission content?
$(document).ready(function() {
var options = {
url: 'process.php',
type: 'post',
//dataType: 'json',
target: '#last_five_sellers',
success: success
};
// bind to the form's submit event
$('#form').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
function success(responseText, $form) {
$("form#form").hide();
$(".success").fadeIn();
}
});
In your php code where you do the update, You could echo your contacts in html-format. That would then return to your success function in jquery.
success: function(){
$('form#form').hide(function(){$('.success').fadeIn();});
}
The function have a parameter data, which is the html-format you echoed in php.
Example
success: function(data){
$('form#form').hide(function(){$('.success').fadeIn();});
$(data).appendTo('#result');
}
You need to understand the flow of a request. Once the php script runs, that is it, it is done. If you plan on submitting back to that same page, it'll be a new request and a new execution of that script. Now, you could add a special case to that script to return the necessary data to your jQuery code, but that's messy IMO. I would rather have a separate script to handle that functionality. This can be looked at as a web service.
So, when a you go to that page in a browser, it will intially display 5 contacts (or w/e the default you have in the LIMIT clause). When you click the icon to display more contacts, you employ jQuery to submit a GET request to that 'web service' page (it really should be GET, since you're retrieving data, not submitting new data). This would then be a list of contacts that you use to update the display on the page, using jQuery/JavaScript.
As noted by Codler, the output from that 'web service' can be HTML which you simply use to replace the existing HTML which displays the contacts. (This would be the preferred way. You almost always want do as much on the server as you reasonably can.)
It looks like your jQuery code is duplicated — there's no need to bind the form's submit event twice. Additionally, the first jQuery block is missing the opening dollar-sign ("$"). And as far as I know, .hide() does not support passing a callback through the first parameter. In the jQuery API documentation, it's written as .hide( duration, [ callback ] ).
I would write:
$(function(){
$("form#form").submit(function(){
// we want to store the values from the form input box, then send via ajax below
$.ajax({
type: "post",
url: "process.php",
data: "val=" + $("input[name=new_value]").val(),
cache: false,
success: function(){
$("form#form").hide();
$('.success').fadeIn();
}
});
return false;
});
});
Now, if you want to update your results table dynamically, the simplest way is just to replace the entire thing with the updated HTML. So for instance, if you modified your PHP script (process.php) so that, after updating display_limit, it outputted the new results table, you could then write something like (assuming your results table is table#results):
$(function(){
$("form#form").submit(function(){
// we want to store the values from the form input box, then send via ajax below
$.ajax({
type: "post",
url: "process.php",
data: "val=" + $("input[name=new_value]").val(),
cache: false,
success: function(data){
$("form#form").hide();
$(".success").fadeIn();
$("#results").replaceWith(data);
}
});
return false;
});
});
You just have to make sure your script only outputs HTML.
Contrary to what George answers above, HTML will definitely work for this purpose, but I think the ideal method is to send purely the data alone (minus structure/presentation) in either JSON or XML format, and then use JavaScript to build the HTML; you can save a lot of bandwidth this way, and ultimately build a much more responsive application.
EDIT
Here's a mini JSON-based example.
JavaScript:
$(function(){
$("#form").submit(function(){
var val = $("input[name=new_value]").val();
$.getJSON("process.php?val=" + val, function(data){
$("#results").empty();
$(data.rows).each(function(){
$("#results").append('<tr><td>' + this.column_a + '</td><td>' + this.columbn_b + '</td></tr>');
});
});
return false;
});
});
PHP (process.php):
[assuming you already have a result/rows called $result]
$json = array('rows' => array());
while ($row = mysql_fetch_assoc($result)) {
$json['rows'][] = $row;
}
echo json_encode($json);
Now, granted, I haven't tested this code at all, but it should give you the gist of it.