I'm trying to pop up with bootstrap. In my "NoteListPartial.cshtml" page; if I click on the edit button, I want the "Not.cshtml" to be opened with pop up. But when I click button, nothing happens. My codes is as follows:
This is my "NoteListPartial.cshtml":
Edit
And this is my "Note.cshtml":
<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Note</h4>
</div>
<form method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label>Title:</label>
<input type="text" name="Name" value="#Model.Name" />
</div>
<div class="form-group">
<label>Content:</label>
<textarea name="Content">#Model.Content</textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value="Update" />
</div>
</form>
</div>
</div>
</div>
this is because id="notedetailModal" div is not on "NoteListPartial.cshtml" page.
Make change in your code like put below code in your "NoteListPartial.cshtml" page
<div class="modal fade" id="notedetailModal" tabindex="-1" role="dialog" aria-labelledby="">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
and in your "Note.cshtml" put rest of the code like
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
<h4 class="modal-title" id="myModalLabel">Edit Note</h4>
</div>
<form method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label>Title:</label>
<input type="text" name="Name" value="#Model.Name" />
</div>
<div class="form-group">
<label>Content:</label>
<textarea name="Content">#Model.Content</textarea>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-default" value="Update" />
</div>
</form>
Try this.
Related
I have a textbox inside a Bootstrap Modal; here you can see an output example:
The yellow section is not part of original response; it's my add to show that the textbox has a default dimension and this one does not coincide with the modal size.
My purpose is to fill the yellow part with the textbox; in other words, I would that the textbox size coincide with the modal size. The question is: is there a way to perform this?
I add that in modal, the textbox is not part of form section, as you can see in the code:
<div id="myModal2" 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">Editing Menu</h4>
</div>
<div class="modal-body">
<textarea id='areaforinfo' readonly></textarea>
<form id="updateeventsform2" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label"
for="inputNotes">Notes</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="newnote" name ="newnote" placeholder="Put here the note"/>
</div>
</div>
<div class="form-group">
<label for = "type" class = "col-sm-2 control-label">Status</label>
<div class = "col-sm-10">
<select class = "form-control" id = "newstatus" name="newstatus">
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" data-dismiss="modal">Save</button>
</div>
</div>
</div>
Should I put the textbox code inside form section?
Simply put the textbox inside the form and add the class attribute; the final result is:
<div class="modal-body">
<form id="updateeventsform2" class="form-horizontal">
<div class="form-group">
<label for='areaforinfo'>Message</label>
<textarea class = "form-control" id='areaforinfo' style="min-width: 100%" readonly></textarea>
</div>
</form>
</div>
I'd created a form in a bootstrap modal window.
Inside that form i use a input type text and a textarea.
<div class="modal fade" id="TestModal" 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">Test</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
#*Input 1*#
<div class="form-group">
<label for="input1">Input 1</label>
<input type="text" class="form-control" id="input1" required maxlength="75">
</div>
#*Input 2*#
<div class="form-group">
<label for="input2">Input 2</label>
<textarea class="form-control" id="input2" rows="18" required></textarea>
</div>
<div class="row">
#*Select 1*#
<div class="form-group col-lg-4">
<label for="select1">Select 1</label>
<select class="form-control" id="exampleSelect2" required>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
#*Input 3*#
<div class="form-group col-lg-4">
<label for="input3">Input 3</label>
<input type="text" class="form-control" id="input3" required>
</div>
#*Input 4*#
<div class="form-group col-lg-4">
<label for="input4">Input 4</label>
<input type="text" class="form-control" id="input4" required>
</div>
</div>
<button type="submit" class="btn btn-primary">Create</button>
</form>
</div>
</div>
</div>
The result is as follows:
How to set the same width for the text input and the textarea as for the 3 controls below them?
I solved like suggested in the second post here.
min-width: 100%
did the trick.
Do it with jQ class selector.
$(".modal-body.form-control").css("width","100px");
$(".modal-body.form-control").css("min-width","100px");
Below is my html that I have a modal popup window and a link and when the user click on submit i like to grab the data how would i do that?
#using (Html.BeginForm("Index", "Home", FormMethod.Post }))
{
<!-- 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">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</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 -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
#Html.ActionLink("Edit", "Edit", null, new { id = #item.ID }, new { #data_toggle = "modal", #data_target = "#myModal" })
Add name attributes to your input controls and make the button type Submit and remove nested forms for your html, as show below -
#using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<!-- 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 class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name" name="Name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<textarea class="form-control" id="message-text" name="Message"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="Submit" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
}
Then add the following Home controller action for post -
[HttpPost]
public ActionResult Index(string Name, string Message)
{
return View();
}
Any reason why the first one of these modals (among even more) would appear on iOS devices?
..all of the modals appear on laptops
<div class="modal fade" id="contact" tabindex="-1" role="dialog" aria-labelledby="contactModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body text-center">
<div class="logo"><img src="../public/img/logo.png" /></div>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default center-block" data-dismiss="modal"><strong>Press This</strong></button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="item1" tabindex="-1" role="dialog" aria-labelledby="item1Modal" 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 text-center" id="item1Modal">This</h4>
</div>
<div class="modal-body text-center">
<p>
Paragraph
</p>
</div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default center-block" data-dismiss="modal"><strong>Press This One!</strong></button>
</div>
</div>
</div>
</div>
I am using grails 2.1.1 and trying to sign up a new user with modal window. My signup modal window's .gsp code is as follows...
....
<!--Start of Registration Modal Page-->
<div id="register" class="modal hide fade" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="icon-remove"></i>
</button>
<h3 id="modalLabel">
Register
</h3>
</div>
<div class="modal-body">
<g:form method="POST">
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span2" placeholder="Full Name" value="${user?.profile?.fullName}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Email" value="${user?.profile?.email}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Username" value="${user?.username}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="password" class="span3" placeholder="Password" value="${user?.password}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<input type="text" class="span3" placeholder="Bio" value="${user?.profile?.bio}">
<div class="span1"></div>
</div>
<div class="controls controls-row">
<div class="span1"></div>
<button type="submit" class="span3 btn btn-warning">Create Account</button>
<div class="span1"></div>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Cancel
</button>
<button class="btn btn-success" type="submit">Register
</button>
</div>
</div>
</div>
</g:form><!--End of Form-->
<!--End of Registration Modal Page-->
My corresponding controller is "user" and I have a customized "register" action there as well. All I want is that when I click Create Account button, the user is registered behind in the database. Is there any way to make it up through modal window form directly?