I have a Bootstrap dropdown which worked fine till now.Now i have added two bootstrap modals to my code.My dropdown doesn't work after i add modals to my code.If i remove modals it just works fine.I cant figure out why.
Does this has something to do with data-toggle as i can see its the only common thing between both of them
This is my code.
<div class="my-container" ng-controller="compCategoryCtrl">
<div class="compare-table">
<div class="head-info">
<h3>Select colleges to compare</h3>
</div>
<div class="clearfix"></div>
<div class="find-colleges">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value1">{{selected_value1}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg1(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class="col-md-4">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle find" type="button" data-toggle="dropdown" ng-model="selected_value2">{{selected_value2}}
<span class="caret"></span></button>
<ul class="dropdown-menu find-menu">
<li ng-repeat=" clg in college_list" ng-click="set_clg2(clg)">{{clg.college}}</li>
</ul>
</div>
</div>
<div class=" col-md-4 go">
<button class="btn compare_buton trigger open" ng-click="fetch()">Go</button>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="nav-for-table slider close">
<div id="home">
<table class="table table-striped table-hover table-bordered">
<tr ng-repeat="(key, value) in data1[0]">
<td class="col-md-6 head-field active">{{key}}</td>
<td class="col-md-3" ng-repeat="x in data1">
{{x[key]}}
</td>
<td class="col-md-3" ng-repeat="x in data1">
{{data2[$index][key]}}
</td>
</tr>
<tr>
<td class="col-md-6 head-field active">Departments</td>
<td class="col-md-3" data-toggle="modal" data-target="#show1">
Click here to view Departments
</td>
<td class="col-md-3" data-toggle="modal" data-target="#show2">
Click here to view Departments
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal fade" id="show1" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept1">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</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>
<div class="modal fade" id="show2" tabindex="-1" role="dialog" aria-hidden="true" style="display: block;z-index: 9999;margin-top: 100px;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Department Information</h3>
</div>
<div class="modal-body">
<table class="table table-striped" id="tblGrid">
<tr>
<th>Branch</th>
<th>Seats</th>
<th>Rating</th>
<th>Placements</th>
</tr>
<tr ng-repeat="x in dept2">
<td>{{x.branch}}</td>
<td>{{x.seats}}</td>
<td>{{x.rating}}</td>
<td>{{x.placement}}</td>
</tr>
</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>
<script>
$('.trigger.open').on('click', function () {
$('.slider').removeClass('close');
});
$('.trigger.close').on('click', function () {
$('.slider').addClass('close');
});
</script>
Can somebody please help.
Remove the inline styles you have on each Modal:
style="display: block;z-index: 9999;margin-top: 100px;"
Once those are removed the modals fire as expected. I might also recommend removing the .close class from <div class="nav-for-table slider"> as that class is used by Bootstrap and might cause various display conflicts.
See this Bootply for a functional example:
https://www.bootply.com/dFixsdYLpG
Related
I'm working on a piece of UI that involves a listing of rows in the database. Each row is editable, and when the edit button is clicked, my intent is to bring up a modal dialogue window with data preloaded in a form via AJAX for editing that specific row as shown in the following picture.
The following code shows a working setup you can play with.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
//populate the content of the modal window
//jQuery('#editModal').modal('show');
modal1 = bootstrap.Modal.getOrCreateInstance('#editModal');
modal1.show();
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</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>
However, I'm getting the following error in the js console every time the edit button is clicked to display the modal:
Uncaught TypeError: can't access property "backdrop", this._config is undefined
This appears to be due to the fact that I'm launching the modal via javascript with the onclick event. If I change the html and js slightly as follows, and use the "data-bs-target" property of the button to open the modal instead, it all works without js errors.
jQuery(document).ready(function() {
// console.log('podcast episode list js loaded');
// jQuery('#editModal').modal('show');
});
function loadEditModal(rowID) {
console.log("Clicked row " + rowID + "\n");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<!-- table displaying contents of encoding queue -->
<div class="row">
<div class="table-responsive-xxl">
<table class="table table-hover table-sm">
<thead>
<tr>
<th scope="col">ID#</th>
<!-- episode_id -->
<th scope="col">Podcast</th>
<!-- podcast_code -->
<th scope="col">Title</th>
<th scope="col">Seq.</th>
<th scope="col">Status</th>
<!-- last_action -->
<th scope="col">Date</th>
<!-- last_action_date -->
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>8</td>
<td>bw</td>
<td>Build a birdhouse</td>
<td>345</td>
<td>{"error":"none","message":"initial insert","status":"processing"}</td>
<td>2023-03-22</td>
<td class="text-end" style="white-space: nowrap">
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Edit</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="loadEditModal(8)">Edit</button>
<!-- <button disabled type="button" class="btn btn-outline-secondary btn-sm">Republish</button> -->
<button type="button" class="btn btn-outline-secondary btn-sm">Republish</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- class="row" -->
<!-- modal for editing rows -->
<div class="row">
<div class="modal fade" id="editModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editModalLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="editModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="editModalBody">
this is where the body content goes...
</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>
But I can't do it this way because I have to fetch the data to edit with AJAX and populate the body of the modal before I display it. Can anyone clue me in to what I need to do to eliminate the error?
This appears to be due to the fact that I'm launching the modal via javascript with the onclick event.
This is not correct.
The problem occurs because you are using the data-bs-toggle="modal" attribute without specifying what the target is.
If you try to remove the onclick attribute from the button the problem still exist.
<button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal">Edit</button>
Just remove the data-bs-toggle="modal" attribute from the edit button and use onclick only.
<button type="button" class="btn btn-outline-secondary btn-sm" onclick="loadEditModal(8)">Edit</button>
I hope it helps
I know there are many similarly to this question but I can't find a way.
I have a table and when I click edit in row table the modal should show and I want to pass data from table to modal and display some data in modal that comes from my table .When the button click it always error and the modal didn't show.I been using Django.Please see the image below. Below is my current code. Can you help me please?
enter image description here
accounts.html
{% extends 'navigation.html' %}
{% block content %}
<script>
function exampleModal(firstName,lastName){
document.getElementById('firstNameValueId').innerHTML = firstName
document.getElementById('secondNameValueId').innerHTML = lastName
$("#exampleModal").modal('show');
}
</script>
<!-- mytable -->
<div class="tabs-animation">
<div class="card mb-3">
<div class="card-header-tab card-header">
<div class="card-header-title font-size-lg text-capitalize font-weight-normal"><i
class="header-icon lnr-laptop-phone mr-3 text-muted opacity-6"> </i>Accounts Information
</div>
<div class="btn-actions-pane-right actions-icon-btn">
<div class="btn-group dropdown">
<button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
class="btn-icon btn-icon-only btn btn-link">
<i class="pe-7s-menu btn-icon-wrapper"></i>
</button>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-right rm-pointers dropdown-menu-shadow dropdown-menu-hover-link dropdown-menu">
<h6 tabindex="-1" class="dropdown-header">Header</h6>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-inbox"> </i><span>Menus</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-file-empty"> </i><span>Settings</span>
</button>
<button type="button" tabindex="0" class="dropdown-item">
<i class="dropdown-icon lnr-book"> </i><span>Actions</span>
</button>
<div tabindex="-1" class="dropdown-divider"></div>
<div class="p-3 text-right">
<button class="mr-2 btn-shadow btn-sm btn btn-link">View Details</button>
<button class="mr-2 btn-shadow btn-sm btn btn-primary">Action</button>
</div>
</div>
</div>
</div>
</div>
<div class="card-body">
<table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Action</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Username</th>
<th>Date joined</th>
</tr>
</thead>
<tbody>
{% for user_information in user_information %}
<tr>
<td><a class="btn btn-info" onclick="exampleModal('{{user_information.first_name}}','{{user_information.last_name}}')">Edit</a></td>
<td>{{user_information.first_name}}</td>
<td>{{user_information.last_name}}</td>
<td>{{user_information.email}}</td>
<td>{{user_information.username}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}
<!-- This is my modal -->
<div id="modal-div">
<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">Personal Information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<form action="#" method="post">
<label for="firstname"> <p id="firstNameValueId">Some text in the Modal..</p></label>
<div>
<input type="text" class="custom-input1 form-control " id="firstNameValueId" name="firstname" placeholder="First name" />
</div>
</div>
<div class="form-group">
<label for="lastname">Last name</label>
<div>
<input type="text" class="form-control" id="secondNameValueId" name="lastname" placeholder="Last name" />
</div>
</div>
</form>
</div>
</div>
I have a strange issue. Maybe someone has encountered similar case. I have a modal window having a dual select list that pops up by a button click. List items can not be selected (activated by mouse click) on the 1st, 3th, 5th.. times of modal opening but selected only on the 2nd, 4th, 6th.. times of modal opening. I wonder if it is a js conflict issue. Any help will be appreciated. Here is the code:
#model IEnumerable<MajorAdmin.ViewModel.DList>
#{
ViewBag.Title = "List";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="">
<div class="row">
<div class="col-md-12">
<div class="x_panel">
<div class="x_content">
<table id="datatable-buttons" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<a>#item.ev</a>
</td>
<td>
<a id="#item.id" name="edit" data-toggle="modal" data-target="#editpartialmodaldiv" class="btn btn-info btn-xs"><i class="fa fa-pencil-square-o"></i> Edit </a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<div id="editpartialmodaldiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"></div>
</div>
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$("a[name='edit']").click(function () {
var selectedid = this.id;
var data = JSON.stringify({
'selecteditem': selectedid,
});
jQuery.ajax({
type: "POST",
url: "#Url.Action("GetID")",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: data,
success: function (json) {
$("#editpartialmodaldiv").load('#Url.Action("Edit")');
},
failure: function (errMsg) {
alert(data);
}
});
});
</script>
<div class="modal-dialog modal-lg">
<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">Edit</h4>
</div>
<div class="modal-body">
<div role="main">
<div class="">
<div class="clearfix"></div>
<div class="dual-list list-left col-md-5">
<div class="well text-right">
<div class="row">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon glyphicon glyphicon-search"></span>
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
</div>
</div>
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
</div>
<ul id="sortable1" class="list-group">
#foreach (var item in Model) { if (item.evl == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.emp</li>
} }
</ul>
</div>
</div>
<div class="list-arrows col-md-1 text-center">
<button class="btn btn-default btn-sm move-left">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
<button class="btn btn-default btn-sm move-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</button>
</div>
<div class="dual-list list-right col-md-5">
<div class="well">
<div class="row">
<div class="col-md-2">
<div class="btn-group">
<a class="btn btn-default selector" title="select all"><i class="glyphicon glyphicon-unchecked"></i></a>
</div>
</div>
<div class="col-md-10">
<div class="input-group">
<input type="text" name="SearchDualList" class="form-control" placeholder="search" />
<span class="input-group-addon glyphicon glyphicon-search"></span>
</div>
</div>
</div>
<ul id="sortable2" class="list-group text-right">
#foreach (var item in Model) { if (item.emp == null) {
<li class="list-group-item"><img src="~/Content/images/img.jpg" class="avatar" style="max-height:30px" alt="Avatar">#item.evaluator</li>
} }
</ul>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="savebutton" name="formsavebutton" value="Create" type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
<!-- jQuery -->
<script src="~/Content/vendors/jquery/dist/jquery.min.js"></script>
<!-- Dual List Scripts -->
<script src="~/Content/js/duallist/duallist.js"></script>
I finally found the answer. Thanks to #Kaddath..
I added toggle function to return success of ajax response ==> $('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
I have designed table with modal. Here when I click on the sign button, the modal pops up along with that first row data from the table reflects on the table like data shadow. I am confused about closing div. I think I misplaced div end tag. Modal is working fine. Modal is working fine with data,
<style>
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
</style>
<div class="row">
<div class="panel panel-default">
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive mbn">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="red">ex</font></span>
</div>
<tr>
<th><font color="red" size="2">Ref</font></th>
<th><font color="red" size="2">Da</font></th>
<th><font color="red" size="2">sined</font></th>
<tr>
<td>></td>
<td></td>
Details </a></td>
<td> EDIT </a></td>
<td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">sign</button></td>
</tr>
</table>
</div>
<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">List s</h4>
</div>
<div class="modal-body">
<div class="table-responsive mbn">
<table class="table table-bordered mbn">
<tr>
<th width="70"><font color="red" size="2">Sl</font></th>
<th><font color="red" size="2">Name</font></th>
<th width="90"><font color="red" size="2"></font></th>
</tr>
<tr>
<td>1</td>
<td>I</td>
<td> <input type="checkbox" name="assign" value="Bike"></td>
</tr>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info">Submit</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
</div>
</div>
</div>
please help
You've got mismatched A tags and missing TD tags. Here it is cleaned up and working:
https://jsfiddle.net/DTcHh/41416/
<style>
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
</style>
<div class="row">
<div class="panel panel-default">
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="red">ex</font>
</span>
</div>
<table class="table table-bordered mbn">
<tr>
<th><font color="red" size="2">Ref</font></th>
<th><font color="red" size="2">Da</font></th>
<th><font color="red" size="2">sined</font></th>
<tr>
<td></td>
<td></td>
<td><a>Details </a></td>
<td> <a>EDIT </a></td>
<td><button class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">sign</button></td>
</tr>
</table>
</div>
<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">List s</h4>
</div>
<div class="modal-body">
<div class="table-responsive mbn">
<table class="table table-bordered mbn">
<tr>
<th width="70"><font color="red" size="2">Sl</font></th>
<th><font color="red" size="2">Name</font></th>
<th width="90"><font color="red" size="2"></font></th>
</tr>
<tr>
<td>1</td>
<td>I</td>
<td> <input type="checkbox" name="assign" value="Bike"></td>
</tr>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-info">Submit</button>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
</div>
</div>
</div>
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 -->