CODEWITHSUNDEEP
javascriptjqueryajaxdjangodjango-templates
Femme Fatale
Femme Fatale

Reputation: 880

JQuery conflict with Django base .js file

I have a base template in Django in which i am using app.js. This app.js is used in theme.

Now i want to have modal popup by ajax and for which i need to call Jquery function. The page on which the button for popup modal is present is extending the base.html. Thus, when i try to call the page i get the following error.

Error in console enter image description here

However, when i don't extend base.html on my page i don't get any error and am able to have the popup modal. Here the code of my page

new.page

{% extends 'base.html' %}
 {% load static %}
{% include "devices/_modal.html" %}


{% block content %}
  <div class="container mt-3">
        <div class="row">
          <div class="col-12 mb-3">

            <button class="create-book btn btn-primary" type="button" name="button">
              <span class="fa fa-plus mr-2"></span>Create book</button>
          </div>

        </div>


  </div>


{% endblock  %}

{% block extra_js %}


    <script type="text/javascript" charset="utf8"  src="{% static "user/js/jQuery-3.3.1.js"%}"></script>
        <script type="text/javascript"  src="{% static "user/js/bootstrap.min.js" %}"></script>
    <script type="text/javascript" charset="utf8"  src="{% static "user/js/jquery.bootstrap.modal.forms.min.js"%}"></script>

    <script type="text/javascript">
    $(function () {
      $(".create-book").modalForm({formURL: "{% url 'addLocation' %}"});

    });
    </script>

{% endblock extra_js %}

My base.html is 

<!DOCTYPE html>
{% load user_tags %}
 {% load static %}

<html lang="en">
<head>

{% block extra_head %}{% endblock %}
    <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="">
    <link rel="icon" href="{% static "user/images/favicon.ico"%}" type="image/x-icon">
    <title>Power Management</title>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'user/css/app.css' %}">
    <style>
        .loader {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #F5F8FA;
            z-index: 9998;
            text-align: center;
        }

        .plane-container {
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
    <body class="light">
        {% block content %}
        {% endblock %}

         {% block grid  %}
        {% endblock %}

        {% block scripts %}

            <script src="{% static "user/js/app.js" %}"></script>
        {% endblock %}
        {% block extra_js %}

        {% endblock extra_js %}
    </body>
</html>

Is there any workaround. How can i call my Jquery?

Upvotes: 0

Views: 495

Answers (1)

Osiris Pujols
Osiris Pujols

Reputation: 176

I personally haven't used Django, but I think you could use noConflict function to avoid using the dollar sign ($) for JQuery calls.

You can use it like this:

JQuery.noConflict();
JQuery(document).ready(function() {
    //Code
});

If you want, you could use your own alias by assigning a variable to JQuery.noConflict(), like:

var customJQueryCall = JQuery.noConflict();
customJQueryCall(document).ready(function() {
    //Code
});

You may also check this in their API:

https://api.jquery.com/jquery.noconflict/

Upvotes: 1

Related Questions