I have two bootstrap modals which is a modal within a modal. Modal 2 contains search list. Which means, there is a search box for user to input a name. There is also a table to display the retrieved list. I would like to put a select button in the table. So when I clicked the select button, modal 2 closed. Only modal1 is left with data from selected rows. The first problem I have is in modal2 on how to submit the search word and retrieve the list of result in table. I tried the code below but it keeps refeshing my page in which I have top re-open the modal to see the result. The search button worked since it displays the data. I want to submit the search word without refreshing my page. At the same time, the content in my modal should be updated.
<div class="modal fade" id="modal1" role="dialog" >
<div class="modal-dialog modal-lg">
<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 1</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal2">Open second modal</button>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="modal fade in" id="modal2" role="dialog" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal2">Modal 2</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" method="get"
<div Class="form-group">
<Label Class="control-label col-md-2">Name</Label>
<div Class="col-sm-4">
<input type="text" name="strName" Class="form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" id="btnSearch" value="search" class="btn btn-default">Search</button>
</div>
</div>
</form>
<div class="panel-body">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th class="col-md-1" style="text-align:center">ID</th>
<th class="col-md-8" style="text-align:center">Name</th>
</tr>
</thead>
<tbody>
#for Each Item In Model
#<tr>
<td class="col-md-8">#Html.DisplayFor(Function(modelItem) Item.name)</td>
</tr>
Next
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<Button type="button" Class="btn btn-primary" data-dismiss="modal">Close</Button>
</div>
</div>
</div>
</div>
Related
This seems like it should be simple but nothing is in ASP.NET Core MVC. I would simply like to present the results of a query in a table inside a modal popup. The modal is opening but the table is empty. Not just that but the table is getting created before I even click the button to show the modal. I'm hoping some kind person out there can help me.
This is the controller action method:
public async Task<IActionResult> GetStudies(int id)
{
var results2 = (from s in _context.Studies
join sn in _context.StudyNodes on s.Id equals sn.StudyId
where sn.NodeId == id
select new BundleNodeViewModel
{
StudyId = s.Id,
StudyName = s.Name
}).ToList();
return Ok(results2);
}
This is the function calling the action:
getStudies = (url, id) => {
$.ajax({
type: 'GET',
url: url,
data: {
'id': id
},
success: function (res) {
console.log(res);
$("#formModal").find(".modal-body").html(res.Name);
$("#formModal").find(".modal-title");
$("#formModal").modal('show');
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
console.log(response);
alert("error");
}
})
};
And this is the modal popup:
<div id="formModal" 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" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Assigned Studies</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4">
<form asp-action="Bind" asp-controller="Studies">
<div class="form-group">
<table class="table table-hover" style="height: 300px">
<thead>
<tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
<th class="text-start">
Study
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class=" table-light">
<td class="text-start">
#item.StudyName
</td>
</tr>
}
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
I'm really confused about the order in which things are happening. For some reason the code in the modal runs when the parent page is loaded and not when you click the button on the parent page to open the modal. So the model in the foreach() statement is not the model I need it to be. When I click on the open modal button I expect it to go to the controller, get the data and return it to the modal where I can loop through the object and create a table.
Any ideas anyone?
I didn't understand your question but I have tried to do what you might want to do.
we have created dummy data which should you get from the ajax.
If you don not want to open the modal on page load please remove the Document Ready part.
try to place the 'getStudies' function body to your ajax's success block.
$(document).ready(()=>{
getStudies();
});
var data = [
{ 'StudyId': 1,'Name':"STD 10"},
{'StudyId' : 2,'Name':"STD 11"}
];
let getStudies = (url, id) => {
$("#formModal").find("tbody").html('');
$.each(data,(index,val) =>
{
let tr=`<tr class="table-light"><td class="text-start">${val.Name}</td></tr>`;
$("#formModal").find("tbody").append(tr);
});
$("#formModal").modal('show');
};
<html>
<head>
<title>kaushal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body> <button onClick="getStudies()">open modal</button>
<div id="formModal" style="width:100%;border:1px solid red;" class="modal fade in" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Assigned Studies</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4">
<form asp-action="Bind" asp-controller="Studies">
<div class="form-group">
<table class="table table-hover" style="height: 300px">
<thead>
<tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
<th class="text-start">
Study
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
</div>
</div>
</div>
</div>
</body>
</html>
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.
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>
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();
}
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?