Here's my Ajax code:
$("#generateImage").click(function () {
var url = $(this).data('url');
var currentUrl =window.location.href;
$.ajax({
type: "post",
contentType: "application/json; charset=utf-8",
url: url,
data: "{'urlVar':'"+ currentUrl +"','mywidth':'250','myheight':'480'}",
success: function (response) {
if (response != null && response.success) {
alert("Success");
window.location = '#Url.Action("GetData", "MyController", new { urlVar = currentUrl })';
} else {
alert("Failed");
}
},
});
In this part of code:
new { urlVar = currentUrl })';
currentUrl says:
Does not exist in the current context;
My Question is:
How to make currentUrl to be valid on that particular location?
Otherwise there's no error on data: part? data: "{'urlVar':'"+ currentUrl
The problem is currentUrl defined as client-side variable in this line:
var currentUrl = window.location.href;
Note that #Url.Action() helper is executed server-side, you cannot use currentUrl client-side variable inside it as action parameter (it doesn't exist as server-side variable). You need to use query string like this to redirect into GetData action method:
if (response != null && response.success) {
alert("Success");
// use query string here
window.location = '#Url.Action("GetData", "MyController")?urlVar=' + currentUrl;
}
If you want to get URL from server-side, modify your Url.Action helper to include either Request.Url, Request.RawUrl or Request.Url.AbsoluteUri:
// alternative 1
window.location = '#Url.Action("GetData", "MyController", new { urlVar = Request.Url.AbsoluteUri })';
// alternative 2
window.location = '#Url.Action("GetData", "MyController", new { urlVar = Request.Url.ToString() })';
Update:
For multiple parameters, you can utilize either query string parameters:
window.location = '#Url.Action("GetData", "MyController")?urlVar=' + currentUrl + '&width=' + varwidthvalue + '&height=' + varheightvalue;
Or if both varwidthvalue and varheightvalue are server-side variables, just use this one:
window.location = '#Url.Action("GetData", "MyController", new { urlVar = Request.Url.ToString(), width = varwidthvalue, height = varheightvalue })';
Related
I have my Ajax in a jQuery function:
btnApplyConfig.js:
$(".btnApplyConfig").click(function(){
var token = $("input[name=csrfmiddlewaretoken]").val();
// Some other vars I'm sending properly
console.log('token: '+token); //printing correctly
$("#"+frm).submit(function(e){
e.preventDefault();
console.log('Post method via ajax');
$.ajax({
url: '/ajax/validate_config',
type: 'POST',
data: {
'token': token,
//and other stuff I'm sending properly
},
dataType: 'json',
});
});
});
my Django view:
def validate_config(request):
token = request.GET.get('token', None)
#some other vars I've sent ok with ajax
data = {
#some vars
'token': token,
}
if request.method == 'POST':
item = MyClass.objects.filter(my_keyword=my_filter_values).update(my_ajax_values)
return JsonResponse(data)
All the data is being processed properly, the only problem for me is that I'm getting the following error:
Forbidden (CSRF token missing or incorrect.): /ajax/validate_config/
I've put some prints in view in order to check if vars are being sent properly, and yes they are.
How could I handle it?
I checked some tutorials but I couldn't find a solution so far.
A very simpler way
let cookie = document.cookie
let csrfToken = cookie.substring(cookie.indexOf('=') + 1)
$.ajax({
url: 'url/path',
type: 'POST',
headers: {
'X-CSRFToken': csrfToken
}
})
You can use this. You don't have to put anything in your view for it. It will automatically find it.
$.ajax({
url: ,
type: "POST",
data: {
'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]").val()
// plus other data
},
dataType: 'json',
success: ,
});
You probably also want to add if request.is_ajax() to your view.
This was the solution that worked for me in this case:
Added this code before the Ajax code:
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
I am trying to implement antiforgerytoken in my project. I am able to implement it when making ajax call below.
function docDelete(id) {
var _upload_id = $("#docId").val();
var _comments = $("#name").val();
var forgeryId = $("#forgeryToken").val();
$("#dialog-form").dialog("open");
$.ajax({
type: 'GET',
cache: false,
url: '/DeleteDocument/Delete',
dataType: 'json',
headers: {
'VerificationToken': forgeryId
},
data: { _upload_id: _upload_id, _comments: _comments },
success: function (data) {
$('#dialog-form').dialog('close');
$('#name').val('');
$('#dvSuccess').val(data);
Getgridata(data);
}
});
}
above code works fine. But in some cases i am making ajax request as below.
var forgeryId = $("#forgeryToken").val();
function GetGrid() {
$.ajax(
{
type: "GET",
dataType: "html",
cache: false,
url: '/Dashboard/GetGridData',
headers: {
'VerificationToken': forgeryId
},
success: function (data) {
$('#dvmyDocuments').html("");
$('#dvmyDocuments').html(data);
}
});
}
Above code does not send any token to below method.
private void ValidateRequestHeader(HttpRequestBase request)
{
string cookieToken = string.Empty;
string formToken = string.Empty;
string tokenValue = request.Headers["VerificationToken"]; // read the header key and validate the tokens.
if (!string.IsNullOrEmpty(tokenValue))
{
string[] tokens = tokenValue.Split(',');
if (tokens.Length == 2)
{
cookieToken = tokens[0].Trim();
formToken = tokens[1].Trim();
}
}
AntiForgery.Validate(cookieToken, formToken); // this validates the request token.
}
}
In layout.cshtml i have implmented code to get token.
<script>
#functions{
public string GetAntiForgeryToken()
{
string cookieToken, formToken;
AntiForgery.GetTokens(null, out cookieToken, out formToken);
return cookieToken + "," + formToken;
}
}
</script>
<input type="hidden" id="forgeryToken" value="#GetAntiForgeryToken()" />
The variable tokenValue catching null each time. So what i understood is through headers i am not able to send token value. I tried many alternatives. So anyone suggest me how can i overcome this issue? Thank you in advance.
I tried as below still i am getting null value.
var token = $('[name=__RequestVerificationToken]').val();
var headers = {};
headers["__RequestVerificationToken"] = token;
alert(token);
var forgeryId = JSON.stringify($("#forgeryToken").val());
function GetGrid() {
$.ajax(
{
type: "GET",
dataType: "html",
cache: false,
url: '/Dashboard/GetGridData',
cache: false,
headers: headers,
success: function (data) {
$('#dvmyDocuments').html("");
$('#dvmyDocuments').html(data);
}
});
}
REQUEST URL http://localhost:9090/rest-api/fetchDetailedProductInfo?prodId=1&tempId=123
fetchDetailedProductInfo: function (prodId) {
var self = this;
var URL = 'http://localhost:9090/rest-api/fetchDetailedProductInfo'
$.ajax({
url: URL,
dataType: 'json',
contentType:'json',
type:'GET',
data: {
'prodId':prodId,
'tempId':123
},
success:function(responce) {
self.renderUI(responce.json);
},
error: function (err) {
console.log('ERROR',err)
}
});
},
# SERVER SIDE
router.get('/rest-api/fetchDetailedProductInfo', function (req, res) {
var prodId = req.param('prodId');
var tempId = req.param('tempId');
res.send(prodId + '----' + tempId);
}
I think you confused with req.params and req.query. Here is link to another question
Use req.query
var prodId = req.query.prodId;
var tempId = req.query.tempId;
Please see this
function WyslijRequestAjaxem(){
var pole1 = document.getElementById("data_albo_czas");
var url1 = "date_time_now.php";
alert(pole1.value);
alert("xd");
$.ajax({
url: url1,
type: "get",
dataType: "html",
data: { zmienna: pole1.value},
success: OdbierzResponse
})
}
function OdbierzResponse(response) {
var p = document.getElementById("pt1");
p.innerHTML = response.responseText;
}
In the case of a html dataType for jQuery's AJAX function, the first argument passed to the success callback is the responseText, so change your function to:
function OdbierzResponse(response) {
var p = document.getElementById("pt1");
p.innerHTML = response;
}
As explained in the docs this function is passed three arguments:
The function gets passed three arguments: The data returned from the server, formatted according to the dataType parameter; a string describing the status; and the jqXHR (in jQuery 1.4.x, XMLHttpRequest) object.
If you need the actual jqXhr object to work with you'd need to do:
function OdbierzResponse(response, status, xhr) {
var p = document.getElementById("pt1");
p.innerHTML = response;
...
}
and use xhr to access the properties or methods that you require.
function WyslijRequestAjaxem() {
var pole1 = document.getElementById("data_albo_czas");
var url1 = "date_time_now.php";
alert(pole1.value);
alert("xd");
$.ajax({
url: url1,
type: "get",
dataType: "html",
data: {
zmienna: pole1.value
},
success: function (response) {
OdbierzResponse(response); // call OdbierzResponse function with parameter here
}
})
}
Try change
p.innerHTML = response.responseText;
to
p.innerHTML = response;
folks
we are facing a strange issue with jquery ( 1.8.3) and we are using cakePHP
as per the image
Our assumption is we are sending the data( about 500 +) with ajax call in POST method.
we are having this issue in all the major browsers.
as above( in chrome) , we are getting this error in console we passed 618 destinations in ajax call.
let us know the work around to solve this problem.
My ajax call is as below
function validate_test() {
$("#btn1").empty();
var ele = document.getElementById('frm_searchDateFrom').value;
var ele2 = document.getElementById('frm_searchDateTo').value;
var sub_url = '<?php echo $this->Html->url('/', true); ?>';
var url = sub_url + "admin/reports/check_originator/" + ele +"/"+ ele2 +"/"+ $("#destination").val();
alert(url);
jQuery.ajax({
type: "POST",
datatype: "json",
url: url,
success: function(data)
{
var el = $("select#btn1").multiselect();
var d;
var results=data.split(",");
for(d=0;d<results.length;d++) {
var d;
var v = results[d], opt = $('<option />', {
value: v,
text: v
});
opt.appendTo( el );
el.multiselect('refresh');
}
}
})
}
In your JQuery Ajax method instead of posting all those details as url query para meter send by wrapping those details in a object.
function validate_test() {
$("#btn1").empty();
var ele = document.getElementById('frm_searchDateFrom').value;
var ele2 = document.getElementById('frm_searchDateTo').value;
var sub_url = '<?php echo $this->Html->url('/', true); ?>';
var url = sub_url + "admin/reports/check_originator/";
var formdata=ele +"/"+ ele2 +"/"+ $("#destination").val();//put form data's in an object
alert(url);
jQuery.ajax({
type: "POST",
datatype: "json",
data:formdata,//send the form data object in post
url: url,
success: function(data)
{
var el = $("select#btn1").multiselect();
var d;
var results=data.split(",");
for(d=0;d<results.length;d++) {
var d;
var v = results[d], opt = $('<option />', {
value: v,
text: v
});
opt.appendTo( el );
el.multiselect('refresh');
}
}
})
}
Also refer this fiddle(not mine):
http://jsfiddle.net/clickthelink/Uwcuz/1/