Django how to send variable to ajax call and update javascript value - ajax

I have a script on my page that takes a variable, but this variable is first created after a form is submitted. How can I create an AJAX call to my views after a user hits the submit button and then request the variable myID and then update my javascript on the html page with the value that it received?
The javascript that needs to be updated:
<script>
stripe.redirectToCheckout({
sessionId: "{{myID}}",
}).then(function (result) {
// Diplay result.error.message to your customer
});
</script>
<script>

I am assuming that you have a view that returns JSON with the myID field and you are using ajax. You can make a post request and use the response to get the myID value.
$.post("{% url 'view-url-name' %}, form_data, function(data, status){
stripe.redirectToCheckout({
sessionId: data.myID,
}).then(function (result) {
// Diplay result.error.message to your customer
});
});

Related

How to make a ajax request using post method

I made an ajax request using post method in django..its wokring perfectly..the problem is its calling the complete html page rahter than a div..i want to call only a div..i tried but unable to find the exact solution..
<script>
$(document).ready(function(){
$('#Category').change(function(event){
event.preventDefault();
var e = document.getElementById("Category");
var value = e.options[e.selectedIndex].value;
$.ajax({
url: "/charts/",
type: "post",
dataType: "html",
data: value,
success: function(data) {
$('#div1').html(data);
}});
return false;
});
});
</script>
I want only div content with id #div1..i already tried find and replace method
What is the nature of the event ? Is it a button ? an Input ?
If it is an input as <input type="submit">, the default action is to reload the page like a form.
Did you check if your div id is really div1?
$("#div1").append("your html code"+data+" your html code")

How to set s:param value in Ajax success body in Struts 2

How can I set s:param value in Ajax success body?
I load a data with Ajax call and I fetch it into datatable
but when I want to set s:param value I can not get its value, below is my code:
$.ajax({
url: "dataPp",
type: 'POST',
dataType : 'JSON',
success: function (res) {
table = $('table#dttable1').DataTable();
table.clear();
$.each(res.dokpp, function(i, item){
var json = res.dokpp[i];
table.row.add(
[json["kodeDok"],
json["fileNameUi"],
json["depPenerbit"],
json["createdDate"],
json["tglBerlaku"],
json["tglKadaluarsa"],
json["urutRev"],
'<s:url var="prev" namespace="/mr" action="prevDasboard">'+
'<s:param name="file">'+json["fileName"]+'</s:param>'+
'</s:url>'+
'preview'
]);
console.log(json["fileName"]);
});
table.draw();
}
});
I fixed this with this code :
'preview'
I use html tag to create a href.
When you use <s:param> tag the value is not yet available.
Struts tags are executed on server when JSP is rendered, but ajax is a javascript code which is executed on the client's browser after response is returned from the server. The server can't know what the value is substituted by the client.
You can render url without parameter and then add it dynamically.
var url = '<s:url var="prev" namespace="/mr" action="prevDasboard"/>?file='+json["fileName"];

refresh ajax function after remove

I got strange situation. after when i delete by ajax some row from table, and got button wich reload ajax function (getlist) i got still this row in table, need to reload browser then this row is not any more on list. How to reload list proper to get result after delete row.
<script>
function getlist () {
$('#getlist').html("<center>Pobieram dostępną listę analiz...</center>");
// Do an ajax request
$.ajax({
url: "views/getjoblist.php",
}).done(function(data) { // data what is sent back by the php page
$('#getlist').html(data); // display data
});
}
$('#getlist-reload').on('click', getlist);
getlist();
</script>
in other page I make delete with ajax POST:
<script>
$('.table').on('click', '.delete', function () {
$(this).closest('tr').remove();
job = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'views/delete.php',
data: { jobname : job },
})
});
</script>
This is likely due to the cache. I suggest you set the HTTP header "Last-Modified" in the HTTP response header and the browser will automatically refresh the cache if it older.

Laravel 5.2 post route returns plain html text

whenever I send a post request to 'tasks/add' i want the user to return to a new page, but all I get is plain html text in a popup.
Route.php code
Route::post('tasks/add', function() {
return view('secrets');
});
this is my ajax request :
$("#frm").submit(function(e){
e.preventDefault();
var customer = $("input[name=customer]").val();
var details = $("input[name=details]").val();
var dataString = 'customer='+customer+'&details='+details;
$.ajax({
url: "tasks/add",
type:"POST",
beforeSend: function (xhr) {
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data : dataString,
success:function(data){
console.log(dataString);
alert(data);
},error:function(){
alert("error!!!!");
}
}); //end of ajax
});
});
Anybody has had this issue before?
You are using Ajax to call your Route method. So when Route::post(...) returns the view 'secrets', it returns it to the Ajax method and becomes held by the data variable. Saying return in your Routes file doesn't magically mean redirect to a certain view, it is just like any other function that returns a value.
You currently have alert(data) which just says make an alert with whatever is held by data which in this case is the html text of your view.
Instead, take out the alert() and put
window.location.replace('<path/to/secrets>')
to redirect to the page you want upon success.
Assuming your Routes file has something like :
Route::get('/secrets', function() {
return view('secrets');
});
You could say
window.location.replace('/secrets')

JQtouch Ajax not able to send the same request twice

Im creating an app using JQ mobile, it has a list of items and you select one and it send the goes to another page that does the ajax request.the problem is that if I go back select a different item from the list and then go back to the first item and select it. it will not show the item again just the previously selected item.
here is my code
<div id="get">
<script>
$.ajax({
url: "http://s336087876.onlinehome.us/pmc/newapp/php/showCoupon.php?id=" + test,
cache: true,
success: function(data) {
$('.coupon').html(data);
},
// Error handler
error: function(req, status, err){
alert('not working');
}
});
</script>
Also here is a link so you can see what it is doing.
http://s336087876.onlinehome.us/pmc/newapp/html/
Try adding "cacheGetRequests: false" in initialization. for more info http://code.google.com/p/jqtouch/issues/detail?id=35

Resources