added javascript example for /myip and added a view OverviewView. JS fails for dev server, because of the Access-Control-Allow-Origin

This commit is contained in:
Fabian Faessler 2013-09-28 13:56:54 +02:00
parent 9800d12812
commit d5bbc8ac59
4 changed files with 42 additions and 1 deletions

View File

@ -1,7 +1,8 @@
from django.conf.urls import patterns, include, url from django.conf.urls import patterns, include, url
from main.views import HomeView, MyIpView from main.views import HomeView, MyIpView, OverviewView
urlpatterns = patterns('', urlpatterns = patterns('',
url(r'^$', HomeView.as_view(), name="home"), url(r'^$', HomeView.as_view(), name="home"),
url(r'^overview/', OverviewView.as_view(), name="overview"),
url(r'^myip/', MyIpView) url(r'^myip/', MyIpView)
) )

View File

@ -11,5 +11,14 @@ class HomeView(TemplateView):
context['nav_home'] = True context['nav_home'] = True
return context return context
class OverviewView(TemplateView):
template_name = "overview.html"
def get_context_data(self, *args, **kwargs):
context = super(OverviewView, self).get_context_data(*args, **kwargs)
context['nav_overview'] = True
return context
def MyIpView(request): def MyIpView(request):
return HttpResponse(json.dumps({'ip':request.META['REMOTE_ADDR']}), content_type="application/json") return HttpResponse(json.dumps({'ip':request.META['REMOTE_ADDR']}), content_type="application/json")

View File

@ -11,6 +11,7 @@
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="{% static 'css/nsupdate.css' %}" rel="stylesheet"> <link href="{% static 'css/nsupdate.css' %}" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head> </head>
<body> <body>
@ -27,6 +28,7 @@
<div class="collapse navbar-collapse"> <div class="collapse navbar-collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li{% if nav_home %} class="active"{% endif %}><a href="{% url 'home' %}">Home</a></li> <li{% if nav_home %} class="active"{% endif %}><a href="{% url 'home' %}">Home</a></li>
<li{% if nav_overview %} class="active"{% endif %}><a href="{% url 'overview' %}">Overview</a></li>
<li{% if nav_about %} class="active"{% endif %}><a href="#about">About</a></li> <li{% if nav_about %} class="active"{% endif %}><a href="#about">About</a></li>
<li{% if nav_contact %} class="active"{% endif %}><a href="#contact">Contact</a></li> <li{% if nav_contact %} class="active"{% endif %}><a href="#contact">Contact</a></li>
</ul> </ul>

View File

@ -0,0 +1,29 @@
{% extends "base.html" %}
{% block content %}
<script>
getIp = function(protocol) {
$.get("http://www.ip"+protocol+".nsupdate.info/myip", function(raw_data){
json_data = JSON.parse(raw_data)
$(".ip"+protocol+"adr").val(json_data.ip);
}).fail(function() {
$(".ip"+protocol+"adr").val("no ip"+protocol+" address found");
});
}
$(document).ready(function() {
getIp('v4');
getIp('v6');
});
</script>
<h1>Overview</h1>
<p>
Ajax request to retrieve the ipv4/ipv6 remote address. The URL www.*.nsupdate.info is used for the call, so this will fail for the dev server. TODO: dev environment
</p>
IPv4: <input type='text' class="form-control ipv4adr" placeholder="loading ip..."> </br >
IPv6: <input type='text' class="form-control ipv6adr" placeholder="loading ip...">
{% endblock %}