Ajax upload file not work - ajax

I dont know what wrong with this code but it show an error message "Uncaught TypeError: Illegal invocation"
$('.upload-document').on("click", function() {
$(this).parent().append("<input type='file' class='upload-btn' style='visibility:hidden' />");
$('.upload-btn').click();
$('.upload-btn').on("change", function(e){
var file = $(this)[0].files[0];
$.ajax({
type: 'POST',
url: "upload-file.php",
data: {
file: file
},
success: function (data) {
console.log(data);
}
});
})
})

Change your code to this:
$('.upload-document').on("click", function () {
$(this).parent().append("<input type='file' class='upload-btn' style='visibility:hidden' />");
$('.upload-btn').click();
})
$('body').on("change",'.upload-btn', function (e) {
var file = $(this)[0].files[0];
$.ajax({
type: 'POST',
url: "upload-file.php",
data: {
file: file
},
success: function (data) {
console.log(data);
}
});
})

Related

Ajax Post integer not posting error

<script>
$(document).ready(function () {
$("#MyForm").click(function () {
var dd = JSON.stringify({
Id: $("#CustomerId").val(),
name: $("#Name").val(),
gender: $("input:checked").val(),
mobile: $("#Mobile").val(),
adress: $("#Adress").val()
});
alert("hi");
$.ajax({
url: '/Cust/Create',
type: 'POST',
contentType: "application/json",
dataType: 'json',
data: JSON.stringify(dd),
success: function (data) {
alert("Data sent to store:" + data);
},
error: function () {
alert("failed in posting");
}
})
});
});
</script>
Iam not able to get the values of the CustomerId and Mobile where as iam getting null values over to the controller can anybody give some suggestion
Thanks in advance.

How to load a file using AJAX once and use its data multiple times?

I have this code where I load an XML file through AJAX:
$("#list").on("click", "li", function (event) {
$.ajax({
url: 'test.xml',
type: "get",
context: this,
success: function (data) {
alert("success");
},
error: function () {
alert("failure");
}
});
})
The issue is that I have a long list of clickable elements that use this code which is not very efficient. Is there a way to call AJAX function once and then use the data produced for other items on the list?
Just save the return value somewhere
$("#list").on("click", "li", function (event) {
var data = $("#list").data('test');
if (data){
//use data
}
else{
$.ajax({
url: 'test.xml',
type: "get",
context: this,
success: function (data) {
$("#list").data('test', data);
// use data
alert("success");
},
error: function () {
alert("failure");
}
});
}
})

JSON Stringify Empty string

I've recently ran into a problem with JSON.stringify not taking an empty string.
I solved it with a small fix but i'm still bothered why it doesn't work with an empty string
Here is my code.
$(function () {
$('#searchButton').click(function () {
var test = $("#DownloadsSearch").val();
alert(test);
if (test === "") test = "1";
displayAjaxLoading(true);
$.ajax({
url: '#(Url.RouteUrl("DownloadSearch"))',
contentType: 'application/json',
dataType: 'json',
data: JSON.stringify({
searchText: test,
type: '#Model.Type'
}),
type: 'POST',
success: function (data) {
if (data.length > 0) {
$("#Review").empty();
$.each(data, function (id, options) {
$("<p/>").appendTo("#Review").append($('<a>').attr('href', 'http://www.pvs4you.com/' + options.URL).text(options.ProductID));
// $('<a>').attr('href', options.URL).text(options.ProductID).appendTo("#Review");
});
} else {
$("#Review").empty();
$("<p/>").html("<b>#Model.Title wasn't found.</b>").appendTo($("#Review"));
}
$('#small-searchterms').autocomplete({
disabled: false
});
displayAjaxLoading(false);
},
error: function (xhr, ajaxOptions, thrownError) {
$("#Review").empty();
$("<p/>").html("<b>#Model.Title wasn't found.</b>").appendTo($("#Review"));
}
});
});
});

Simple jQuery / Ajax error

I have this code:
var custID = 1;
$.ajax({
url: 'php/viewCustomer.php',
type: 'GET',
data: '{custID: ' + custID + '}',
dataType: 'json',
cache: false,
beforeSend: function () {
$('#display').append('<div id="loader"> Lodaing ... </div>');
},
complete: function () {
$('#loader').remove();
},
success: function (data) {
//do something
},
error: function () {
alert('could not process');
}
});
there is an error and alerts the error message could not process, so I tried to debug it like this:
var custID = 1;
$.ajax({
url: 'php/viewCustomer.php',
type: 'GET',
data: '{custID: ' + custID + '}',
dataType: 'json',
cache: false,
beforeSend: function () {
$('#display').append('<div id="loader"> Lodaing ... </div>');
},
complete: function () {
$('#loader').remove();
},
success: function (data) {
//do something
},
error: function (jqXHR) {
alert('Error: ' + jqXHR.status + jqXHR.statusText);
}
});
which outputs:
200 OK
so if it is ok, why on earth is it executing the error: function. Confused, please help.
Your data string is incorrectly formatted, if you are intending it to be a JSON object. There was a previous question about this: Jquery passing data to ajax function
Instead, try:
data: JSON.stringify({custID: custID}),
The format is (key):(variable). My previous answer have placed quotes around the variable, which is not necessary.

asp.net mvc 3 json does not work

This is my jquery with json
$('#btnVerificationOk').click(function () {
var verId = $('#trans_verification_id').val();
var verCode = $('#trans_verification_code').val();
$.ajax({
url: '/Profile/CompleteTransactions',
type: 'POST',
data: { },
dataType: 'json',
success: function (result) {
alert(result);
},
error: function () {
alert('ERROR ERROR !!!!!!!!!!!!');
}
});
});
And My C# method:
[Authorize]
[HttpPost]
private JsonResult CompleteTransactions()
{
return Json("Done");
}
Its always alerts 'ERROR ERROR !!!!!!!!!!!!' i tried debugging but CompleteTransactions method is not firing
And this is my second json which is bellow and works good
$('#btnTransfareOk').click(function () {
var userName = $('#transfare_username').val();
var amount = $('#transfare_amount').val();
if (userName == '' || amount == '') {
$('#transfare_error_list').html('Please fill boxes.');
} else {
$.ajax({
url: '/Profile/TranfareMoney',
type: 'POST',
data: { ToUsername: userName, Amount: amount },
dataType: 'json',
success: function (result) {
$('#transfare_error_list').html(result.text);
$('#trans_verification_id').val(result.id);
$('#transfare_username').val("");
$('#transfare_amount').val("");
},
error: function () {
$('#transfare_error_list').html('Oops... Error.');
}
});
}
});
I'm not 100% sure, but shouldn't you controller action handler be public ?

Resources