We Keep Coding

Javascript code after file Download

I want to start some Javascript code after some file download from another domain.
jQuery.support.cors = true;
var formVars = $("form[name='myForm']").serialize();
var ajaxUrl = "http://some/path/openFilename.xlsx";
$.ajax({
url: ajaxUrl, type: 'GET', cache: false, data: formVars, timeout: 300000,
success: function (data) {
//Do some stuff here
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error" + thrownError);
},
complete: function (data) {
closeWaitScreen();
}
});
Often read solution is
window.location = ajaxUrl;
but this does not work for me, because it starts a new request without submitting the data from the form. (Same with window.open)
Here is my code that works without option to handle closeWaitScreen() after:
$("form[name='jasperlogin']").submit();
Of course also starts a new request when its used in the $.ajax
Any ideas how to handle it?

Variable undefined after Ajax request

I have a globally defined JavaScript function which performs an ajax request to fetch some data from a model. The issue I am having is that when I load the page and inspect element, it gives the error:
Uncaught ReferenceError: response is not defined
Here is the function:
function getRating(work_id)
{
$.ajax({
url: '/read/getRatings',
type: 'GET',
async: true,
data: { field1: work_id},
success: function (data) {
//your success code
response = data;
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
return response;
}
The function gets called in my HTML like this:
<div class="extra">
<script>
document.write(getRating(112));
</script>
</div>
Error in browser console]:
The Ajax request works fine as when I inspect it in Chrome's developer tools, the correct response comes back. However the variable response does not get initialized in the $.ajax() method.
When I try to add $response = ""; at the start of the function so that it gets explicitly defined, it always returns the empty string and the variable does not get changed inside the ajax request as it should.
Anyone know what's going wrong here?

This is a common misunderstanding of asynchronous programming. You don't have a result to return when the initial call ends-- you need a callback to do the writing for you (the success part).
function getRating(work_id, selectorToWriteTo)
{
$.ajax({
url: '/read/getRatings',
type: 'GET',
async: true,
data: { field1: work_id},
success: function (data) {
//your success code
$(selectorToWriteTo).html(data);
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error: " + thrownError);
}
});
}
HTML:
<div class="extra" id="myDiv">
<script>
getRating(112, '#myDiv')
</script>
</div>

jQuery Ajax call doesn't seem to work

I am trying to call a page with jQuery Ajax and then display just a simple response if it worked or not, but it doesn't seem to get anything done. In FireBug I don't even get an error. What am I doing wrong here?
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$('.doit').click(function (e) {
e.preventDefault();
$.ajax({
url: "https://www.domain.com/page.php?do=it",
type: "GET"
success: function (data) {
$(".result").html('<strong>Done!</strong>');
},
error: function (xhr, ajaxOptions, thrownError) {
$(".result").html('<strong>Houston, we have a problem.</strong>');
},
timeout: 15000
});
});
</script>
Do it
<div class="result"></div>

You missed the comma after type: "GET". Also, as mentioned by #blex in a comment, you should put your bindings inside an ondomready context, to make sure that your element has been loaded before binding.
$(function(){
$('.doit').click(function (e) {
e.preventDefault();
$.ajax({
url: "https://www.domain.com/page.php?do=it",
type: "GET",
success: function (data) {
$(".result").html('<strong>Done!</strong>');
},
error: function (xhr, ajaxOptions, thrownError) {
$(".result").html('<strong>Houston, we have a problem.</strong>');
},
timeout: 15000
});
});
});

Yammer REST API for create status with topic and get back the topic Id

i want to create yammer status using php and javascript. this is my sample code for that-
<script type="text/javascript" data-app-id="client-id" src="https://c64.assets-yammer.com/assets/platform_js_sdk.js"></script>
<span id="yammer-login"></span>
<script>
$(function(){
yam.connect.loginButton('#yammer-login', function (resp) {
if (resp.authResponse) {
yam.platform.request({
url: "messages.json",
method: "POST",
data: {
"body" : "Message body",
"group_id": "4728511", //group id
"topic1": "TestTopic1",
"og_url": "http://google.com"
},
success: function (res) { //print message response information to the console
alert("The request was successful.");
console.dir(res);
yam.platform.request({
url: "https://www.yammer.com/api/v1/search.json",
method: "GET",
data: {
"search" : "TestTopic1"
},
success: function (data) { //print message response information to the console
alert("The request was successful.");
console.dir(data);
},
error: function (data) {
alert("There was an error with the request.");
console.log(data)
}
});
},
error: function (res) {
alert("There was an error with the request.");
console.dir(res);
}
});
}
});
The status is updated on yammer but its showing error, also i did not get the topic id.
so how can i correct it..??
thanks in advance

It looks like your second call to search.json is the culprit. When using the JS SDK you should be calling the REST resources directly instead of putting in the URL (like: www.yammer.com or api.yammer.com).
You've done this successfully with your first call to messages.json, but should update your second call to this:
yam.platform.request({
url: "search.json",
method: "GET",
data: {
"search" : "TestTopic1"
},
success: function (data) { //print message response information to the console
alert("The request was successful.");
console.dir(data);
},
error: function (data) {
alert("There was an error with the request.");
console.log(data)
}
});

Jquery get data on XHR error

If I make a jquery AJAX request which is succesful I get back my JSON data. However, If I make a request and I get somthing other than a 200 response code back, I cannot get back the data in the Jquery call back. I need the data as it has a description about the data.
success: function (data, tst, xhr) {
$.log('XHR OK');
},
error: function (xhr, tst, err) {
$.log('XHR ERROR ' + XMLHttpRequest.status);
},
Any ideas?
Thanks

In the:
error: function (xhr, tst, err) {
$.log('XHR ERROR ' + XMLHttpRequest.status);
},
you can use
error: function (XMLHttpRequest, textStatus, errorThrown) {
$.log('XHR ERROR ' + XMLHttpRequest.status);
return JSON.parse(XMLHttpRequest.responseText);
},
to get the JSON response in in event of an error.
XMLHttpRequest.responseText
Cheers.

Try the jQuery JSONP plugin. It adds an error callback to a JSON request like so:
$.jsonp({
url: "Your URL",
data: {data: "Some Data"},
dataType: 'jsonp',
timeout: 2000,
success: function(data, status) {
// Do something with data here
},
error: function(xhr, text_status){
// Handle the server error
}
});
It does this using a timeout to wait for the server. Unfortunately, there is no other way of telling if the server response with something other than a 200 response.