Updating a marker's latitude and longitude using Laravel, Google API, and Ajax: A step-by-step guide

I'm struggling with sending the marker coordinates to a controller using ajax. I have named my routes 'update-marker-position' and included csrf_token(), but I am still seeing an error message in the logs.

In my web.php file:

Route::post('/update-marker-position', [MarkerController::class, 'updatePosition'])->name('update-marker-position');

Below is my code snippet:

google.maps.event.addListener(marker, 'dragend', function (event) {
                const newLat = event.latLng.lat();
                const newLng = event.latLng.lng();
                const markerTitle = marker.getTitle();
                  

                $.ajax({
                    method: "POST",
                    url: '{{ route('update-marker-position') }}',
                    data: {
                        _token: '{{ csrf_token() }}',
                        title: markerTitle,
                        lat: newLat,
                        lng: newLng
                    },
                    success: function (response) {
                        console.log('Successfully updated:', response);
                    },
                    error: function (error) {
                        console.error('Error:', error);
                    }
                });


            // console.log('Shop:', markerTitle,' Latitude: ', newLat,' Longitude: ', newLng);

            });

Error message in logs:

500 (Internal Server Error)

Answer №1

To identify server errors, open DevTools and navigate to the Network Tab. Filter the results by selecting Fetch/XHR, then locate requests with a status of 500. Finally, click on Preview to view detailed server error information.

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

Redux state not reflecting changes until second click

My redux store has a simple boolean setup to track whether a sidebar is expanded or not. However, I'm encountering an issue where, even though the default value is false, clicking the toggle button outputs false first. Ideally, if it's initially ...

Is it preferable to include in the global scope or the local scope?

When it comes to requiring a node module, what is the best approach? Should one declare the module in the global scope for accuracy and clarity, or does declaring it in the local scope make more sense? Consider the following examples: Global: let dns = r ...

Comparing Embedded and Linked JS/CSS

In my experience, I understand the advantages of using linked CSS over embedded and inline styles for better maintainability and modularity. However, I have come across information suggesting that in certain mobile web development applications, it may be m ...

Sending lambda expression to controller via ajax request

I'm curious if it's achievable to send a lambda expression from the view to the controller. For instance, imagine I have a model: public class CustomExpressionModel<T> { public Expression<Func<T, string>> Expression { get; ...

The content inside a Textbox cannot be clicked on. I am seeking help with implementing JavaScript to enable it to be

As a newcomer in the world of programming, I am sharing a snippet of my JavaScript and HTML code with you. I am facing an issue where I want to enable users to start typing in a text box upon clicking on the text "User Name", without deleting any existing ...

What are some ways to avoid sorting parameters in AngularJS when making a GET request using $resource?

My resource is: angular.module('myApp.services') .factory('MyResource', ['$resource', function ($resource) { return $resource('http://example.org', {}, {}); }]); How I send a GET request: MyResourc ...

Make sure to include additional details, such as copyright information and a link to read more, when copying text. It is also important to maintain the

When attempting to include a read more link in my copied text, I am encountering an issue where the line breaks and formatting are being neglected: <script type='text/javascript'> function addLink() { var body_element = document.getEl ...

The setState method fails to properly update the state

I am currently utilizing React JS. Below is the code for my React class: class MyReactComponent extends React.Component{ constructor(props){ super(props); this.state = { passAccount: { email: "Email&quo ...

Tips on avoiding the repetition of jQuery functions in AJAX responses and ensuring the effectiveness of jQuery features

My HTML form initially contains only one <div>. I am using an AJAX function to append more <div> elements dynamically. However, the JavaScript functionality that works on the static content upon page load does not work for the dynamically added ...

Laravel 11 AJAX request displaying only the response data and failing to trigger the success function

My Laravel 11 AJAX request is only displaying the response data instead of executing the success function as expected. I have included all relevant code below. Index.blade.php: <table id="employeesTable" class="table table-hover datatabl ...

Learn how to implement scrolling text using JavaScript and jQuery, where text slides by clicking on the previous and next icons

click here to see the image Is it possible to create a text slider that moves when clicking on previous and next icons? I want only 10 texts to be visible at a time, with the rest hidden. When clicked, all the texts should appear. Unfortunately, I don&apo ...

Receiving a blank request payload despite implementing a body parsing middleware

I am currently working on setting up a login system, and I have a form that sends a post request to my webpack dev server. This server then proxies the request to my actual server. Here is the function responsible for handling the form submission and send ...

What is the best way to send the output of a function once the loop has completed?

Within a Node/Express server written in CoffeeScript, I am working on a function that looks like this: @resolveServers = (url, servers, answer) -> result = [] treatServer(url, server, (treatAnswer) -> result.push(treatAnswer) ) for server ...

Cloudflare SSL Error 522 Express: Troubleshooting Tips for Res

After setting up my express project using express-generator, I decided to make it work with a cloudflare SSL Certificate for secure browsing over https. My express app is running on port 443. Despite my efforts, when I try to access the domain, I encount ...

The search bar fails to display all pertinent results when only a single letter is inputted

How can I create a search functionality that displays array object names based on the number of letters entered? When I input one letter, only one result shows up on the HTML page, even though the console.log displays several results. The desired output is ...

Passing a leading zero function as an argument in JavaScript

Is there a method for JavaScript to interpret leading zeros as arguments (with the primitive value as number)? I currently have this code: let noLeadingZero = (number) => { return number } console.log('noLeadingZero(00):', noLeadin ...

Passing ViewModel from Asp.Net Ajax to Controller

I'm encountering a minor issue, My table-based calendar view includes an Ajax link on each day that opens a specific form for users to set information for the selected day. Now, I need to retrieve the day-specific data from the partial view and save ...

Having difficulty with a script not functioning properly within an onclick button

In my script, I am using the following code: for (var i in $scope.hulls) { if ($scope.hulls[i].id == 1234) { console.log($scope.hulls[i]); $scope.selectedHullShip1 = $scope.hulls[i]; } } The code works fine outside of the onclick button, but fails to run ...

Ensure that the promise is fulfilled only if a specific condition is met

I have a complex if-else condition in my code that includes different promises. Once the logic determines which condition to enter and executes the corresponding promise, I need to ensure that a final promise is always executed. if (a < 5) { vm.pr ...

Angular 2 repeatedly pushes elements into an array during ngDoCheck

I need assistance with updating my 'filelistArray' array. It is currently being populated with duplicate items whenever content is available in the 'this.uploadCopy.queue' array, which happens multiple times. However, I want to update ...