Rails AJAX modal refusing to close post submission

I am seeking feedback in a materialize-css modal view:

<% @contents.each do |content| %>
some form elements

<%=button_to('Comments', new_comment_path, :method => :get, params: {    :content_id => content.id }, :class=> 'modal-trigger', 'data-target'=>'modal4'+content.id.to_s) %>

<% end %>

modal=>

<div id="modal4<%=content.id%>"  class="modal modal-fixed-footer">
 <div class="modal-content">
  <%= form_for Comment.new, remote: true do |f| %>
    …
    …
    <%= f.submit 'Send’ %>

  <% end %>

CommentsController =>

def create
  @comment = Comment.new(comment_params)
end

The values are stored in the database: Rendered comments/create.js.erb (0.0ms)

However, I am facing an issue where the modal does not close after submission.

create.js =>

Attempts made with 

$('#modal4').closeModal();
$('#modal4').modal('close');
$('modal4<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="516c11323e3c3c343f257f323e3f25343f25">[email protected]</a>_id%>').closeModal();
$("modal4<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="162b5675797b7b7378623875797862737862">[email protected]</a>_id%>").modal('close');

Unfortunately, none of these methods were successful.

javascriptruby-on-railsajaxmodal-dialog

Answer №1

Give it a shot

$('modal4<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="68473c1b68656e68186d67815a67685e6a">[email protected]</a>_id%>').modal('hide');

Try using the above code to dismiss the modal window.

To learn more, check out http://getbootstrap.com/javascript/#modals-methods

Answer №2

alright, so the key point here was an entry in the application's HTML file:

<base href='http://lvh.me:3000' />

When trying to create a XMLHttpRequest, I encountered...

After successfully setting up the route:

resource :contents do
  resources :comments, only: [:new, :create, :update]

I initiated the modal using:

<%=button_to('Comment', '#', :method => :get, :class=> 'button button-primary button__slim send__feedback modal-trigger', 'data-target'=>'modal4'+content.id.to_s) %>

The form inside the modal looked like:

<%= form_for(Comment.new, url: contents_comments_path, remote: true) do |f| %>
...
<%end%>

Then there's the comments_controller:

def create
  @comment = Comment.new(comment_params)
  @comment.update_attributes(rating: params[:rating])
end

And lastly, the create.js.erb file contained this snippet:

$('#modal4<%<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b08df0d3dfddddd5dec49ed3dfdec4d5dec4">[email protected]</a>_id%>').closeModal();

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

Issue with updating a select tag using ajax in Internet Explorer

I encountered an issue with the inner HTML function while updating option tags in a select tag. When I select a country in the first select tag, the AJAX code should update the cities in the other select tag. The code works fine in all major browsers excep ...

phpjavascriptajax

Adjusting map boundaries to match the raster layer dimensions

I have been searching through numerous tutorials on using `fitbounds` with Mapbox, but I am still unable to understand how to center my map on a specific raster layer. I have a menu that switches between various older maps and I want the map to adjust acco ...

javascriptmapbox

I encountered an issue where the Highlighter functionality fails to work properly when I utilize dangerouslySetInnerHTML within the

When I utilized dangerouslySetInnerHTML within React-highlighter, the highlight class does not work. <Highlight search={searchQuery} className={Styles.body_highlighter} innerHTML={true} matchStyle={{ background: '#fff466', padding: '0px&a ...

javascriptreactjsredux

Implementing universal design in Next.js 14

I'm encountering a problem while trying to use the style jsx global property in the latest version of Next.js. Previously, you would include it in the _app.js file, but since that file no longer exists, I assumed it should be added to the layout.tsx f ...

javascriptreactjsnext.jsglobal-variablesstyled-components

Using Vue.js, you can easily convert a JSON string into a number

I need help sorting a table by both numbers and words obtained from an API. The words sort correctly, but the numbers do not. How can I convert the string values to numbers? Here is the API call I am using: axios.get(`/json/secciones`+ tienda +`.json`) ...

javascriptjsonvue.jsvuejs2axios

Positioning the label inside the compressed bubble - highcharts

I have a packed bubble chart with the following jsfiddle link: https://jsfiddle.net/ytvcjzx1/ Below is the code snippet: (function(H) { H.addEvent(H.Series, 'afterDrawDataLabels', function(e) { const series = this; const chart = series ...

javascripthighcharts

Is it possible to download multiple files using a single ajax call upon success of a click function?

In my file, there are 2 anchor tags with their respective href links. I am triggering both anchor tags at ajax call success. <a id="exportExcelFatturaIcon" href ="${createLink(action: 'downloadExcel', params: [fileName:excelFileName])}" hidde ...

javascriptjqueryajax

The MEAN stack application is experiencing issues with loading images when accessed from a device other than localhost

I am currently working on creating a Book-sharing platform to practice using the MEAN stack as I am still new to it. Everything seems to be running smoothly in my local development environment hosted on localhost. The site successfully retrieves posts, im ...

javascriptnode.jsangularjsmean-stack

Changing an ng-repeat filter following the manual update of a text input

Utilizing jQuery auto-complete to automatically populate values as users type into a text input. <input type="text" ng-model="tags" name="tags" id="tags" value="" /> Subsequently, the ng-repeat is filtering content based on the entered text <di ...

javascriptjqueryangularjsangularjs-ng-repeat

Should Q.all be nested inside another Q.all?

Here's a snippet of my code: let tasks = []; tasks.push(MyModel.update({ _id: 50 }, { Test: 5000 }).exec()); return Q.all([ myPromise, Q.all(dbTasks) ]); I'm wondering if it is appropriate to nest Q.all inside another Q.all. Will the prom ...

javascriptnode.jsq

What is preventing this jQuery selector from locating my form?

My form setup looks a little something like this: <div id="zxRegisterDiv" style="display: none; border: 1px solid;"> <style type="text/css"> label.zxLabel{ display: inline-block; width: 100px; } ...

javascriptjquery

Selecting tabs in Angular with a controller function

I'm currently working on implementing AngularJS to show the tab number when a specific tab is selected using the controller method. However, it's not working as expected. Any assistance on this issue would be greatly appreciated. HTML <body ...

javascriptangularjsangularjs-scopeangularjs-ng-classangularjs-controlleras

Creating a personalized script in ReactJS: A step-by-step guide

If I have already built a component with Google Chart in ReactJS, and I want to implement a feature that allows the Legend to show/hide data using a JavaScript script provided here, how and where should I integrate this code to work with my chart? Here is ...

javascriptreactjs

Troubleshooting: jQuery toggle() issue in Firefox 3.0.12

My jQuery code for toggling is working perfectly in IE6 but not in FF3. I'm wondering what could be causing this issue and if there is a workaround available. <button>Toggle Me</button> <p>Hi</p> <p>Learning jQuery&l ...

javascriptjquery

How to implement indexing in JavaScript arrays

After running a MySQL query, I noticed that the result is displayed in a particular format. [ {  "brand": "Brand 1",  "channel": "TLP Channel",  "memo": 449 }, {  "brand": &qu ...

javascriptnode.jsarraysecmascript-6

various shapes that invoke identical function

Here's the scenario: I have a webpage that displays multiple submissions, and next to each submission, I want to include an "Accept" button. To achieve this, I am utilizing a form. The HTML structure: {% for submission in submissions %} <div ...

jqueryajaxdjangoforms

"Exploring the power of JQuery in adding new elements and accessing the newly appended

I have a code that appends some HTML to a div using JQuery like this: $("#divId").append("<div class='click' data-id='id'></div>"); and I want to access the appended div by clicking on it like so: $(".click").click(functi ...

javascriptjqueryajaxdom

Incorporate user input into Alert Dialog Boxes

Would you be able to assist me in displaying the input value from the "email" field in my alert box? The code seems to be working fine, but I'm having trouble getting the alert box to show the email form value. I decided to use Bootstrap for som ...

javascripthtmlcss

Is it possible to retrieve a value from an xhttp request?

I am currently working on an xhttp function that interacts with my database and returns an array. The content of the array varies based on the parameter provided in the xhttp function during its execution. Below is the code snippet for the xhttp function: ...

javascriptxmlhttprequestvue.js

WordPress API Encounters a 400 Error with OAuth

While experimenting with the WordPress Rest API, I decided to download a plugin called WP OAuth Server by Justin Greer and managed to set up my own OAuth connection. However, I encountered an issue where I received Error 400 indicating that The grant type ...

javascriptjsonajaxwordpressoauth