Having trouble identifying the data variable. Uncaught ReferenceError: edu_id has not been defined

How can I successfully pass the edu_id from an AJAX request to my Laravel controller?

Utilizing anchor tags

<a href="javascript:void(0);" onclick="showEditEducation(some_specific_id);" title=""><i class="la la-pencil"></i></a>

Implementation of Javascript function

function showEditEducation($edu_id)
{
    console.log($edu_id);
     $.ajax({
        type: "POST",
        url: "{{ route('show-edit-education', $user->id) }}",
        data: {"education_id": edu_id,"_token": "{{ csrf_token() }}"},
        datatype: 'json',
        success: function (json) {
            $("#showMe").html(json.html);
        }
     });
}

Laravel Controller handling the edit education form

 public function showEditEducationForm(Request $request, $user_id)
    {
        $user = User::find($user_id);
        $education_id = $request->input('education_id'); 

        $applicantEducation = ApplicantEducation::find($education_id);

        dd($applicantEducation);

    }

The console.log output shows a correct number for "edu_id". However, there seems to be an issue with how ajax interprets it.

Answer №1

According to Sir Randy's advice, simply adding a dollar sign will resolve the issue.

edu_id

to

$edu_id

Final snippet of javascript function code

function showEditEducation($edu_id)
{
    console.log($edu_id);
    $.ajax({
        type: "POST",
        url: "{{ route('show-edit-education', $user->id) }}",
        data: {"education_id": $edu_id,"_token": "{{ csrf_token() }}"},
        datatype: 'json',
        success: function (json) {
            $("#showMe").html(json.html);
        }
 });

}

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 ng class with an array of objects: A step-by-step guide

I am facing a scenario in which my response appears as follows: "currency" : [ { "_id" : ObjectId("584aad5d3e2537613e5f4c39"), "name" : "USD" } ], I need to enable my checkbox based on the currency name. I attempted the followi ...

Merge two distinct JSON objects obtained through an API request using Javascript

Struggling with my currency conversion project, I'm trying to display JSON response results on my website but can't seem to make it work. The code snippet below, .then((response) => { return response.json(); }) .then((jsonRespo ...

Can an entire object be bound to a model in an Angular controller function?

In TypeScript, I have defined the following Interface: interface Person { Id: number; FirstName: string; LastName: string; Age: number; } Within a .html partial file, there is an Angular directive ng-submit="submit()" on a form element. A ...

Guide to utilizing JSON for fetching an array from a query

I'm having trouble displaying the names of all the continents on my page. Whenever I try to do so, I just see '[object Object]' instead of the actual continent names. How can I fix this issue and actually get the continent names to show up? ...

What is the best way to ensure a jQuery function runs on duplicated elements?

I have been attempting to construct a webpage featuring cascading dropdowns using jQuery. The goal is to generate a duplicate set of dropdowns when the last dropdown in the current set is altered. I aim for this process to repeat up to 10 times, but I cons ...

Does ng-include fetch the included HTML files individually or merge them into a single HTML file before serving?

Is there a performance impact when using the ng-include Angular directive, in terms of having included HTML files downloaded as separate entities to the user's browsers? I am utilizing a CDN like AWS CloudFront instead of a node server to serve the H ...

navigate back to the previous tab using protractor

When I open a new tab (second), I attempt to switch back to the first tab. common.clickOpenNewSession(); //opens a new tab browser.getAllWindowHandles().then(function (handles) { var secondWindowHandle = handles[1]; var firstWindowHandle ...

Using regular expressions in JavaScript, how can one extract the content along with the HTML tags from within the tags?

Below is the text to be analyzed: how much production in batu The text is displayed with HTML tags where each word is wrapped in a span with a specific style or class. For example: '<span style="">how &nbsp;</span><span style ...

Retrieve the values from the second dropdown list based on the choices made in the first dropdown menu within a React application

Hi there. I am attempting to create a cascading dropdown menu using the data from api. For example, in the first dropdown, I have the following options: 1. Fruits 2. Roots 3. Flowers If I select Fruits, then Orange, Apple, and Strawberry should appear. ...

Refreshing a HTML table by retrieving data from a session variable

I'm still learning the ropes when it comes to JSP, jQuery, and AJAX. I have a JSP page that utilizes a table populated with values from a List variable stored in session. Below is the code snippet: <table id="someData" class="display" width="95%"& ...

Locating the initial array within a set of nested arrays

One of the functions I'm working on has the ability to generate a nested array, especially for multiPolygon purposes. Here's an example of how it might look: [ [ [ 10.0, 59.0], [ 10.0, 59.0], [ 10.0, 59.0] ], [ [ 10.0, 59.0 ...

What is the best way to combine two objects in AngularJS?

https://i.sstatic.net/qr5Bb.png If you have two JSON objects that need to be merged while removing duplicate properties, what approach would you take? ...

Anchoring links on a webpage that provide users with a clear indication of their current position within the page

In the scenario of a single-page website with various sections (divs) and a header containing links to different anchors on the page, there is a desire to have an indicator highlight which anchor the user is currently viewing. An example of this can be s ...

The Vuex store variable is being accessed prior to being populated with information retrieved from the API

I am currently attempting to retrieve data from an API using Vuex. Below is the action function in the Vuex store: async getEpisodeFromApi({ commit }, id) { const data = { id }; return await axios.get(Api.getUrl(data)).then((res ...

How can dynamic values be displayed in VueJS?

I'm looking to display dynamic titles based on the number of times a value is added. For example, if a user selects cats and clicks Add, I want the title to show as cats 1. If the user adds it again, then it should be displayed as cats 2, and so on fo ...

The data is not retrieved in the response

When creating an order, I am encountering an issue where the code is not waiting for the meal data retrieval despite using async and await. This results in my response containing empty data. Although I prefer to use async and await over promises for consi ...

Form submission using AJAX is either limited to one-time use or requires a page refresh to update

One of the challenges I encountered while working on a wiki app built in Rails was updating a table of collaborators using JavaScript. I wanted to add collaborators from an existing users' table without having to refresh the page every time. Initially ...

Is there a way to transform authorid into postid in order to retrieve author information and store it in my authorDocument array?

**Can you help me troubleshoot why this code is not functioning properly? ** let posts = await postsCollection.aggregate([ {$match: {_id: new ObjectID(id)}}, {$addFields: {authorId: { $toObjectId: "$author"}}}, {$lookup: {from: "user ...

What is it about Next JS and React JS applications that causes them to use up so much cache?

"What causes Next.js and React.js applications to need a large cache, and how does this affect their performance and resource usage?" Refreshing constantly for even small changes in the application as a developer can be frustrating. Are there an ...

Execute a specific function when the Node.js countdown reaches zero

I am currently working on a web application and I need to incorporate a new function. This function will display a table containing certain results when a user submits a request. If the user does not submit anything, it will show different results as tim ...