CODEWITHSUNDEEP
jqueryruby-on-railszurb-foundation
ironsand
ironsand

Reputation: 15151

Pop up reveal modal dialog when submit by using ajax

I'm using Zurb-Foundation Reveal Modal in Rails.

I want to open a new modal dialog when a submit button is pushed and show confirmation infos.

With a link like this, the modal open without problem.

<a data-remote="true" data-reveal-id="myModal" data-type="html" href="/foo">Link</a>

But with a form and submit, the modal doesn't appear.

<form accept-charset="UTF-8" action="/foo" data-remote="true" data-type="html" method="get">
<input name="utf8" type="hidden" value="✓"></div>
  <input id="bar" name="bar" type="text" value="bar">
  <input id="my-submit" name="commit" type="submit" value="Submit">
</form>

I've take data-reveal-id="myModal" away, because if this exists, submit itself doesn't work.

And coffee script for it. show modal appears in console, when submit is clicked.

$ ->
 $('#my-submit').on(
    click: ->
      console.log("show modal")
      $('#myModal').trigger('click')

When I replace trigger('click') to `reveal()', then I get this error.

Uncaught TypeError: Object [object Object] has no method 'reveal'

I've followed a answer from this question.

How can I show result of submit in modal dialog?

Upvotes: 3

Views: 7529

Answers (5)

joshudev
joshudev

Reputation: 156

I've just written a reusable snippet which I'll share here in case it's useful to anyone else who is trying to get the result of a form submission over ajax using reveal.

Note that I have used data-form-reveal-id instead of data-reveal-id to avoid foundation hooking up the form's click event.

$(document).ready(function() {
  $('form[data-form-reveal-id]').submit(function(e) {
    e.preventDefault();
    var $this = $(this);

    var $reveal = $('#' + $this.data('form-reveal-id'));
    $reveal.foundation('reveal', 'open', {
      url: $this.attr('action'),
      method: $this.attr('method') || 'GET',
      data: $this.serialize(),
      success: function(data) {
        alert('modal data loaded');
      },
      error: function() {
        alert('failed loading modal');
      }
    });
  });
});

Upvotes: 0

Brandon Ferrara
Brandon Ferrara

Reputation: 49

If you want an in-line solution with jQuery: add the following option to your reveal mechanism (<a>,<input>, etc).

onClick="$('#'+$(this).attr('data-reveal-id')).foundation('reveal', 'open');"

Upvotes: 0

ironsand
ironsand

Reputation: 15151

Instead of reveal() or trigger('click'), I should have used foundation('reveal', 'open')

$ ->
 $('#my-submit').on(
    click: ->
      $('#myModal').foundation('reveal', 'open')

With this code works fine now.

Upvotes: 1

Zajn
Zajn

Reputation: 4088

According to the documentation on the Zurb Foundation site, you need to have a data attribute called data-reveal-id on the object that should reveal the modal when clicked.

So you should try something like this:

<form accept-charset="UTF-8" action="/foo" data-remote="true" data-type="html" method="get">
<input name="utf8" type="hidden" value="✓"></div>
  <input id="bar" name="bar" type="text" value="bar">
  <input id="my-submit" data-reveal-id="myModal" name="commit" type="submit" value="Submit">
</form>

EDIT

I think I misunderstood your question. If you want the dialog to appear once the submission was successful, then you'll probably need to use jQuery's ajax functions.

You could try something like this in your javascript.

// formId is the id of your form
$('#formId').submit(function (e) {
    var url = $(this).attr('action');

    $.ajax({
        type: 'POST',
        url: url,
        data: $('#formId').serialize(),
        success: function (data) {
            $('#myModal').reveal();
        }
    });
    e.preventDefault();
});

This would call the reveal function once the AJAX request has completed. If you need to display information that the server generated, the data parameter that's passed to the success callback function will contain whatever data the server responded with.

Upvotes: 3

Nitin Jain
Nitin Jain

Reputation: 3083

all you need to do is this as zurb foundation just need the ID of modal in data-reveal-id attribute

input id="my-submit" data-reveal-id="myModal" name="commit" type="submit" value="Submit">

Upvotes: 0

Related Questions