In Rails 3, you can utilize JavaScript to submit a form_tag remotely, however ensure that it submits as

I am trying to implement a form_tag in rails 3 that can be submitted using ajax instead of html through javascript. Despite setting the form to submit as javascript, it still submits as html when clicking the submit button.

- form_tag({:controller => "checkin", :action => "main_page"}, :remote => true, :method => :get, :id => "get_location_form" ) do
  Latitude:
  = text_field_tag 'latitude_field', '', :size => 10, :class => 'submittable'
  Longitude:
  = text_field_tag 'longitude_field', '', :size => 10, :class => 'submittable'
  = submit_tag "Send Info"

In addition, I have included jQuery functions in my application.js file:

$(document).ready(function() {
   $("#get_location_form").submitWithAjax();
});

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  });
  return this;
};

I am facing an issue where manually pressing the submit button triggers a javascript request, but using form.submit() in javascript results in an HTML request being sent.

If you have any insights into why this may be happening, your help would be greatly appreciated.

Answer №2

Issue resolved by using the following code snippet:

$("#referenceSubmit").trigger("click");
. Ensure that 'referenceSubmit' refers to the correct ID of the submit button.

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

Vue Component Rendering Before Vuex Data is Ready

I am facing a challenge with my Vue2 component that depends on Vuex to fetch the currently selected node (infoNode) and display its data to the user. In my beforeCreate function, Axios is used to retrieve the top level nodes and set the 'infoNode&apos ...

Prevent secret select fields from being submitted within a form

In my interface, there are a couple of dropdowns where a user can select the first option and based on that selection, a new dropdown will appear. Currently, when posting the form, all the select dropdown values are included in the post data, even the hid ...

Ways to retrieve a list of identifiers from arrays at both initial and subsequent levels

I'm currently dealing with a JSON/JavaScript structure that looks like this: { "comments": [ { "id": 1, "content": "lorem ipsum", "answers": [] }, { "id" ...

Issue: The specific module is unable to be located, specifically on the Heroku platform

While my application performs well locally and on a Travis CI build server, it encounters issues when deployed on Heroku. The error message Error: Cannot find module is displayed, leading to app crashes. Here are some details about the npm module: It r ...

Present Different Content for Visitors Using Ad-Blocking Software

I am currently working on a project that is supported by ads. These ads are subtle and relevant to the content, not obnoxious popups for questionable products. However, since the project relies on ad revenue, users with Ad Blockers unfortunately do not co ...

Use Jquery to select the checkbox inside the td element and mark it as

I've created an HTML table with checkboxes in the td elements, like so: <table id="my_table"> <tr> <td><input type="checkbox" name="td1"></td> <td><input type="checkbox" name="td2"></td> </ ...

What is the process for incorporating an npm package into an HTML document?

Here is the code from my HTML file: <!DOCTYPE html> <head> ... </head> <body> ... <script src="script.js"></script> </body> This is what I have in my JavaScript file named script.js: import * as File ...

Encountering an issue when trying to submit a post request: "Received an API resolution without a response for /api/comments, which could lead to delayed requests."

Hey, I recently started diving into Next.js and I'm facing an issue with making a POST request to the API. In my project structure, I have a comments folder nested inside the api folder. Within the comments folder, I've written the following cod ...

Encountering unexpected token < in .Net with Jquery Ajax

I've developed a JavaScript function that interacts with a server-side method function abc() { var Url = "MyService.svc/MyMethod"; var Param = '{"Keyword":"' + Keyword + '","Type":"' + type + '"}'; $.ajax({ ...

Encountering a react error following the installation of FontAwesome via npm

I successfully installed fontawesome by visiting their official website and following the steps below: 1. npm i --save @fortawesome/fontawesome-svg-core 2. npm install --save @fortawesome/free-solid-svg-icons 3. npm install --save @fortawesome/react-fon ...

Is it possible to await the response of a request in Socket.io with socket.on('answerToRequest')?

Can the following scenario work out? async function checkSocketStatus(){ socket.emit('checkOtherSocketStatus', otherSocketId); await socket.on('responseCheckSocketStatus', (status)=>{ console.log('status'); } ...

iOS devices are experiencing issues with touchstart and touchend events not functioning when utilizing jquery mobile and cordova

During a previous project, I encountered no problems with the following code snippet. It effectively utilized touchstart and touchend events to adjust the CSS of a button: <script> $('input[type="button"]').on('touchstart', func ...

Submitting a form with missing required information because the placeholder attribute is being used

I'm encountering an issue with my form where required fields can be submitted without any input. I want to use placeholder text, but it seems to be treated as a value, causing the form to submit successfully. I am utilizing the HTML5 'placeholde ...

Ensure that the JSON object exists before saving it to local storage

[ { "id": 1, "title": "my First Item", "body": "" }, { "id": 2, "title": "my Second Item", "body": "" }, { "id": 3, "title": "my Third Item", "body": "" } ] Do ...

AngularJS is not triggering the $watch function

I'm facing an issue with the $scope.$watch function, as it's not being triggered when expected. In my HTML document, I have a paginator using bootstrap UI: <pagination total-items="paginatorTotalItems" items-per-page="paginatorItemsPerPage" ...

easy method for creating a hyperlink that triggers a "download" pop-up box

Is there a simple and efficient way to have some of my links trigger the 'save file as' prompt (similar to right-clicking) immediately after they are clicked for the first time? ...

How to retrieve the value of a hidden field in ASP.NET after a partial postback

On my ASP.NET page, I am encountering an issue with a hidden field not being found during an asynchronous postback within an update panel. In the updatepanel_Load event, the following code is used: if (!IsPostBack || triggeredRefresh.Value == "1") { H ...

Utilize the power of DOJO JavaScript to implement Reverse AJAX functionality in

Exploring the possibility of implementing Reverse AJAX with the DOJO Javascript framework. Curious if DOJO has built-in support for this feature like other frameworks such as DWR. I am currently working with the most recent version of DOJO - any guidance ...

Learn how to effectively transfer data from $.getjson to PHP, specifically through the use of Laravel's @foreach loop

$.getJSON( 'http://localhost/media_books/index.php/new_books.json?provider_id=1&limit=99&offset=1') .done(function( json ) { $(tar).closest('.accordion').children('div').text(json); }); I have successfully obtaine ...

Enhance the numerical worth of the variable through the implementation of the function

I'm working on a JavaScript timer but I'm struggling with assigning the value of a parameter to a global variable. Currently, I can achieve this without using parameters, but I really want to streamline my code and reduce the number of lines. He ...