I'm a beginner to ROR. Currently using Ruby 6.1 . I'm trying to add new feature announce box to inform users about recent changes of the app. This is a web app. This should popup in when accessing the login page automatically and It will function like a cookie notice. Here's a sample template.
But it currently is not a popup. Confused when to render. I did this code on app>view>login.html.erb
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h4 class="modal-title" id="myModalLabel">Feature announcement</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn btn-primary">Got it</button>
</div>
If you have bootstrap enabled, you can simply use a bootstrap modal and maybe you will also have to use turbo frames. Follow this tutorial to learn how to create a BS modal with turbo frames.
Related
(I know there's a bunch of questions like this, but none seem to answer my specific situation.)
I'm trying to get a bootstrap modal to display in a Rails view, but the associated button simply does nothing - clicking it has no effect at all beyond the button interaction effect. As far as I know bootstrap in general is set up to work properly; that doesn't seem to be my issue.
Modal html, most of which is directly copied from the bootstrap documentation:
<div id="new_event">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#new-event-modal">+</button>
<div id="new-event-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">add an event!</h4>
</div>
<div class="modal-body">
Text! <!--form goes here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">cancel</button>
</div>
</div>
</div>
</div>
</div>
My custom.scss has #import "bootstrap-sprockets"; #import "bootstrap", and my application.js has //= require bootstrap-sprockets. Other javascript things are working perfectly well, and other bootstrap things are working perfectly well. What am I missing here?
That is not going to work. If you are using Rails 6, there is a very specific way to add Bootstrap to your rails app. I have described it on github:
https://github.com/overdrivemachines/bootstrap-rails
I am using a bootstrap modal in the header - layout page for the entire site
e.g. original code from bootstap
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch Login demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Login information
</div>
</div>
</div>
</div>
The above code does work.
I modified the button code to link
Launch login demo modal 2
When user clicks on the link the code works, but now the user has access to the url link and could open in a new window/new tab
When user right clicks on the link and choose "open in a new tab" it would fail because this page does not open.e.g.
http://example.com/account/login#myModal
http://example.com/blog#myModal
Question : Is it possible if user opens in a new tab the url, redirect to
http://example.com/account/login page
a live example fiverr.com (click on join a modal opens) and can also access direct link fiverr.com/join I am using MVC, maybe using a route configurations?
You cat do it with JavaScript. Just get the part of URL after hash and check if it is what you are expected, and then open modal manually:
if(window.location.hash) {
var hash = window.location.hash.substring(1);
if (hash == "myModel"){
$('#myModal').modal('show');
}
}
Make sure, that code is being executed after page is loaded.
Currently I'm using a Model that after posting back from a Form I look at a model property to display an Alert. However I now need to have a Modal displayed instead. I know I need a Modal div at the bottom of my page to display but I can't figure out how to call that from the Razor Model.
Researching ideas all I've found is where a button click or some click event would call some JS and show the modal. I can't find anything on how to just open it from the View.
The concept is that the end user will click a button do basically do like a Time Stamp into the database. In the controller I set a MessageType property and then based on that I would show say a Bootstrap Error Alert if there was an error or Success Alert if everything was okay. Now instead of calling the Success Alert I need to open a Modal.
Here is how I'm doing it now with an Alert. This is in my MVC View. Is there a way to do the same but instead of Alert open a Modal?
#if (Model.MessageType == "PUNCH")
{
<div class="alert alert-success">
<h3>Punch accepted at <strong>#Model.CurrentTime.</strong></h3>
</div>
}
Similar to what you did, you may execute the javascript code which shows the modal dialog.
Assuming you have the required bootstrap files loaded to your page,
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#section Scripts
{
#if (Model.MessageType == "PUNCH")
{
<script>
$('#myModal').modal();
</script>
}
}
I am trying to render the outcome of an action into a modal (twitter bootstrap). Unfortunately I do not get this to work.
Before I was generating a link within an each iterator:
<g:link action="perform" id="${exerciseInstance.id}">
<h2>${fieldValue(bean: exerciseInstance, field: "title")}: (${exerciseInstance.questions.size()} Questions)</h2>
</g:link>
Instead of rendering a complete new site I rather want the quiz to be presented in a modal. Therefore I tried a simple twitter bootstrap modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-large">${fieldValue(bean: exerciseInstance, field: "title")}</a>
<div id="myModal" class="modal hide fade" style="display: none; ">
<div class="modal-header">
<h3>Test</h3>
</div>
<div class="modal-body">
--> This is where the content should go <--
</div>
<div class="modal-footer">
Close
</div>
</div>
What is the best way to achieve this?
Asking for the "best way" on SO is a dangerous game. There probably isn't a best. Just different approaches. I'll give you one that I use utilizing jQuery's $.load() function.
$("#myModal .modal-body").load(url);
It really is that simple. Obviously, adjust your load() function if you need to pass in parameters, provide a callback function, etc. Your controller's action would just render a template containing the HTML you want in your modal-body. This isn't really even Grails specific. This approach would work with any server side tech.
I'm trying to get bootstrap-modal.js to work in Rails but can't figure it out. At this point, I'm just trying to get the event to fire when I click the button as in this fiddle
http://jsfiddle.net/mjmitche/xt4aQ/16/
using the exact same code in Rails nothing's happening when I click.
I have this html set up in a view
<h3>Demo</h3>
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Primary
Secondary
</div>
</div>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn danger">Launch Modal</button>
And bootstrap-modal.js copied into the javascripts folder in the assets pipeline
In Rails,
But nothing's happening when I click launch in my rails application
= javascript_include_tag "application"
wasn't in the application layout so bootstrap-modal.js also wasn't included. problem now solved.