Jquery blur method is not performing any action with form data of the django

Question

I'm developing Checklist app with Django in which I'm trying to create a template with title and checklist items, for title I'm using the Jquery Ajax for storing the title in the DB with the help of model form.

Here is the JS and AJAX code I'm using to pass data to view

        <script type="text/javascript">
            $(document).on("blur","#js_template_title", function(e){
                e.preventDefault();
                $.ajax({
                    type:'POST',
                    url:'{% url "checklist" %}',
                    data:{
                        title:$('#js_template_title').val(),
                        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
                        action:'post',
                    },
                    success: function(response){
                        $("#js_template_title").val(data['title']);
                    },
                    error: function(xhr,errmsg,err){
                        console.log(xhr.status+":"+xhr.responseText);
                    }
                });
            });
        </script>

The below is the HTML snip for form, the ID "js_template_title" which I'm using in JS is explicitly added in the Forms with the widgets help

        <form method='post' id='js-title-form' class="form-inline p-1 m-1">
            <div class="form-row">
                <div class="col">
                    {% csrf_token %}
                    {{temp_form|crispy}}
                </div>
                <div class="col">
                    <input class="" type="image" src="{% static 'components/tick.jpg' %}"  alt="submit" width="30" height="30">
                </div>
            </div>
        </form>

temp_form --> Code from browser

<input type="text" name="title" placeholder="Title" id="js_template_title" class="textinput textInput form-control" required="">

The problem is the code works well with submit action but when I comment out the input submit action and enable the blur it's not working.

Suggest me with the appropriate action which can be used to save the title name to DB when the focus is out of the text field

ivardu · Accepted Answer · 2020-02-04T20:55:28.120

Got it.. !!

The main issue was with the script src

The one which I was using,

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

as a part of debugging tried adding Google CDN JS source at the end and it's started working fine, data is posted to DB.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

As Newbie tried the BP mentioned How to Integrate Ajax with Django

one of the steps says to use the chrome for debugging the JS and AJAX which eventually helped me here to find the src as a problem and fix the below error by changing the src

Error: Uncaught ReferenceError: $ is not defined?

Jquery blur method is not performing any action with form data of the django

1 Answers1