1

I've searched exhaustively but can't find an answer for this.

I'm writing a small app using padrino and I have 2 views, person and event. I have views and controllers for these and they are working fine.

My issue is that from the 'event' view, I want to open a modal window to add a new person.

The modal window will load up with the relevant fields for a 'person'. Once the fields are filled and a button clicked, the modal window will disappear, the new 'person' will be saved, and the user will be back on the event page.

Could anyone give me advice on how to proceed ? Thank you.

ian
  • 12,003
  • 9
  • 51
  • 107
daesu
  • 612
  • 7
  • 10

1 Answers1

2

A modal window is generally done using javascript. For example, using jQuery UI (from the docs)

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>

Sinatra/Padrino will take care of the layout and the view, you just have to add the script portion. Assuming you're using Haml, your view would look like this:

#dialog{title: "Basic dialog"}
  %p
    This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

:javascript
  $(function() {
    $( "#dialog" ).dialog();
  });

The javascript doesn't need to go inside the head tags as the jQuery docs suggest.

Edit:

There are a couple of choices for loading a partial into a window. One is to use a javascript library like Handlebars, but I prefer to get the javascript to load it from a route, that way all the view code stays together, e.g.

get "/templates/modal1/?" do
  haml :modal1, :layout => !xhr?
end

In the javascript, make an AJAX call to that route and you'll get only the HTML sans the layout, then use it to fill the box:

$.get('ajax/test.html', function(data) {
  $('#dialog').html(data);
}

and in your view just describe the div:

#dialog1
  -# The HTML from the view will be put here by the jQuery code.

Something like that.

ian
  • 12,003
  • 9
  • 51
  • 107
  • Hey Ian, thanks for the quick response. It's helpful but I was wondering how I would go about loading partials (from my person model) into the modal window ? I don't want to repeat code and I basically just need to load the 'person/_form.erb' into the modal and then save that. Does that make sense ? – daesu Feb 25 '13 at 09:03
  • 1
    Regarding second part of your question, you can make XHR calls to get the partials. You don't fetch the partial using Model. You would write that bit of code in controller. – ch4nd4n Feb 25 '13 at 09:31
  • @User79843 I've updated the answer, hopefully it's more towards what you're looking for. – ian Feb 25 '13 at 09:34
  • @ch4nd4n While I was writing that update you gave its description :) – ian Feb 25 '13 at 09:34