Develop Reference

Cross domain jquery ajax api call with custom headers is not hitting the server

I want to call a webservice from client side using jquery ajax(with custom headers). And I almost did that. I had set Access-Control-Allow-Origin to force.com and salesforce.com since I'm calling the webservice from salesforce.
When I try to call that API without the custom headers, its getting the response where as when I called with the headers, its not getting the response.
With custom headers
jQuery.ajax({
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
url: 'https://xxx.myclient.com/xxx/xxx/register',
beforeSend: function(xhr) {
xhr.setRequestHeader('orgid', '00D90000000oxxxx');
xhr.setRequestHeader('userid', '00590000001Dxxxxxx');
},
success: function(response) {
alert('success' + JSON.stringify(response));
},
error: function(jqXHR, textStatus) {
alert('jqXHR : ' + JSON.stringify(jqXHR) + ' textStatus : ' + textStatus);
}
});
also tried with
jQuery.ajax({
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
url: 'https://xxx.myclient.com/xxx/xxx/register',
headers: {
"orgid": "00D90000000oxxxx",
"userid": "00590000001Dxxxxxx",
},
success: function(data) {
alert(JSON.stringify(data));
},
error: function(jqXHR, textStatus) {
alert('jqXHR : ' + JSON.stringify(jqXHR) + ' textStatus : ' + textStatus);
}
});
But in both the above cases it is not hitting the server and getting the error message
When I'm not using any headers, then its hitting the server
jQuery.ajax({
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
url: 'https://xxx.myclient.com/xxx/xxx/register',
success: function(response) {
alert('success' + JSON.stringify(response));
},
error: function(jqXHR, textStatus) {
alert('jqXHR : ' + JSON.stringify(jqXHR) + ' textStatus : ' + textStatus);
}
});
Its getting the success response
In response headers it shows that
Access-Control-Allow-Headers: Content-Type
Only content-type is there, Is that the problem?
Whether we need to add our custom headers here?
And when I analysed the network using firefox firebug, it is showing as given below
POST Register (without any headers passed)
OPTIONS Register (with custom headers)
I dont know why this is happening
Can any one help.
Thanks in Advance ..:)

Try adding your custom headers (orgId and userId) in the "Access-Control-Allow-Headers" list of the service you are calling.

Increment counter on DataBase using jquery

I have a field on my database that stores a number of clicks, and want to increment that when I click in a link(<a href="#selecoes" data-identity="31" id="clicks" clicks="0">) of my tag cloud. Note that I get the number of clicks throught my webservice. This is I do so far:
index.html
<div id="tags">
<ul id="tagList">
<li>
<img src='.../>Brasil
</li>
</ul>
main.js
$('#tagList a').live('click', function() {
findByIdSelecoes($(this).data('identity'));
});
function findByIdSelecoes(id) {
console.log('findByIdSelecoes: ' + id);
$.ajax({
type: 'GET',
url: rootURLSelecoes + '/id/' + id,
dataType: "json",
success: function(data){
$('#btnDelete').show();
console.log('findByIdSelecoes success: ' + data.nome);
currentWine = data;
renderDetails(currentWine);
findJogadoresBySelecao(id);
addClick(currentWine);
}
});
}
function addClick(selecao) {
console.log('addClick na seleção: ' + selecao.id_selecao);
$.ajax({
type: 'PUT',
contentType: 'application/json',
url: rootURLSelecoes + '/update/' + selecao.id_selecao,
dataType: "json",
data: formToJSON(),
success: function(data, textStatus, jqXHR){
alert('clicks updated successfully');
},
error: function(jqXHR, textStatus, errorThrown){
alert('updateWine error: ' + textStatus);
}
});
}
function formToJSON() {
return JSON.stringify({
"clicks": ($('#clicks').val())++ // i dont know what i have to do so i try this(don't work)
});
}
I can't update the dataBase when I click the link in the list. The function formToJSON doesn't increment the value in the database.

Try to do this
Make a var number like global, and do this:
function addClick(selecao) {
console.log('addClick na seleção: ' + selecao.id_selecao);
number = parseInt(selecao.clicks,10);
$.ajax({
type: 'PUT',
contentType: 'application/json',
url: rootURLSelecoes + '/update/' + selecao.id_selecao,
dataType: "json",
data: formToJSON(),
success: function(data, textStatus, jqXHR){
alert("Done: " +number);
},
error: function(jqXHR, textStatus, errorThrown){
alert('updateWine error: ' + textStatus);
}
});
}
function`enter code here` formToJSON() {
var ola = parseInt(number,10);
ola = ola +1;
return JSON.stringify({
"clicks": parseInt(ola,10)
});
}

Get entire html page as response with javascript

I am doing an Ajax post to a specific page where I either can get an ID as response if everything went as expected or I could get a random html page and a http 400 as response if something went wrong. In the error case I want to open up the entire html page in a new window. I have tried the following but it is not working - it sets the variable data to [object Object] instead of the intended html page.
$.ajax({
type: "POST",
url: postUrl,
    data:'message=' + message + '&' + 'title=' + title,
statusCode: {
400:function(data) {
var newWin = open('','windowName','height=300,width=300');
newWin.document.write(data);
},
},
success: function(json) {
alert("Post success");
},
    error: function(jqXHR, textStatus, errorThrown) {
        alert("Error connecting to page.");
    }
});

Specify dataType : 'html' and change the success function variable. Example:
$.ajax({
type: "POST",
dataType: 'html',
url: postUrl,
data:'message=' + message + '&' + 'title=' + title,
statusCode: {
400:function(data) {
var newWin = open('','windowName','height=300,width=300');
newWin.document.write(data);
},
},
success: function(html) {
alert("Post success");
$("#myDiv").html(html);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error connecting to page.");
}
});

Why json data of ajax call ended up as querystring parameter?

I have the following ajax call. I want to send out the data in jason format. However I noticed in Fiddler that the data is converted to query string parameters. What I am doing wrong?
$.ajax({
type: "GET",
url: "StatusService.svc/CheckStatus",
data: JSON.stringify({"companyName":"paymins"}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('ok!');
alter(data.toString());
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + ' / ' + errorThrown);
}
});

Change the type of your request to a post.
$.ajax({
type: "POST",
url: "StatusService.svc/CheckStatus",
data: JSON.stringify({"companyName":"paymins"}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert('ok!');
alter(data.toString());
},
error: function (jqXHR, textStatus, errorThrown) {
alert(textStatus + ' / ' + errorThrown);
}
});

Get cannot contain a body. Use post for that.

GetCitiesByRegion is not defined?

I have a page, and i've got a link looking like:
<span>Nordjylland</span>
And in my Javascript file, i've got a function called GetCitiesByRegion(), however, when clicking the link, i get an error, saying that GetCitiesByRegion is not defined?
The function looks like this:
function GetCitiesByRegion(id) {
var params = '{"id":"' + id + '"}'
var request = {
type: "GET",
async: false,
cache: false,
url: "http://" + location.hostname + "/webservices/services.svc/GetCitiesByRegion",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: params,
success: function (result) {
alert("Data Loaded: " + result);
},
error: function (xhr, status, error) {
alert('Fejl ved webservice: error: ' + error);
}
};
$jq.ajax(request);
}