responsive datatables not working when we select data in dropdown - javascript

hello please help me guys to solve the problem i am facing. so here i want to insert data into datatables but using class and id because there is select function in it and in html i made an error but why error huh? it should be when we click on the data in the dropdown it will automatically appear in the table and the data will be automatically responsive`
'Use Strict';
$(document).ready(function () {
$('#tblLvl2Process').DataTable({
responsive: true,
"ordering": true,
"paging": true,
"info": true,
"bfilter": true,
"scrollx": false,
});
});
$("#selectMainProcess").change(function () {
var mainid = $(this).val();
var docid = $("#BPM_BPMDocNo").val();
var fusid = "" + mainid + "$" + docid + "";
$.ajax({
url: "/BPM/GetBPMCoreProcessList",
data: { sIdentifier: fusid },
type: "GET",
success: function (data) {
$("#selectCoreProcess").empty();
$("#selectLevel2Process").empty();
$.each(data, function (index, row) {
$("#selectCoreProcess").append("<option value ='" + row.CoreProcessCode + "'>" + row.CoreProcessText + "</ option>")
});
$('.selectpicker').selectpicker('refresh');
$(".allcorelist").hide();
$(".alllv2list").hide();
}
});
});
$("#selectCoreProcess").change(function () {
//hidden all row
$(".allcorelist").hide();
$(".alllv2list").hide();
//get core process id
var coreid = $(this).val();
var series = 1;
//dropdown level 2 type
var aListVal = [];
var aListText = [];
$("." + coreid + "").each(function () {
var codelv2 = $(this).find("#tdLevel2ProcessCode").text();
var textlv2 = $(this).find("#tdLevel2ProcessText").text();
aListVal.push(codelv2);
aListText.push(textlv2);
});
$("#selectLevel2Process").empty();
for (var i = 0; i < aListVal.length; i++) {
if (aListText[i] != "DELETE") {
$("#selectLevel2Process").append("<option value ='" + aListVal[i] + "'>" + aListText[i] + "</ option>")
}
}
$('.selectpicker').selectpicker('refresh');
//show selected
$("." + coreid + "").show();
//numbering
$.each($("." + coreid + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
});
$("#selectLevel2Process").change(function () {
//hidden all row
$(".alllv2list").hide();
//get core process id
var lv2proid = $(this).val();
var series = 1;
//show selected
$("." + lv2proid + "").show();
//numbering
$.each($("." + lv2proid + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
});
$("#btnSubmitNewLvl2P").click(function () {
var result;
result = $("#frmLv2P").valid();
if (result) {
var row;
$('a[href$="EDIT_Lv2P"]').off('click');
$('a[href$="DELETE_Lv2P"]').off('click');
if (sStateGridLvl2P == "-") {
var row = $('<tr id="' + $("#txtCode").val() + '" class="' + $("#txtMainCoreProcessCode").val() + ' allcorelist" >' +
'<td></td>' +
'<td class="num"></td>' +
'<td id="tdLevel2ProcessText">' + $("#txtLevel2Process").val() + '</td>' +
'<td id="tdLevel2ProcessDesc" style="white-space:pre-wrap">' + $("#txtDescription").val() + '</td>' +
'<td id="tdLevel2ProcessObj" style="white-space:pre-wrap">' + $("#txtObjective").val() + '</td>' +
'<td id="tdOtherEntity">' + $("#txtOtherEntityLv2P").val() + '</td>' +
'<td id="tdMainProcessCode" hidden>' + $("#txtMainProcessCode").val() + '</td>' +
'<td id="tdMainCoreProcessCode" hidden>' + $("#txtMainCoreProcessCode").val() + '</td>' +
'<td id="tdLevel2ProcessCode" hidden>' + $("#txtCode").val() + '</td>' +
'<td style="text-align:center;"><span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span></td>' +
'</tr>');
$("#tblLvl2Process tbody").append(row);
} else {
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[1].innerHTML = $("#txtLevel2Process").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[2].innerHTML = $("#txtDescription").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[3].innerHTML = $("#txtObjective").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[4].innerHTML = $("#txtOtherEntityLv2P").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[5].innerHTML = $("#txtMainProcessCode").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[6].innerHTML = $("#txtMainCoreProcessCode").val();
$("#tblLvl2Process").children().children()[sStateGridLvl2P].children[7].innerHTML = $("#txtCode").val();
$("#tblStoreOtherEntityLv2P tbody").find("#" + $("#txtCode").val() + "").find("#tdOtherEntity").text($("#txtOtherEntityLv2P").val());
$.each($("." + $("#txtCode").val() + ""), function () {
var paramIME = $("#txtOtherEntityLv2P").val();
if (paramIME == "YES") {
$(this).find("#tdOtherEntity").html($("#txtOtherEntityLv2P").val());
}
});
}
$('a[href$="EDIT_Lv2P"]').on('click', function (e) {
e.preventDefault();
GoEditLv2P($(this));
});
$('a[href$="DELETE_Lv2P"]').on('click', function (e) {
e.preventDefault();
var thisvar = $(this);
BootstrapDialog.show({
title: 'CONFIRMATION',
message: 'Apakah anda yakin akan menghapus data ini ?',
type: BootstrapDialog.TYPE_WARNING, // <-- Default value is BootstrapDialog.TYPE_PRIMARY
closable: true, // <-- Default value is false
draggable: true, // <-- Default value is false
buttons: [{
label: 'YES',
cssClass: 'btn-primary',
action: function (dialogItself) {
GoRemoveLv2P(thisvar);
dialogItself.close();
}
}, {
label: 'NO',
cssClass: 'btn-danger',
action: function (dialogItself) {
dialogItself.close();
}
}]
});
});
var series = 1;
$.each($("." + $("#txtMainCoreProcessCode").val() + ""), function () {
$(this).find(".num").html("" + series + "");
series = series + 1;
});
$("#tblLvl2Process").trigger('footable_collapse_all').trigger('footable_redraw');
$("#ModalLevel2Process").modal('hide');
//change dropdown level 2 process
var coreid = $("#selectCoreProcess").val();
var aListVal = [];
var aListText = [];
$("." + coreid + "").each(function () {
var codelv2 = $(this).find("#tdLevel2ProcessCode").text();
var textlv2 = $(this).find("#tdLevel2ProcessText").text();
aListVal.push(codelv2);
aListText.push(textlv2);
});
$("#selectLevel2Process").empty();
for (var i = 0; i < aListVal.length; i++) {
if (aListText[i] != "DELETE") {
$("#selectLevel2Process").append("<option value ='" + aListVal[i] + "'>" + aListText[i] + "</ option>")
}
}
$('.selectpicker').selectpicker('refresh');
sStateGridLvl2P = "-";
$("#txtLevel2Process").val("");
$("#txtDescription").val("");
$("#txtObjective").val("");
$("#txtMainProcessCode").val("");
$("#txtMainCoreProcessCode").val("");
$("#txtCode").val("");
$("#txtOtherEntityLv2P").val("");
$("#ModalLevel2Process").modal('hide');
};
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>#ViewData["Title"] - Standard Template 2020</title>
<!-- favicon -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
</head>
<body class="fixed-sn kalbe-skin">
<!-- Page Wrapper -->
<div class="preloader">
<div class="loading">
<img src="~/Image/1200px-Kalbe_Farma.svg.gif" width="200">
<p class="text-center pt-4 ml-4" style="font-size : 15px; font-weight : 500;">
Loading...
</p>
</div>
</div>
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary shadow-lg sidebar sidebar-dark accordion" id="accordionSidebar" style="margin: 0px; ">
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<header>
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class=" d-md-none rounded-circle border-0 mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="border-0 toggel-nav" id="sidebarToggle">
<i class="fa fa-bars"></i>
</button>
</div>
<!-- Topbar Navbar -->
<ul class="nav navbar-nav nav-flex-icons ml-auto" id="NavbarTop">
</ul>
</nav>
<!-- End of Topbar -->
</header>
<!-- Begin Page Content -->
<div class="container-fluid box">
<!--Main Layout-->
<main role="main" class="pb-3">
<div class="container-fluid">
<div class="shadow-sm tbl-1 p-3 mb-5" style="background : #F1F1F1;">
<div class="text-left text-table">
<h3 class="ml-2 mt-2" id="labelHeader">List Operational Risk</h3>
<div class="d-flex flex-row">
<div class="p-2">
<div class="form-group selct-kalbe" id="searchEntity">
<div class="" id="labelEntity">
<label for="selectSearchEntity">ENTITY</label>
</div>
<select class="form-control input-sm" id="selectSearchEntity" data-live-search="true" data-size="10" data-width="100%">
#foreach (var item in ListEntity)
{
<option value="#item.Value">#item.Text</option>
}
</select>
</div>
</div>
<div class="p-2 mt-4 pt-3 portfolio-item" id="labelDocNo" hidden>
<div class="form-group" style="float:right">
<label class="control-label" for="selectSearchDocNo">Doc No: </label>
</div>
</div>
<div class="p-2 mt-4 pt-3 portfolio-item" id="searchDocNo" hidden>
<div class="form-group">
<div>
<input class="form-control input-sm text-box single-line" id="selectSearchDocNo" type="text">
</div>
</div>
</div>
<div class="p-2 mt-4 pt-3">
<button type="submit" id="btnReload" class="btn btn-sm btn-kalbe"><span class="glyphicon glyphicon-repeat"></span> Reload</button>
</div>
</div>
<div class="row" style="margin-left : -7px;">
<div class="col-md-4 col-sm-12">
<input placeholder="Search" class="form-control input-sm" style="border-radius : 20px" type="text" id="ListOPR" aria-label="Search">
</div>
</div>
<div class="searchFilter row pt-3" style="margin-left : -7px;">
<div class="col-md-4 col-sm-12">
<div class="form-group" id="selectSearchEntity">
<div class="" id="">
<label for="selectSearchEntity">TABLE FILTER</label>
</div>
<select class="mdb-select colorful-select dropdown-primary md-form" multiple id="searchFilterSelect" style="border-radius : 20px" data-size="10" data-width="100%" onchange="filterColumnOnChange()">
<option value="DocNo">Doc. No.</option>
<option value="RefDoc">Ref. Doc. No</option>
<option value="Entity">Entity</option>
<option value="Process">Process</option>
<option value="LastUpdate">Last Update</option>
<option value="LastRevisit">Last Revisit Status</option>
</select>
<button type="button" id="btnSelectAll" class="btn btn-sm btn-primary" onclick="SelectAll()"><span class="glyphicon glyphicon-ok"></span> SELECT</button>
<button type="button" id="btnRemove" class="btn btn-sm btn-danger" onclick="RemoveFilter()"><span class="glyphicon glyphicon-remove"></span> REMOVE ALL</button>
</div>
</div>
</div>
<div class="d-flex flex-row mt-4 ml-1">
<div class="p-2">
<button id="PICProcessInput" type="button" class="btn btn-sm btn-default btn-arrow-right rounded-pill" title="PIC Process Input">0/0</button>
</div>
<div class="p-2">
<button id="SuperiorPICProcessInput" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Superior PIC Process Review">0/0</button>
</div>
<div class="p-2">
<button id="PICRMReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC RM Review">0/0</button>
</div>
<div class="p-2">
<button id="PICSBUReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC SBU Review">0/0</button>
</div>
</div>
<div class="d-flex flex-row mt-4 ml-1">
<div class="p-2">
<button id="PICRADevReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="PIC RA Dev Review">0/0</button>
</div>
<div class="p-2">
<button id="HeadEntityReview" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Head Entity Review">0/0</button>
</div>
<div class="p-2">
<button id="Approved" type="button" class="btn btn-sm btn-default btn-arrow-right" title="Review">0/0</button>
</div>
</div>
<div class="row mt-5">
<div class="col-md-3">
<button type="button" id="btnExportLMRModal" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export List Mandatory Risk</button>
</div>
<div class="col-md-3" style="margin-right: 37px;">
<button type="button" id="btnExportLRAA" class="btn btn-warning btn-sm" style="margin-right:20px"><span class="glyphicon glyphicon-save-file"></span> Export List Risk Above Tolerance</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportURR" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export Updated Risk Register</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportLOR" class="btn btn-warning btn-sm" style="margin-right:0px"><span class="glyphicon glyphicon-save-file"></span> Export List Operational Risk</button>
</div>
<div class="col-md-3">
<button type="button" id="btnExportLKR" class="btn btn-warning btn-sm" style="margin-right:10px"><span class="glyphicon glyphicon-save-file"></span> Export List Key Risk</button>
</div>
<div class="col-md-3">
<button type="button" id="btnNewOR" class="btn btn-primary btn-sm divbtnNew" style="margin-right:10px; display:none"><span class="glyphicon glyphicon-file"></span> New Operational Risk</button>
</div>
</div>
</div>
#{Html.RenderPartial("Loading");}
<div class="card card-custom">
<!-- Editable table -->
<div class="card ">
<div class="card-body">
<!-- Collapse buttons -->
<!-- / Collapse buttons -->
<div class="row">
<div class="col-sm-10 col-md-12 col-lg-12 col-xs-12 col-12">
<div id="divTblListOR" class="table-responsive" style="overflow: hidden;">
<table id="tblListOR" class="table table-striped table-condensed text-left display responsive nowrap text-left" width="100%">
<thead>
<tr>
<th class="theadCollapse">Collapse</th>
<th>No</th>
<th class="theadDocNo">Doc. No.</th>
<th class="theadRefDoc">Ref. Doc. No</th>
<th class="theadEntity">Entity</th>
<th class="theadProcess">Process</th>
<th class="theadLastUpdate">Last Update</th>
<th class="theadLastRevisit">Last Revisit Status</th>
#*
<th>Supporting Document</th>*#
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Editable table -->
</div>
</div>
</div>
</main>
<!--Main Layout-->
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer page-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<a>© 2020 - Standard Template 2020 - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" 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">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
</body>
</html>

There are methods for DataTable() that take care of what you want to do. Note that I have changed the IDs for the new table row TD elements into classnames - because you shouldn’t duplicate id’s. Rather than do inline styles, set up a new classname prewrap
<style>
.prewrap{
white-space: pre-wrap;
}
</style>
Somewhere at the top of your script, get a reference for the DT
const t = $('#tblLvl2Process').DataTable();
and in your loop:
// to replace your TR insert in your loop -- insert the data
t.row.add( [
"",
"",
$("#txtLevel2Process").val(),
$("#txtDescription").val(),
$("#txtObjective").val(),
$("#txtOtherEntityLv2P").val(),
$("#txtMainProcessCode").val(),
$("#txtMainCoreProcessCode").val(),
$("#txtCode").val(),
'<span class="glyphicon glyphicon-pencil"></span> <span class="glyphicon glyphicon-trash"></span>'
] ).node();
// add id and class to the tr
t.id = $("#txtCode").val();
t.addClass(' + $("#txtMainCoreProcessCode").val() + ' allcorelist')
// now the tds
$(t).find('td').eq(1).addClass('num');
$(t).find('td').eq(2).addClass('tdLevel2ProcessText');
$(t).find('td').eq(3).addClass('tdLevel2ProcessDesc prewrap');
$(t).find('td').eq(4).addClass('tdLevel2ProcessObj prewrap');
$(t).find('td').eq(5).addClass('tdOtherEntity');
$(t).find('td').eq(6).addClass('tdMainProcessCode');
$(t).find('td').eq(7).addClass('tdMainCoreProcessCode');
$(t).find('td').eq(8).addClass('tdLevel2ProcessCode');
t.draw( false );
I can't test this, but that should take care of it.

Related

(HTML + JavaScript + BootStrap) Table With Delete Button Won't Show up

Correct Solution with different context |
My Solution, table won't show
I can't seem to figure out why my table won't show after I added a new column, any inputs?
Sorry if my code is a mess, I'm still learning. I had to tweak my professors lecture examples to figure this out
$(document).ready(function() {
$('#AddSaleButton').click(function() {
var PlayerName = $('#PlayerName').val();
var Goals = parseInt($('#GoalNum').val());
var Assists = parseInt($('#AssistQuantity').val());
$('#OrderTable tbody').append('<tr><td>' + PlayerName + '</td><td>' + Goals + '</td><td>' + Assists + '</td><td></td><td><button class="btn btn-sm btn-danger DeleteRow" data-product="' + PlayerName + '" data-quantity="' + Goals + 'data-assist="' + Assists + '>Delete Order</button></td></tr>');
switch (PlayerName) {
case "Erling":
var EachPlayerSum = parseInt($('#ETotal').text());
EachPlayerSum = EachPlayerSum + Goals + Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone + Goals + Assists;
$('#ETotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Phil":
var EachPlayerSum = parseInt($('#PTotal').text());
EachPlayerSum = EachPlayerSum + Goals + Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone + Goals + Assists;
$('#PTotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Jack":
var EachPlayerSum = parseInt($('#JTotal').text());
EachPlayerSum = EachPlayerSum + Goals + Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone + Goals + Assists;
$('#JTotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
}
$('AddSaleModal').modal('hide');
$('#AddOrderToast').show();
$('#GoalNum').val('');
$('#AssistQuantity').val('');
$('#PlayerName').prop('selectedIndex', 0);
setTimeout(function() {
$('#AddOrderToast').hide();
}, 3000);
});
$(document).on('click', '.DeleteRow', function() {
var PlayerName = $(this).attr('data-product');
var Goals = parseInt($(this).attr('data-quantity'));
var Assists = parseInt($(this).attr('data-assist'));
switch (PlayerName) {
case "Erling":
var EachPlayerSum = parseInt($('#ETotal').text());
EachPlayerSum = EachPlayerSum - Goals - Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone - Goals - Assists;
$('#ETotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Phil":
var EachPlayerSum = parseInt($('#PTotal').text());
EachPlayerSum = EachPlayerSum - Goals - Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone - Goals - Assists;
$('#PTotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
case "Jack":
var EachPlayerSum = parseInt($('#JTotal').text());
EachPlayerSum = EachPlayerSum - Goals - Assists;
var TotalEveryone = parseInt($('#TotalEveryone').text());
TotalEveryone = TotalEveryone - Goals - Assists;
$('#Jtotal').text(EachPlayerSum);
$('#TotalEveryone').text(TotalEveryone);
break;
}
var tableRow = $(this).closest('tr'); //parent parent works too instead of closest
tableRow.remove();
$('#DeleteOrderToast').show();
setTimeout(function() {
$('#DeleteOrderToast').hide();
}, 3000);
});
});
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffca1c">
<meta name="mobile-web-app-capable" content="yes">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="script.js"></script>
<title>Manchester City Soccer Team</title>
</head>
<body class="bg-light">
<div class="container-lg mt-5">
<div class="row mb-3 text-center">
<h1>Manchester City Soccer Team</h1>
</div>
<div class="row mb-3 w-50 mx-auto">
<button class="btn btn-primary OpenSaleModal" data-bs-toggle="modal" data-bs-target="#AddSaleModal">Add Statistics</button>
</div>
<table class="table table-border table-hover table-sm= mb-5" id="OrderTable">
<thead>
<tr>
<th>Player's Name</th>
<th>Number of Goals</th>
<th>Number of Assists</th>
<th></th>
</tr>
</thead>
</table>
<div class="row d-flex flex-row justify-content-start text-center">
<div class="col-3">
<div class="card">
<div class="card-header">Erling Total</div>
<div class="card-body">
<div class="display-1 fw-bold" id="ETotal">0</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-header">Phil Total</div>
<div class="card-body">
<div class="display-1 fw-bold" id="PTotal">0</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-header">Jack Total</div>
<div class="card-body">
<div class="display-1 fw-bold" id="JTotal">0</div>
</div>
</div>
</div>
<div class="col-3">
<div class="card">
<div class="card-header">Total Together</div>
<div class="card-body">
<div class="display-1 fw-bold" id="TotalEveryone">0</div>
</div>
</div>
</div>
</div>
</div>
<!-- TOASTS -->
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast align-items-center text-bg-success border-0" id="AddOrderToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex justify-content-between align-items-center">
<div class="toast-body fs-6">
You successfully added data!
</div>
<button type="button" class="btn-close pe-3" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3">
<div class="toast align-items-center text-bg-success border-0" id="DeleteOrderToast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex justify-content-between align-items-center">
<div class="toast-body fs-6">
You successfully removed data!
</div>
<button type="button" class="btn-close pe-3" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<!-- Modal - Add Stats -->
<div class="modal fade" id="AddSaleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a New Statistic</h5>
<button type="button" id="CloseEditClientModal" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label for="PlayerName" class="form-label">Choose A Player</label>
<select class="form-select" aria-label="Default select example" id="PlayerName">
<option selected>Select from list...</option>
<option value="Erling">Erling Haaland</option>
<option value="Phil">Phil Foden</option>
<option value="Jack">Jack Grealish</option>
</select>
<div class="invalid-feedback">
Please select a Player.
</div>
</div>
<div class="mb-3">
<label for="GoalNum" class="form-label">Goals</label>
<input type="number" min="0" class="form-control" id="GoalNum">
<div class="invalid-feedback">
Please enter a Goal number.
</div>
<div class="mb-3">
<label for="AssistQuantity" class="form-label">Assists</label>
<input type="number" min="0" class="form-control" id="AssistQuantity">
<div class="invalid-feedback">
Please enter an Assist number.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="AddSaleButton">Save Statistics</button>
</div>
</div>
</div>
</div>
</body>
</html>
I've messed with the delete button, placement of lines of code, googling, changing and messing with the table. Can't find anything and I've talked to other struggling students. Same issue
your javascript is looking for <tbody> inside the table #OrderTable but it could't find it.
...
$('#OrderTable tbody').append(...)
...
solution:
...
<table class="table table-border table-hover table-sm= mb-5" id="OrderTable">
<thead>
<tr>
<th>Player's Name</th>
<th>Number of Goals</th>
<th>Number of Assists</th>
<th></th>
</tr>
</thead>
<tbody></tbody> <!-- 👈 add this line -->
</table>
...

How do I hide sort icon by default and show by click on column header name

I wanna to hide sorting icons by default and show them by clicking the column header name. This is my .cshtml code:
#model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="tableHeader" id ="table">
<div class="card w-100 mb-1 border-0">
<div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
<div class="row p-2">
#foreach(var prop in Model)
{
<div class="col text-center d-table sortable" >
<div class="btn-group" id="sorting" onclick="sortingVisibility()">
<p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
#prop
<div class="btn-group-vertical" style='padding-left: 20px;' id="divIcon">
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=asc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-up" style='color:white;' id="sortUpIcon" aria-hidden="true"></i>
</a>
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-down" style='color:white;' id="sortDownIcon" aria-hidden="true"></i>
#*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*#
</a>
</div>
</p>
</div>
</div>
}
</div>
</div>
</div>
</div>
#*location.href='/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc'*#
<script>
function sortingVisibility()
{
var iconUp = document.getElementById("sortUpIcon");
var iconDown = document.getElementById("sortDownIcon");
var div = document.getElementById("divIcon");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}
I tried to do like this but its not working on click it only hide the icon and doesnt change anything.
Can anyone give me some hints about this?
In order to hide the div, you have to initially set the display property of the div to none and then we have to set the display property to block or none.
Below I have modified your code with the changes.
#model string[]
<style>
</style>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="tableHeader" id ="table">
<div class="card w-100 mb-1 border-0">
<div class="card-dark-mode-body text-dark headerRow fw-bolder mainColor" >
<div class="row p-2">
#foreach(var prop in Model)
{
<div class="col text-center d-table sortable" >
<div class="btn-group" id="sorting" onclick="sortingVisibility()">
<p class="mb-0 d-lg-table-cell align-middle" id="columnName" style='padding-top:3px'>
#prop
<div class="btn-group-vertical" style='padding-left: 20px;' id="divIcon">
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=asc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-up" style='color:white; display: none' id="sortUpIcon" aria-hidden="true"></i>
</a>
<a href="/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc" class="btn btn-xs btn-link p-0">
<i class="fa fa-sort-down" style='color:white; display: none' id="sortDownIcon" aria-hidden="true"></i>
#*<span class="glyphicon glyphicon-triangle-bottom" style='color:white;'></span>*#
</a>
</div>
</p>
</div>
</div>
}
</div>
</div>
</div>
</div>
#*location.href='/Administracija/Ocitavanja/Index?OrderBy=#prop&Sorting=desc'*#
<script>
function sortingVisibility()
{
var iconUp = document.getElementById("sortUpIcon");
var iconDown = document.getElementById("sortDownIcon");
var div = document.getElementById("divIcon");
if ( iconUp.style.display == "none" || iconDown.style.display == "none";){
iconUp.style.display == "none";
iconDown.style.display =="block";
} else {
iconUp.style.display == "block";
iconDown.style.display =="none";
}
}

Add Popup Modal on <a> link to open when User click on User column

Ok, so I have Index Page where it's is listed all ticket and I have column User.
I add <a> tag in this column
{
"data": "applicationUser.name",
"width": "10%",
"targets": [1],
"render": function (data) {
return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
}
},
And also I create function to popup Modal
$(".table-info").click(function () {
var id = $(this).attr("userDetails");
$.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
$("#container").append(result);
$("#userDetails").modal({ show: true })
})
})
And here is Modal Popup which I create PartialView.cshtml
#model VmSTicketing.Models.ViewModels.TicketVM
<div class="modal fade" id="userDetails">
<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 class="modal-title">Podaci o Useru</h3>
</div>
<div class="modal-body">
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Ime i Prezime</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Name" disabled id="ImePrezime" name="ImePrezime">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Email Adresa</label>
</div>
<div class="col-md-8">
<input type="text" class="form-control" asp-for="Ticket.ApplicationUser.Email" disabled id="Email" name="Email">
</div>
</div>
<br>
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Broj Telefona</label>
</div>
<div class="col-md-8">
<input type="text" asp-for="Ticket.ApplicationUser.PhoneNumber" class="form-control" disabled id="BrTel" name="BrTel">
</div>
</div>
<br />
<div class="row dataTable">
<div class="col-md-4">
<label class="control-label">Klijent</label>
</div>
<div class="col-md-8">
<input type="text" asp-for="Ticket.ApplicationUser.Client" class="form-control" disabled id="klijent" name="klijent">
</div>
</div>
</div>
</div>
</div>
</div>
Here is IndexPage for my table structure:
#model IEnumerable<VmSTicketing.Models.Ticket>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/AdminLTE/_Layout.cshtml";
}
<br />
<div class="row">
<div class="col-6">
<h2 class="text-primary">Lista tiketa</h2>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary" asp-action="Upsert"><i class="fas fa-plus"></i> Novi tiket</a>
</div>
</div>
<br />
<div class="p-4 border rounded">
<table id="tblData" class="table table-striped table-bordered" style="width:100%">
<thead class="thead-dark">
<tr class="table-info">
<th>Opis</th>
<th>Datum i vrijeme slanja</th>
<th>Vrsta Tiketa</th>
<th>Status</th>
<th>Datum i vrijeme zavrsetka</th>
<th>Korisnik</th>
<th></th>
</tr>
</thead>
</table>
</div>
<partial name="UserDetails" />
#section Scripts{
<script src="~/js/ticket.js"></script>
}
So far this modal work but when I click in table header not in User link.
I try to figure out what I make wrong but unfortunately I can not see where the error is.
So I want to add this function for popup to be load when User click on <a> tag
And here is my code ticket.js where I call my datatable
function loadDataTable() {
dataTable = $('#tblData').DataTable({
"ajax": {
"url": "/Manager/Ticket/GetAll"
},
"columns": [
{ "data": "description", "width": "10%" },
{ "data": "dateAndTime", "width": "15%" },
{ "data": "ticketType.name", "width": "10%" },
{ "data": "status", "width": "10%" },
{ "data": "answered", "width": "15%" },
{
"data": "applicationUser.name",
"width": "10%",
"targets": [1],
"render": function (data) {
return '<a class="text-info" href="' + data + '" target_blank>' + data + '</a>'
}
},
{
"data": "id",
"render": function (data) {
return `
<div class="text-center">
<a href="/Manager/Discussion/OpenDiscussion/${data}" class="btn btn-primary text-white" style="cursor:pointer">
<i class="fas fa-comments"></i>
</a>
<a href="/Manager/Ticket/Details/${data}" class="btn btn-success text-white" style="cursor:pointer">
<i class="fas fa-info"></i>
</a>
<a onclick=Delete("/Manager/Ticket/Delete/${data}") class="btn btn-danger text-white" style="cursor:pointer">
<i class="fas fa-trash-alt"></i>
</a>
</div>
`;
}, "width": "15%"
}
]
});
}
I am not sure how to assign this function to be load on tag ??
Any suggestion ??
You actually need to adjust your render function applicationUser.username property in datatable js.
You can add a class for user-details :
"data": "applicationUser.name",
"render": function (data) {
return '<a id="' + data + '" class="text-info user-details" href="' + data + '" target_blank>' + data + '</a>'
}
and your event listener should go like following so that it should only be triggered when a data row is clicked but no the table header row :
$(".table-info").click("click" , "a.user-details",function () {
var id = this.id;
$.get("/Manager/Ticket/UserDetails?id=" + id, function (result) {
$("#container").append(result);
$("#userDetails").modal({ show: true })
});
});
Currently your event triggers on the class table-info which is also applied on the <tr> for the <th> which is ending up not the behavior which is needed.

How to get the text value in a div html by clicking on button

I want to get the text between the div tag by clicking on the button event
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> 7000
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> 15000
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button
How can I achieve that.
Try
$(".price-footer .btn").on( "click", function(event) {
const parent = $(this).parents('.pricing-table');
const priceText = $('.price', parent).text().trim();
const priceParts = priceText.split(' ');
console.log(`priceText: ${priceParts[1]}`);
// Output: "priceText: 12000"
const permonthText = $('.permonth', parent).text().trim();
console.log(`permonthText: ${permonthText}`);
// Output: "permonthText: 6 Months"
});
Demo - https://codepen.io/vyspiansky/pen/MWybEEr
You can add ids to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.
Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.
const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, ''))
const month = document.getElementById("month-info").innerText
console.log(dollarAmount)
console.log(month)
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div id="dollar-info" class="price text-primary">
<span class="dollar">&#8377</span>12000.80
</div>
<span id="month-info" class="permonth">6 Months</span>
</div>
Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below
$(document).ready(function(){
$('.pricing-table').each(function(){
var $table = $(this);
$table.on('click', '.btn-primary', function(){
var price = $table.find('.price').text().trim();
var permonth = $table.find('.permonth').text().trim();
alert("price is " + price + " for " + permonth);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
There are so many options to do this. Here is my example with the snippet and code sandbox.
// jquery
const findValues = (target, value) => target.parents().eq(1).find(value);
$(document).on("click", ".btn", (e) => {
const $target = $(e.target);
// dollar is optional
const $dollar = findValues($target, ".dollar");
const $value = findValues($target, ".value");
const $month = findValues($target, ".permonth");
$("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`);
});
// // vanilla js
const test1 = document.querySelector("#test1");
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", ({ target }) => {
const nodes = target.parentNode.parentNode;
const dollar1 = nodes.querySelector(".dollar");
const value1 = nodes.querySelector(".value");
const month1 = nodes.querySelector(".permonth");
test1.innerText = `${dollar1.textContent} ${value1.textContent} ${month1.textContent}`;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> <span class="value">7000</span>
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> <span class="value">12000</span>
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> <span class="value">15000</span>
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div id="test"></div>
<div id="test1"></div>
https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js

How to hide database record on click of button using jquery

I have a view where I am fetching database records in form of bootstrap card. In the each card I have checkboxes which are associated with a database column.
On checking the checkboxes and clicking of the save button I want to hide the card with that record in which I enter that value
How can I achieve this? I tried with the class name of the card but it is hiding all the cards.
$('.insert').click(function() {
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked').length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked').length,
NewLin: $('input[data-nlid=' + rId + ']:checked').length,
DpClean: $('input[data-dcid=' + rId + ']:checked').length
});
$('.Resbook').hide();
});
#model IEnumerable
<RoomTypeView>
<div class="row">
#foreach (var item in Model)
{
<div class="col-3">
<div class="card border rounded DropShadow Resbook">
<div class="card-body">
Room #Html.DisplayFor(modelItem => item.RoomNo)
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button><br />
#Html.DisplayFor(modelItem => item.GuestName)<br />
<div class="row">
<div class="col-7 text-center">
#if (item.Status.HasFlag(EnumHkStatus.Cleaning))
{
<input type="checkbox" data-Cleanid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Cleaning</label>
<br />
}
#if (item.Status.HasFlag(EnumHkStatus.InventoryCheck))
{
<input type="checkbox" data-InvChkid="#item.RoomId" name="cstatus" class="form-check-input" />
<label>Inventory Check</label>
}
</div>
<div class="col-5">
#if (item.NewLinen == null)
{
<input type="checkbox" data-nlid="#item.RoomId" class="form-check-input" />
<label>New Linen</label>
<br />
}
#if (item.DeepCleaning == null)
{
<input type="checkbox" data-dcid="#item.RoomId" class="form-check-input" />
<label>Deep Cleaning</label>
}
</div>
</div>
<div class="row">
<div class="col-8">
<div class="inventory my-1">
<textarea class="form-control breakage" placeholder="Enter Breakage Note" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default breakage" data-brid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
<div class="row">
<div class="col-8">
<div class="comments my-1">
<textarea class="form-control inventoryms" placeholder="Enter Inventory Missing" rows="1"></textarea>
</div>
</div>
<div class="col-4">
<button type="button" class="btn btn-default invmissing" data-invmid="#item.ReservationID">
<i class="fa fa-file-invoice" style="color:red;"></i>
</button>
</div>
</div>
#Html.DisplayFor(modelItem => item.Comments)
</div>
</div>
</div>
}
</div>
This $('.Resbook').hide(); is hiding all the cards. How to overcome this? How can I can use that rId to hide that particular card?
it is hiding all the cards
You need to ensure only the related card is hidden. The .insert button is within a .card so you can find the .card it's within using .closest and then use relative finds.
var card = $(this).closest(".card");
$('input[data-invchkid=' + rId + ']:checked', card)
or
card.find('input[data-invchkid=' + rId + ']:checked')
As the .card is also .Resbook (<div class='card Resbook'>) you can use .Resbook instead of .card, eg:
var card = $(this).closest(".Resbook");
$(card).hide();
Giving:
$('.insert').click(function() {
var card = $(this).closest(".card");
var rId = $(this).data('rid');
$.post("#Url.Action("
SetCleaningStatus ", "
HouseKeeping ")", {
id: rId,
InvChk: $('input[data-invchkid=' + rId + ']:checked', card).length,
ClnChk: $('input[data-cleanid=' + rId + ']:checked', card).length,
NewLin: $('input[data-nlid=' + rId + ']:checked', card).length,
DpClean: $('input[data-dcid=' + rId + ']:checked', card).length
});
$(card).hide();
});
Example snippet showing use of .closest() using OPs structure:
$(".insert").click(function() {
$(this).closest(".card").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 1
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook">
<div class="card-body">
Room 2
<button type="button" class="btn btn-default insert" data-rid="#item.RoomId">Save</button>
</div>
</div>
</div>
</div>
In the case where the button is not inside the hierarchy of the card to be used, they can be linked together via their data-rid= values.
Add the .data-rid to the .card so that they match:
<div class='card' data-rid='#item.RoomId'/>
then match the two with
$("button").click(function() {
var rid = $(this).data("rid");
var card = $(".card[data-rid=" + rid + "]")
Example snippet:
$(".external-insert").click(function() {
var rid = $(this).data("rid")
var card = $(".card[data-rid=" + rid + "]")
card.hide();
$(this).fadeOut(); // also hide the button
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="1">
<div class="card-body">
Room 1
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-3">
<div class="card Resbook" data-rid="2">
<div class="card-body">
Room 2
</div>
</div>
</div>
</div>
<hr/>
<button type="button" class="btn btn-default insert external-insert" data-rid="1">Save 1</button>
<button type="button" class="btn btn-default insert external-insert" data-rid="2">Save 2</button>

Categories