I have this url:
(r'^oyla/(\d+)/$', oyla),
I have this view:
#login_required
def oyla(request, id):
if request.is_ajax():
entry = Entry.objects.get(pk=id)
entry.points += 1
entry.save()
if 'HTTP_REFERER' in request.META:
return HttpResponseRedirect(request.META['HTTP_REFERER'])
return HttpResponseRedirect('/')
I have these in html:
{{ ent.points }}
Vote Up
and this is my js:
<script type="text/javascript">
$("a.oyla").click(function(){
var curr_elem = $(this) ;
$.get($(this).attr('href'), function(data){
var my_div = $(curr_elem).parent().find("b");
my_div.text(my_div.text()*1+1);
});
return false;
});
</script>
I want to run the vote up when I click "Vote Up" I want to see the points are increasing without any page refresh. It does not works. It says
The view baslik.views.oyla didn't return an HttpResponse object.
What can I do to fix this?
Thanks.
Try using $.ajax with cache disabled. I've read that using $.ajax works with all browsers but $.get won't send the ajax header with IE. In that case is_ajax() isn't True and no HttpResponse object is returned. Use:
$("a.oyla").click(function(){
var $curr_elem = $(this);
$.ajax({
url: $curr_elem.attr('href'),
cache: false,
success: function (data) {
$curr_elem.parent().find("b").text(my_div.text()*1+1);
}
});
return false;
});
Related
I am developing a web application through Django and I want to get information from my javascript to a view of Django in order to access to the database.
I am using an ajax call as this post shows.
I am calling the js in html by an onclick event :
sortedTracks.html
...
<form action="{% url 'modelReco:sortVideo' video.id %}">
<input type="submit" value="Validate" onclick="ajaxPost()" />
</form>
...
clickDetection.js
//defined here
var tracksSelected = [];
//function that fill tracksSelected
function tagTrack(track_num){
if(tracksSelected.includes(track_num)){
var index = tracksSelected.indexOf(track_num);
tracksSelected.splice(index, 1);
}else{
tracksSelected.push(track_num);
}};
//ajax function
function ajaxPost(){
$.ajax({
method: 'POST',
url: '/modelReco/sortedTracks',
data: {'tracksSelected': tracksSelected},
success: function (data) {
//this gets called when server returns an OK response
alert("it worked! ");
},
error: function (data) {
alert("it didnt work");
}
});
};
So the information I want to transfer is tracksSelected and is an array of int like [21,150,80]
views.py
def sortedTracks(request):
if request.is_ajax():
#do something
print(request)
request_data = request.POST
print(request_data)
return HttpResponse("OK")
The ajax post works well but the answer I get is only an empty Query Dict like this :
<QueryDict: {}>
And if I print the request I get :
<WSGIRequest: GET '/modelReco/sortedTracks/?tracksSelected%5B%5D=25&tracksSelected%5B%5D=27&tracksSelected%5B%5D=29'>
I have also tried to change to request_data=request.GET but I get a weird result where data is now in tracksSelected[]
I've tried to know why if I was doing request_data=request.GET, I get the data like this tracksSelected[] and get only the last element of it.
And I found a way to avoid to have an array in my data (tracksSelected) on this link
This enables me to have :
in views.py
def sortedTracks(request):
if request.is_ajax():
#do something
print(request)
request_data = request.GET.getlist("tracksSelected")[0].split(",")
print(request_data)
and in clickDetection.js
function ajaxPost(){
tracksSelected = tracksSelected.join();
$.ajax({
method: 'POST',
url: '/modelReco/sortedTracks',
data: {'tracksSelected': tracksSelected},
success: function (data) {
//this gets called when server returns an OK response
alert("it worked! ");
},
error: function (data) {
alert("it didnt work");
}
});
};
This little trick works and I am able to get the array data like this,
print(request_data) returns my array such as [21,25,27]
Thank you for helping me !
According to me to access the data which is sent in the ajax request can be directly accessed .
For Example:
def sortedTracks(request):
if request.method == 'POST':
usersV = request.POST.get('tracksSelected')[0]
for users in usersV:
print users
return HttpResponse("Success")
else:
return HttpResponse("Error")
The correct syntax is data: {tracksSelected: tracksSelected},
so this is a hard one for me to try and explain. I have a razor page that when a button is clicked it calls a javascript function which makes an ajax call to a handler in the back end. The handler does some stuff and gets a id that I want to pass to another page. I am trying to use the RedirectToPage function in the back end but the screen never opens. It successfully calls the handler but when the handler does its return, nothing happens. Is there a way to do this?
Here is the javascript/ajax code that gets called from a button being clicked.
#section scripts{
<script>
// Get the account ID Data from the row selected and return that to the program.
function getIDData(el) {
var ID = $(el).closest('tr').children('td:first').text();
var iddata = {
'ID': ID
}
console.log(iddata);
return iddata;
}
// Submit the data to a function in the .cs portion of this razor page.
$('.copybtn').click(function () {
var accountid = JSON.stringify(getIDData(this));
$.ajax({
url: '/Copy_Old_Account?handler=CopyData',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
type: 'POST',
dataType: 'json',
data: { offenderid: offenderid },
success: function (result) {
},
});
});
</script>
}
For my code behind code that I am calling from the ajax call, that's below here:
public ActionResult OnPostCopyData (string accountid)
{
// Do my other stuff here
return RedirectToPage("Account_Information", new { id = account.Account_ID });
}
Any help would be appreciated and if doesn't make sense, I can try and clear up any questions.
I think this is what you want, I did something similar in an MVC 5 project and I haven't tested it in Razor Pages yet:
This would be your method, note that you should add your Controller to the Url.Action, and I personally haven't tried passing a parameter along with the url but I image it'll work just fine
[HttpPost]
public ActionResult SubmitSomething()
{
return Json(new { redirectUrl = Url.Action("Account_Information", "YOUR_CONTROLLER_NAME", new { id = account.Account_ID }) });
}
And then this would be your Ajax request, I updated the success portion
// Submit the data to a function in the .cs portion of this razor page.
$('.copybtn').click(function () {
var accountid = JSON.stringify(getIDData(this));
$.ajax({
url: '/Copy_Old_Account?handler=CopyData',
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
type: 'POST',
dataType: 'json',
data: { offenderid: offenderid },
success: function (result) {
if (result.redirectUrl !== undefined) {
window.location.replace(result.redirectUrl);
} else {
// No redirect found, do something else
}
},
});
});
This isn't tested, so I can only hope that it works for you right now
Edit: Updated the Url.Action to use OP's view names and parameters
Redirect to page returns a 301 response, which will be in the format:
HTTP/1.1 301 Moved Permanently
Location: http://www.example.org/index.asp
To redirect after the ajax call you can redirect to the requested url by:
success: function (result) {
window.location = result.getResponseHeader('Location');
}
I am using jquery elements that a user can drag and drop. I post the order of the elements to django using ajax.
Inside the django view I am able to work with the data that is posted from ajax.
Django views:
#this is the view where the jquery elements are being ordered by the user
def inside_exam(request):
if request.method=='POST':
form = MyForm(request.POST)
if form.is_valid():
#here I am able to retrieve the data from ajax and save it to a django model, code not shown here
return redirect('exam_results')
#the view redirected to from the inside_exam view
def exam_results(request):
#here I set the score for the exam and set the context, code not shown here
print(“all is set”)
return render(request, 'quizresults.html', context)
The print(“all is set”) is executed and I am able to print the html for quizresults.html in the browser. No errors are in the terminal window and this is shown in the terminal: "GET /exam_results/ HTTP/1.1" 200 8981.
But the same template is still shown, it is not showing the quizresults.html template. Any idea why the render(request, 'quizresults.html', context) is not working as expected?
By the way: when I use a django form without the jquery, everything works fine and the quizresults.html template is shown.
Since I want to show the user another template, but not update the current template, is ajax maybe not the correct way to send the jquery data in this case? If not, what would be a better way?
Edit, ajax code:
function dataToSend() {
{% load static %}
var node2 = document.getElementById('sortable');
var idsInOrder = $("#sortable").sortable('toArray');
console.log("the ids");
console.log(idsInOrder);
var fd = new FormData();
for(var i=0; i<idsInOrder.length; i++) {
j = i+1
fd.append('a'+j, idsInOrder[i]);
}
$.ajax({
type: 'POST',
data: fd,
cache: false,
processData: false,
contentType: false
}).done(function(data) {
//The data from the quizresults.html template is printed out here, but that template is not shown, the template in the browser is still the insidequiz.html template.
console.log("the data");
console.log(data);
});
}
window.onload = function init() {
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]);
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) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
};
Using redirect shortcut method in Django will return a HttpResponseRedirect object back to the AJAX, which it will be processed as a 302 Found status code, which then will make another request to the redirected resource and get the content. This does not seem to be the right way to do it, even though you get the content.
You can use the method exam_results to do the other work and return the required context, which shall be used to return the HttpResponse object using render method.
Then, with the data you get, you can replace the document with the template you receive.
Solution:
# views
#this is the view where the jquery elements are being ordered by the user
def inside_exam(request):
if request.method=='POST':
form = MyForm(request.POST)
if form.is_valid():
#here I am able to retrieve the data from ajax and save it to a django model, code not shown here
context = exam_results(request)
return render(request, 'quizresults.html', context)
# method to set the score for the exam
# return context from this method
def exam_results(request):
#here I set the score for the exam and set the context, code not shown here
# build context
return context
# javascript
$.ajax({
type: 'POST',
data: fd,
cache: false,
processData: false,
contentType: false
}).done(function(data) {
//The data from the quizresults.html template is printed out here, but that template is not shown, the template in the browser is still the insidequiz.html template.
console.log("the data");
console.log(data);
// replace the page with the new template
var newDoc = document.open("text/html", "replace");
newDoc.write(data);
newDoc.close();
// update the url
window.history.pushState('', 'title', "newurl");
});
Ref: History API MDN
I figured that ajax makes things complicated when it comes to redirecting. What I ended up doing was to create an HTML form (that is hidden) and then post that form to a url using javascript. No need for ajax.
HTML code:
<form id="form1" action='{% url 'inside_exam' %}' method="post" style="display:none;">
{% csrf_token %}
</form>
<p> <button type='submit' style="visibility" class="button button-long button-primary" onclick="sendData(this);">Send</button></p>
javascript code:
function sendData() {
var idsInOrder = $("#sortable").sortable('toArray');
var form = document.getElementById('form1');
for(var i=0; i<idsInOrder.length; i++) {
j = i+1
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", 'a'+j);
hiddenField.setAttribute("value", idsInOrder[i]);
form.appendChild(hiddenField);
}
console.log("form is:");
console.log(form);
form.submit();
}
I have js function which sends ajax request to the controller and succ. return result and append that result into desired div inside partial page. Now I want to implement pagination and I'm using $("#dataList").on("click", ".pagedList a".getPage); to listen when user click on pagination links to determine which page number is clicked
var getPage = function () {
var $a = $(this);
GetTabData(a);
return false;
}
and finally I'm sending pagenumber to the next function which sends pagenumber together with activeTab variable to the controller
function GetTabData(xdata, pageNumber) {
$.ajax({
url: ('/Home/GetTabData'),
type: 'POST',
contentType: 'application/json',
dataType: 'html',
data: JSON.stringify({ activeTab: xdata, page: pageNumber }),
success: function (result) {
$("[id^='tab-'] div").remove();
var currentTab = $("#tab-" + xdata).html(result);
},
error: function () { alert("error"); }
});
}
Something is definit. wrong here cause on controller side I'm using
Request.IsAjaxRequest()
to allow only ajax request to paginate data and I'm getting Not ajax request. Once more, If I remove pagination option completly and send just activeTab everything works.
Any thoughts?
Your GetTabData function takes 2 arguments: xdata and pageNumber but when calling it you are passing only one:
var $a = $(this);
GetTabData(a);
So you probably are getting a javascript error and the return false statement is never reached.
I'm very new to symfony2 and I'm getting some problems to load a view using ajax when the user clicks on a div. Using firebug I can see the data is returned but I can not append the result in the page.
My Code:
//Default Controller
public function indexAction($num, Request $request)
{
$request = $this->getRequest();
if($request->isXmlHttpRequest()){
$content = $this->forward('PaginationBundle:Default:ajax');
$res = new Response($content);
return $res;
}
return $this->render('PaginationBundle:Default:index.html.twig', array('num' => $num));
}
public function ajaxAction()
{
return $this->render('PaginationBundle:Default:page.html.twig');
}
}
My Js:
When clicking on #target, I'd like to load page.html.twig in my div
$("div#target").click(function(event){
t = t +1;
$.ajax({
type: "POST",
cache: "false",
dataType: "html",
success: function(){
$("div#box").append(data);
}
});
});
I'm using isXmlHttpRequest() in my controller to detect if it's an ajax request to load ajaxAction. I get that view on firebug but it's not appended in my div#box. div#box exists in index.html.twig
Thanks everybody in advance
In your
$("div#target").click(function(event) event you didn't specify the url parameter in ajax call, and another thing is you must specify an argument inside the 'success'
parameter of ajax call.
$("div#target").click(function(event){
t = t +1;
$.ajax({
type: "POST",
url: "{{path('yourpath-means header name in routing.yml')}}",
cache: "false",
dataType: "html",
success: function(result){
$("div#box").append(result);
}
});
});
Hope this helps...
Happy coding
This has nothing to do with symfony but with your ajax options. Pece is right though: You can use the return from §this->forward directly as it is a Response object.
The problem lies within your ajax options. You must pass the data object within your inner function or data is simply null. Try this:
success: function(data){
$("div#box").append(data);
}
I don't get your forward to treat AJAX call. Try this :
if($request->isXmlHttpRequest()){
return $this->forward('PaginationBundle:Default:ajax');
}
Controller::forward() already returns a Response object ;)