What i am doing wrong here? - ajax

Hey I don't know why $(this) not working in my ajax code.I want to append response in #feedback element.
here is my html structure image
AJAX
$("form#userComment").on("submit",function(e){
e.preventDefault();
$.ajax({
url : "request/postComment.php",
type : "POST",
data : new FormData(this),
dataType : "text",
contentType : false,
processData : false,
beforeSend : function(http){
$("#upload").val("Posting..");
$("#comment").val("");
},
success : function(response,status,http){
var text = response.split(" ");
$("#upload").val("Post");
if(text[3] === "'error'"){
$(".response").html(response);
$(".response").slideDown();
}else{
$(this).prev().append(response);
}
},
error : function(http,status,error){
$("#comment").val("Post");
$('.response').html("<span class='error'>Something went wrong</span>");
$(".response").slideDown();
}
})
})

Related

URL for result of AJAX

I have AJAX for sort.
$.ajax({
url : orderby_params.ajaxurl,
data : data,
type : 'POST',
beforeSend : function(xhr){
},
success : function(data){
if(data){
$('.list-thumbs').html(data);
}
}
});
Everything works fine.
How can I get URL for AJAX result?
Such as: https://domen.com/shop/?orderby=price

Use variable out of ajax

How I can use count variable out of ajax? In ajax function "count" shows count, but dessous nothing.
var count;
$.ajax({
cache : false,
dataType: 'json',
type : "POST",
url : "count.php",
success : function(tdata){
count = tdata;
console.log(count); //this works
}
});
console.log(count); //this doesn't work
$.ajax() is async, you need to wait for it to finish.
var count;
$.ajax({
cache : false,
dataType: 'json',
type : "POST",
url : "count.php",
success : function(tdata){
count = tdata;
console.log(count); //this works
}
})
.done(() => {
// this code runs after ajax is resolved
console.log(count);
});
Refer to http://api.jquery.com/jQuery.ajax/ for other chaining methods

Cross Domain AJAX call not working in IE11

I am trying a make a cross domain AJAX call. It works in Chrome and Firefox but not in IE11. IE11 seems to drop the AJAX call. IE11 Developer Tools Network reveals that a request is not even made to the url. Here is snippet of code I have.
$(function() {
var url = "https://example.com?abc=xyz";
$.ajax({
type : "GET",
contentType : "text/plain",
url : url + "&callback=?",
dataType : 'jsonp',
xhrFields : {
withCredentials : false
},
headers : {},
success : function() {
console.log("success");
},
error : function() {
console.log("error");
},
complete : function() {
console.log("complete");
}
});
});
$.ajax({
type : "GET",
cache: false,
or before ajax call
$.ajaxSetup({ cache: false });
$.ajax({
type : "GET",

How to pass parameters without using url

I have number of values.
I need to pass these values to another page without using the window.location
function sample(cID){
var clg = ${param.clg};
$.ajax({
type : "post",
url : "sampleShow?clg="+clg+"&cID="+cID+"&level="+level,
dataType : "json",
cache : false,
beforeSend : function(xhr) {
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
},
success : function(response) {
window.location= "cc"
},
error : function(xhr) {
console.log("error"+xhr.status);
},
complete : function() {
}
});
}
This is my controller ajax function:
#RequestMapping(value = "sampleShow", method = RequestMethod.POST)
public #ResponseBody
String showc(HttpServletRequest request,Model model)
{
model.addAttribute("ccID", request.getParameter("cID"));
model.addAttribute("clg", request.getParameter("clg"));
model.addAttribute("level", request.getParameter("level"));
return "{\"sucess\":\"true\"}";
}
I need to get the values in cc page.
Your ajax call should like:
$.ajax({
type : "post",
url : "sampleShow",
data : {clg: clg, cID: cID, level: level },
success : function(response) {
window.location= "cc"
},
error : function(xhr) {
console.log("error"+xhr.status);
},
complete : function() {
}
});
No need to specify dataType: "json", as you are not sending json. Data is passed using 'data'. Refere jQuery.ajax() for more details.
You can also use shorthand method jQuery.post(), to post instead of jQuery.ajax()
You may also like to read on what-is-the-difference-between-post-and-get.

is this ajax call for below rest Service is correct or not?

Sample rest Service is below:
#RequestMapping(value = "/image/upload", method = RequestMethod.POST)
public void uploadImage(#RequestParam("image") MultipartFile fileObj)
throws Exception
{
System.out.print("File Name:"+fileObj.getOriginalFileName());
}
and i wrote ajax code like this :
and my accept application format is Json when i call this i get 400 error
$('#user_click').click(function(){
var data = {
image:$("#file_1").val
};
$.ajax({
url : "http://localhost:8080/MyProject/image/upload",
type : "POST",
contentType : false,
crossDomain : true,
data : JSON.stringify(data),
dataType : 'json',
async : true,
success : function(result) {
alert('The Selected Items uploaded');
},
error: function(message){
alert("Error:"+JSON.stringify(message));
}
});
is this ajax code is correct or not?
No, it will not work since ajax request will not transfer file data.
The solutions are
Use a file upload plugin like jquery-form
Ex:
$('#myForm').ajaxSubmit({
url : 'http://localhost:8080/MyProject/image/upload',
type : "POST",
dataType : "json",
success : function(response) {
},
error : function(response) {
}
});
Use html5 FormData (Sadly no IE support)

Resources