I have an app where i display contributor page with content like stories, videos and articles.
Stories, videos and articles are different page models.
template engine: Jinja
framework: Django
CMS: wagtail
I am able to load ajax content in to the tab successfully by creating separate view and corresponding url in urls.py with below ajax settings.
But if i try to use Wagtails routable page feature i get 404.
Ajax settings excerpt:
settings = jQuery.extend(true, {}, {
type: 'get',
dataType: 'json',
url: vUrl,
beforeSend: function (jqXHR, settings) {
console.log(`URL ${settings.url}`)
$tab.html('<br>');
$paneHeader.removeClass(css).addClass(css);
$el.trigger('tabsX:beforeSend', [jqXHR, settings]);
},
success: function (data, status, jqXHR) {
setTimeout(function () {
// $tab.html(data); //Use Json data instead of html
$tab.html(data.html);
$pane.tab('show');
$paneHeader.removeClass(css);
}, 300);
},
error: function (jqXHR, status, message) {
$paneHeader.removeClass(css);
},
}
#route(r'^/contributors/(?P<slug>[-\w]*)/articles')
def show_articles_contributed(self, request):
if request.is_ajax():
print("Inside AJAX")
articles = Contributor.get_articles_by_authors(self.id)
html = render_to_string("organisms/latest_articles.html", {"objects": articles})
return JsonResponse({"html": html}, safe=True)
else:
return super(ContributorPage, self).serve(request)
URL printed from console.log
URL /contributors/test-author/articles
Failed to load resource: the server responded with a status of 404 (Not Found)
class ContributorPage(RoutablePageMixin, PhoenixPage):
first_name = models.CharField(max_length=255, blank=True, default="")
last_name = models.CharField(max_length=255, blank=True, default="")
nickname = models.CharField(max_length=1024, blank=True, default="")
PhoenixPage is nothing but base page with metadata which actually uses base Wagtail Page class.
Any help/guidance would be greatly appreciated.
If question is not clear i can provide more info.
Thanks
I found a problem.
Posting a description for future visitors of this thread.
Ajax code was not an issue here but Wagtail route implementation was.
#route(r'^/contributors/(?P[-\w]*)/articles') <--This route is not correct for ContributorPage
ContributorPage gives URL like /contributor/author_name,
While author_name being ContributorPage slug
I just want to append /articles to it, to get route like /contributor/author_name/articles
so correct route for ContributorPage is
#route(/articles)
So now my main ContributorPage is live at /contributor/author_name
and
Ajax tabs are queried using route urls like,
/contributor/author_name/articles
/contributor/author_name/videos
/contributor/author_name/stories
with corresponding route like,
#route(/articles)
#route(/videos)
#route(/stories)
Related
Im having a hard time figuring out how to integrate this ajax request into my view. I'm still learning how to integrate django with ajax requests.
My first question would be: Does the ajax request need to have its own dedicated URL?
In my case I am trying to call it on a button to preform a filter(Preforms a query dependent on what is selected in the template). I have implemented this using just django but it needs to make new request everytime the user preforms a filter which I know is not efficient.
I wrote the most basic function using JQuery to make sure the communication is there. Whenever the user changed the option in the select box it would print the value to the console. As you will see below in the view, I would to call the ajax request inside this view function, if this is possible or the correct way of doing it.
JQuery - Updated
$("#temp").change( function(event) {
var filtered = $(this).val();
console.log($(this).val());
$.ajax({
url : "http://127.0.0.1:8000/req/ajax/",
type : "GET",
data : {
'filtered': filtered
},
dataType: 'json',
success: function(data){
console.log(data)
},
error: function(xhr, errmsg, err){
console.log("error")
console.log(error_data)
}
});
Views.py
def pending_action(request):
requisition_status = ['All', 'Created', 'For Assistance', 'Assistance Complete', 'Assistance Rejected']
FA_status = RequisitionStatus.objects.get(status='For Assistance')
current_status = 'All'
status_list = []
all_status = RequisitionStatus.objects.all()
status_list = [status.status for status in all_status]
# This is where I am handling the filtering currently
if request.GET.get('Filter') in status_list:
user_req_lines_incomplete = RequisitionLine.objects.filter(Q(parent_req__username=request.user) & Q(status__status=request.GET.get('Filter')))
current_status = request.GET.get('Filter')
else:
user_req_lines_incomplete = RequisitionLine.objects.filter(parent_req__username=request.user).exclude(status__status='Completed')
user_reqs = Requisition.objects.filter(par_req_line__in=user_req_lines_incomplete).annotate(aggregated_price=Sum('par_req_line__total_price'),
header_status=Max('par_req_line__status__rating'))
return render(request, 'req/pending_action.html', { 'user_reqs':user_reqs,
'user_req_lines_incomplete':user_req_lines_incomplete,
'requisition_status':requisition_status,
'current_status':current_status,
'FA_status':FA_status})
def filter_status(request):
status = request.GET.get('Filter')
data = {
'filtered': RequisitionLine.objects.filter(Q(parent_req__username=request.user) & Q(status__status=status)),
'current_status': status
}
return JsonResponse(data)
Urls.py
path('pending/', views.pending_action, name='pending_action')
First: you have to divide your template to unchangeable part and the part that you want to modify with your filter.
Second: for your goal you can use render_to_string. See the followning link https://docs.djangoproject.com/en/2.1/topics/templates/#usage
code example (views.py):
cont = {
'request': request, #important key-value
'your_models_instances': your_models_instances
}
html = render_to_string('your_filter_template.html', cont)
return_dict = {'html': html}
return JsonResponse(return_dict)
In your js file you need to determine relative url "{% url 'name in yours url file'%}"
And in success you need to add next line:
success: function(data){
$(".filter-block").html(data.html);
}
i hope it will help you! Good luck!
I try to send data to the database using AJAX and plugin in October CMS called "API Generator".
I can't find in its documentation or in Google anything that will help me.
The code I have is this:
$data = [{'room_id': {{room.id}}, 'amount': amount, 'arrival': '2018-04-01', 'departure': '2018-04-03,', 'reservation_type': 'owner'}]
$.ajax({
url: '/api/v1/booking/create',
data: $data,
type: "post"
})
.done(function() {
console.log('Success')
})
.fail(function() {
console.warn('Something went wrong');
});
I don't get any error, in fact, I get 'Success' message in console, but data is not added to the database.
What am I doing wrong?
Please help.
Thanks.
Actually you are doing it little wrong [ You are firing Ajax request at wrong end-point ] that Api Plugin is based on https://laravel.com/docs/5.6/controllers#resource-controllers Resource Controller
So, To create an item you need to fire only POST request to Created Api-End Point. You don't need to send Array just send simple plain Object
Refactored your code ( this should work ):
// Plaing object no array
$data = {'room_id': {{room.id}}, 'amount': amount, 'arrival': '2018-04-01',
'departure': '2018-04-03,', 'reservation_type': 'owner'};
$.ajax({
url: '/api/v1/booking', // <- just your Api-End [no create/store]
data: $data,
type: "post" // <- this post request indicates that you want to create/insert
})
.done(function(response) {
// this will always fire when status code is 200
console.log('Success', response);
})
.fail(function() {
// when status code is not 200 this will execute
console.warn('Something went wrong');
});
Why you get success although its not Creating Record ?
Because according to Resource Controller there is no method create in api generator controller so October CMS is treating /api/v1/booking/create [POST] request as 404 page not found and its serving [200] status code with 404 page not found as ajax response.
And 404 page is having 200 status code so it fall in to success category and Ajax thinks it's a successful request and prints success message in console.
if any doubts please comment.
I am using wordpress and php along with ajax to create a random loading of customer reviews on our main page
function loadContent() {
$.ajax({
type: "GET",
url: 'http://skillsetsonline.ssosv.com/contentLoader.php',
data: {
company: 1
},
success: function(data) {
alert(data);
var currReview = document.getElementById('reviewRand');
currReview.innerHTML = data;
}
});
}
setTimeout(loadContent, 10000); // milliseconds, so 10 seconds = 10000ms
<div id="reviewRand" class="elementToFadeInAndOut" style="font-color:#FFF;">Hi how are you</div>
I pasted the ajax command in from a stackoverflow posting that was an accepted answer but may not have it exactly right this does not include the fading CSS code I use but that is working I just need to change the content.
Currently "Hi how are you" fades in every 10 seconds. One thing I have not learned about yet with this ajax command is the
data:{company:1}
I know it simply passes &company=1 to the GET URL but in my case I do not need to send anything and since it should not break anything if it is sent I left it alone not sure if
data:{}
would work and be cleaner
I have verified that the url used does get a random review
formatted like this
I love this program.blah blah.<br>
A USER<br>
A location<br>
June 2016<br>
Each line is formatted in CSS via a class tag
Any ideas would be greatly appreciated
Since the domain you're making the AJAX request to is on a different domain/origin, what you're running in to is a CORS issue. By default, the client will not allow you to update the page with data from an AJAX request that is served on a different origin than the site where the request originated. You can read about making CORS changes here https://enable-cors.org/
A common way around this is to serve the response via JSONP. You can do this in your script at http://skillsetsonline.ssosv.com/contentLoader.php if you have access to change that file. There are also third-party sites that will request that URL for you and create a proxy that serves the response via JSONP, then you can use it on your website.
Here's an example utilizing a JSONP proxy on https://crossorigin.me
function loadContent() {
$.ajax({
type: "GET",
url: 'https://crossorigin.me/http://skillsetsonline.ssosv.com/contentLoader.php',
success: function(data) {
var currReview = document.getElementById('reviewRand');
currReview.classList.add('ready');
currReview.innerHTML = data;
}
});
}
setTimeout(loadContent, 0); /* changed this for the demo */
#reviewRand:not(.ready) {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reviewRand"><img src="http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif"></div>
I'm developing a Node app using Express, Mongoose and Backbone with Marionette.
All routes are working well except the delete route.
If I call this.model.destroy, I always get this error:
DELETE http://localhost:3000/api/user 404 (Not Found)
The 404 is returned in Express's delete route, like if Express didn't support it, but I've seen numerous examples across the web using it.
Here's my setup:
Mongoose Schema:
var UserSchema = new mongoose.Schema(
{
name: String,
email: String,
age: Number
});
User = mongoose.model('User', UserSchema);
ExpressJS Route: (not working)
app.del('/api/user/:id', user.remove);
OR
app.delete('/api/user/:id', user.remove);
This route is called by backbone model.destroy(), but returns error 404.
ExpressJS user.js controller: (works but is not reached because of the 404 before)
exports.remove = function(req, res)
{
var id = req.params.id;
User.findById(req.params.id, function(err, user)
{
user.remove(function(err)
{
if(err) res.json(err);
res.json('all good');
});
});
};
BackboneJS Model
var User = Backbone.Model.extend({
idAttribute: "_id",
url: '/api/user/',
});
BackboneJS client View
var UserView = Backbone.Marionette.ItemView.extend(
{
template: Handlebars.compile($('#userView').html()),
events:
{
'click .delete-button': 'deleteUser'
},
deleteUser: function(event)
{
this.model.remove();
}
});
I always get this error:
DELETE http://localhost:3000/api/user 404 (Not Found)
HOWEVER it works if I use this direct ajax call:
jQuery.ajax({
url:'/api/user/' + this.model.id,
type: 'DELETE',
success:function(data, textStatus, jqXHR)
{
}
});
So, why does this work if I call the route via Ajax, if Backbone internally also uses Ajax? Why does Backbone fail to make such a simple model.destroy()?
Is there a way to configure Backbone Model.destroy method to work well like the Ajax example above? Thanks
Found the problem. Backbone model.remove() was not sending the id because I was using "url" in this way:
Backbone.Model.extend({
url: '/users',
//...
});
That will tell Backbone to use exactly /users as the URL for all actions.
To ensure sending the id using "url", one can use a function:
url: function() {
return '/list_items/' + encodeURIComponent(this.id)
}
Or even better use "urlRoot" instead of "url", let the default "url" function add the id:
urlRoot: '/users'
Working like a charm with urlRoot
I am using Django 1.2.3 to develop a site. My ajax get requests work fine but the post requests work in development mode (127.0.0.1:8000) but not when I push the site into production using apache + nginx.
Here is an example
urls.py:
(r'api/newdoc/$', 'mysite.documents.views.newdoc'),
views.py
def newdoc(request):
# only process POST request
if request.is_ajax():
data= dict(request.POST)
# save data to db
return HttpResponse(simplejson.dumps([True]))
in javascript:
$.post("/api/newdoc/", {data : mydata}, function(data) { alert(data);}, "json");
my alert is never called .... this is a problem because i want to sanitize this data via a django form and the post requests do not seem to making it to the server (in production only).
what am i doing wrong?
UPDATES:
solution: crsf tokens need to be pushed ajax post requests (not gets) as of django 1.3
also, per the link provide below, the following javascript
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
// Only send the token to relative URLs i.e. locally.
xhr.setRequestHeader("X-CSRFToken",
$("#csrfmiddlewaretoken").val());
}
}
});
needs to be changed as follows:
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
// Only send the token to relative URLs i.e. locally.
xhr.setRequestHeader("X-CSRFToken",
$('input[name="csrfmiddlewaretoken"]').val());
}
}
});
the way the csrf token gets rendered in the form must have changed between 1.25 - 1.3??
regardless, it works. thanks for all your help everyone
Can you directly access your javascript files from the production server? Which Django version are you using in production? If you are using 1.2.5+ in production, you will need to push the csrf token to the server during an AJAX post operation.
See the release notes in 1.2.5 and CSRF
To check your Django version:
import django
django.get_version()
Print the above in your production site or from the shell in your production server while making sure you are using the proper Python path.
Your code appears fine with a cursory glance, but I'll show you an example of my ajax form processing code in a hope it'll help with figuring out the error that's occurring. Though, what #dmitry commented should be your first debugging step - use firebug or the inspector to see if the ajax call returns an error.
// js (jQuery 1.5)
$(form).submit(function(event) {
event.preventDefault();
$.post(post_url, $(form).serialize())
.success(function(data, status, jqxhr) {
if (data.success) { // form was valid
$(form)
// other irrelevant code
.siblings('span')
.removeClass('error')
.html('Form Successful');
} else { // form was invalid
$(form).siblings('span').addClass('error').html('Error Occurred');
}
})
.error(function(jqxhr, status, error) { // server error
$(form).siblings('span').addClass('error').html("Error: " + error);
});
});
// django
class AjaxFormView(FormView):
def ajax_response(self, context, success=True):
html = render_to_string(self.template_name, context)
response = simplejson.dumps({'success': success, 'html': html})
return HttpResponse(response, content_type="application/json", mimetype='application/json')
// view deriving from AjaxFormView
def form_valid(self, form):
registration = form.save()
if self.request.is_ajax():
context = {'competition': registration.competition }
return self.ajax_response(context, success=True)
return HttpResponseRedirect(registration.competition.get_absolute_url())
def form_invalid(self, form):
if self.request.is_ajax():
context = { 'errors': 'Error Occurred'}
return self.ajax_response(context, success=False)
return render_to_response(self.template_name, {'errors':form.errors})
Actually, comparing the above to your code, you may need to set the content_type in your django view so that jQuery can understand and process the response. Note that the above is using django 1.3 class-based views, but the logic should be familiar regardless. I use context.success to signal if the form processing passed or failed - since a valid response (json) of any kind will signal the jQuery.post that the request was successful.