Rails Frontend Trying to save autogenerated data to database without form

I'm new to ruby on rails. I'm trying to save data that is generated by itself to the database. i have looked into and found I was meant to use ajax, however all the videos/forums i have seen are example of ajax that use form and not refreshing page. i want to save data automatically without pressing submit.

Assume that the project is fresh project with postgresql as the database. I have created a database that can hold geo points by using postgis. i have created another page where it has map implemented where i can manully pin location. I want to save the manuuly pinned location to the database.

function onMapClick(e) {
 alert("You clicked the map at " + e.latlng);
}

mymap.on('click', onMapClick);

var popup = L.popup();

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
        .openOn(mymap);
}

mymap.on('click', onMapClick);

The e.latlng holds the geopoint, but i dont know how to save it the database if the user clicks anywhere on the map.

Solution

You don't need submit form to use ajax. Basically what you want is add event listener to the map, and when user click then send ajax request to the controller.

For example, let's say that your map is inside div with id my-map. If you use jQuery you can write something like this:

$('#my-map').on('click', function() {
   # add your logic here
   $.ajax({
    url: 'your-url',
    type: 'POST',
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify({
       'let': data you want to send to backend
    })
}

Hope it works!

EDIT:

After I looked your code I found that you can not have jQuery in your project so you can not use jQuery ajax. You need use vanilla javascript. So instead this snippet above, you can write this.

    var xhttp = new XMLHttpRequest();
    const params = { saving_location: { geoPoints: e.latlng } }
    xhttp.onreadystatechange = function() {//Call a function when the state changes.
        if(xhttp.readyState == 4 && xhttp.status == 200) {
            alert(http.responseText);
        }
    }

    xhttp.open("POST", "/saving_locations", true);
    xhttp.setRequestHeader('Content-Type', 'application/json', 'Accept', 'application/json');
    xhttp.send(JSON.stringify(params));

Also add protect_from_forgery with: :null_session in your application controller and skip_before_action :verify_authenticity_token in your Saving Location controller.(under before_action). Here is good blog post why you need this https://blog.nvisium.com/understanding-protectfromforgery

Please notice that you wan't save your database, because your geoPoints type in database is type of point and you send string to rails controller. I never work with points in rails so I can not help you here.(You can always add two columns in db, one for longitude and one for latitude and then store numbers instead point)