I am using ajax file upload which was working fine before. But suddenly it has stopped working into safari browser.
Here is the code I am using.
$('#addEditCategoryButton').click(function() {
var formData = new FormData($('#editCategoryForm')[0]);
if($("#editCategoryForm").valid()){
var url = window.parent.location.pathname;
var urlPath = url.split("/").pop();
$.ajax({
url: "categories-operations.php",
type: "POST",
data:formData,
contentType: false,
processData: false,
beforeSend: function() {
$("#json-overlay-2").show();
},
success: function(data){
if(data != 'failed') {
if(urlPath != 'manage-categories.php')
{
location.href = 'manage-categories.php';
} else {
table.api().ajax.url( 'categories-operations.php?action=fetchData&catIdUnder=0').load();
$("#addNewEmployeeModal").modal('hide');
}
} else {
$("#installMessage").show();
}
$("#json-overlay-2").hide();
}
});
}
$(document).find("label.error").css('color', 'red');
});
Please help me on this. When I remove contentType: false,processData: false then it works.
Related
I am using ajax Progress bar while uploading files to ec2 server. Here uploading works fine. Progress bar loading too fast. It reached 100% before the full file upload.
I refer similar questions but not found the solutions yet.
My code:
function Funname() {
$.ajax({
url: url,
type: 'post',
enctype: 'multipart/form-data',
data: formData,
processData: false, // tell jQuery not to process the data
contentType: false,
dataType: 'json',
success:function(response) {
if(response.success === true) {
$('.progress').hide();
}else {
// error code
}
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').width(percentComplete+'%');
$('.progress-bar').html(percentComplete+'%');
}
}, false);
return xhr;
}
});
return false;
}
Where I am doing wrong?
I am trying to redirect to Homepage from SignIn Page after the validation of user credentials is done. The response is working perfectly fine. On getting a successful response, I want to redirect to Homepage. I am using Javascript for client side and PHP on server side. but the success response is not getting to ajax.
Ajax call
$('#login-btn').click(function(e) {
if ($('#login-form')[0].checkValidity()) {
e.preventDefault();
$("#login-btn").html('<img src="images/tra.gif" /> Please Wailt..');
if ($('#Lemail').val() == '') {
$('#error-message').fadeIn().html('* Email is Required!');
setTimeout(function() {
$('#error-message').fadeOut('slow');
}, 5000);
} else if ($('#Lpassword').val() == '') {
$('#error-message').fadeIn().html('* Please enter password!');
setTimeout(function() {
$('#error-message').fadeOut('slow');
}, 5000);
} else {
$('#error-message').text('');
$.ajax({
url: 'actionlog.php',
method: 'POST',
data: $('#login-form').serialize() + '&action=login',
success: function(response) {
if (response === 'true') {
window.location = '../';
} else {
$('#logAlert').html(response);
}
}
});
}
}
});
});
PHP code:
<?php
//Login Request
if (isset($_POST['action']) && $_POST['action'] == 'login') {
if (Input::exists()) {
$validate = new Validate();
$validation = $validate->check($_POST, array(
'email' => array('required' => true),
'password' => array('required' => true)
));
if ($validation->passed()) {
$user = new User();
//create Remember
$remember = (Input::get('remember') === 'on') ? true : false;
$login = $user->login(Input::get('email'), Input::get('password'), $remember);
if ($login) {
echo 'true';
}
}else{
foreach ($validation->errors() as $error) {
$user = new User();
echo $user->showMessage('danger',$error);
}
}
}
}
please i need help
You have to trim your response....sometimes the string recieved from the server contains whitespace.....and that causes the problem to not redirect to other page.
$.ajax({
url: 'actionlog.php',
method: 'POST',
data: $('#login-form').serialize() + '&action=login',
success: function(response) {
if ($.trim(response) === 'true') {
window.location = '../';
} else {
$('#logAlert').html(response);
}
}
});
Try to do it this way:
$.ajax({
type: "POST",
url: 'actionlog.php',
data: $('#login-form').serialize()+'&action=login',
dataType: 'json',
beforeSend: function(){},
success: function(response){
window.location.href = '/';
},
error: function(){
console.log('You got an error');
}
});
If you get a successful response from the server, this should work. This example implies that the server will return json, but you can indicate anything you like.
UPD: My bad. You can use both window.location and window.location.href. Also, in the above example I removed options
processData: false,
contentType: false,
because they are used if you send FormData. You might want to consider using FormData though and pass it to data :) which is very helpful when sending forms with files
With FormData it will look like this:
$(document).on('submit','.your-form-selector', function(e){
e.preventDefault();
var data = new FormData(this); // "this" is your form and includes all the form fields
$.ajax({
type: "POST",
url: 'actionlog.php',
data: data, // FormData goes here
dataType: 'json',
processData: false,
contentType: false,
beforeSend: function(){},
success: function(response){
window.location.href = '/';
},
error: function(){
console.log('You got an error');
}
});
});
I am getting data from ajax call. But that data is coming in Jquery and I have saved it in a variable. Now I want that data to be utilized for running some php and mysql code. Can any one solve this?
$("#submit_bt").click(function () {
var name = $('#search-box').val();
var dataString = 'name=' + name;
if (name == "" ){
$('.alert').show().html('Please fill all information')
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "read_data.php",
data: dataString,
cache: false,
success: function (result) {
alert(result);
//$('.alert').show().html(result).delay(2000).fadeOut(3000);
setTimeout(function(){window.location.href = "index.php";},2000);
}
});
}
return result;
});
If what you want is to navigate to the index.php page on click of that button, then, do it this way:
$("#submit_bt").click(function () {
var name = $('#search-box').val();
var dataString = 'name=' + name;
if (name == "" ){
$('.alert').show().html('Please fill all information')
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "read_data.php",
data: dataString,
cache: false,
success: function (result) {
alert(result); //you may remove this. use console.log for debugging your js next time
setTimeout(function(){window.location.href = "index.php?result="+result;},2000); //why the timeout?
}
});
}
});
The easier and proper solution should be to re-use ajax to use this variable in another PHP file.
$("#submit_bt").click(function () {
var name = $('#search-box').val();
var dataString = 'name=' + name;
if (name == "" ){
$('.alert').show().html('Please fill all information')
}
else
{
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "read_data.php",
data: dataString,
cache: false,
success: function (result)
{
//AJAX code to execute your MySQL query
$.ajax({
type: "POST",
url: "read_data2.php",
data: result,
cache: false,
success: function (result)
{
//Manage your read_data2.php output
}
});
}
});
}
I have this function to open dialog box via ajax :
function gps(uid) {
$.ajax({
type: "POST",
url: "file.php",
data: {},
success: function (data) {
for(i=0;i<data.length;i++){
$('#gps').html("Data : "+data[i]['latitude']+"");
}
}
});
$('#gps').dialog('open');
return false;
}
How can i dynamically change the content of opened dialog box like every 1 second without closing the dialog box?
setInterval( function()
{
gps(uid);
},1000);
var loading_progress = false;
function gps(uid) {
//stop queue callbacks
if ( loading_progress ) return;
loading_progress = true;
$.ajax({
type: "POST",
url: "file.php",
data: "data="+uid,
async: false,
cache: false,
success: function (data,status) {
if( ( status == "success") {
var i;
for(i=0;i<data.length;i++){
$('#gps').html("Data : "+data[i]['latitude']+"");
loading_progress = false;
}
}
});
$('#gps').dialog('open');
}
problem when upload image MVC with ajax, i have controls_class.php content function upload_img_admin in class settings calling from page c_ajax_img.php
page c_ajax_img.php
include_once('controls_class.php');
$ajax_up_img = new settings;
$ajax_up_img->upload_img_admin(#$_FILES['file_upload']);
function upload_img_admin in class settings
function upload_img_admin()
{
$dir_name=dirname(__FILE__)."/upload/";
$path=#$_FILES['file_upload']['tmp_name'];
$name=#$_FILES['file_upload']['name'];
$size=#$_FILES['file_upload']['size'];
$type=#$_FILES['file_upload']['type'];
$error=#$_FILES['file_upload']['error'];
...
...
if( isset($_FILES['file_upload']) )
{
move_uploaded_file($path,$dir_name.$name);
...
...
echo "ok";
}
else
{
echo "File not found";
}
}
function ajax get data form and send to function previous for upload image
$(document).ready(function() {
$(".btn_upload_avatar").click(function(e) {
$('.msgerror').hide().fadeIn(1000).html( '<div class="loading"></div>');
e.preventDefault();
$.ajax({
type:"POST",
url: "../controls/c_ajax_img.php",
cache: false,
processData:false,
contentType: false,
data:$("#form_up_img").serialize(),
success: function (data)
{
if(data == 0){
$('.msgerror').addClass('msgerror_in2').html(data);
}else{
$('.msgerror').addClass('msgerror_in2').html(data);
}
}
});
});
});
Something like this might help you mate.. :)
$(document).ready(function () {
$('#UploadForm').on('submit',(function(e) {
$('.msgerror').hide().fadeIn(1000).html('<div class="loading"></div>');
e.preventDefault();
var formData = new FormData(this);
formData.append('file', input.files[0]);
$.ajax({
url: '../controls/c_ajax_img.php',
data: formData,
contentType: false,
type: 'POST',
processData: false,
success: function (data) {
console.log("success");
console.log(data);
},
error: function (data) {
console.log("error");
console.log(data);
}
});
});
});
FYI
FormData
ProcessData is set to false so that it prevents jQuery from automatically transforming the data into a query string