I haven't used Django for a while, so I forgot many things of Django. When I click url link on this site, it moves to another pages, but the pages don't work properly. But if I reload the page or retype the same url, the pages work.
I wrote like these,
slideUp header
or
carousel
I read several pages, but I don't know what to do. Would you please help me?
index.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en-EN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- for IE -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Welcome to my Samples!</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<style type="text/css"></style>
</head>
<body>
<div>
<span>Welcome to my samples!!</span>
<dl>
<dt>Bootstrap</dt>
<dd>affix</dd>
<dd>carousel</dd>
<dt>BxSlider</dt>
<dd>responsive</dd>
<dt>Magic</dt>
<dd>slideUp header</dd>
</dl>
</div>
<!-- JavaScript -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript" ></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js type="text/javascript" ></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript"></script>
</body>
</html>
url.py
from django.conf.urls import include, url
from django.contrib import admin
admin.autodiscover()
import hello.views
# Examples:
# url(r'^$', 'gettingstarted.views.home', name='home'),
# url(r'^blog/', include('blog.urls')),
urlpatterns = [
url(r'^$', hello.views.index, name='index'),
url(r'^bxslider/$', hello.views.bxslider, name='bxslider'),
url(r'^affix/$', hello.views.affix, name='affix'),
url(r'^carousel/$', hello.views.carousel, name='carousel'),
url(r'^slideup_like_magic/$', hello.views.slideup_like_magic, name='slideup_like_magic'),
url(r'^db', hello.views.db, name='db'),
url(r'^admin/', include(admin.site.urls)),
]
Django-1.9.2
////// Additional //////
This is what I see when I move page from http://bananaman.herokuapp.com/.
And this is what I am supposed to see, for instance, http://bananaman.herokuapp.com/slideup_like_magic.
I haven't bothered to work through everything that is going on, but it looks like the issues you are experiencing are due to jQuery Mobile's link hijacking. It doesn't look like you have your data-* attributes correct from one page to the next.
I think you should start by pulling out jQuery Mobile and make sure everything is working correctly. Then add jQuery Mobile back in ensuring you have set up the page with the correct data-role attributes.
Related
So, I've got 3 questions
How to use Django's URLs in react
EXAMPLE:
index.js (in react)
<Router>
<div>
<nav className="navbar navbar-inverse bg-inverse">
<div className="container">
<Link to="/" className="navbar-brand">PetFinder</Link>
<Link to="/storage" className="navbar-brand">Storage </Link>
Sign-Up <== like this
</div>
</nav>
<Route exact path={"/"} component={PetRegistration} />
<Route path={"/storage"} render={() => <Storage ids={checkingName} />} />
</div>
</Router>
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
#path('api-auth/', include('rest_framework.urls', namespace="rest_framework")),
path('api/animals/', include('petsite.urls', namespace='petsite')),
path('api/user_info', core_views.UserInfo.as_view()),
path('signup/', core_views.signup, name='signup'),
path('', csrf_exempt(core_views.index), name='index'),
path(r'^login/$', auth_views.login, name='login'),
]
is_authenticated in react
How I did it:
In index.html
I wrote this ******. I am ashamed of this. Don't judge me, okay just a bit...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div class="signUpBlock">
Sign-Up
</div>
<div id="root">
</div>
<span class="currentUser" style="display: none">{{user.id}}</span>
<span class="currentUserName" style="display: none">{{user.username}}</span>
<span id="DJANGO_USER" style="display: none"></span>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<script type="text/javascript">
var WHETHER_DJANGO_USER_IS_AUTH = "{{user.is_authenticated|yesno:"true,false"}}";
document.getElementById("DJANGO_USER").innerHTML = WHETHER_DJANGO_USER_IS_AUTH;
</script>
</body>
</html>
Check the code below:
<script type="text/javascript">
var WHETHER_DJANGO_USER_IS_AUTH = "{{user.is_authenticated|yesno:"true,false"}}";
document.getElementById("DJANGO_USER").innerHTML = WHETHER_DJANGO_USER_IS_AUTH;
</script>
<span id="DJANGO_USER" style="display: none"></span>
AND THEN IN index.js I do this
let boolButString = $('#DJANGO_USER').text()
var StringToBool = (boolButString === 'true');
If StringToBool = true I do smth (means that user is logged in)
else StringToBool != true I do smth (means that user is not logged in)
if (StringToBool) {
do smth
} else {
make some tea for him
}
I don't think I did it in a right way can you suggest me smth?
Is it real to check whether a user is auth. or not?
How to display Django context in react.
You might have seen how I did it in index.html
As usual, I wrote:
def index(request):
return render(request, 'index.html', {
"user" : request.user,
})
end then
<span class="currentUser" style="display: none">{{user.id}}</span>
grab data through jquery and display it in react app.
What can you suggest me?
How to display context properly?
Sry for cups.
I'm trying to get Next to work with my django template.
My urls.py looks like this:
urlpatterns = [
path('admin/', admin.site.urls),
re_path('^(?!static).*$', index),
]
I'm basically redirecting every /foo/bar request to the index view, which renders the index.html template, which looks like this:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="application/javascript" src="{% static "dist/bundles/pages/_document.js" %}"></script>
</head>
<body>
Hey
</body>
</html>
So my question is, which one is the "main" next JS file, that should go inside my <script type="application/javascript" src="..."></script>?
Okay, so I tried having a folder with static template elements accessible by all apps with two css files and one html file.
In settings.py I went to TEMPLATES and added: 'DIRS': os.path.join(BASE_DIR, 'static_files'),, as seen here (I edited out confidential info therefrom).
My template fragment topnav.html looks like this:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="w3.css">
<title>EvoLang</title>
</head>
<!-- Content will go here -->
<body>
<script src="myScript.js"></script>
<!-- Navigation -->
<nav class="topnav">
<ul class="topnav">
<li><a href="#">Entrywords
<li><a href="#">Sentences
</ul>
</nav>
<!-- / Navigation -->
</body>
Then, in previously working index.html in my app biblio looks like this:
{% extends "topnav.html" %} {# this enables using the top navigation bar #}
<p>Lorem ipsum</p>
What I get while accessing that page is the following error: [Errno 22] Invalid argument: 'E:\\MyProject\\myproject\\:\\biblio\\index.html'
I don't really get what is this \\:\\ part here.
I am using Django 1.11.2 with Python 3.6.
The DIRS setting should be a list. You are missing the square brackets and the trailing comma. Try:
'DIRS': [os.path.join(BASE_DIR, 'static_files')],
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>
i an doing exactly the same Django admin datepicker calendar and clock img
and i am suffering with the same problem but it was working perfectly fine with django 1.4 but when i updated it to django 1.5 it is giving me this error
'adminmedia' is not a valid tag library: Template library adminmedia not found, tried django.templatetags.adminmedia,django.contrib.staticfiles.templatetags.adminmedia,django.contrib.admin.templatetags.adminmedia,django.contrib.humanize.templatetags.adminmedia,jobpost.templatetags.adminmedia,crispy_forms.templatetags.adminmedia,tinymce.templatetags.adminmedia,haystack.templatetags.adminmedia
here is my code:
{% load adminmedia %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"> </script>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"> </script>
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>
<script type = “text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script>
by doing this i am showing image of calender widget from /static/admin/img/icon_calender.jpg.
but admin media option is deprecated in django version 1.5 or later so then i replace this with static media option and here is the new code:
{% load staticfiles %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<link href="{% static 'admin/css/login.css' %}" rel="stylesheet">
and it look like this:
my calender icon is gone. can anyone tell me whats the alternative of this problem in version 1.5
help will be appreciated
The response is right here, in the 1.5 release notes: https://docs.djangoproject.com/en/dev/releases/1.5-beta-1/#miscellaneous
The {% admin_media_prefix %} became deprecated, you must remove it from your templates. (Included every {% load adminmedia %}, which causes the exception). There must be a setting which replace this tag I guess.
so django 1.5 was giving me nightmare so i resolved my problem by using direct jquery datpicker here is the jquery datepicker
all i had to do is change the id which is a little bit tricky in django .for example if your date field name is start_date then id will be formtools_start_date . and for this kind of datepicker you don't even need any icon to show.. this helped me i hope this will help those also whoever upgraded their django version.
I just had this problem today - not being able to load admin base.css. I upgraded Django for my site from v1.2 to v1.5 and encountered the issue. I found that the href is /static/admin/css/base.css and could not find out how to change it. So I did these:
Copied site-packages/django/contrib/admin/static/admin/* to my Django project's static directory so it would be like
top/
static/
admin/
css/
js
images
Editted urls.py, added the following line in the urlpatterns = patterns('',...
(r'^static/(?P.*)$','django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes':True}),
That's it. It worked.