When some one click on a Add new button in index.html.erb the form popup will show on this page the form date will come from new.html.erb so how I can do this I am using bootstrap.
Please any example.
First of all, cpoy this modal code, it is official from bootsrap,
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Copy the modal from here and go to index.html.erb
Place a
<%= link_to (your_edit_path) do %>
# place modal here After inserting your required fields using form_for helper
<% end %>
now on the submit button rails will automatically send a post request to create action in your_controller. and boom, your task is done.
Do, let me know if you face any difficulty. I will help you in any case.
Related
I'm using Bootstrap 5.1 in my ASP.NET MVC project and I want to add a bootstrap modal on button click. I got the modal from:
https://getbootstrap.com/docs/5.1/components/modal/
But when I click on the button the modal that appears is inactive. How can I make it active by default on button click. or is there something I'm doing wrong?
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I'm having some trouble with a bootstrap modal in rails 4. I'm trying to display a modal when you click an image. And actually the modal is displayed, but only for a few seconds, and then it close itself.
(I'm using bootstrap-sass gem)
This is the code I have:
<%= link_to image_tag (destacado.imagen.small), data: {toggle: "modal", target: "#myModal"} %>
<!-- 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 btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Any idea what I am doing wrong?? Thank you in advance for any help!
Peyu
I think this is because your link_to will redirect the page.
Not a lot of information is provided, so that's just my guess.
If you wanted your link to just do data-toggle behaviour, maybe it doesn't need to be a link, just an image_tag with data-toggle behaviour.
I have used react-native to open a WebView from a ruby on rails app. The page includes an unopened bootstrap modal. How do I open the modal using a react-native call, so the modal can be displayed without reloading the page?
The modal can be activated by javascript that runs in WebView page e.g.
$("#myModal").modal('show');
The modal might look like this
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Im sure this should be easy, but I have searched and searched again and there is no a begginers tuto for this. I already did this with jquery ui dialog, but then I found bootstraps includes dialogs too(Modal). So can some one please guide me with a tuto link or just posting a simple answer here.
What I want to do is to show a popup to add a record to my database. I got this code from Bootstrap Page and it works, but I dont know how to add the record to my database when user clicks button, where is that event? or can I go to my controller after user clicks button?
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </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 btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
1:
http://msdn.microsoft.com/en-us/data/jj592676.aspx
2:
http://msdn.microsoft.com/en-us/data/jj205424.aspx
3:
Insert data using entity framework code first
4:
http://dev.mysql.com/doc/refman/5.1/en/connector-net-tutorials-entity-framework-winform-data-source.html
Using Grails 2.2.1, Twitter Bootstrap plugin. I'm using modals and mine are set up with 3 exit approaches. Either hit the x button, click a close button, the save button, OR, click anywhere outside the modal to close.
The problem is, 2 backdrops are being opened whenever I attempt to open a single modal due to the function I'm using. Why is this? With the first 3 modal closing approaches, it closes the modal, and both backdrops. But with the final approach, it just closes the modal and a single backdrop.
Here's my gsp code*sec* part is just a taglib for a security plugin I'm using):
<div id="loginModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="loginModalLabel">Login</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<div id="signupModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="signupModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="signupModalLabel">Sign Up</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<g:link class="btn btn-primary">Create Account</g:link>
</div>
</div>
<sec:ifNotLoggedIn>
<g:javascript>
$('#loginModal').modal({
remote: "${createLink(controller:'login', action:'auth')}",
show: false
})
$('#signupModal').modal({
remote: "${createLink(controller:'user', action:'create')}",
show: false
})
</g:javascript>
<g:link fragment="loginModal" class="btn" data-toggle="modal">
Login
</g:link>
<br/>
<g:link fragment="signupModal" class="btn" data-toggle="modal">
Sign Up
</g:link>
</sec:ifNotLoggedIn>
I tried using:
$('#loginModal').modal({
remote: "${createLink(controller:'login', action:'auth')}",
show: false
})
$('#signupModal').modal({
remote: "${createLink(controller:'user', action:'create')}",
show: false
})
But I still get 2 backdrops opening when I click on a single modal link.
This seems to be a Grails issue, because I don't get this problem with jsFiddle: