Using Foundation Modals with Django - django

I had an html file using Foundation to display a simple signup login template that was working as desired before using Django. I made a Django project and app and was able to get everything displaying as it was before except for modals. The section looks like this:
<a data-open="signup" class="button">Sign up</a>
<div class="reveal" id="signup" data-reveal>
I've used this http://foundation.zurb.com/sites/docs/reveal.html but it's not actually displaying the modal when I run the Django server.
I also have the following lines in my html page:
<link rel="stylesheet" href="{% static "MyApp/foundation.css"%}">
<link rel="script" href="{%static"MyApp/js/jquery/vendor/foundation.js"%}">
Along with this <script> $(document).foundation(); </script>
These are all in my static directory. I also have tried adding 'foundation' to INSTALLED_APPS in my settings but I get an error saying no module was found. However, I'm using other CSS from foundation and it's working fine so I'm wondering if this issue has something to do with using foundation in my static directory vs. using this package: https://pypi.python.org/pypi/django-zurb-foundation
Any help is appreciated!

Related

Jquery Cycle2 won't produce slideshow

I'm trying to implement the cycle2 plugin with jquery on an HTML page.
I've used the site http://jquery.malsup.com/cycle2 as a guide
I downloaded (copied) the file jquery.cycle2.js I placed it on the server in on the server in the location public_html/cycle2/jquery.cycle2.js
In my HTML page's Header section I added the lines:
<!-- include jQuery library -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
Then, in the HTML page's BODY I added:
<div class="cycle-slideshow">
<img src="cycle_images/image1.jpg" alt="Image1"/>
<img src="cycle_images/image2.jpg" alt="Image2"/>
<img src="cycle_images/image3.jpg" alt="Image3"/>
</div>
The guide doesn't give a css-type example for the class "cycle-slideshow". Instead it says that by using that class in the DIV tag it will auto-activate the slideshow.
This doesn't seem to activate the slideshow. Instead it lays out the images out in three rows, one row after another.
Any idea what I'm doing wrong to activate the cycle2 slideshow?
The problem was with the HTTP:// on the server line. Since the Cycle2 documentation was published, the GOOGLEAPIS sever must have obtained a certificate, making it HTTPS. The mismatch between HTTP and HTTPS caused the plugin to fail. The working code now reads:
<!-- include jQuery library -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- include Cycle2 -->
<script src="cycle2/jquery.cycle2.js"></script>
It seems to me that it's safer to remove "HTTP" or "HTTPS" and just being the server line with "//".

How to locate websocketbridge.js in Django using channels websocket?

I am trying to implement websockets using channels in Django project. I am getting 404 for webscoketbridge.js Below is html template.
{% load staticfiles %}
{% block title %}Delivery{% endblock %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="{% static 'channels/js/websocketbridge.js' %}" type="text/javascript"></script>
Also, I tried to have a look in the virtualenv/lib/python3.5/site-packages/channels path, there is no js folder or any file named websocketbridge.js
Has anyone solved this issue?
The javascript bridge was removed in v2.1.4. Here's the commit: https://github.com/django/channels/commit/2a9d764ad03927581aa2bfcadccc3e953949cb98#diff-b582cbb2f8294afa8bbe26c4c360a01d
This bit me, in my book that breaks semantic versioning.
As #tobyspark said, the javascript wrapper has been completely removed in the Django-channels 2. You can read more on how the js WebSocket wrapper was working in channels 1 here.
the simplest workaround to clear that error in your browser is to create a file called websocketbridge.js in the path shown in the error, "static/channels/js/", or you can specify any other path in your HTML src attribute matching the location of the static files and then add the code from here.
But you have to find a better implementation. You can use ReconnectingWebSocket. In the channels 2 release documentation, it is stated there might be other third-party packages for the binding but I don't know any other.

Django URL Conf unable to find javascript file

I am learning Django and as an example I am trying to implement a small site that serves static pages. I am using django.contrib.flatpages app for the same. As part of this, I have a javascript file located in a directory. I am referencing this javascript file in my html page. Accordingly, I have configured the URL pattern in my project's URL Conf file as follows:
url(r'^tinymce/(?P<path>.*)$','django.views.static.serve',{'document-root':'C:/RAKESH/djangowork/cms/cms/templates/admin/flatpages/flatpage/tinymce'}),
But when I try to load the html page, the javascript file doesn't seem to be loaded. The following is the referencing code in my html file:
<script type="text/javascript" src="/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector:'textarea'
});
</script>
Can someone help me fix this problem?
Thanks,
Rakesh.
Don't add an extra URLconf for that! Use the standard way in Django to serve static (non-cms-editable) files: https://docs.djangoproject.com/en/dev/howto/static-files/
Place the tinymce folder inside a static folder in your app folder, then use in your template:
<script type="text/javascript" src="{% static "/tinymce/tinymce.min.js" %}"></script>

How to import dajaxice?

I'm a nooby to django and I tried many hours to get a simple example of dajaxice running, but I don't seem to find the right way to look for the files.
I did and redid installation and tried to find answers in the numerous similar questions on stackoverflow like this one and this one.
I put {% dajaxice_js_import %} in the header of myapp_index.html which prints out as:
<script src="/static/dajaxice/dajaxice.core.js"
type="text/javascript" charset="utf-8"></script>
but it cannot find this file:
ImproperlyConfigured: The storage backend of the staticfiles finder doesn't have a valid location.
And the get fails:
GET /static/dajaxice/dajaxice.core.js HTTP/1.1" 500 59
Strangely enough dajax loads:
<script type="text/javascript"
src="{% static /static/dajax/jquery.dajax.core.js" %}"></script>
Here's my folder structure:
myproject
----manage.py
----myproject
--------settings.py
--------urls.py
----myapp
--------ajax.py
--------urls.py
--------templates
------------myapp_index.html
I also haven't really understood why we need two urls.py files, but somehow it seems to access myapp_index.html if I put
from django.views.generic.simple import direct_to_template
and then
url(r'^$', direct_to_template, {'template': 'myapp_index.html'}),
in myapp's url patterns.
I also tried uncountable filenames in
python manage.py findstatic dajaxice.core.js
but somehow it doesn't find dajaxice, even though dajaxice is installed and accepted in the settings.py file among the INSTALLED_APPS.
Also python manage.py collectstatic fails for the same reason, but if I understood correctly, I don't event have to make it run as long as I'm on a development server.
I guess I have some basic misunderstanding of the underlying structure. :(
I'm using the prepacked latest ubuntu packages:
django: 1.4.5,
dajaxice: 0.5.5
Thanks in advance for any hint!
here is the template file:
{% load static %}
{% load dajaxice_templatetags %}
<html>
<head>
<title>My base template</title>
{% dajaxice_js_import %}
<script type="text/javascript" src="{% static "/static/dajax/jquery.dajax.core.js" %}"></script>
<script type="text/javascript">
function my_js_callback(data){
alert(data.message);
}
Dajax;
Dajaxice;
</script>
</head>
...
<button onclick="Dajaxice.myproject.myapp.sayhello(my_js_callback);">Click here!</button>
I get no Django error, the page shows, but I get this in Firebug:
"NetworkError: 500 Internal Server Error - http://localhost:8000/static/dajaxice/dajaxice.core.js"
and this:
ReferenceError: Dajaxice is not defined
Dajaxice;
It seems that you've messed up your urls.conf. It should contain something like:
url(dajaxice_config.dajaxice_url, include('dajaxice.urls')),
Does it?
Also, the STATICFILES_FINDERS section of your settings.py file should include:
'dajaxice.finders.DajaxiceFinder',

Using Protovis with Django

I am trying to get Protovis working in my Django site. Here is my sample code:
<html>
<head>
<script type="text/javascript" src="protovis-r3.2.js"></script>
</head>
<body>
<script type="text/javascript+protovis">
new pv.Panel().width(150).height(150).anchor("center")
.add(pv.Label)
.text("Hello, world!")
.root.render();
</script>
{{ object.name }}
</body>
</html>
When I open this file directly in firefox, a Protovis 'Hello World' image is displayed toguether with the string "{{ object.name }}".
But when accessing the .html file template from my Django server, I only see the {{ object.name }} (the object's name printed out).
I haven't found similar issues so far, catering to Protovis use in Django.
If anyone has gotten it working or know what I am doing wrong, please let me know.
Thanks,
You've asked for the javascript file using src="protovis-r3.2.js"
When you look at the html file directly, your browser will look in the same directory as the .html file for a file called protovis-r3.2.js.
However, when you ask Django to serve this same page, it doesn't follow the same protocol. See this article for more information.
To get it to work:
Move the protovis-r.32.js file to a new directory: /path/to/my/django_site/static (where /path/to/my/django_site is the absolute path to the django app)
Configure urls.py with the line:
(r'^static/(?P<path>.*)$', 'django.views.static.serve',
{'document_root': '/path/to/my/django_site/static'}),
Change the src attribute of the script tag in your html code to:
src="/static/protovis-r3.2.js"