How do I make autoload/reload in every 5 seconds in ajax?
This is the code I use. The problem is new data doesn't appear, unless I reload it.
$(document).ready(function(){
// temp
$.ajax({
url : 'assets/php/act_now/module_loadChat.php',
type: 'POST',
async: false,
success: function(show_chat) {
$('#direct-chat').html(show_chat);
},
cache: false,
contentType: false,
processData: false
});
// temp
$("#text-on-it").submit(function(event){ // when send message
event.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'assets/php/act_now/module_loadChat.php',
type: 'POST',
data: formData,
async: false,
success: function(data) {
$('#direct-chat').html(data);
$("#text-on-it")[0].reset();
},
cache: false,
contentType: false,
processData: false
});
});
});
setInterval(function(){
// this will run after every 5 seconds
}, 5000);
Related
I am trying to display this "echo $_FILES['userfile']['name'];" on browser console but unfortunately I got this "function File() { [native code] }"
Here is my jquery code
<?= form_open_multipart('',' id="importform" method="POST" ');?>
<div><input type="file" name="userfile"></div><button type="submit>upload</button>
var formdata = new FormData();
formdata.set('userfile',$('input[name="userfile"]')[0].files[0],File);
$.ajax({
url:'http://localhost/selection/index.php/CI_Inner/importResult',
type: 'POST',
dataType: 'html',
contentType: false,
processData: false,
data: formdata,
success: function(data){
console.log(data);
}
Try this
function uploadImage() {
// send the formData
var formData = new FormData( $("#userfile")[0] );
if (typeof formData !== 'undefined') {
$.ajax({
url : 'http://localhost/selection/index.php/CI_Inner/importResult', // Controller URL
type : 'POST',
data : formData,
async : false,
cache : false,
contentType : false,
processData : false,
success : function(data) {
successFunction(data);
}
});
} else {
message("Your Browser Don't support FormData API! Use IE 10 or Above!");
}
}
Note: instead of 'http://localhost/selection/index.php/CI_Inner/importResult' using direct URL baseUrl + 'importResult',
example: url :
'http://localhost/selection/index.php/CI_Inner/importResult',
url: baseUrl + 'importResult',
Eventually I solved this by just removing the parameter 'File' from my code below
var formdata = new FormData();
formdata.set('userfile',$('input[name="userfile"]')[0].files[0],**File**);
$.ajax({
url:'http://localhost/selection/index.php/CI_Inner/importResult',
type: 'POST',
dataType: 'html',
contentType: false,
processData: false,
data: formdata,
success: function(data){
console.log(data);
}
And now it works fine with the code below
var formdata = new FormData();
formdata.set('userfile',$('input[type=file]')[0].files[0]);
$.ajax({
url : 'http://localhost/selection/index.php/CI_Inner/importResult',
type: 'POST',
dataType: 'html',
contentType: false,
processData: false,
data: formdata ,
success: function(data){
console.log(data);
}
I've got simple file upload form. Form works on desktop PC/Mac but doesn't work on iOS devices.
On submit event I make call like this:
var form_data = new FormData(this);
$.ajax({
url: "api/register",
method: "POST",
type: "POST",
headers: {
"cache-control": "no-cache"
},
cache: false,
data: form_data,
contentType: false,
processData: false,
async: true
}).success(function (res) {
alert ('uploaded');
}).error(function (res) {
alert('not uploaded')
});
After 60 seconds error is returned nad I get 'not uploaded' alert.
I am trying to upload firstname, lastname, description and image path to MySql database. And move uploaded image to specific folder.
Here is my ajax function
formData = new FormData(addPeopleForm);
var file_data = $('input[type="file"]')[0].file;
formData.append("file", file_data);
$.ajax({
type: "POST",
url: "functions.php",
contentType: false,
cache: false,
processData: false,
data: {
function: "savepeople",
data: formData
}, success: function(data){
console.log(data);
getPeople();
}
});
functions.php
if(isset($_POST['function'])){
$f = $_POST['function'];
if($f == "savepeople"){
require_once("config.php");
echo $_POST['firstname'];
.
.
.
you can not send directly image to php file with ajax call, you have to take form enctype="multipart/form-data" while form defination
and replace this code for file upload while ajax call
for appending file in formdata use below code
formData = new FormData(); //your form name
var file_data = $('input[type="file"]')[0].file;
formData.append("file", file_data);
formData.append("function","savepeople"); // new variable for your php condition
$.ajax({
url: "YOUR_FILE_PATH",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(data) {
// success operation here
},
and on php side you have to use $_FILES['YOUR_FILE_NAME'] instead of $_POST['YOUR_FILE_NAME'] for accessing a uploaded file on server.
you can try this code
$.ajax({
type:'POST',
url:'functions.php',
data:new FormData($('#my_form')[0]),
cache: false,
contentType: false,
processData: false,
success:function(msg)
{
console.log(msg);
}
});
return false;
where #my_form is your form id
var formData = new FormData($(this)[0]);
var action = "savepeople";
$.ajax({
url : 'functions.php',
type : 'POST',
data: {action:action,formData:formData},
contentType: false,
cache: false,
processData:false,
async : false,
, success: function(data){
console.log(data);
getPeople();
}
});
functions.php
if(isset($_POST['action']) && $_POST['action'] == "savepeople"){
//TO DO CODE
}
I am having a div
that shows a loader image while sending ajax requests
I attached the div in the beforeSend attribute of ajax. The issue is if I send serialize() data then the beforeSend works but doesn't work when I send formData
Works
$.ajax({
url: 'centre-basic-process.php',
type: 'post',
data: $('#centreform').serialize(),
beforeSend: function() {
$('.displayLoader').show();
},
success: function(response) {
console.log(response);
$('#centreformupload').show();
$('#centreform').hide();
$('html, body').animate({
scrollTop: 0
}, 0);
}
});
Doesn't work
$.ajax({
url: 'centre-upload-process.php',
type: 'POST',
data: formData,
async: false,
beforeSend: function() {
$('.displayLoader').show();
},
success: function(response) {
alert("You have succesfully submitted the form. Please complete the payment method");
document.location.href = "dashboard.php";
},
cache: false,
contentType: false,
processData: false
});
I even tried ajaxStart() but facing same issue. Can anyone help me?
i'm having a problem sending the option selected with ajax.
Code:
$("#editarConta").on('submit',(function(e) {
e.preventDefault();
$.ajax({
url: "includes/php/class_conta.php",
type: "POST",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(resultado){
$("#accountEdit_result").html(resultado);
}
});
}));
Sending this data i can't see what option was selected. Is any way i can send this data, plus the selected option like:
data: { new FormData(this) , optionSelected: $( "#linguagem_favorita option:selected" ).val() },
My select HTML code:
<select name="linguagem_favorita" id="linguagem_favorita" class="form-control">
If i send with my code i get NULL when i var_dump the variable
var_dump($_POST["linguagem_favorita"]);
Append to the form data:
$("#editarConta").on('submit',(function(e) {
e.preventDefault();
var formData = new FormData(this);
formData.append("optionSelected", $("#linguagem_favorita option:selected" ).val() );
$.ajax({
url: "includes/php/class_conta.php",
type: "POST",
data: formData,
contentType: false,
cache: false,
processData:false,
success: function(resultado){
$("#accountEdit_result").html(resultado);
}
});
}));