CODEWITHSUNDEEP
javascriptruby-on-railstwitter-bootstrap
dadiletta
dadiletta

Reputation: 299

Displaying modal on RoR alert or notice

Trying to have a modal display alerts or notices. Want the modal to only pop when there's a message to display. At the moment the modal does not display at all. Tried putting the bootstrap trigger on document load but no effect. Live site. Git repo.

site.js:

$(document).on('ready page:load', function(){
$('.rating').raty( { path: '/assets', scoreName: 'comment[rating]' });
$('.rated').raty({ path: '/assets', 
  readOnly: true,
  score: function() {
    return $(this).attr('data-score');
  }
});
$('#myModal').modal('show');});

Application layout: 

<div class="wrapper">
    <!---START NOTICE/ALERT MODAL --->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Alert</h4>
                </div>
      <div class="modal-body">
        <p><%= notice %>
    <%= alert %></p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<%= yield %>
</div>
</body>
</html>

Your thoughts are appreciated!

Upvotes: 0

Views: 54

Answers (1)

Erowlin
Erowlin

Reputation: 10297

I believe you are close to do it !

I don't have any text editor, but you should try something like this : 

<% if flash[:alert] %>    
     <div class="wrapper">
        <!---START NOTICE/ALERT MODAL --->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">Alert</h4>
                    </div>
                    <div class="modal-body">
                         <p><%= flash[:alert] %></p>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                 </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<% end %>

and in the JS file : $("#myModal").modal('show');

Another thing, you may have a problem with the TurboLink gem. Could you try to put a console.log inside the $(document).on('ready page:load') and refresh the page, just to be sure the event is properly fired ? If it doesn't work, could you try to include this in your application.js ?

//= require jquery //= require jquery.turbolinks //= require jquery_ujs // // ... your other scripts here ... // //= require turbolinks

and this in your Gemfile : gem 'jquery-turbolinks'

PS : I'm not sure it's a good idea in term of UX to display modal on each alert. Only my though.

Upvotes: 1

Related Questions