I have an issue when i'm trying to invoque a modal form, the moment when i click the edit button i need to load the form, but nothing appear, after looking for the problem tryin to fix it , the problem still remain, i'm stucked here for today trying all solution but nothing ....
The code snippet is showing the whole code :
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{title}">Spring 4 MVC</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css"
href="../static/css/bootstrap.min.css"
th:href="#{css/bootstrap.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/dataTables.bootstrap4.min.css"
th:href="#{css/dataTables.bootstrap4.min.css}"
/>
<link rel="stylesheet" type="text/css"
href="../static/css/buttons.bootstrap4.min.css"
th:href="#{css/buttons.bootstrap4.min.css}"
/>
<script type="text/javascript"
src="../static/js/jquery-3.2.1.min.js"
th:src="#{js/jquery-3.2.1.min.js}"></script>
<script type="text/javascript"
src="../static/js/jquery.dataTables.min.js"
th:src="#{js/jquery.dataTables.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.buttons.min.js"
th:src="#{js/dataTables.buttons.min.js}"></script>
<script type="text/javascript"
src="../static/js/pdfmake.min.js"
th:src="#{js/pdfmake.min.js}"></script>
<script type="text/javascript"
src="../static/js/dataTables.bootstrap4.min.js"
th:src="#{js/dataTables.bootstrap4.min.js}"></script>
<script type="text/javascript"
src="../static/js/buttons.bootstrap4.min.js"
th:src="#{js/buttons.bootstrap4.min.js}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
} );
table.buttons().container()
.appendTo( '#example_wrapper .col-md-6:eq(0)' );
} );
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</head>
<body>
<div class="container">
<div th:if="${not #lists.isEmpty(produit)}">
<h2>Product List</h2>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Id</th>
<th>Product Id</th>
<th>Description</th>
<th>Price</th>
<th>View</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr th:each="product : ${produit}">
<td th:text="${product.idProduit}">Id</td>
<td th:text="${product.code}">code</td>
<td th:text="${product.libelle}">descirption</td>
<td th:text="${product.indice}">price</td>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><button data-title="Edit" data-toggle="modal" data-target="#edit">Edit</button></p>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input class="form-control " type="text" placeholder="Mohsin"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</body>
</html>
It seems you have not included the bootstrap.min.js file try include it then it would work. Because this file has many methods like, modal, tooltip and etc.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> file.
Include that file after /jquery-3.2.1.min.js. Then it would work.
Related
Im trying to make a basic student list webpage using bootstrap. What I want to do is that when the modal button is pressed, a modal pops up that lets the user type in the requested details, but before that I just copy pasted the code in bootstrap's site to test first if everything is well and implemented.
this is my code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Student List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8" id="pageName">
<h1>Student List</h1>
</div>
<div class="col-4" id="newButton">
<!-- 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>
</div>
</div>
</div>
<hr>
<table class="table">
<thead class="thead-dark" id="tableHeader">
<tr>
<th scope="col">ID</th>
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">Course</th>
<th scope="col">Average</th>
</tr>
</thead id="tableContent">
<tbody>
</tbody>
</table>
<script src="js/bootstrap.bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
my problem is that when I press the button, nothing happens. The button in itself is fine, it can be pressed and stuff, but the modal does not pop up. Have i missed something or have not implemented something?
You are using bootstrap 5 so use data-bs-toggle instead of data-toggle and use data-bs-target instead of data-target
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
Ref:https://getbootstrap.com/docs/5.1/components/modal/
Fixed, Actually you miss the CSS and there is button attributes were wrong:-
Below example working fine...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
<title>Student List</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8" id="pageName">
<h1>Student List</h1>
</div>
<div class="col-4" id="newButton">
<!-- Button trigger modal -->
<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>
</div>
</div>
</div>
<hr>
<table class="table">
<thead class="thead-dark" id="tableHeader">
<tr>
<th scope="col">ID</th>
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">Course</th>
<th scope="col">Average</th>
</tr>
</thead id="tableContent">
<tbody>
</tbody>
</table>
<script src="js/bootstrap.bundle.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script>
</body>
</html>
You can use jquery to trigger the modal to open.
$('.newButton button').on('click',function(){ $('#exampleModal').modal('show'); })
read this link and do not change the version of bootstrap: https://getbootstrap.com/docs/5.0/components/modal/
from there, you can see you missed this:
<script>
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
</script>
I'm finally at the stage of building out my web pages, and I'm stuck. I have gone through numerous pages to attempt to understand what I'm doing wrong, yet nothing is helping. Hence, I'm turning to you. I'm certain I'm doing something bone-headed, but can't track it down.
I have built a simple login screen, and I'm attempting to get the submit button to fire a click event and show my success modal. However, when I click submit, nothing happens. There is nothing showing on the console (Dev Tools) within Chrome as well. I am getting 3 errors in the JQuery and Bootstrap components, but they make no sense.
*jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :*
*bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery
at bootstrap.min.js:6
(anonymous) # bootstrap.min.js:6
jquery-1.11.2.min.js:1 Uncaught SyntaxError: Unexpected token :*
My code for my login.html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
</head>
<body style="padding-top:20px">
<div class="col-md-10 col-md-offset-1">
<div class="well">
<table class="table table-bordered">
<thead>
<tr class="success">
<td colspan="2">Login</td>
</tr>
</thead>
<tbody>
<tr>
<td>Username</td>
<td>
<input type="text" id="txtLogin" placeholder="Username" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" id="txtPassword" placeholder="Password" />
</td>
</tr>
<tr class="success">
<td colspan="2">
<input id="btnSubmit" class="btn btn-success" type="button" value="Submit" />
</td>
</tr>
</tbody>
</table>
<div class="modal fade" tabindex="-1" id="successModal" data- keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4>Success</h4>
</div>
<div class="modal-body">
<h2>Login Successful</h2>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
</div>
<div id="divError" class="alert alert-danger collapse">
<a id="linkClose" class="close" href="#">×</a>
<div id="divErrorText"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#linkClose').click(function () {
$('#divError').hide('fade');
});
$('#btnSubmit').click(function () {
$('#successModal').modal('show');
});
});
</script>
</body>
</html>
Your jQuery is not loading correct the file redownload or use a cdn version this sample works
$(document).ready(function () {
$('#linkClose').click(function () {
$('#divError').hide('fade');
});
$('#btnSubmit').click(function () {
$('#successModal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body style="padding-top:20px">
<div class="col-md-10 col-md-offset-1">
<div class="well">
<table class="table table-bordered">
<thead>
<tr class="success">
<td colspan="2">Login</td>
</tr>
</thead>
<tbody>
<tr>
<td>Username</td>
<td>
<input type="text" id="txtLogin" placeholder="Username" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" id="txtPassword" placeholder="Password" />
</td>
</tr>
<tr class="success">
<td colspan="2">
<input id="btnSubmit" class="btn btn-success" type="button" value="Submit" />
</td>
</tr>
</tbody>
</table>
<div class="modal fade" tabindex="-1" id="successModal" data- keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h4>Success</h4>
</div>
<div class="modal-body">
<h2>Login Successful</h2>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
<button type="button" data-dismiss="modal" class="btn btn-success">
Close
</button>
</div>
</div>
</div>
</div>
<div id="divError" class="alert alert-danger collapse">
<a id="linkClose" class="close" href="#">×</a>
<div id="divErrorText"></div>
</div>
</div>
</div>
Try: Try removing the minify from your script links src="js/jquery-2.1.3.js
im new to bootstrap and the problem that im encountering is that im unable to update the textbox found inside the modal before the user calls the dialog. I have tried everything, from updating the textbox by javascript or even by server side language c#, but nothing seems to update the textbox inside.
Here is my code:
<head id="Head1" runat="server">
<script type="text/javascript">
function func(name)
{
//triggered when modal is about to be shown
$('#edit').on('show.bs.modal', function (e) {
//get data-id attribute of the clicked element
var bookId = $(e.relatedTarget).data('id');
//populate the textbox
$(e.currentTarget).find('input[name="mohsintext"]').val(bookId);
});
}
</script>
</head>
<body>
<!--/#middle-->
<section id="middle">
<div class="container">
<div class="row">
<div class="col-md-12">
<h4>Your Cases</h4>
<div class="table-responsive">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<th><input type="checkbox" id="checkall" /></th>
<th>Case Title</th>
<th>Case Description</th>
<th>Origin</th>
<%--<th>Email</th>
<th>Contact</th>--%>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody>
<asp:Repeater ID="repPeople" runat="server" >
<ItemTemplate>
<tr>
<td><input type="checkbox" class="checkthis" /></td>
<td><%# Eval("Title") %></td>
<td><%# Eval("Description") %></td>
<td><%# Eval("Origin") %></td>
<%--<td><%# Eval("First Name") %></td>
<td><%# Eval("First Name") %></td>--%>
<td><p data-placement="top" data-toggle="tooltip" title="Edit"><asp:LinkButton id="LinkButton1" runat="server" data-id="ISBN-001122" class="open-AddBookDialog btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" > <span class="glyphicon glyphicon-pencil"></span></asp:LinkButton></p></td>
<td><p data-placement="top" data-toggle="tooltip" title="Delete"><asp:LinkButton ID="LinkButton2" runat="server" class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></asp:LinkButton></p></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog" id="my_modal">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">Edit Your Detail</h4>
</div>
<div class="modal-body">
<div class="form-group">
<asp:TextBox runat="server" class="form-control " type="text" id="mohsintext" name="mohsintext"/>
</div>
<div class="form-group">
<input class="form-control " type="text" placeholder="Irshad"/>
</div>
<div class="form-group">
<textarea rows="2" class="form-control" placeholder="CB 106/107 Street # 11 Wah Cantt Islamabad Pakistan"></textarea>
<div id="myDialogText"></div>
</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="edit" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="H1">Delete this entry</h4>
</div>
<div class="modal-body">
<div class="alert alert-danger"><span class="glyphicon glyphicon-warning-sign"></span> Are you sure you want to delete this Record?</div>
</div>
<div class="modal-footer ">
<button type="button" class="btn btn-success" ><span class="glyphicon glyphicon-ok-sign"></span> Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> No</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
</section>
<!-- Back To Top -->
<script type="text/javascript">
jQuery(document).ready(function () {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function (event) {
event.preventDefault();
jQuery('html, body').animate({ scrollTop: 0 }, duration);
return false;
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#mytable #checkall").click(function () {
if ($("#mytable #checkall").is(':checked')) {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", true);
});
} else {
$("#mytable input[type=checkbox]").each(function () {
$(this).prop("checked", false);
});
}
});
$("[data-toggle=tooltip]").tooltip();
});
</script>
</form>
</body>
</html>
i have used several javascript methods to try and update the textbox element,but nothing works. Note that i have removed some unnecessary code above to make it more readable, such as the link to bootstrap css files etc.
Place your script at the bottom of the document... I think jQuery is trying to bind #edit before it is rendered. Since jQuery queries the DOM to bind events, it needs to exist before the binding is attempted.
I want to create a lookup data using Bootstrap Modal Dialog. Upon user clicked "select link" from a list of record in the Modal Dialog, the selected Client Name will be pass to textbox in the Main Page. Below is the code
HTML file (Main Page)
<script>
$(function () {
var viewModel = {
workorder: ko.observableArray(#Html.Raw(Model.WorkOrdersJSON)),
}
ko.applyBindings(viewModel);
});
</script>
#using (var form = Html.Bootstrap().BeginForm(new { #class = "form-horizontal", id = "myForm" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Partial("_ClientInfo")
</div>
}
Html.Partial file (Modal Dialog)
<label for="inputClientName" class="col-lg-2 control-label" id="clientname" >Client Name</label>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- 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">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">List of Work Order</h1>
</div>
<div class="bs-example">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Report Date</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody >
<!-- ko foreach: workorder -->
<tr data-bind="click: $parent.selectTag">
<td>
<span id="test" data-bind="text: wO_Id"></span>
</td>
<td>
<span data-bind="text: wO_Date"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
<td>
Select
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model 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 -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
After spending a few hours on this issue, finally i figured it out. Below is my new code
HTML file (Main Page)
<script>
function ConfigsViewModel() {
var self = this;
this.clientinformation=ko.observableArray(#Html.Raw(Model.ClientInfoJSON));
this.Selected = ko.observable(this.clientinformation()[0]);
this.SelectConfig = function (Config) {
self.Selected(Config);
$("#clientName").val(this.clientName);
$("#hideclientId").val(this.clientId);
$('#myModal').modal('hide');
}
}
ko.applyBindings(new ConfigsViewModel());
</script>
Html.Partial file (Modal Dialog)
<label for="inputClientName" class="col-lg-2 control-label">Client Name</label><input id="hideclientId" type="hidden" />
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- 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">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="bs-example">
<table class="table table-striped table-bordered table-hover" id="tableClient">
<thead>
<tr>
<th>#</th>
<th>Client Name</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: clientinformation -->
<tr data-bind="click: $parent.SelectConfig">
<td>
<span id="test" data-bind="text: clientId"></span>
</td>
<td>
<span data-bind="text: clientName"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model body -->
</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 -->
I have some formatting issues using bootstrap.
I want to insert data in tabular form in modal-body.
Is this possible? As i checked the sample, modal can only be used by using div tags.
http://getbootstrap.com/javascript/#modals
Sure, you can use tables in modals!:
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<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-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<table>
<thead>
</thead>
<tbody class="table">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</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 -->
Yes, but I had to move my modal content to the top of the html body to get it to work correctly.
Try this One
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container mt-3">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Add New User
</button>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="lead_id" class="col-form-label">ID:</label>
<input type="text" class="form-control" id="lead_id">
</div>
<div class="mb-3">
<label for="first_name" class="col-form-label">First Name:</label>
<input type="text" class="form-control" id="first_name">
</div>
<div class="mb-3">
<label for="last_name" class="col-form-label">Last Name:</label>
<input type="text" class="form-control" id="last_nam"e>
</div>
</form>
</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</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>