Bootstrap Modal Not Displaying - javascript

i need help with my modal it just will not display. i can't seem to find what is wrong.
below is the code
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span><img src="img/logo.png"></span>
</button>
<a class="navbar-brand" href="#">Cotton Board of Zambia</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="search" class="form-control">
</div>
<button type="submit" class="btn btn-success">Search</button>
</form>
</div>
</div>
</div>
<table id="maintable" >
<tr>
<td>
<table align="left" width="100%">
<tr>
<td><p><a data-toggle="modal" href="#reglog" class="btn btn-primary btn-large">Register & Login</a></p></td>
<td>
<!--register/login modal-->
<div class="modal hide fade in" id="reglog" style="display: none; " >
<div class="modal-header">
<h4>Cotton Board of Zambia</h4><br>
<h6>Login Here</h6>
</div>
<div class="modal-body">
<form>
<label>Some text</label>
<input type="text">
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">close</button>
Close
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/modal.js"></script>
</td>
</tr>
</table>
</td>
<td>
<table align="right" width="100%">
<tr>
<td>
<div><h3>Our Location</h3></div>
<div id="map">
<div id="map_canvas" style="width: 200px; height: 300px;"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div><hr/></div>
<footer>
<p>© 2013</p>
</footer>
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.js"><\/script>');</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
from the little knowledge i have on HTML 5 seems like the code should work.
kindly help me figure out why the Modal will not display in the browser.
i also added the link as suggested and downloaded Modal.js but the modal still will not show in my browser. Kindly Help.


You need to change your modal from this:
<div class="modal hide fade in" id="reglog" style="display: none;" >
to this:
<div id="reglog" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
Bootstrap will automatically take care of hiding and displaying the modal for you, so you don't need to include thestyle="display:none;".
Here is a link to the modals in the documentation for Bootstrap: http://getbootstrap.com/2.3.2/javascript.html#modals

Related

Dropdown toggle stops working after adding modal

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

Creating a modal within Bootstrap and Angular

I am working on a web app using bootstrap and angular. I have a button that I would like to show a modal with data from another html page (employee.function.add.html). All files are under the root employee folder
Here is the modal content within employee.function.add.html
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading text-center">
Employee Information
</div>
<div class="panel-body">
<div class="row">
<div class="text-right col-xs-2">Title:</div>
<div class="text-left col-xs-3" id="title"></div>
<div class="text-right col-xs-2">First:</div>
<div class="text-left col-xs-3" id="firstname"></div>
</div>
<div class="row">
<div class="text-right col-xs-2">Phone#</div>
<div class="text-left col-xs-3" id="phone"></div>
<div class="text-right col-xs-2">Email</div>
<div class="text-left col-xs-3" id="email"></div>
</div>
<div class="row">
<div class="text-right col-xs-2">Dept:</div>
<div class="text-left col-xs-3" id="departmentname"></div>
<div class="text-left col-xs-2">Surname:</div>
<div class="text-left col-xs-4">
<input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-footer">
<input type="button" value="Find Employee" id="empbutton" />
<div class="col-xs-10" id="lblstatus"></div>
</div>
</div>
</div>
</div>
</div>
</div>
The button is created within employee.function.html here
<div class="animated fadeIn">
<div class="row">
<!--<div class="col-md-6">-->
<div class="col-md-12">
<div class="card">
<div>
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#e0e9f5">
<h2 class="panel-title">Employee Functions</h2>
</div>
<br />
<div class="col-sm-12">
<div align="right" style="padding-bottom:10px">
<!--<button type="button" class="btn btn-info btn-default btn-lg" href="employee.function.add.html" data-toggle="modal" data-target="#addModal">Add Function</button>-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
</div>
<div class="panel-body">
<jqxGrid
[width]="'100%'" [theme]='"energyblue"' [source]='functionAdapter' [pageable]='true' [height]='500' [altrows]='true'
[editable]='true' [columns]='columns'>
</jqxGrid>
</div>
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
</div>
I keep getting this error in the console.
Uncaught Error: Bootstrap's Javascript requires Jquery
In the index.html file I already declared all the needed styles and links for bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
How can I get the modal to work?
and would like something clarified. I am using bootstrap and angular for the project. Within the employee folder and the other folders are html files and ts files. Am I getting this error because I should write the modal using angular? and not bootstrap? I assumed I would make the modal using bootstrap, but that error appears. Some clarification would be helpful. Thank you for the help.

Seems like you forgot to add jQuery to your project. Bootstrap needs jQuery in order to work. Add this line to your code before including bootstrap.min.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I hope that helps! :)

Bootstrap requires Jquery for its widgets to work. If you want angular versions I would look into angular ui bootstrap here: Angular UI Bootstrap

Bootstrap Modal is not Displaying Login Window

How do I display a Login Modal using Bootstrap having included a that needs to be done but still it is not displaying.
enter code here
How do I make this modal to display given the code below:
BOOTSTRAP LINKS:
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
MODAL STYLING:
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
Navigation Bar Containing the Link so as to display the Login Modal:
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"> </a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Departments</li>
<li>Clubs & Sports</li>
<li>Contact US</li>
<li><a data-toggle="modal" href="#login">Login</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.php"><img alt="" src="images/person2.png">
Sign Up</a></li>
<li><img alt="" src="images/login2.png">Login</li>
</ul>
</div>
</div>
</nav>
Container For the Login Modal:
<div class="container">
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>
<span class="glyphicon glyphicon-lock"></span> Login
</h4>
</div>
<div class="modal-body" style="padding: 40px 50px;">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label> <input type="text" class="form-control"
id="usrname" placeholder="Enter email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label> <input type="text" class="form-control"
id="psw" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-success btn-block">
<span class="glyphicon glyphicon-off"></span> Login
</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left"
data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span> Cancel
</button>
<p>
Not a member? Sign Up
</p>
<p>
Forgot Password?
</p>
</div>
</div>
</div>
</div>
Javascript code to enable the Login Modal:
<script>
$(document).ready(function(){
$("#login").click(function(){
$("#myModal").modal();
});
});
</script>

Your Javascript is trying to address elements that don't exist because they do not have an id, or the wrong id.
Try this.
Add an id to the link that is supposed to bring up the modal.
<li><img alt="" src="images/login2.png">Login</li>
This is not required, but I would recommend changing the id of your modal to be more descriptive.
<div class="modal fade" id="loginModal" role="dialog">
Now adjust your JavaScript to address the correct elements.
$(document).ready(function(){
$("#loginLink").click(function(){
$("#loginModal").modal();
});
});

jQuery not executing properly

This seems a bit like a simplistic question but it keeps bothering me and I can't solve it. I am currently trying to make a div be replaced by iframe on click of a button. Despite the simplistic nature of this issue and me already having the right answer, I cannot manage to run it for some reason.
Firstly it was giving me:
$ not defined
Which I know it's an issue regarding the jQuery library not being correctly inserted in the html file. Afterwards I reshuffled my libraries and it still doesn't execute properly.
I've ready most of the previous topics where jQuery is not working with all the possible solutions suggested. I am quite aware of the two previous questions one with 33 and the other with 26 answers.
I've even tried downloading jQuery to a file and utilizing it localy but it still doesn't run. Can you help me figure out how to fix this.
jQuery code:
$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
HTML code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src ="img/beme.png" class ="logo">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class ="banner">
<div class ="row" id ="mid-row">
<img src ="img/background.png" id ="big-image">
<img src ="img/play-button.png" id ="play">
</div>
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
</div>
How my libraries are inserted:
<script src="scripts/jquery-3.1.0.js"></script>
<!-- Angular and Bootstrap files -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Angular and Bootstrap Files -->
<!-- Personal CSS file -->
<link rel ="stylesheet" href ="css/style.css">
<!-- Personal CSs file -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
I am basically trying to recreate this JSFiddle but with no luck:http://jsfiddle.net/ANRHT/6/

$('.playbutton,img').click(function(){
var video = '<div class="video-container"><iframe src="'+ $('img').attr('data-video') +'"></iframe></div>';
$('.video').hide();
$('.tube').html(video);
$('.close').show();
});
$('.close').click(function(){
$('.video').show();
$('.tube').empty();
$('.close').hide();
});
#import url(http://getbootstrap.com/dist/css/bootstrap.min.css);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src ="img/beme.png" class ="logo">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<button type="submit" class="btn btn-success">Register</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</nav>
<div class ="banner">
<div class ="row" id ="mid-row">
<img src ="img/background.png" id ="big-image">
<img src ="img/play-button.png" id ="play">
</div>
<div class="video">
<div class="playbutton">Play</div>
<img src="http://cdn0.sbnation.com/uploads/chorus_image/image/5372321/battlefield3-screen-12.0_cinema_640.0.jpeg" data-video="http://www.youtube-nocookie.com/embed/U8HVQXkeU8U?&autoplay=1&rel=0&fs=0&showinfo=0&autohide=3&modestbranding=1">
</div>
<div class="tube"></div>
<div class="close">Close X</div>
</div>

How to pass multiple values to Bootstrap pop-up from anchor tag?

I am displaying some fields in a table with labels and also an anchor tag to edit the data.
When the user clicks the Edit Link, the pop is shown with Current Value and also have a textbox to Update the Value with new one.
I want to pass the current value of Lable to the pop-up and also the column name which will be hidden from the user by which I can easily get the column name which have to be updated.
I want to pass column name because there many fields in this page but I have developed only one pop-up for all, so the data which will shown in pop-up will be dynamic as it depends upon the anchor which was clicked.
This is My Modal-PopUp Code :
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Edit Information</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
Current Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="Curr_Val"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-md-3">
New Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="New_Val"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here I am calling the Modal Pop-up :
<th style="width:15%;">First Name :</th>
<td style="width:18%;">
<asp:Label runat="server" ID="lbl_fname"></asp:Label>
<span> <i class="fa fa-pencil" aria-hidden="true"></i>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
</span>
</td>
I've gone through many links but couldn't fine the solution for passing multiple values.
Can any any one please help me.
Thanks in advance.
EDIT
I tried the following code using javascript but it still not working :
<script type="text/javascript">
$(function () {
$(".edit").click(function () {
var tr = $(this).parent().parent();
var tdRecords = $(tr).children();
var firstName = $(tdRecords[0]).text();
var lastName = $(tdRecords[1]).text();
$("#Curr_Val").val(firstName);
$('#myModal').modal('show');
});
});
</script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function () {
var selectedTab = $("#<%=hfTab.ClientID%>");
var tabId = selectedTab.val() != "" ? selectedTab.val() : "personal";
$('#dvTab a[href="#' + tabId + '"]').tab('show');
$("#dvTab a").click(function () {
selectedTab.val($(this).attr("href").substring(1));
});
});
</script>
<style>
body {
text-align:left;
color:#000000;
}
</style>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container" style="margin-top:-50px;">
<div class="row">
<div class="col-sm-12 myprofilediv" style="vertical-align:central;">
<div class="panel panel-default" style="padding:10px;">
<div class="row">
<div class="col-md-3 col-md-offset-9">
<a class="btn btn-link-1" href="MyProfile.aspx?do=edit" style="font-weight:bold; float:right;"><i class="fa fa-user"></i>Edit My Profile</a>
</div>
</div>
<h1 class="wow fadeInLeftBig profilehead">My Profile</h1><br />
<div id="dvTab">
<ul class="nav nav-tabs" role="tablist">
<li>Personal Information</li>
<li>Fund Nominee</li>
<li>Education Details</li>
<li>Family Details</li>
<li>Employment History</li>
</ul>
<div class="tab-content">
<div id="personal" role="tabpanel" class="tab-pane active">
<table style="height:15%;" class="table">
<tr>
<td style="width:60%;"> <br /> <h3 style="text-align:center;">Personal Information</h3> </td>
<td style="width:12%;"><br /><asp:Image runat="server" ImageUrl="ImgHandler.ashx?typ=profile&emp=46" /></td>
</tr>
</table>
<br />
<table class="table-responsive table table-bordered mytable">
<tr>
<th style="width:15%;">First Name :</th>
<td style="width:18%;">
<asp:Label runat="server" ID="lbl_fname"></asp:Label>
<%-- <a href="#" data-toggle="modal" data-target="#myModal">--%>
<a class="edit" href="#">
<i class="fa fa-pencil" aria-hidden="true"></i>
</a>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
</td>
<th style="width:13%;">Middle Name :</th>
<td style="width:20%;">
<asp:Label runat="server" ID="lbl_mname"></asp:Label>
</td>
<th style="width:18%;">Last Name :</th>
<td style="width:20%;">
<asp:Label runat="server" ID="lbl_lname"></asp:Label>
</td>
</tr>

You need to change the way you call your modal popup, you should ideally be calling it from javascript.
Before calling the modal you will need to find the table row(or any other record you need to update) relative to the position of the clicked link and populate the current value text box with this data.Once you've done all this you can call $('#myModal').modal('show'); to show the modal.
Here's a complete example.Pasted it as is in a new web page, understand how it works and finally apply to your solution:
HTML:
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$(".edit").click(function () {
var tr = $(this).parent().parent();
var tdRecords = $(tr).children();
var firstName = $(tdRecords[0]).text();
var lastName = $(tdRecords[1]).text();
$("#Curr_Val").val(firstName);
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Edit Information</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
Current Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="Curr_Val"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-md-3">
New Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="New_Val"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Update</th>
</tr>
<tr>
<td>Denis</td>
<td>Wessels</td>
<td><a class="edit" href="#">Edit</a></td>
</tr>
<tr>
<td>Bob</td>
<td>The Builder</td>
<td><a class="edit" href="#">Edit</a></td>
</tr>
</table>
</form>
</body>
Output:
EDIT:
<head runat="server">
<title></title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$(".edit").click(function () {
var tr = $(this).parent().parent();
var tdRecords = $(tr).children();
var middleName = $(tdRecords[3]).children(0).html();
var lastName = $(tdRecords[5]).children(0).html();
$("#Curr_Val").val(middleName);
$('#myModal').modal('show');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Edit Information</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
Current Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="Curr_Val"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-md-3">
New Value :
</div>
<div class="col-md-6">
<asp:TextBox CssClass="txtstyle" runat="server" ID="New_Val"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<table class="table-responsive table table-bordered mytable">
<tr>
<th style="width: 15%;">First Name :</th>
<td style="width: 18%;">
<asp:Label runat="server" ID="lbl_fname"></asp:Label>
<a class="edit" href="#">
<i class="fa fa-pencil" aria-hidden="true">Edit</i>
</a>
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
</td>
<th style="width: 13%;">Middle Name :</th>
<td style="width: 20%;">
<asp:Label runat="server" ID="lbl_mname" Text="My Middle Name"></asp:Label>
</td>
<th style="width: 18%;">Last Name :</th>
<td style="width: 20%;">
<asp:Label runat="server" ID="lbl_lname" Text="My Last Name"></asp:Label>
</td>
</tr>
</table>
</form>
</body>

Categories

Resources