We Keep Coding

Simple POST request using jQuery leads to unexpected redirect

I've got a few similar POST request on a website. In one case, the request is working (data is stored on the server), but then, there's an unexpected redirect. I send/receive data using jQuery. On the backend, I use the PHP framework Laravel.
Let's say I'm on myapp.dev/clients/123. Then I click the store-data-button and data is sent to/received from the server (Let's assume $('#resubmission_note').val() === 'abc'):
// AJAX request
$('#store-data-button').on('click', function() {
let ajaxRequest = $.ajax({
url: '/resubmissions',
type: 'POST',
data: {
// An integer, some text, and a date
'client_id': $('#id').html(),
'resubmission_note': $('#resubmission_note').val(),
'resubmission_due_date': $('#resubmission_due_date').val()
}
});
ajaxRequest.done(function(returned_id) {
// Removed all code here for testing. Browser still redirecting.
});
});
But then the browser is redirected to myapp.dev/clients/123?resubmission_note=abc.
The network tab in Chrome devtools says
Name:123?resubmission_note=abc
Status: 200
Type: document
initiator: Other
There's data appended in the URL, that should only be the case with GET request, AFAIK. I checked whether some other JavaScript code might interfere, but couldn't find store-data-button or resubmission_note in any unexpected files.
Any advice on how to fix the problem or how to debug it?

jQuery AJAX call sending as OPTIONS and missing Authorization header

I'm starting to get stumped on this. I'm developing a C#.NET Web API service and frontend application to use it. I've been having a lot of difficulty using a token to authenticate my requests and jQuery seems to be having trouble. I can get a token just fine, but jQuery won't add it to an Authorization header in further requests.
My setup is an index.html page with several jQuery Mobile pages inside it. It starts on a '#login' page, which sends a request to my /Token URI with a username, password, and grant type. This is successful and the return is the token. The page changes to '#home' and a test ajax call is sent to /api/values to grab value. The problem is that instead of adding a header called 'Authorization', jQuery adds an 'Access-Control-Request-Headers' with the value 'accept, authorization' instead. At first I thought it was a CORS issue, but the request works fine when I use Advanced Rest Client in Chrome to send the request.
AJAX Call from '#Home'
$.ajax({
url: 'http://slalomtest2.azurewebsites.net/api/values/',
type: 'GET',
async: true,
dataType:"json",
beforeSend: function(request){
request.withCredentials = true;
request.setRequestHeader("Authorization", "Basic " + Token);
},
success: function(result){
console.log(result);
},
error: function(request, error){
$.mobile.changePage("#login");
}
});
The bad request the AJAX sends
This is what it looks like from Advanced Rest Client in the same browser
Thanks in advance for the help, I've been banging my head against the wall all day.

Links brought in after loading a page through jquery AJAX do not work

Running into an issue with a mobile app. We are doing an jQuery ajax to call in a remote page off our sever (using Cordova as the shell). This brings in the remote code (bare-bone HTML) and we plan to use local resource to style it.
getMyPage: function() {
$.ajax({
type: "GET",
url: "http://localhost:8888/shell/",
crossDomain: true,
timeout: 10000,
success: function(data) {
$("appbody").html(data);
},
error: function( xhr,err ) {
alert('Cannot Connect to the Internet');
}
});
}
It brings in the page fine, but when we click on any of the links (served from the CMS Drupal) nothing happens. Through inspector it thinks the files are local using the file:// prefix which do not exist. Anyone know how to make those links perform the same AJAX call to the remote server?
i.e all the links perform the same ajax GET call.

Javascript/AJAX debugging

I'm trying to implement a custom Google Hangouts app and am stuck trying to pass the Hangouts ID from the Hangouts app to my own app. Hangouts runs on Google's server so I believe it's a cross domain issue.
I have this code in the body of my custom Hangouts app, which is loaded in an iframe in the overall Hangouts window:
<body>
<script>
var postHangoutId = function(hangoutId) {
console.log("in function(hangoutId)");
$.post({
url: "https://www.myserver.com",
crossDomain: true,
dataType: "json",
data: {
"hangouts_id" : hangoutId
},
success: function( response ) {
console.log( response ); // server response
}
});
}
gapi.hangout.onApiReady.add(function() {
console.log("gapi.hangout.onApiReady.add");
postHangoutId(gapi.hangout.getHangoutUrl().split('/').pop());
});
window.onload = function() {
console.log("hangouts load");
console.log("onload getURL" + gapi.hangout.getHangoutUrl());
}
</script>
My App
The main goal is to get the Hangouts ID and Post it to my server. Nothing seems to be happening, so I've littered the code with console.log statements. The header, "My App", is displayed, so at least I know the custom app is running.
However, when I open Chrome's Developer Tools on the opened Hangouts window and go to the Console tab, this is all I see:
I've removed my AJAX call and rerun the app to make sure, and these errors are still there, so they aren't related to the AJAX call. As you can see, none of my logs are here. What am I doing wrong?

You need to use JSONP as dataType in jQuery Ajax Cross Domain Requests
Javascript Security blocking the requests in your code
$.post({
url: "https://www.myserver.com",
crossDomain: true,
dataType: "jsonp",
data: {
"hangouts_id" : hangoutId
},
success: function( response ) {
console.log( response ); // server response
},error : function(err){console.log(err)}
});

Ajax requests are not cached by jQuery

I am using below code for making ajax request. I am trying to determine request are cached or not by using chrome tool. In request tab i see all datas always pulled from server and there is no any "cache" in status text column.
How can i detect that request are cached or not. And I think result are not cached so what is wrong on my code ?
$.ajax({
url: $(this).attr('href'),
dataType:'html',
cache:true,
success: function (data) {
}
});

cache is by default set to true for HTML. If you sent to false jQuery adds a parameter in a query as in '_=201105XXXX".
If the query was not part of the URL, it means that the request page was cached.