django-smart-selects doesn't work in templates - javascript

I have a problem with django-smart-selects usage.
In the admin panel, django-smart-selects works correctlyn but in templates there is an error.
Uncaught ReferenceError: chainedfk is not defined
$(document).ready(function() {
chainedfk.init(chainfield, url, id, value, empty_label, auto_choose);
});
Mt urls:
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^chaining/', include('smart_selects.urls')),
url(r'^$', 'avtocry.views.index'),
url(r'^/', include('advdesk.urls')),
url(r'^createadv/', 'advdesk.views.createadv',name='createadv')
]
tamplate file
{% extends 'base.html' %}
{% block content %}
<div class="wrapper">
<form action='{% url 'createadv' %}' method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK">
</form>
</div>
{% endblock %}
base file contais
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
html output
template
admin


Here's how I solved this, for some reason unknown to me, a file called chainedfk.js is missing. After a little digging I found that this file exists in this path 'smart-selects/admin/js/chainedfk.js' in the library files.
So I simply added this import line my base.html file.
*I removed the tags so it can be visible.
script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"
after the js import line and it worked like a charm :)


UPDATE - MAY- 2017
Sorry, things have a bit changed as of now, my form also refused to load and yet it was loading some time back, so you have to include the tag below, right after the jquery and the tag that contains chainedfk.js
This works very well both for django 1.10.5 and Django 1.11 -(the latest version as of this writting) - Python 3.5.2
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/bindfields.js' %}"></script>


I had the same problem but without receiving any error.
it worked for me too when I included:
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>


to be 100% correct you have to import file with this specific order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js </script>
<!-- Smart select -->
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>


Worked for me by putting {{form.media.js}} which loads the required javascripts in the head.
so:
{% block headjavascript %}{{ form.media.js }}{% endblock %}
Which is a better practice for loading javascript

Related

Javascript queryselectors not reading classes and ID when used in Django project

When I am working outside Django file, everything works fine with javascript reading classes and Ids like
document.querySelector('.class_name').addEventListener
But when loaded in Django projects it gives an error that eventlistner can't read NULL.
{% comment %} css file for contacts.html {% endcomment %}
<script type="text/javascript" src="{% static 'info/js/for_recrs.js' %}"></script>
<link href="{% static 'info/css/for_recrs.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}

Actually if you are declaring JS file in head, it will read it at that time itself without going through the HTML file. So, it reads null value of classes and ID.
To avoid that you can declare script file just beforeend of body.
OR
Use
window.onload = function() {
// do your stuff here.
}
It solved mine problem.

Django admin add a custom js every time user click on an element

In my django admin project i have to trigger a .js file every time an user change a select field value.
In my admin/change_form.html page i add:
{% block extrahead %}{{ block.super }}
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
<script type="text/javascript" src="{% static 'js/admin.js' %}"></script>
{{ media }}
{% endblock %}
and in my admin.js:
​document.onclick = function(){
console.log("test for admin.js");
}​
but in my browser console related to 'document' part of code i get:
Uncaught SyntaxError: Invalid or unexpected token
How can i use javascript code from django admin add/edit page?
so many thanks in advance

django use of templates views and ajax

Sorry I couldn't come with a more precise topic title and I must admit I'm still pretty new Django.
I am trying to work with Ajax and templates with splitted views but I can't achieve what I want, one way or another.
My goal is to be able to work with rendered templates and jquery hide/show instructions but I'm failing at some point.
Here is my urls.py:
from django.urls import path
from django.conf.urls import url
from . import views, inventory
urlpatterns = [
path('', views.index, name='index'),
url(r'^inventory', inventory.inventory, name='inventory'),
url(r'^buildInventory', inventory.buildInventory, name='buildInventory'),
]
My views index renders a templated "index.html" (there is a context that I removed for the illustration):
def index(request):
return render(request, 'myapp/index.html', context)
My index.html file :
{% extends "base.html" %}
{% load static %}
{% block delivery_form %}
<div id="mainblock">
....
</div>
{% endblock %}
And my base.html mostly contains my statics & headers:
{% load static %}
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/png" href="http://web-iec/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="{% static 'myapp/css/nice.css' %}">
<script type="text/javascript" src="{% static 'myapp/js/jquery.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/jquery-ui.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/inventory.js' %}" ></script>
<script type="text/javascript" src="{% static 'myapp/js/homepage.js' %}" ></script>
</head>
<body>
<div class="navBar">
<span class="navBtn" id="listDeplVer" title="Inventory">Inventory</span>
</div>
<div style="min-height: 100%;margin-bottom: -20px;">
{% block delivery_form %}
{% endblock %}
{% block inventory %}
{% endblock %}
</div>
</body>
</html>
Now what I'm trying to achieve, within my inventory.js I've got an onclick event that I'm trying to use to hide the home page content and replace it by the rendered html from my inventory.py view with associated html:
my inventory.py:
def inventory(request):
return render(request, 'myapp/inventory.html')
and my inventory.html:
{% extends "base.html" %}
{% load static %}
{% block inventory %}
<div id="inventoryblock">
// html
</div>
{% endblock %}
Finally my inventory.js is looking like:
$(document).ready(function () {
$( "#listDeplVer" ).click( function () {
$.ajax({
type: 'GET',
dataType: 'html',
url: '/myapp/inventory',
beforeSend: function(){
$("#mainblock").fadeOut();
},
success : function(output){
$("#inventoryblock").html(output);
},
});
});
So like I said I was expecting that onclick my page's content is replaced by the rendered inventory page, but this is not working.
When using the web developper tools, if I open the XHR request for the inventory in a new tab it work just fine, so I assume I'm doing something the wrong way.
Before merging everything in one single file (js, views, html & so on) I wanted to ask if there is way to have something similar to work ?
Thank you for your help

Your source page doesn't have an "inventoryblock" div. That's only in the page you're loading via Ajax. So when your success function runs, it doesn't know where to put the output.
You need to put an empty div with id "inventoryblock" in your index.html.
Also, your inventory.html probably shouldn't inherit from anything. You don't need the full HTML file with the head block etc, you just want the fragment containing the contents of inventoryblock that you can insert into the requesting page. Remove everything other than the relevant HTML itself.

why doesn't marked('#content') render well

Now I have three scripts in my html file. And there aren't any code about marked in mystyle.js.
So the question here is:
output of my html file in localhost
Another site render well
I want to know why would this happened? Thanks!
<script type="text/javascript" src="{% static 'jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/mystyle.js' %}"></script>

You need to put a space between the hash and text. Marked will not render it correctly otherwise.
// prints <p>headline</p>
marked('#headline');
// prints <h1>headline</h1>
marked('# headline');

Symfony2: how to choose Javascript files load order?

I am using jQuery in my Symfony2 application and I have a "ReferenceError: jQuery is not defined" error. I think changing Javascript file load order could fix this.
How could I force to load jQuery Javascript file first in order to avoid such errors? I would like to keep the "js/*" in order to load auto-magically the future new JS files I will put.
Here is stylesheets part of my *.html.twig template:
{% javascripts
'#xxxBundle/Resources/public/js/*'
'js/*'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
And here is current output generated by Symfony2:
<script type="text/javascript" src="/Symfony/web/app_dev.php/js/8d3a8ee_part_2_acidTabs_1.js"></script>
<script type="text/javascript" src="/Symfony/web/app_dev.php/js/8d3a8ee_part_2_jquery-1.6.min_2.js"></script>

You can list your core dependencies first, then load all others:
{% javascripts
'#xxxBundle/Resources/public/js/*'
'js/example_1.js'
'js/example_2.js'
...
'js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}

Categories

Resources