The AJAX comments triggered an Uncaught SyntaxError due to an unexpected identifier

Can someone assist me in identifying the issue? I keep receiving an Unexpected identifier error when attempting to use ajax for sending comments. Code:

function funcSuccess(data) {
    $("#comment_ajax").text(data);
}
function funcBefore() {
    $("#comment_ajax").text("Loading comment...");
}
$(document).ready(function() {
    $("#make_comment").bind("click", function() {
        event.preventDefault();
        $.ajax({
            let post = $("#c_post_id").val();
            let user = $("#c_user_id").val();
            let text = $("#c_text").val();
            url: "write_comment.php",
            type: "POST",
            data: { c_post_id: post, c_user_id: user, c_text: text },
            dataType: "html",
            beforeSend: funcBefore,
            success: funcSuccess
        });
    });
});

The error is occurring on the line "let post = $("#c_post_id").val();". What mistake have I made?

Answer №1

For a smoother ajax call, make these changes to your code: substitute the = for : and the ; for ,. Follow this format with your ajax request.

function onSuccess (result) {
    $("#ajax_comment").text(result);
}

function onBefore (){
    $("#ajax_comment").text("Loading comment...");
}

$(document).ready(function(){
    $("#post_comment").bind("click", function () {
        event.preventDefault();
        $.ajax({
            post: $("#post_id").val(),
            user: $("#user_id").val(),
            text: $("#comment_text").val(),
            url: "write_comment.php",
            type: "POST",
            data: {post_id: post, user_id: user, comment_text: text},
            dataType: "html",
            beforeSend: onBefore,
            success: onSuccess
        });
    });
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JQuery to differentiate a single element within a group of elements

As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...

What is the best way to ensure that all the divs within a grid maintain equal size even as the grid layout changes?

I have a grid of divs with dimensions of 960x960 pixels, each block is usually 56px x 56px in size. I want to adjust the size of the divs based on the changing number of rows and columns in the grid. Below is the jQuery code that I am using to dynamicall ...

Customizing the layout of specific pages in NextJSIncorporating

In my Next.js project, I'm trying to set up a header and footer on every page except for the Login page. I initially created a layout.tsx file in the app directory to apply the layout to all pages, which worked fine. However, when I placed another lay ...

Looking to retrieve selections when the inputValue changes in react-select?

I'm working with a react-select component and I would like to implement a feature where an API request is triggered as soon as the user starts typing in the react-select field. This request should fetch items related to the keyword entered by the user ...

Is there a way to update the dictionary in the context processor without having to reload the page?

I have implemented a custom context processor that returns the value of "unread_messages_count". However, when I try to update this value on the template using the following JavaScript: var update_message_count = setInterval(function(){ ...

Submit a HTML form to a Telegram recipient

I am looking to send HTML form data, which includes input values and select options, to a telegram user. After some research, I discovered that I need to create a Telegram bot. I successfully created one using @botFather by following these steps: /newbot ...

Just starting out with json/ajax and I received an error in the Console that says: Uncaught TypeError: Cannot read property 'length' of undefined

I’m encountering an issue with my code. I must emphasize that I’m brand new to this, so please bear with me if the solution is simple. I did attempt to solve it myself before reaching out for help and searched through various posts with similar errors, ...

Troubleshooting: Clicking the Ajax button yields no response

I’ve looked through all the similar questions and tried multiple solutions, but nothing seems to be working. My goal is to retrieve job postings from my database related to careers. When a user wants to apply for a job, they should click a button which w ...

Deliver JavaScript and HTML through an HTTP response using Node.js

My attempts to send both a JavaScript file and an HTML file as responses seem to be failing, as the client is not receiving either. What could be causing the client to not receive the HTML and JavaScript files? I am using Nodejs along with JavaScript and H ...

Expanding Image with HTML and CSS: A Guide

In the process of creating my website, I encountered an issue with the logo placement. I wanted the logo to be in the top left corner, similar to the one shown in this image. Initially, everything was working fine until I made some adjustments to move the ...

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

JavaScript object merging (let's coin a term)

Is it possible to natively transform an object in JavaScript? { sample:{ name:"joe", age:69 } } into { 'sample.name': 'joe', 'sample.age': 69 } I have tried the following method, and it appears to wor ...

Guide to setting up a trigger/alert to activate every 5 minutes using Angular

limitExceed(params: any) { params.forEach((data: any) => { if (data.humidity === 100) { this.createNotification('warning', data.sensor, false); } else if (data.humidity >= 67 && data.humidity <= 99.99) { ...

Encountering an error while trying to run a Next.js application on Linux Mint

View the error screenshot After creating a new Next.js app with npx create-next-app, I ran npm run dev and encountered the following error message ...

The issue with VueEditor in Nuxt.js is that it's throwing an error

When working on my Nuxt.js project, I integrated the vue2-editor package for writing articles with HTML. Everything functions properly when I enter text and submit it, however, upon reloading the page, I encounter an error stating "document is not defined" ...

What could be causing the Error 400 message to appear when trying to upload a JSON file via an HTTP request?

This Code Snippet is Essential function makeRequest() { var dataToSend = { "username": "234zu", "subject": "qwertz", "content": "qw", "created_at": "2018-12-15 22:18:54", "updated_at": "2018-12-15 22:18:54" ...

Navigating through the map function within Protractor

In my Angular application, I have implemented a timeline that displays event dates with their respective descriptions. Below is the HTML source code for this feature: <!-- timeline --> <h4 class="font-thin m-t-lg m-b-lg text-primary-lt">Hi ...

Adjust the alignment of text on both ends of the HTML5 canvas

Is there an easier way to align text on both sides of a canvas element besides using CSS? The link below might provide some insight: https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527 I'm considering incorporating the text into the d ...

Troubleshooting problem with Materialize CSS in UI router

Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...

Struggling to display the sorted array items on the screen?

Within the realm of my jsfiddle experiment, my aim is to organize items based on price from highest to lowest by utilizing the following function: function mySortingFunction() { var elements = [].slice.call(document.getElementsByClassName("price")); e ...