Redirection using ajax - ajax

I am trying to redirect to a page after successful ajax. Here is my code:
$.ajax({
type: "GET",
url: "blogdelete.jsp",
data: val,
async: true,
cache: false,
success: function (msg) {
window.location.href="hodlogin.jsp";
}
});
This is not working. Any suggestions??
Thanks in advance!

Seems success block not executing.
You must add error block to check any errors or use browser console.
$.ajax({
type: "GET",
url: "blogdelete.jsp",
data: val,
async: true,
cache: false,
success: function (msg) {
console.log('success');
alert('success');
},
error: function(){
console.log('error');
alert('error');
}
});

I would start by putting an alert (or break point in firebug) inside of the success function to be 100% sure its being called. If it is then I would try these options:
var url = "hodlogin.jsp";
window.location = url;
Or
$(location).attr("href", url);
If those still fail and you are sure there being called then double check your url. Maybe its not in the same directory as the javascript that is calling the window.location. You could try an absolute path in that case just to see if it works.

Related

Variable loses some value when used in Ajax API Call

I have an issue that causes my variable “tempid” to lose some of its values when put into the second API call. As you can see from my image, if I log the variable to console (console.log(tempid)) it shows just fine. However, as soon as I place it in an API call it has some of the value but not all. Could you please help me by explaining why this would happen?
[console example][1]
$(document).ready(function() {
$.ajax({
url: "/api/Template/GetTemplates?classId=7ac62bd4-8fce-a150-3b40-16a39a61383d",
async:true,
dataType: 'json',
success: function(data) {
$(data).each(function (data) {
if (this.Name === "Name of Template"){
var tempid = this.Id
console.log (tempid)
var tempurl = "/api/V3/Projection/CreateProjectionByTemplate?id=" + tempid + "&createdById=703853d4-ffc4-fce3-3034-0b838d40c385"
$.ajax({
url: tempurl,
async: false,
dataType: 'json',
success: function(data) {
}
});
}
});
}
});
})
[1]: https://i.stack.imgur.com/gyesK.png
I found the answer, the console is just showing a shortened version of the URL and happened to cut off part of the tempid. Thank you

Check if a URL exists then open in iframe

Currently, I open a url with
window.open("#iframeid", myurl);
However, ideally I want to check if the url exists before loading it.
I've changed my code to the following, but I cannot see where I'm going wrong.
Nothing appears to happen.
if I change .add to .src, I get an error.
Any help would be appreciated.
$.support.cors = true;
$.ajax({
url: myurl,
dataType: 'html',
success: function(data){
$("#iframeid").add(data);
},
error: function(data){
alert("didn't work");
}
});
You can execute code based on the statusCode:
$.ajax({
url: myurl,
dataType: 'html',
statusCode: {
200: function(){
//run your success code
},
404: function() {
alert( "page not found" );
}
}
});

Why isn't the JSONP callback function getting invoked?

I am trying to use jsonp to access the data at:
https://github.com/users/jbranchaud/contributions_calendar_data
However, none of the solutions I have tried are resulting in either the callback or the success function getting invoked. When I use Chrome/Firefox inspection tools, I can look at the script and see that the response was 200 Ok and that the response text contains the data from the above URL. Nevertheless, neither the callback function nor the success function get called at any point. Any ideas about how to get this to work?
Here is my most recent attempt at getting this to run:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function parseResults(results) {
console.log('hello function callback.');
}
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: true,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});
</script>
When I load the page, I see the 'error with jsonp request' in the console, so there is an error with the ajax request. Ideas of why this request isn't succeeding?
In the ajax request, try to set the attribute 'jsonp' to false (jsonp: false).
Basically, JQuery generate an automatic function callback name, like this : JQuery1223...34.
In your case, you ,already, explicitly set the jsonpCallback function name. so you have to put jsonp attribut to false.
your code should be like this :
$.ajax({
url: 'https://github.com/users/jbranchaud/contributions_calendar_data',
type: 'post',
dataType: 'jsonp',
jsonp: false,
jsonpCallback: 'parseResults',
success: function(data, textStatus, jqXHR) {
console.log('success_function');
console.log(data);
},
error: function() {
console.log('error with jsonp request');
}
});

How to use an ajax call's response to manipulate a dynamic page?

I am trying to submit a form with the user's inserted data and get the html back from the page called (update.asp).
How do I get the html response and how do I write it to a div on the page? The response would be "success".
If my page throws a 500 or other type of error, how can I handle that?
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
// how do i catch the response? is this the right place?
},
error: function(data) {
// how do I catch the error code here?
}
});
The response from the server in both cases would be passed to the callback as the data variable in your example. Try using console.log(data) inside of your callbacks to see the result in your developer console.
$('input#btnUpdate').click( function() {
$.ajax({
url: 'update.asp',
type: 'post',
dataType: 'json',
data: $('#myForm').serialize(),
success: function(response) {
$("#yourDIV").html(response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError); //output, 500
}
});
});
More on this: ajax()

AJAX on click not calling/loading as it should

I have been learning AJAX for the best part of 2 hours, trying to get my head around how to get this to work, it seems it is calling the function as if I put an alert in, it all works fine.
I tried using another method and it seemed to call the function on it's own and it would load what the .php page is echoing.
What am I doing wrong in order for it to not work at all?
<script type="text/javascript">
$('a.fire').click(call_ajax);
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
</script>
Edit: I have also just tried
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
Which also does not work.
EDIT: I have now got code that GET's the php file I wanted, but for some reason does it on it's own
<script type="text/javascript">
function call_ajax() {
$.ajax({
type: "GET",
url: "http://127.0.0.1/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
}
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$('a.fire').click(call_ajax());
});
});
The issue with this code is that it fires on it's own
EDIT: Now have new code, that is attempting to fire according to Firebug console but I get the alert ERROR: error, so I don't have a clue what is happening in order for it to fail, I have also tried many different URL's with no working solution
$('a.fire').click(function () {
$.ajax({
type: "GET",
url: "/onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
},
error:function(xhr, text, error){
alert("Error: " + text);
}
});
});
SOLVED: I have now got it to work! For some reason my anchor had a href of "", which would cause it to reload the page and removing my GET from the page
ajax will only work if it's the same domain. This means that if you execute jQuery from domain x to domain y, it won't work. This is for safety-reasons to prevent websites from loading from another website. Does your jQuery-ajax call work if you remove the 127.0.0.1 from your url?
Furthermore I guess you should add the click-function inside your $(document).ready(); function, like this:
$(document).ready(function(){
$('a.fire').click(function() {
$.ajax({
type: "GET",
url: "onlineshop/admin/scripts/test.php",
dataType: "html",
success: function(html){
$("#holder").append(html);
}
});
});
});
for testing purposes, you can also use the complete function inside your ajax and alert your data. firebug can be helpful too to find your problem :)

Resources