Develop Reference

Input value from HTML not passing to modal

I am trying to pass the reservation id from HTML to modal. In pictures, when I click "cancel" next to reservation:
preview of the screen A modal appears and it should contain the id number of reservation:
preview
Modal pops up but without the reservation id number. Please, what's wrong?
I followed this tutorial: https://www.geeksforgeeks.org/how-to-pass-data-into-a-bootstrap-modal/. Thank you.
Here is my code:
{% extends "layout.html" %}
{% block title %}
Index
{% endblock %}
{% block main %}
<p>
<h3>Welcome {{ firstname }}</h3>
</p>
<table class="table table-striped">
<thead>
<tr>
<th>Seat</th>
<th>Start date</th>
<th>End date</th>
<th>Number of days</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for histor in history %}
<tr>
<td>{{ histor.seat_name }}</td>
<td>{{ histor.start_date}}</td>
<td>{{ histor.end_date }}</td>
<td>{{ numberofdays }}</td>
<td>
<form action="/" method="post">
<input tupe="text" class="form-control" id="idtocancel" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }}>
<button type="button" id="submit" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel {{ histor.booking_id}}</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- 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">Do you really wish to cancel this booking?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 id="modal_body"></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>
<input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
<button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
</div>
</div>
</div>
</div>
<!--JavaScript queries-->
<script type="text/javascript">
$("#submit").click(function () {
var name = $("#idtocancel").val();
$("#modal_body").html( name);
});
</script>
{% endblock %}

You are assigning value of {{ histor.booking_id }} to placeholder instead use value="{{ histor.booking_id }}" .Then , use class for click event and inside this get value of input using $(this).prev().val() and put it inside your modal.
Demo Code :
$(".tocancel").click(function() {
var name = $(this).prev().val(); //use prev
$("#modal_body").html(name);
$("#bookId").val(name); //use val here
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table class="table table-striped">
<thead>
<tr>
<th>Seat</th>
<th>Start date</th>
<th>End date</th>
<th>Number of days</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>2-10-1</td>
<td>10-1-10</td>
<td>5</td>
<td>
<form action="/" method="post">
<!--added value="{{ histor.booking_id }}"-->
<input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="1">
<button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 1</button>
</form>
</td>
</tr>
<tr>
<td>B</td>
<td>2-10-1</td>
<td>10-1-11</td>
<td>5</td>
<td>
<form action="/" method="post">
<input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="2">
<button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 2</button>
</form>
</td>
</tr>
</tbody>
</table>
<!-- 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">Do you really wish to cancel this booking?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h6 id="modal_body"></h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>
<input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
<button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
</div>
</div>
</div>
</div>

I am using a bootstrap model. But when i call a function in js side it closes, i want it to open

<div id="responsive-modal3" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none; " data-keyboard="false" data-backdrop="static" ng-init = "populateBidSpocData()" >
<div class="modal-dialog modal-lg">
<div class="modal-content" style="margin-top:55px;">
<div class="modal-header" style="background:#003c4c;">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:#FFF;"> <span aria-hidden="true">×</span></button>
<h4 class="modal-title" style="color:#FFF;">Check Availibility</h4>
</div>
<div class="modal-body">
<table class="table table-hover hd-bg-table table-bordered">
<thead>
<tbody>
<thead>
<tr>
<th class="text-center" style="vertical-align:middle" rowspan="2"></th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Bid SPOC</th>
<th class="text-center" style="vertical-align:middle" rowspan="2">Role</th>
<th class="text-center" colspan="5">SPOC's Availability(Number of Service Requests Per Stage)</th>
</tr>
<tr>
<th><b>Initiation</b></th>
<th><b>SPOC Assignment</b></th>
<th><b>Participant Contribution</b></th>
<th><b>Review</b></th>
<th><b>Closure</b></th>
</tr>
</thead>
<tr ng-repeat="x in infoWithStatus track by $index">
<td align="center"><input type="checkbox" ng-model="infoWithStatus[$index].checked"></td>
<td ng-model="infoWithStatus[$index].name">{{x.name}}</td>
<td>
<select ng-model="infoWithStatus[$index].selectedRole" ng-options="item for item in SPOCroles">
<option value="">Please select a role</option>
</select>
</td>
<td>{{x.count1}}</td>
<td>{{x.count2}}</td>
<td>{{x.count3}}</td>
<td>{{x.count4}}</td>
<td>{{x.count5}}</td>
<tr/>
</tbody>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" >Close</button>
</div>
</div>
</div>
</div>
Here as we can see i am calling a function on click, that contains some validations. But, after the validations are done, it closes the model. But , i want the model to still open after validation as well.

You should remove
data-dismiss="modal"
from here
<button type="button" class="btn btn-primary waves-effect waves-light" data-dismiss="modal" ng-click="validate(infoWithStatus)" >Done</button>
And in your validate(infoWithStatus) you should close the modal if validation is success. Use below code to hide modal
$("#responsive-modal3").modal("hide");

Can't open modal on button click

I want to use modal for representing additional data on my table row contennt for this reason i use this code below , but when i press button modal doesn't pops up and i don't see any error in my browser console , what should i add to make my code work?:
<script cam-script type="text/form-script">
$scope.myFunc = function() {
$('#myModal').modal('show');
};
</script>
<h2>My job List</h2>
<div>
<table style="width:100%;" class="table table-hover" >
<thead>
<tr>
<th style="width:80px; height:px;">chose</th>
<th style="width:140px;">id</th>
<th style="width:305px;">organizationNameEN</th>
<th style="width:250px;">cardNumber</th>
<th style="width:250px;"></th>
<th style="width:250px;"></th>
</tr>
</thead>
<tbody ng-repeat="item in arr" >
<tr>
<td><input style="width:25px; height:25px;" type="checkbox" ng-model="chekselct"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td>
<td><input style="width:140px;" type="text" id="id" ng-model="item.id" readonly /></td>
<td><input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></td>
<td><input style="width:305px;" type="text" id="organizationNameGE" ng-model="item.organizationNameGE" /></td>
<td><button type="button" class="btn btn-primary" style="height:30px" data-toggle="modal" data-target="#myModal">details</button></td>
<td><button ng-click="myFunc()" role="button" class="btn btn-large btn-primary">Detail</button></td>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" ng-repeat="item in arr">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Details</h4>
</div>
<div class="modal-body">
<p ><label for="organizationNameEN"> organizationNameEN</label> : <input style="width:305px;" type="text" id="organizationNameEN" ng-model="item.organizationNameEN" /></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
</tbody>
</table>
</div>

You can open it without using angular. Replace your code ng-click="myFunc()" with data-toggle="modal" data-target="#myModal" ... It should work

try this on your button (the one with the ng-click="myFunc()"), it invokes modal without a need for explicit script.
<button role="button" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal">Detail</button>

Getting table data to Bootstrap Modal using Sinatra ERB templating

I have a simple table which, using ERB templating (i.e. <%= =>), displays a table of data.
Each row in the table has an edit button to edit the contents of the row. I am trying to make it such that when I click on the edit button, a Bootstrap Modal will pop up with the contents of the row in <textarea> tags but whenever I do this, it only always displays the contents of the first row.
Here is the table in the ERB file
<table class="table table-striped table-bordered table-list">
<thead>
<tr>
<th><em class="fa fa-cog"></em></th>
<th>Question</th>
<th>Answer</th>
</tr>
</thead>
<tbody>
<% $snippety.each do |snippet| %>
<tr>
<td align="center">
<a class="btn btn-default" data-toggle="modal" data-target="#basicModal4" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-pencil"></em></a>
<a class="btn btn-danger" data-toggle="modal" data-target="#basicModal3" aria-hidden="true" name="btn" data-modal-type="confirm"><em class="fa fa-trash"></em></a>
</td>
<td><%=snippet["question"]%></td>
<td><%=snippet["answer"]%></td>
<td>
<form onsubmit="return confirm('Are you sure you want to delete the Snippet?')" action='/api/v1/snippets/delete/<%= snippet["id"] %>' method="post">
<input type="submit" value="Delete" class="delete"> | <a id="button" shape="circle" color="black" href='/api/v1/snippets/edit/<%= snippet["id"] %>'>Edit</a>
</form>
</td>
</tr>
<!-- DELETE MODAL -->
<div class="modal fade" id="basicModal3">
<div class="modal-dialog" role="dialog">
<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>
</div>
<div class="modal-body">
<p style="text-align:center">WARNING</p>
<p style="text-align:center">This will delete the Snippet forever and cannot be recovered</p>
</div>
<div class="modal-footer">
<form action="/api/v1/snippets/delete/<%= snippet["id"] %>" method="POST">
<button type="submit" class="btn btn-primary">Delete</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- EDIT MODAL -->
<div class="modal fade" id="basicModal4" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Snippet</h4>
</div>
<form action="/api/v1/snippets/edited/" method="POST">
<div class="modal-body">
<div class="col-md-12">
<div class="form-group">
<label for="comment">Question</label>
<textarea class="form-control" rows="5" id="comment" name="question"><%=snippet["question"]%></textarea>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="comment">Answer</label>
<textarea class="form-control" rows="5" id="comment" name="answer"><%=snippet["answer"]%></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save Snippet</button>
</div>
</form>
</div>
</div>
</div>
<%end%>
</tbody>
</table>
I know I can open a new page with the table data to be edited via a Sinatra controller but I don't want to have to do that.

How to prevent Bootstrap Modal from opening when element inside trigger is clicked?

I've set all rows of my table to open a bootstrap modal.
However, inside each row I have a select box with a couple of status that the user must be able to chose.
How can I prevent the modal of opening when the select box is clicked?
Here is my code:
HTML
<div class="row">
<div class="col-md-6">
<table class="table">
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr class="user-row" data-toggle="modal" data-target="#myModal">
<td>John Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
<tr class="user-row" data-toggle="modal" data-target="#myModal">
<td>Jane Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal title</h4>
</div>
<div class="modal-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>
</div>
</div>
Jsfiddle link:
https://jsfiddle.net/2c21mzfm/
Thanks in advance.

See this fiddle:
$(".user-row select").on("click", function (e) {
e.stopPropagation();
});
The idea is that you stop the click event (e - the first argument of the on callback that is the delegated parameter to the event) bubbling up to .user-row with stopPropagation

You are setting the entire table row to activate the modal. Only set the td to activate the modal.
HTML
<tr class="user-row">
<td data-toggle="modal" data-target="#myModal">John Doe</td>
<td>
<select class="form-control status-selection">
<option></option>
<option>Active</option>
<option>Inactive</option>
</select>
</td>
</tr>