1

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');
        }
    });

});
1
  • 2
    You have several console.log Commented Aug 20, 2017 at 14:52

1 Answer 1

2

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.