CODEWITHSUNDEEP
jquerydjango
Andrew Saltz
Andrew Saltz

Reputation: 355

JQuery/Django Syntax error

I know there is some dumb error I'm missing. Pycharm/Brackets hasn't been able to help, and I've combed it a dozen times.

The idea is when someone clicks on a reservation slot (slot), they can either reserve it, clear it, or be blocked because someone already has it. The error returned is "SyntaxError: missing : after property id" for line 41, which is "console.log()". I've been reading and it's probably a syntax error elsewhere, but I'm stumped.

#views.py
@ensure_csrf_cookie
def reserve(request):
    if request.is_ajax():
        pk = request.POST['pk']
        slot = Event.objects.get(pk=pk)
        user = request.user
        if slot.is_reserved == True:
            if user == slot.teacher:
                slot.is_reserved = False
                slot.teacher = None
                slot.save()
                result = "clear"
            else:
                result = "blocked"
        else:
            slot.is_reserved = True
            slot.teacher = user
            slot.save()
            result = "reserved"
    result = {'result': result}
    return HttpResponse(json.dumps(result, cls=DjangoJSONEncoder))

//main.js
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
            // Only send the token to relative URLs i.e. locally.
            xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
        }
    }
});
$(document).ready(function () {
    console.log('ready!'); //Sanity check
    var count = 0; //Set Count
    $('button').click(function () {
        console.log('we clicked!'); // Sanity Check II
        event.preventDefault();
        var pk = this.id
        var user = $('button').attr("user")
        count++ //Increase the count towards reload
        console.log(pk, user) // Sanity Check III
        $.ajax({
            url: "/reserve/",
            type: "POST", //Send the info to reserve view
            data: {
                pk: pk
            },
            dataType: "json",
            console.log('form submitted') // Sanity check IV (I may have a problem)
            success: function (result) {
                if (result.result == 'clear') {
                    $(this).toggleClass("free reserved");
                    $.toast({
                        heading: "Reservation Clear!",
                        icon: 'success',
                        stack: 4,
                        hideAfter: 2000,
                        bgColor: '#003366',
                    });
                };
                if (result.result == 'reserved') {
                    $("div.tchr").html(user); //Send user info to button, reverts on refresh
                    $(this).toggleClass("free reserved");
                    $.toast({
                        heading: "Reservation Complete!",
                        icon: 'success',
                        stack: 4,
                        hideAfter: 2000,
                    });
                };
                if (result.result == 'blocked') {
                    alert("This slot is already reserved! Maybe refresh your browser?")
                };
            };
        });
        if (count > 4) {
            var count = 0
            $('#main_view').load(document.URL + ' #main_view'); //Reload if the count hits four
        }
    });
});
//End button function

$(document).ready(function () {
    console.log('ready!'); //Sanity check
    $('#toggle').click(function () {
        var $this = $(this);
        console.log('we clicked!');
        $('#main_view').toggle('500');
        $('#my_view').toggle('500');
        $this.toggleClass('one');
        if ($this.hasClass('one')) {
            $this.text('My Reservations');
        } else {
            $this.text('Today');
        }
    });

});

Upvotes: 1

Views: 53

Answers (1)

Arpit Solanki
Arpit Solanki

Reputation: 9931

If you remove the line marked below it will definitely work. In a dict of params for ajax you are putting a console.log which is completely wrong.

$.ajax({
            url: "/reserve/",
            type: "POST", //Send the info to reserve view
            data: {
                pk: pk
            },
            dataType: "json",
            console.log('form submitted') <-- remove this line
            success: function (result) {
                if (result.result == 'clear') {
                    $(this).toggleClass("free reserved");
                    $.toast({
                        heading: "Reservation Clear!",
                        icon: 'success',
                        stack: 4,
                        hideAfter: 2000,
                        bgColor: '#003366',
                    });
                };

Note: if you want to debug your code then you can put a beforesend like function from ajax which would help in debug that whatever you are passing or what is your flow of js code.

Upvotes: 2

Related Questions