DjangoCMS 3.7
mateoreyes opened this issue · comments
Hi, I have a question.
I am using DjangoCMS 3.7, Django 2.1.7 and Bootstrap4 1.3.1 and it works fine.
But if I change the version of Django to 2.2.7 it doesn't work.
I see the following message in the browser console : TypeError: $ element.select2 is not a function (django_select2.js:48:14)
Can you help me?
Thank you.
Hi @mateoreyes,
I have never used DjangoCMS, but I believe the problem you are describing is in the Django Admin?
This is probably related to changes I myself introduced in Django 2.2. You will make sure that jQuery is always included. Django's buildin jQuery version is no longer accessible.
Let me know if that does solve you problem.
Best
-Joe
Hello, thanks for answering.
The problem occurs when I use the djagocms-link plugin, it allows me to create a link by choosing one of my pages from a select, but with Django 2.2 this does not work.
I have the jQuery included in the base template of my project and it is being loaded correctly.
I would appreciate any other suggestions you can make.
thanks.
Can you post your rendered HTML code as an example?
{% load staticfiles i18n cms_tags sekizai_tags menu_tags %}
<!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="description" content="">
<meta name="author" content="">
<title>{% page_attribute 'page_title' %} - Portada </title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/modern-business.css' %}" rel="stylesheet">
<link href="{% static 'font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
{% block estilos %} {% endblock estilos %}
<!-- django CMS -->
{% render_block "css" %}
{% if request.toolbar %}
<style>
.cms-toolbar-expanded .navbar {
margin-top: 45px;
}
</style>
{% endif %}
</head>
<body>
{% cms_toolbar %}
{% block menu-bar %}{% endblock menu-bar %}
{%block menu%}
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light agrega-bg-light fixed-top">
<div class="container">
<a class="navbar-brand" href="/"><img class="logo" src="{% static 'img/logoincorp.png'%}" alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/empresas/">empresas</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/socios/">socios</a>
</li>
</ul>
</div>
</div>
</nav>
{%endblock menu%}
<div class="container-fluid">
{% block content %}{% endblock content %}
{% block footer %}{% endblock footer %}
</div>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- django CMS -->
{% render_block "js" %}
</body>
{% block js%}
<script src="/static/js/buscador.js"></script>
<script src="/static/js/select2.min.js"></script>
<script src="/static/js/django_select2.js"></script>
{% endblock js%}
</html>
If you see the image you will see that the select does not load, that is the problem I am having. with django 2.1.7 the select is loaded with the pages of my site, but with django 2.2.7 it does not work.
And I see the following errors in the browser console
I think djangocms is trying to use a jquery before it is loaded, but I can't identify which one
@mateoreyes thanks for the data. I wasn't clean enough though. Can you send me a rendered template. Just the source of what you see in your browser? Thanks!
This is the window code of the first image that contains the select
<!DOCTYPE html>
<html lang="es">
<head>
<title>
Añadir bootstrap4 link | Sitio de administración de Django</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css">
<script src="/static/cms/js/dist/3.7.0/bundle.admin.base.min.js" type="text/javascript"></script>
<script type="text/javascript">
if (!window.jQuery) {
window.jQuery = CMS.$;
window.$ = window.jQuery;
}
</script>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="/static/djangocms_admin_style/css/djangocms-admin.css" />
<script src="/static/djangocms_admin_style/js/dist/bundle.adminstyle.min.js"></script>
<script type="text/javascript" src="/es/admin/jsi18n/"></script>
<link href="/static/djangocms_icon/css/djangocms-icon.css" type="text/css" media="all" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/css/select2.min.css" type="text/css" media="screen"
rel="stylesheet">
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
<script type="text/javascript" src="/static/djangocms_icon/js/dist/bundle.icon.min.js"></script>
<script type="text/javascript" src="/static/admin/js/collapse.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/i18n/es.js"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/django_select2/django_select2.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/urlify.js"></script>
<script type="text/javascript" src="/static/admin/js/prepopulate.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/xregexp/xregexp.js"></script>
<link rel="stylesheet" href="/static/djangocms_bootstrap4/css/base.css">
<script src="/static/djangocms_bootstrap4/js/bundle.base.js"></script>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/admin/css/responsive.css">
<meta name="robots" content="NONE,NOARCHIVE">
</head>
<body class="popup djangocms-admin-style app-bootstrap4_link model-bootstrap4link change-form"
data-admin-utc-offset="-10800">
<!-- Container -->
<div id="container">
<!-- Content -->
<div id="content" class="colM">
<h1>Añadir bootstrap4 link</h1>
<div id="content-main">
<form action="" method="post" id="bootstrap4link_form" novalidate><input type="hidden"
name="csrfmiddlewaretoken" value="cwtgLeHvuFHDNmpvDUia7FgVK94a0KxW3fD62AblGoaGpWtfT53tPUHZtIcgszw3">
<div>
<input type="hidden" name="_popup" value="1">
<div class="djangocms-bootstrap4 djangocms-bootstrap4-link" data-static="/static/" data-preview="Previo">
<div class="djangocms-bootstrap4" data-static="/static/">
<fieldset class="module aligned ">
<div class="form-row field-name field-link_type">
<div class="fieldBox field-name">
<label for="id_name">Display name:</label>
<input type="text" name="name" class="vTextField" id="id_name" maxlength="255">
</div>
<div class="fieldBox field-link_type">
<label class="required inline" for="id_link_type_0">Link type:</label>
<ul id="id_link_type" class="inline-block">
<li>
<label for="id_link_type_0"><input type="radio" name="link_type" value="link"
class="inline-block" required checked id="id_link_type_0">
Link
</label>
</li>
<li>
<label for="id_link_type_1"><input type="radio" name="link_type" value="btn"
class="inline-block" required id="id_link_type_1">
Button
</label>
</li>
</ul>
</div>
</div>
<div class="form-row field-external_link field-internal_link">
<div class="fieldBox field-external_link">
<label for="id_external_link">External link:</label>
<input type="url" name="external_link" class="vURLField" id="id_external_link" maxlength="2040">
<div class="help">Provide a valid URL to an external website.</div>
</div>
<div class="fieldBox field-internal_link">
<label class="inline" for="id_internal_link">Internal link:</label>
<select name="internal_link" class="django-select2 django-select2-heavy" data-ajax--type="GET"
id="id_internal_link" data-allow-clear="true" data-ajax--url="/select2/fields/auto.json"
data-field_id="MTM5NjgwNjQxNjQ4NjI0:1is6xC:AB6ctcQuz4_C9zwD6Fq0krtCIlw"
data-placeholder="---------" data-minimum-input-length="2" data-ajax--cache="true">
<option value=""></option>
</select>
</div>
</div>
<div class="form-row field-link_context field-link_size">
<div class="fieldBox field-link_context">
<label for="id_link_context">Context:</label>
<select name="link_context" id="id_link_context">
<option value="" selected>---------</option>
<option value="link">Link</option>
<option value="primary">Primary</option>
<option value="secondary">Secondary</option>
<option value="success">Success</option>
<option value="danger">Danger</option>
<option value="warning">Warning</option>
<option value="info">Info</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div class="fieldBox field-link_size">
<label class="inline" for="id_link_size">Tamaño:</label>
<select name="link_size" id="id_link_size">
<option value="btn-sm">Small</option>
<option value="" selected>Medium</option>
<option value="btn-lg">Large</option>
</select>
</div>
</div>
<div class="form-row field-link_outline field-link_block">
<div class="fieldBox field-link_outline">
<input type="checkbox" name="link_outline" id="id_link_outline"><label class="vCheckboxLabel"
for="id_link_outline">Outline</label>
<div class="help">Applies the .btn-outline class to the elements.</div>
</div>
<div class="fieldBox field-link_block">
<input type="checkbox" name="link_block" id="id_link_block"><label class="vCheckboxLabel inline"
for="id_link_block">Block</label>
<div class="help">Extends the button to the width of its container.</div>
</div>
</div>
<div class="form-row field-icon_left field-icon_right">
<div class="fieldBox field-icon_left">
<label for="id_icon_left">Icon left:</label>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<div class="djangocms-icon" data-name="icon_left" data-iconset="fontawesome4">
<div class="icon js-icon js-icon-icon_left form-inline">
<input id="id_icon_left" class="checkbox js-icon-enable" name="icons-enabled-icon_left"
type="checkbox">
<span class="icon-widgets js-icon-widgets hidden">
<label>
<select class="form-control js-iconset">
<option value="fontawesome4" data-iconset-version="lastest" data-iconset-prefix="fa"
selected="selected">Font Awesome 4</option>
</select>
</label>
<label class="iconpicker iconpicker-wrapper js-icon-picker">
<button type="button" name="icon_left" data-iconset="fontawesome4"
data-iconset-version="lastest" data-icon="">
</button>
<input type="hidden" name="icon_left" value="fa ">
</label>
</span>
</div>
</div>
</div>
<div class="fieldBox field-icon_right">
<label class="inline" for="id_icon_right">Icon right:</label>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
crossorigin="anonymous">
<div class="djangocms-icon" data-name="icon_right" data-iconset="fontawesome4">
<div class="icon js-icon js-icon-icon_right form-inline">
<input id="id_icon_right" class="checkbox js-icon-enable" name="icons-enabled-icon_right"
type="checkbox">
<span class="icon-widgets js-icon-widgets hidden">
<label>
<select class="form-control js-iconset">
<option value="fontawesome4" data-iconset-version="lastest" data-iconset-prefix="fa"
selected="selected">Font Awesome 4</option>
</select>
</label>
<label class="iconpicker iconpicker-wrapper js-icon-picker">
<button type="button" name="icon_right" data-iconset="fontawesome4"
data-iconset-version="lastest" data-icon="">
</button>
<input type="hidden" name="icon_right" value="fa ">
</label>
</span>
</div>
</div>
</div>
</div>
</fieldset>
<fieldset class="module aligned collapse">
<h2>Link settings</h2>
<div class="form-row field-mailto field-phone">
<div class="fieldBox field-mailto">
<label for="id_mailto">Correo electrónico:</label>
<input type="email" name="mailto" class="vTextField" id="id_mailto" maxlength="255">
</div>
<div class="fieldBox field-phone">
<label class="inline" for="id_phone">Phone:</label>
<input type="text" name="phone" class="vTextField" id="id_phone" maxlength="255">
</div>
</div>
<div class="form-row field-anchor field-target">
<div class="fieldBox field-anchor">
<label for="id_anchor">Anchor:</label>
<input type="text" name="anchor" class="vTextField" id="id_anchor" maxlength="255">
<div class="help">Appends the value only after the internal or external link. Do <em>not</em>
include a preceding "#" symbol.</div>
</div>
<div class="fieldBox field-target">
<label class="inline" for="id_target">Target:</label>
<select name="target" id="id_target">
<option value="" selected>---------</option>
<option value="_blank">Open in new window</option>
<option value="_self">Open in same window</option>
<option value="_parent">Delegate to parent</option>
<option value="_top">Delegate to top</option>
</select>
</div>
</div>
</fieldset>
<fieldset class="module aligned collapse">
<h2>Configuración avanzada</h2>
<div class="form-row field-template">
<div>
<label class="required" for="id_template">Template:</label>
<select name="template" id="id_template">
<option value="default" selected>Default</option>
</select>
</div>
</div>
<div class="form-row field-attributes">
<div>
<label for="id_attributes">Attributes:</label>
<div class="djangocms-attributes-field">
<div class="template hidden">
<div class="form-row attributes-pair">
<div class="field-box"><input type="text" class="attributes-key"
name="attributes_key[attributes]" value=""></div>
<div class="field-box"><input type="text" class="attributes-value"
name="attributes_value[attributes]" value=""><a
class="delete-attributes-pair deletelink" href="#" title="Eliminar"></a></div>
</div>
</div>
<div class="related-widget-wrapper">
<a class="add-attributes-pair addlink" href="#" title="Add another key/value pair"></a>
</div>
</div>
<style>
.delete-attributes-pair,
.add-attributes-pair {
border: 1px solid #ddd;
border-radius: 3px;
display: inline-block;
padding: 6px 5px 8px 10px;
}
.attributes-pair {
display: table;
table-layout: fixed;
width: 100%;
}
.attributes-pair .field-box:first-child {
width: 25% !important;
display: table-cell !important;
vertical-align: top !important;
float: none !important;
}
.attributes-pair .field-box:last-child {
display: table-cell !important;
vertical-align: top !important;
width: 100% !important;
float: none !important;
}
.djangocms-attributes-field .attributes-pair .attributes-value {
width: 60% !important;
width: -webkit-calc(100% - 54px) !important;
width: -moz-calc(100% - 54px) !important;
width: calc(100% - 54px) !important;
}
.delete-attributes-pair {
margin-left: 16px;
}
</style>
<script>
(function ($) {
function fixUpIds(fieldGroup) {
fieldGroup.find('.attributes-pair').each(function (idx, value) {
$(value).find('.attributes-key').attr('id', 'field-key-row-' + idx)
.siblings('label').attr('for', 'field-key-row-' + idx);
$(value).find('.attributes-value').attr('id', 'field-value-row-' + idx)
.siblings('label').attr('for', 'field-value-row-' + idx);
});
}
$(function () {
$('.djangocms-attributes-field').each(function () {
var that = $(this);
if (that.data('isAttributesFieldInitialized')) {
return;
}
that.data('isAttributesFieldInitialized', true);
var emptyRow = that.find('.template');
var btnAdd = that.find('.add-attributes-pair');
var btnDelete = that.find('.delete-attributes-pair');
btnAdd.on('click', function (event) {
event.preventDefault();
emptyRow.before(emptyRow.find('.attributes-pair').clone());
fixUpIds(that);
});
that.on('click', '.delete-attributes-pair', function (event) {
event.preventDefault();
var removeButton = $(this);
removeButton.closest('.attributes-pair').remove();
fixUpIds(that);
});
fixUpIds(that);
});
});
}(django.jQuery));
</script>
<input type="hidden" name="initial-attributes" value="{}" id="initial-id_attributes">
</div>
</div>
</fieldset>
</div>
</div>
<div class="submit-row">
<input type="submit" value="Grabar" class="default" name="_save" />
</div>
<script type="text/javascript" id="django-admin-form-add-constants" src="/static/admin/js/change_form.js"
data-model-name="bootstrap4link">
</script>
<script type="text/javascript" id="django-admin-prepopulated-fields-constants"
src="/static/admin/js/prepopulate_init.js" data-prepopulated-fields="[]">
</script>
</div>
</form>
</div>
<br class="clear">
</div>
<!-- END Content -->
<div id="footer"></div>
</div>
<!-- END Container -->
</body>
</html>Ok, you can't rely on Django admin's built in jQuery version. You will need to provide jQuery yourself if you want to use Django-Select2. You can do that by overwriting the media class on your widget.
However, I highly recommend using autocomplete_fields that are now implemented in Django itself. This feature was written by me and works even better than this library in the admin.
The first option solved my problem.
Thanks a lot !