I have a problem in my ajax script it wont show the dialog box after ajax success if i put datatype: 'json' and if I remove the dataType: 'json' the dialog shows pop after ajax success.
my script only shows my dialogbox if i remove the dataType.
$('#OppaForm').ajaxSubmit({
type: "POST",
url: "Oppa/view/editOther.php",
data: $('#OppaForm').serialize(),
cache: false,
success: function (response) {
$("#dialog-confirm-updateOther").dialog("open");
}
});
And I have an ajax script that shows the dialog box even the dataType is pressent.
$('#OppaForm').ajaxSubmit({
type: "POST",
url: "Oppa/view/photo.php",
dataType: "JSON",
data: $('#OppaForm').serialize(),
cache: false,
success: function (response) {
if (Number(response) == 1)
{
$("#dialog-confirm-changedImage").dialog("open");
$('#imageInput').replaceWith($('#imageInput').val('').clone(true));
}
}
});
if (Number(response) == 1)
this line will cause problem , beacuse response will not be 1 in case you need data type json
you can not compare like this
you will need to iterate through your json contents
Related
I was wondering if there is a way to prevent the Modal from showing up when an ajax call returns an error. I've seen a few posts here already that use
e.stopPropagation();
but I couldn't manage to make that work. My ajax call looks as follow
$.ajax({
url: url,
data: data,
dataType: 'json',
cache: false,
type: "POST",
error: function (e) {
//show error message
$('#alertdone').removeClass('hidden');
},
//if ajax call is successful populate form fields and hide error message
success: function (data) {
//hides the error message
$('#alertdone').addClass('hidden');
}
});
Thanks
I am assuming that you need to hide (don't show) the modal if the AJAX calls fails (since there's a difference between ajax call failing and returning error from server side).
For that you need to remove your data-attribute from HTML and do something like this:
$.ajax({
url: url,
data: data,
dataType: 'json',
cache: false,
type: "POST",
error: function (e) {
$('#alertdone').removeClass('hidden');
$("modal_selector").modal('hide');
},
//if ajax call is successful populate form fields and hide error message
success: function (data) {
$('#alertdone').addClass('hidden');
$("modal_selector").modal('show');
}
});
If you want to hide/ show modal depending on condition use modal()
$.ajax({
url: url,
data: data,
dataType: 'json',
cache: false,
type: "POST",
error: function (e) {
//show error message
$('#alertdone').removeClass('hidden');
$("Your_modal_id").modal('hide');
},
//if ajax call is successful populate form fields and hide error message
success: function (data) {
//hides the error message
$('#alertdone').addClass('hidden');
$("Your_modal_id").modal('show');
}
});
I have a jsp file which has a form. And the form has some text fields and image upload field.I need to send text data to one servlet and image to another servlet when I click the submit button. is this possible ?
Yes.. I think it is possible .. the way I know you have to use a javascript library like jquery. Below is how it happens
On form submit you prevent the post to servlet. Then you can use ajax like shown below to send 2 requests to 2 different servlets. Below shows one ajax call.. you can do another after that call. I trying to show you below
$("form").submit(function(evt){
evt.preventDefault();
var formData = new FormData($(this)[0]);
var author = $("#author").val();
$.ajax({
url: 'fileUploadServletUrl',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
alert(response);
}
});
$.ajax({
url: 'textDataServletUrl',
type: 'POST',
data: {'author':author },
async: false,
cache: false,
processData: false,
success: function (response) {
alert(response);
}
});
return false;
});
I have an AJAX script like this
function savetoDB(inp) {
var userID = (FB.getAuthResponse() || {}).userID;
jQuery.ajax({
url: URL,
type: 'GET',
data:{ 'input': JSON.stringify(inp) },
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: true,
success: function(msg) {
console.log(msg);
alert(msg);
}
});
}
The problem I am facing is that the php returns (echo's) some string , but I am unable to see it in alert.
I used the inspect element and Inside inspect element I can see the Response, and also the status is 200, what could be the reason that it is not showing the response in alert?
You are returning a JSON object, so it won't show in alert, which only displays strings. Convert it to a string first:
success: function(msg) {
console.log(msg);
alert(JSON.stringify(msg));
}
Replace "URL" with the actual url of file you're extracting data from otherwise you'll get an empty response as is the case.
I need to have a html div populated with the json data received from the server which is a json-rpc server and it retruns an application/jsson-rpc content type and i can see the result in the chrome and firefox dev tools... I need to view it as part of the page inside a given div
i have this script to populate the mybox div but it gives nothing
var returnedinfo;
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});
I also tied having the populating function outside the ajax block when the request is done
request.done(function(msg) {
$("#mybox").text(msg);
});
This just return an empty array like this
[object Object]
and nothing else help will be appreciated.
you need to append the key of the json item.
$("#mybox").html(json.key);
Add dataType to your ajax request.
var request = $.ajax ({
url: "/url",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
success: function(json) {
alert("success sent ajax");
$("#mybox").html(json);
returnedinfo = json;
});
try this my working example
look contentType and html function to replace html of mybox element
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
url: 'url',
success: function (dataRes) {
$('#mybox').html(dataRes);
},
error: function(a,b,c) {
}
});
Note that in this case dataRes in success function is an html string like <strong>test</strong>. If your server side function returns a json object you should add dataType: 'json' to ajax request and then you can use properties of dataRes object like here $('#mybox').html(dataRes.property1);
I am facing a problem with the JQuery ajax function.
I am trying to send a simple json through the ajax asshown below.
$.ajax({
url: 'NewFile.jsp',
type: 'GET',
data: {"datasource":"hello1", definition:[{val1:"hello3"}]},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(msg) {
alert("Successfully posted "+JSON.stringify(json));
}
});
The problem is that when I do
System.out.println(request.getParameter("datasource"));
System.out.println(request.getParameter("definition"));
in my NewFile.jsp then I get hello1 for the first and null for the second.
Why I get null value in the second println()?
Thanks
In the url variable inside your ajax object, give the full URL of your request. Like so:
$.ajax({
url: 'www.google.com/',
type: 'GET',
data: {"datasource":"hello1", definition:[{val1:"hello3"}]},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function(msg) {
alert("Successfully posted "+JSON.stringify(json));
}
});
Also, always make sure that there is a failure variable inside your object literal, so that you know it happened, but failed. Helps with debugging.