I'm going through Jquery AJAX tutorial in w3schools and trying to simulate a similar call in my Django project.
I want to load a file from the server using Ajax request, I was able to successfully load through load() function by calling a view which is mapped to /ajaxload/ in my urls.py file.
$("button").click(function(){
alert('hi');
$("p").load("/ajaxload/");
return false;
})
Can I load the same file by calling .ajax call by passing the url directly?
I apologize if its a very basic question but my new to web development.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url:"demo_ajax_load.txt",async:false,success:function(result){
$("div").html(result);
}});
});
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>
Update:
I read some docs and trying to call view as below but I dont any response
$(document).ready(function(){
/* This call is working
$("button").click(function(){
alert('hi');
$("p").load("/ajaxload/");
return false;
})
*/
//The below call is not working
$("button").click(function(){
alert('hi');
$.ajax({
url: "/ajaxload/",
type: "get",
data: serializeData,
success: function(response) {
alert(response)
}
})
event.preventDefault();
})
});
views.py
def ajax_load(request):
return render(request,'demo_test.txt')
urls.py
(r'^ajaxload/$',ajax_load),
Update:- It started working once the data:serializedata was removed..
serializeData is not defined in your js script, so it raises an exception that breaks the run.
Open your browser console, you will see the error.
Related
I am currently using Django framework.
I would like to get the value of a javascript value wrote in an html file.
I would like to be able to display it in my view file
Here is my html file from the folder templates:
<script>
var toto = "javascript";
document.write(toto)
</script>
This is my view file:
def javascript(request):
# print the javascript value here
return render(request, "rh/javascript.html")
Thank you for your help !
You have to consider that your script runs on the client-site whereas the view function runs on the server-side. This is one main challenge when it comes to shifting variables from one end to the other.
To make a long story short:
You will have to make a http request from the client-site (for example using jQuery AJAX) to call the view. Then you can pass the variable via AJAX to the view function and use it for further logic.
Example:
your.html
<script type="text/javascript">
// A CSRF token is required when making post requests in Django
// To be used for making AJAX requests in script.js
window.CSRF_TOKEN = "{{ csrf_token }}";
</script>
<div id="variable">Variable</div>
javascript
(function($) {
// trigger the logic on click of the container
$('#variable').on('click', function() {
// assign variable
var variable_for_view = $(this).html();
// make http request using AJAX
$.ajax({
type: 'post',
url: '/your_url/', // this is the mapping between the url and view
data: {
'variable': variable, // ! here is the magic, your variable gets transmitted to the server
'csrfmiddlewaretoken': window.CSRF_TOKEN
},
success: function(data) {
print(sliced_variable)
},
});
});
}(jQuery));
views.py
def your_view(request):
# Assign variable from AJAX request
variable = request.POST.get('variable')
print(variable)
variable.slice(3)
context = {
'sliced_variable': variable
}
return render(request, 'your.html', context)
I was trying to make a Backbone Application with Django at its backend. I was following a Backbone tutorial. I used the following code:
Code
<!doctype html>
<html lang = "en">
<meta charset = "utf-8">
<title>IstreetApp</title>
<link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Book Manager</h1>
<hr />
<div class="page"></div>
</div>
<script type = "text/template" id = "booklist.template">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
<script>
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url = 'http://backbonejs-beginner.herokuapp.com' + options.url;
});
var Books = Backbone.Collection.extend({
url: '/books'
});
var BookList = Backbone.View.extend({
el: '.page',
render: function () {
var that = this;
var books = new Books();
books.fetch({
success: function(books) {
var template = _.template($('#booklist.template').html(), {books: books.models});
that.$el.html(template);
}
})
}
});
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
})
var bookList = new BookList();
var router = new Router();
router.on('route:home', function () {
bookList.render();
});
Backbone.history.start();
</script>
</body>
</html>
Since the collection is not defined, the success code doesn't execute. I suppose the collection data should come from the server through Django but I am not sure how and in what form. Kindly help. I am pretty much new to backbone and Django.
When you call fetch on your collection, it makes an AJAX request to:
http://backbonejs-beginner.herokuapp.com/books
However, there is no API set up there. Either one of two things needs to happen:
1) you need to modify your code to point to a different URL, one that does have an existing API (perhaps whatever tutorial you are using has such an API)
2) you need to create such an API yourself on yoursever.com (and then make your Backbone code point to that API's URL instead)
Without a server to support it, operations like save and fetch and such in Backbone simply cannot function.
As a side note, Django is a web site framework. While you can use it to create server-side APIs, that's not really Django's focus. Because of this, several good third party libraries exist for doing RESTful APIs (ie. the kind that Backbone likes) in Django; personally I'd recommend either Django REST Framework (I use it and it works great) or TastyPie (never used it, but it's very popular).
When using a backbone collection you need to return a json array of objects from your api url (http://backbonejs-beginner.herokuapp.com/books)
Example
{[{"name":"bookname", "publisher": "penguin"}, {"name":"bookname", "publisher":"penguin"}]}
You'll also want a model for your collection. A model would look like this
Example:
var Book = Backbone.Model.extend({
defaults: {
"name": "",
"publisher": ""
}
});
The way that the collection works is by parsing the json array and turning each object in the array in to a model that you specific (in this instant an individual book with values for the name and publisher).
When you make a .fetch() on your model you are making a GET request, so make sure that your http://backbonejs-beginner.herokuapp.com/books url is prepared to receive GET requests and respond with the json data in the format I specified up top.
I am just getting started with Backbone, and I have set up in a sample app the backbone dependencies (backbone, underscore, json2), and I started writing some backbone models, views, and such for my app.
My question is: suppose a user navigates to a page in my app. How does this page then initialize/call a backbone view? I was under the impression that I am supposed to include this kind of jQuery/js on the page that is loaded:
$(document).ready(function(){
window.app = new SampleApp.Views.Articles.ShowView();
new SampleApp.Routers.RootRouter();
Backbone.history.start();
});
And then I thought the Articles ShowView would run:
$(document).ready(function(){
SampleApp.Views.Articles || (SampleApp.Views.Articles = {});
window.SampleApp.Views.Articles.ShowView = Backbone.View.extend({
el: ".container",
events: {
'click .overlay': 'test'
},
initialize: function(){
//eg: this.model.bind('change', this.render, this)
},
render: function(){
$(".container").html('');
alert('got here');
},
test: function(){
alert('clicked a picture');
}
})
});
However, when I load the page, I don't get any of the functionality specified in my ShowView. (no alerts etc..). I realize that 'ShowView' is a misnomer, as it doesn't actually do anything yet. But if it is truly being called, then shouldn't these alerts run?
FYI I think I included all the files for backbone correctly:
<script src="{{ STATIC_URL }}js/underscore.js"></script>
<script src="{{ STATIC_URL }}js/json2.js"></script>
<script src="{{ STATIC_URL }}js/backbone.js"></script>
{# Models #}
<script src="{{STATIC_URL}}js/backbone/models/article.js"></script>
{# Views #}
<script src="{{STATIC_URL}}js/backbone/views/articles/show.js"></script>
{# Routers #}
<script src="{{STATIC_URL}}js/backbone/routers/root.js"></script>
In your example, you need something that invokes render on the ShowView instance. This can either be the responsibility of a route in your router, or you can just do it in the document ready handler that creates your view.
window.app = new SampleApp.Views.Articles.ShowView();
window.app.render();
I have a very simple Ember.js app which works correctly in IE and Chrome, but fails in Firefox (9.0.1 and 10.0). Any reason why? Here's the code:
<!doctype html>
<html>
<head>
<title>Template Name</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="my-template">
{{App.user.name}}
</script>
<div id="container"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<script type="text/javascript">
window.App = Ember.Application.create();
App.user = Ember.Object.create({
name: 'John'
});
App.view = Ember.View.create({
templateName: 'my-template'
});
App.view.appendTo('#container');
</script>
</body>
</html>
The error in firefox is
uncaught exception: Error: <Ember.View:ember143> - Unable to find template "my-template".
This would seem to indicate that the template script has not been evaluated at the point where the app executes. The solution is to wait for onload. Wrap your appendTo like this:
$(function() {
App.view.appendTo('#container');
});
I just experienced the exact same issue. I found out that it was caused due to Ember being dependent on Handlebars. It looks like after version 1.0 they removed the inclusion of the Handlebars source code. After adding in the Handlebars library, the error goes away.
Ember.Application.create({
ready: function() {
App.view.appendTo('#container');
}
});
Tom Whatmore has the correct answer to this in the comments.
The error is displayed in the javascript console only if you use the unminified version of ember.js
The problem is that the template hasn't been evaluated by ember because you're code is executing as soon as the browser hits it, rather than after the ember application has been fully created.
I got the Facebook login/logout functionality to work, but had to do it with this un-elegant code like this:
<script type="javascript">
function loadfb() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/es_LA/all.js';
document.getElementById('fb-root').appendChild(e);
};
</script>
<body onload="loadfb()">
I plan on putting that Facebook login button on all the pages of the site, so I really don't want to have this function called onload of every page.
Is this function necessary? I don't completely understand what it is for. What is a better way to do this so I can take it out of my onload?
Thanks!
This code is for asynchronous loading of the Facebook JavaScript SDK. What it does is create the tag
<script async scr="https://connect.facebook.net/es_LA/all.js" ></script>
inside the <div id="fb-root"></div> element. While loading the SDK asynchronously is considered better practice, you can leave out this code and manually enter the script tag yourself - eg:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/es_LA/all.js"></script>
<script>
FB.init({
...
});
</script>