Bootstrap 4 Modal Varying Content not working - javascript

I'm having a little problem where I can't get a modal to read data from a HTML table and input it into a Bootstrap 4 Modal. I've tried multiple ways as seen in the code snippets below.
This is just me learning as I need to be able to do it with ASP.Net and have a table filled from a database passing data into a Modal but first need to get a basic Modal working. Can someone please help figure out why this isn't working.
HTML:
#{
ViewData["Title"] = "PlayTest";
}
#model ViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/css/site.css" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" id="bootstrap-css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>#ViewData["Title"]</h1>
<br />
<br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">John</td>
<td class="age">45</td>
<td>Male</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" data-name="John">View</button></td>
</tr>
<tr>
<td class="name">Samantha</td>
<td class="age">32</td>
<td>Female</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View</button></td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Name</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p class="ageMessage">Age</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
JS:
<script type="text/javascript">
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var _name = button.data('name');
var row = button.parents('tr');
//var name = row.find('.name').text();
var age = row.find('.age').text();
$(this).find('.modal-title').val(_name);
//$(this).find('.modal-title').val(name);
$(this).find('.ageMessage').val('Your age is: ' + age + '!');
})
})
</script>
It still opens a Modal just nothing is shown apart from the hardcoded "Name" and "Age" not the values from the table which I would expect to see.

I noticed that your JavaScript uses myModel as the ID, but your modal has the ID of myModal.
Your JQuery function will not be called as the event listener is not listening to your modal.
Instead of $('#myModel') use this -> $('#myModal')?

Related

The Content of the Popup don't Display after Pressing the Textlink

Goal:
Display the popup screen Search5 by clicking on the arrow icon in relation to the link textlink "test".
Firstly, click on the textlink test, then click on the displayed icon arrow and then the popup screen Search will appear.
Problem:
When you click on the linktext "test" the icon will appear. When you click on the icon, the content of the popup Search will not appear.
What code am I missing? I have tried with different solution but I failed.
Compare the the third row from the table, the icon works that you can show the content of the popup search.
Info:
*Im using bootstrap 3
Thank you!
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Search</th>
<th>Test</th>
</tr>
</thead>
<tbody id="datafromtbody">
<tr id="tr_row1">
<td id="tr_row1_td1"></td>
<td>test</td>
</tr>
<tr>
<td id="tr_row2_td2"></td>
<td>test</td>
</tr>
<tr id="tr_row3">
<td id="tr_row2_td3">
<a href="#myModal-search5" data-toggle="modal" data-target="#myModal-search5" class="showseconddata" id="data_3">
<img src="https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png" width="15" height="15" />
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal-firstdata" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">First data</h4>
</div>
<div class="modal-body">
<div id="firstdata_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal-search5" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search 5</h4>
</div>
<div class="modal-body">
<div id="showdatafor5"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$('.firstdata').click(function () {
var alldata = $(this).attr("id");
var number = alldata.split('_')[1];
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>a</td><td><button onclick='createicon(" + number + ")'>add data in table</button></td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("firstdata_content");
anydata.innerHTML = display;
});
function createicon(data)
{
var idname = "tr_row" + data + "_td" + data;
var anydata = document.getElementById(idname);
if (anydata.innerHTML === "") {
var addData = document.getElementById(idname);
addData.innerHTML = "<a href='#myModal-search5' data-toggle='modal' data-target='#myModal-search5' class='showseconddata'><img src='https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png' width='15' height='15' /></a>";
}
}
$('.showseconddata').click(function () {
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>show data</td>";
display +="<td>show data</td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("showdatafor5");
anydata.innerHTML = display;
});
</script>
</body>
</html>
The new icons are created after you attached the click event handler to .showseconddata. Hence, you need to delegate this event, changing from:
$('.showseconddata').click(function () {
to:
$('.container').on('click', '.showseconddata', function () {
function createicon(data) {
var idname = "tr_row" + data + "_td" + data;
var anydata = document.getElementById(idname);
if (anydata.innerHTML === "") {
var addData = document.getElementById(idname);
addData.innerHTML = "<a href='#myModal-search5' data-toggle='modal' data-target='#myModal-search5' class='showseconddata'><img src='https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png' width='15' height='15' /></a>";
}
}
$('.firstdata').click(function () {
var alldata = $(this).attr("id");
var number = alldata.split('_')[1];
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>a</td><td><button onclick='createicon(" + number + ")'>add data in table</button></td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("firstdata_content");
anydata.innerHTML = display;
});
$('.container').on('click', '.showseconddata', function () {
var display ="<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody>";
display +="<tr>";
display +="<td>show data</td>";
display +="<td>show data</td>";
display +="</tr>";
display +="</tbody></table>";
var anydata = document.getElementById("showdatafor5");
anydata.innerHTML = display;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Search</th>
<th>Test</th>
</tr>
</thead>
<tbody id="datafromtbody">
<tr id="tr_row1">
<td id="tr_row1_td1"></td>
<td>test</td>
</tr>
<tr>
<td id="tr_row2_td2"></td>
<td>test</td>
</tr>
<tr id="tr_row3">
<td id="tr_row2_td3">
<a href="#myModal-search5" data-toggle="modal" data-target="#myModal-search5" class="showseconddata" id="data_3">
<img src="https://cdn4.iconfinder.com/data/icons/aiga-symbol-signs/581/aiga_uparrow_inv-512.png" width="15" height="15" />
</a>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="modal fade" id="myModal-firstdata" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">First data</h4>
</div>
<div class="modal-body">
<div id="firstdata_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal-search5" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Search 5</h4>
</div>
<div class="modal-body">
<div id="showdatafor5"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Generate modal pop up with dynamic data from button click on table row

I have a Maven/Spring Boot/Thymeleaf project where I want a button click in a row to trigger a modal pop up that has a detail view of that row's data.
My original problem was that when a button was clicked on any given row, the modal pop up would ONLY display the first row's data. I realized this was because every button in every row had the same data-target, and the browser was grabbing the first row in the table.
So, now I'm trying to use JavaScript/jQuery to populate the modal's data for me. I've removed the data-target for the button so it doesn't trigger the default and incorrect behavior. For now, I've been trying to simply display the title of a book in a input text field. It has not worked. The modal pop up displays with the text field, but it's empty, and doesn't have the title from that particular row.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Book Note Book</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/index_styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$('#myButton').on('click',function(){
$("#myModal").modal("show");
$("#txttitle").val($(this).closest('tr').children()[0].textContent);
});
</script>
</head>
<body>
<div class="container">
<h2>Books</h2>
<p>This is all the books you've read</p>
<table class="table">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date read</th>
<th>More</th>
</tr>
</thead>
<tbody>
<tr th:if="${books.empty}">
<td colspan="2"> No Books Available </td>
</tr>
<tr th:each="book : ${books}">
<td><p th:text="${book.title}"/></td>
<td><p th:text="${book.author}"/></td>
<td><p th:text="${book.dateRead}"/></td>
<td><button type="button" id="myButton" data-toggle="modal"><span class="glyphicon glyphicon-info-sign"></span></button>
<div class="modal fade" id="myModal" 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">Details</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<tbody>
<tr>
<td><p><b>Title</b></p></td>
<td><input type="text" id="txttitle"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
You don't need to use jquery for this. Your first option was correct, you just were missing some tools. You can use on your button th:attr="data-target=${book.title}" and on your modal, change it's id like <div class="modal fade" th:id="${book.title}" role="dialog">.
This way, you will set the right target for each button and you don't need to add any unnecessary code. Of course, this is an example, but you can use whichever unique value you want for your target or id. In the end, you code would look something like this.
<tr th:each="book : ${books}">
<td><p th:text="${book.title}"/></td>
<td><p th:text="${book.author}"/></td>
<td><p th:text="${book.dateRead}"/></td>
<td><button type="button" th:attr="data-target=${book.title}" id="myButton" data-toggle="modal"><span class="glyphicon glyphicon-info-sign"></span></button>
<div class="modal fade" th:id="${book.title}" 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">Details</h4>
</div>
<div class="modal-body">
<table class="table table-striped">
<tbody>
<tr>
<td><p><b>Title</b></p></td>
<td><input type="text" id="txttitle"/></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>

Close current modal and open new modal using jquery

I have two modals, one is View and other is Edit.
Issue is that when I open a view modal and click on edit button then edit modal is open but view modal is still open its will be disappear when edit modal is open.
I am doing like this
$("#editModal").click(function() {
var id = $("#editModal").val();
$('#' + id).modal('hide');
$('#' + id).modal('show');
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
View
<div id="viewTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h6 class="pull-left">Code : <label class="modal_label">T-10-Yes</label></h6>
<h6 class="pull-right">Task Date : <label class="modal_label">17 May, 2018</label></h6>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Title</th>
<th>Progress</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Review system generated T&Cs for deploying to website</td>
<td>0%</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="pull-left">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#editTasks_50" value="50" id="editModal">Edit</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div id="editTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="pull-left">
<input type="button" class="btn btn-info" value="Update">
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I need that when I click on edit button then edit Modal is open and view modal is closed.
Here is an working example of how you can do it.
$("#editModal").click(function() {
var button = $(this);
var id = button.val();
button.closest(".modal").modal('hide');
$('#' + id).modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
View
<div id="viewTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h6 class="pull-left">Code : <label class="modal_label">T-10-Yes</label></h6>
<h6 class="pull-right">Task Date : <label class="modal_label">17 May, 2018</label></h6>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Title</th>
<th>Progress</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Review system generated T&Cs for deploying to website</td>
<td>0%</td>
<td>Pending</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<div class="pull-left">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#editTasks_50" value="50" id="editModal">Edit</button>
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div id="editTasks_50" class="modal fade show" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<div class="pull-left">
<input type="button" class="btn btn-info" value="Update">
</div>
<div class="pull-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
What I would say is close all the modals that are opened and then open only the modal you want. Something like:
$("#editModal").click(function() {
var id = $("#editModal").val();
$('.modal').modal('hide');
$('#' + id).modal('show');
});
Since all modal have a common class 'modal' it will close all the
modal and show the modal you want.
Hope this helps!!
Cheers
This is a bit more dynamic.
let modals = [
{
'callToAction': 'toggleVisitorProfileModal',
'modalToToggle': 'visitorProfileModal'
}, {
'callToAction': 'toggleBuyTokensModal',
'modalToToggle': 'tokensModal'
},
];
$.each(modals, function (key, value) {
$('.' + value.callToAction).on('click', function () {
if ($('#' + value.modalToToggle).hasClass('in') === false) {
$('.modal').modal('hide');
$('.modal-backdrop').remove();
$('#' + value.modalToToggle).modal('show');
}
}
)
});
Whenever you click an element to activate a modal
Check if the current modal is open. An open modal has the IN class
associated. If this is false we know that the modal you try to open
is currently NOT open.
We then close all modals.
When there are multiple modals on the same page you might come across the black background not disappearing. To remove this we remove all elements containing the MODAL-BACKDROP class.
And last we show the modal that is toggled.
Closing all Modals in background
$('.modal').modal('hide');
Now, opening new Modal
$('#myModal').modal('show');
I know this post is too old but I spend a lot of time in this type of issues and it's a simple solution by hiding modals in the webpage and then show new modal
$('#mymodal').modal('hide');
it works correct,
If not closing modal then use below script
$('#mymodal').modal('hide');
$('div.modal-backdrop.fade.in').attr('class','none');

Modal for clickable table rows in bootstrap

I have a 3 rowed table and I want to click on each row and describe more about the content of each in a modal pop out . The problem is when I click on the row the screen will go a bit darker but no pop up shows up
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
$(function(){
$('#orderModal').modal({
keyboard : true,
backdrop : "static",
show : false,
}).on('show', function(){
var getIdFromRow = $(this).data('orderid');
//make your ajax call populate items or what even you need
$(this).find('#orderDetails').html($('<b> Order Id selected: ' + getIdFromRow + '</b>'))
});
$(".table-striped").find('tr[data-target]').on('click', function(){
//or do your operations here instead of on show of modal to populate values to modal.
$('#orderModal').data('orderid',$(this).data('id'));
});
});
</script>
</head>
<body>
<div class="container">
<h1>Orders</h1>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr data-toggle="modal" data-id="1" data-target="#orderModal">
<td>1</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="2" data-target="#orderModal">
<td>2</td>
<td>24234234</td>
<td>A</td>
</tr>
<tr data-toggle="modal" data-id="3" data-target="#orderModal">
<td>3</td>
<td>24234234</td>
<td>A</td>
</tr>
</tbody>
</table>
<div id="orderModal" class="modal hide fade" role="dialog" aria-labelledby="orderModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</body>
</html>
The reason is that you're probably using the newest bootstrap and an old HTML modal format.
Your modal should include <div class="modal-dialog"> and <div class="modal-content"> elements. Also, there's no more hide class in the actual version of bootstrap
<div id="orderModal" class="modal fade" role="dialog" aria-labelledby="orderModal" 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">x</button>
<h3>Order</h3>
</div>
<div id="orderDetails" class="modal-body"></div>
<div id="orderItems" class="modal-body"></div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
</div>
Another thing is the show event, which should be on('show.bs.modal'), not on.('show')
DEMO

Taking Text from a modal input field and placing it into a table

Alright, I am a web-design noob. I am attempting to take a input field from a modal and adding that value to a table found on the main page and struggling to do so. My attempts were to write a script to this failed as I saw no result.
Here is the attempt: I've got this input field that is found in my modal(taken straight from bootstrap). I've assigned it the id="addHousemate"
<input type="text" class="form-control" id="addHousemate" placeholder="Housemate's Name">
And here is the button I wish to submit it with.
<input type="button" class="btn btn-primary" name ="addHousemate">Submit</button>
And finally, this is the tbody in which i'd like the added input to be place.
<tbody>
<div id="housemateTable"></div>
</tbody>
Now my attempt at writing a jquery function is as follows:
jQuery(function($){
$('input[name="add"]').click(function() {
value = $('input[name="addHousemate"]').val();
$('td tr:last').after("<tr><td>" + value + "</td></tr>");
$('input[name="addHousemate"]').val("");
});
});
However I get no result. I also looked up using jquery append but still didn't get me anywhere. Please help!
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- JavaScript -->
<script language="javascript" type="text/JavaScript" src="js/jquery-1.11.0.min.js"></script>
<script language="javascript" type="text/JavaScript" src="js/submit.js"></script>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="col-md-4">
<div class= "table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>People of the House</th>
</tr>
</thead>
<tbody>
<div id="housemateTable"></div>
</tbody>
</table>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Add a Housemate
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="addHousemate" 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">Add a Housemate</h4>
</div>
<div class="modal-body">
<form role ="form">
<div class="form-group">
<input type="text" class="form-control" id="addHousemate" name"addHousemate" placeholder="Housemate's Name">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="button" class="btn btn-primary" name ="add" value="add">
</div>
</div>
</div>
</div>
</div>
</div>
First to notice is the way you were using the selector for the input element had issues. You would want to retrieve the value from the first input element that actually holds the input text, rather than grabbing from the second input element, which is just a button.
So, I would adjust:
$('input[name="addHousemate"]').val();
to
$('input[id="addHousemate"]').val();
Plus, the way you set up the event listener was problematic:
$('input[name="add"]').click(function() {
Notice that there is no input element with the name "add". I believe that what you meant to do was:
$('button[name="addHousemate"]').click(function() {
By looking at the closing tab on the second input element:
Submit</button>
, I assume that what you meant to use was 'button' rather than 'input' for the second input element.
So, at the end, the jQuery code would look like:
$('button[name="addHousemate"]').click(function() {
var value = $('input[id="addHousemate"]').val();
$('tr td:last').after("<tr><td>" + value + "</td></tr>");
$('input[id="addHousemate"]').val('');
});
Check out the working code at:
http://jsfiddle.net/yp9V6/
Enjoy web design work!
Problem may stem from using :last instead of :last-child in your selector
I would use the full syntax (.on()) for detecting the submission, and use submit instead of click. Then you take the value from the input and use .html to add it to the last row.
$(document).ready(function()
{
$('input[name="addHousemate"]').on('submit',function()
{
var thisvalue = $('input#addHousemate').val();
$('tr:last-child td').html(thisvalue);
});
});
Also the code you provided for where you want the output differs massively from the code you supplied?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Categories