Develop Reference

Datatable button aiming to different Modal with javascript

It is a table display in webpage, it displays one button for row using Datatable.
In the column #4 displays either of 2 values, one is --- which is desires for trigger any of the two Modals after click over it own row's button.
When click over any row's button, console.log successfully display message set, however it does not open any modal and display error document.getElementById(...).modal is not a function at HTMLButtonElement.<anonymous>
Table header is ['eamil', 'first-name', 'last-name', 'NIT', 'button']
data value for table is:
[['prueba1#gmail.com','Daniel','Apellido01','907595-0'],
['prueba4#gmail.com','Prueba04','Apellido04','---']]
HTML
<!-- DataTable -->
<table id="listados" class="display nowrap responsive" style="width:100%">
<thead>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for i in evnts %}
<tr>
<td class="text-dark">{{ i[0] }}</td>
<td class="text-dark">{{ i[1] }}</td>
<td class="text-dark">{{ i[2] }}</td>
{% if i[3] != '---' %}
<td class="text-dark">{{ i[3] }}</td>
{% else %}
<td class="text-dark">{{ i[3] }}</td>
{% endif %}
<td></td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
{% for i in header %}
<th>{{ i }}</th>
{% endfor %}
</tr>
</tfoot>
</table>
<!-- Modals -->
<div class="modal fade" id="newNit" tabindex="-1" role="dialog" aria-labelledby="newNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newNitModalLabel">Agregar Nuevo NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="nuevo"></div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="actualizarNit" tabindex="-1" role="dialog" aria-labelledby="actualizarNitModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="actualizarNitModalLabel">Actualizar informacion NIT</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="update"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-success" id="borrar">Continuar</button>
</div>
</div>
</div>
</div>
snippet for Datatable and modals
$(document).ready( function () {
var pasarValor;
var table = $('#listados').DataTable({
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button class='btn-success' data-toggle='modal' id='agregarNit'>NIT</button>"
}
],
"scrollX":true,
})
$('#listados #agregarNit').on('click', function() {
var data = table.row( $(this).parents('tr') ).data();
pasarValor = {
mail: data[0],
nit: data[3]
};
if (data[3] === '---'){
console.log('True')
document.getElementById('newNit').modal('show');
} else {
console.log('False')
document.getElementById('actualizarNit').modal('show');
}
});
});

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>

Passing data from Blade to modal in Laravel

I have a situation like display table with different columns, say the first column is id and the second column is name, the third column has a button which on click opens up a modal; the data in the table is coming from foreach loop.
I want to pass the id to the modal when button clicked.
<td>{{ $emp->req_id}} </td>
<td>{{ $emp->empid}} </td>
<td>{{ $emp->visit_title}} </td>
<td>{{ $emp->stays_nights}}</td>
<td>{{ $emp->apply_date }}</td>
<td>{{ $emp->travel_charges }}</td>
<td>{{ $emp->hotel_charges }}</td>
<td>{{ $emp->meal_charges }}</td>
<td>{{ $emp->approv_status}}</td>
#endforeach
</tr>
</tbody>

For this, you can use jquery
step(1) add this code in your blade file
<button type="button" data-toggle="modal" data-target-id="{{ $emp->id }}" data-target="#modelName">Button name </button>
step (2) define your jquery method
<script>
$(document).ready(function () {
$("#modelName").on("show.bs.modal", function (e) {
var id = $(e.relatedTarget).data('target-id');
$('#pass_id').val(id);
});
});
</script>
step (3) Make Modal
<div class="modal fade" id="modelName" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog data-dialog-centerd" 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 text-center" id="myModalLabel">Model header Name</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#"
method="post"
enctype="multipart/form-data">
{{ csrf_field() }}
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<input class="form-control" name="name" type="text"
id="pass_id">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>

give an identifiable class say employee <tr class="employee"> and put the id of the entry in the same tag like this <tr class="employee" data-id="{{$emp->id}}">. Then when you would click on the row you could do something like this:
const employees = document.querySelectorAll('.employee');
employees.forEach( employee => {
employee.addEventListener(e => {
const employeeId = e.target.getAttribute('data-id');
// do what you need to do with the id
})
})

I suggest you to refactor this
<a title="Approve" data-toggle="modal" data-target="#modal-block-popout" class="btn btn-outline-success btn-sm" href="approve<?php $emp->id; ?>">Approve </a>
to
<button type="button" title="Approve" class="btn btn-outline-success btn-sm btn-toggle-modal-block-popout" data-id="<?php $emp->id; ?>" >Approve</button>
And add this Javascript
$(document).on('click', '.btn-toggle-modal-block-popout', function() {
var id = $(this).attr('data-id');
//DO WHAT EVER YOU NEED
$('#modal-block-popout').modal('show');
};
Of course for disapprove it will be the same.

The Answer To The Question (The One That Worked For Me)
Step#1 Add Button in the column Of the table:
<button type="button" onclick="myfunction( {{$a->id }})" > My Button </button>
Step#2 Add Script for The function that is calling from the button:
<script>
function myfunction(e){
var x = e;
$('#edit_req_id').val(req_id); //The id where to pass the value
$('#modal-block-popout').modal('show'); //The id of the modal to show
};
</script>
Step#3: Add Modal to which you want to pass the value to:
<div class="modal fade" id="modal-block-popout">
<div class="modal-content ">
<div class="block-options">
<button type="button" class="btn-block-option" data-dismiss="modal" aria-label="Close" name="btn"> <i class="fa fa-fw fa-times"></i></button>
</div>
<div class="block-content">
<input class="form-control form-control-alt " type="text" id="edit_req_id" name="empid">
</div
</div>

This is working for me you can try this :
<i class="mdi mdi-eyedropper px-2" type="button" data-bs-toggle="modal"
data-target-id="{{ $item->id }}" data-bs-target="#modelName"></i>
then :
Modal for Update
<div class="modal fade" id="modelName" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog data-dialog-centerd" 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 text-center" id="myModalLabel">Model header Name</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="portlet-body form">
<div class="form-body">
<div class="form-group">
<input class="form-control" name="name" type="text" id="pass_id">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
then
<script>
$(document).ready(function() {
$("#modelName").on("show.bs.modal", function(e) {
var id = $(e.relatedTarget).data('target-id');
$('#pass_id').val(id);
});
});
</script>

How to pass a selected row data to bootstrap modal

First off I'm new to angular. Right now I am displaying in a table a list of records from a database. The grid shows id, first name, last name, and has an edit button per row. When I click the edit button I'm opening a bootstrap modal for the dit page. I'd like to use the data i've captured client side to the grid and pass the rows data to the modal.
Index.cshtml
<div ng-app="PersonApp" class="container">
<br />
<br />
<input type="text" placeholder="Search Person" ng-model="searchPerson" />
<br />
<br />
<div ng-controller="PersonController">
<table class="table">
<thead>
<tr>
<th ng-click="sortData('Id')">
ID <div ng-class="getSortClass('Id')"></div>
</th>
<th ng-click="sortData('firstName')">
First Name <div ng-class="getSortClass('firstName')"></div>
</th>
<th ng-click="sortData('lastName')">
Last Name <div ng-class="getSortClass('lastName')"></div>
</th>
<th>Actions</th>
</tr>
</thead>
<tr ng-repeat="r in persons | orderBy: sortColumn:reverseSort | filter : searchPerson">
<td>{{r.Id}}</td>
<td>{{r.firstName}}</td>
<td>{{r.lastName}}</td>
<td><span class="fa fa-pencil-square-o"></span></td>
</tr>
</table>
</div>
Modal
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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 class="row">
<div class="col-md-4 mb10">
#Html.Label("First Name")
</div>
<div>
</div>
</div>
<div class="row">
<div class="col-md-4">
#Html.Label("Last Name")
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
AngularJS
/// <reference path="angular.min.js" />
var PersonApp = angular.module('PersonApp', []);
PersonApp.controller('PersonController', function ($scope, PersonService) {
getPersons();
function getPersons() {
PersonService.getPersons()
.success(function (person) {
$scope.persons = person;
console.log($scope.persons);
})
.error(function (error) {
$scope.status = 'Unable to load customer data: ' + error.message;
console.log($scope.status);
});
$scope.sortColumn = 'id';
$scope.reverseSort = false;
$scope.sortData = function (column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'arrow-down' : 'arrow-up'
}
return '';
}
}
});
PersonApp.factory('PersonService', ['$http', function ($http) {
var PersonService = {};
PersonService.getPersons = function () {
return $http.get('/Home/GetPersons');
};
return PersonService;
}]);
Thanks

index.html
<tr ng-repeat="r in persons | orderBy: sortColumn:reverseSort | filter : searchPerson">
<td>{{r.Id}}</td>
<td>{{r.firstName}}</td>
<td>{{r.lastName}}</td>
<td><span class="fa fa-pencil-square-o"></span></td>
</tr>
angularJs
$scope.editperson = function(r){
$scope.myPerson = r;
}
modal
<div class="modal-body" ng-controller="PersonController">
<div class="row">
<div class="col-md-4 mb10">
{{myPerson.firstName}}
</div>
<div>
</div>
</div>
<div class="row">
<div class="col-md-4">
{{myPerson.lastname}}
</div>
</div>
</div>

how to append html to dynamically created html part

function add_items()
{
var ingrediants_name = $("input[name='hidden_name[]']").map(function(){return $(this).val();}).get();
mystat++;
var my=mystat;
console.log(my);
$('#ingrdiants_table').append('<tr> <th class="no">'+my+'</th><td ><select class="selectpicker input-xlarge" name="ingredients_name[]" id="ingredients_name[]" style="width:200px;" >\n\
\n\
\n\
</select>\n\
</td> <td><input type="text" name="ingrediant_quant[]" class="form-control"></td></tr>');
//var selecter = $("input[name='ingredients_name[]']").map(function(){return $(this).val();}).get();
var letters = "";
for (i = 0; i < my; i++)
{
for(j=0;j<ingrediants_name.length;j++)
{
//$("#ingredients_name[0]").append('<option>'+ingrediants_name[j]+'</option>');
letters += '<option>'+ingrediants_name[j]+'</option>';
}
document.getElementById("ingredients_name[0]").innerHTML = letters;
}
}
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="width:700px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<button class="btn btn-primary" type="button" name="add" onclick="add_items()">Add Ingredients</button>
</div>
<div class="modal-body">
<table id="ingrdiants_table" class="table table-bordered table-hover">
<thead>
<th>N</th>
<th>Ingrediant Name</th>
<th>Quantity</th>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-default" id="pencat">save</button>
</div>
</div>
</div>
</div>
Please help me to resolve this. I am creating select option dynamically on click with append in java script. I have assigned select option id="name[]",now i want to assign option to all of select option box through append or something better. how can it work?