We Keep Coding

Uncaught Error when using the right selector in JQuery to indicate a HTML table and use a Bootstrap-table function

I have a table inside a div in my Index.cshtml page (Asp.Net core)
<div id="tbldiv">
<table
id="tblCampaign"
class="table"
data-toggle="table">
<thead>
<tr>
<th data-field="name" scope="col">Name</th>
<th data-field="country">Country</th>
<th data-field="totalBudget">Total Budget</th>
<th data-field="dailyBudget">Daily Budget</th>
<th data-field="model">Model</th>
<th data-field="payout">Payout</th>
<th data-field="status">Status</th>
<th data-field="link">Link</th>
<th data-field="advertiserID">Advertiser ID</th>
</tr>
</thead>
</table>
</div>
I want to populate my table using Bootstrap table.
Here's my site.js:
$(document).ready(function () {
$('Index').ready(function () {
$.getJSON('Index?handler=ListCampaigns', function (data) {
$("#tblCampaign").bootstrapTable({
columns: data
});
});
});
});
My OnGetListCampaign() in Index.cshtml.cs:
public JsonResult OnGetListCampaigns()
{
var jsonCampaigns = CampaignManager.GetCampaignsTest();
return new JsonResult(jsonCampaigns);
}
Which Select from SQL database and return a List of my Item.
Here's my problem:
When I run it, it complains about the selector in site.js if I understood the problem, I used $("#tblCampaign") for and it should be right to select the Id using #
Uncaught Error: Syntax error, unrecognized expression: <div class="bootstrap-table bootstrap4">
<div class="fixed-table-toolbar"></div>
<div class="fixed-table-container">
<div class="fixed-table-header"><table></table></div>
<div class="fixed-table-body">
<div class="fixed-table-loading">
<span class="loading-wrap">
<span class="loading-text">Loading, please wait</span>
<span class="animation-wrap"><span class="animation-dot"></span></span>
</span>
</div>
</div>
<div class="fixed-table-footer"><table><thead><tr></tr></thead></table></div>
</div>
<div class="fixed-table-pagination"></div>
</div>

JQuery cannot find element with the same class on the same page

I'm trying to set the text of an HTML element but I'm unable to do so through JQuery
class selector .text() function. It is somehow unable to find the element to set. The function was able to find the element when it was called in the document.ready() function but due to functional requirements, I moved it into an API call instead. The API call is unable to find and set a particular set of elements. There are other elements on the page utilizing the same class which was set successfully.
Documented below are the two boot grid tables in which column fields I'm trying to set the values. Note that they exist on the same HTML page.
Currently only the columns in ItemTbl can be set and reflected by the $(".accrMonth").text(values) function.
I've attempted to switch their position on the webpage but still only ItemTbl is being set
Attached a screenshot Output of searching for the class
function setDatesSO(dateString) {
var dateParts = dateString.split("/");
var reviewPeriod = new Date(+dateParts[2], dateParts[1] - 1, +dateParts[0]);
console.log("table 1: " + $("#test1").hasClass("accrMonth2"));
console.log("table 1: " + $("#test2").hasClass("accrMonth1"));
console.log("table 1: " + $("#test3").hasClass("accrMonth"));
console.log("table 2: " + $("#test4").hasClass("accrMonth2"));
console.log("table 2: " + $("#test5").hasClass("accrMonth1"));
console.log("table 2: " + $("#test6").hasClass("accrMonth"));
reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
$(".accrMonth").text(reviewPeriod.toLocaleString('en-GB', {
month: 'long'
}));
reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
$(".accrMonth1").text(reviewPeriod.toLocaleString('en-GB', {
month: 'long'
}));
reviewPeriod.setMonth(reviewPeriod.getMonth() - 1);
$(".accrMonth2").text(reviewPeriod.toLocaleString('en-GB', {
month: 'long'
}));
}
<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
Function API call,note that startDate value is valid as results are updated for ItemTbl.It is called when user clicks a button.
$.ajax({
type: "POST",
url: getReviewById,
data: JSON.stringify(form),
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function (xhr) {
xhr.setRequestHeader(csrfHeader, csrfToken);
},
success: function (jd) {
setDatesSO(jd.startDate);
},
});

I dont see error as you could see in my sample
console.log($('#test1').hasClass("accrMonth2"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="OverviewTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test1" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test2" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test3" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
<table id="ItemTbl" class="table table-striped table-hover" style="word-wrap: break-word;">
<thead>
<tr>
<th data-column-id="accrMonth2" id="test4" class="accrMonth2">MONTH-3</th>
<th data-column-id="accrMonth1" id="test5" class="accrMonth1">MONTH-2</th>
<th data-column-id="accrMonth" id="test6" class="accrMonth">MONTH-1</th>
</tr>
</thead>
</table>
are you sure your table is loaded?

Bootbox Conform does not show

Bootbox Conform not showing clicking link button.
Tried so many things, BootBox,Bootstrap and Jquery are latest installed.
It seems after clicking button, dialog is created upper right side bellow navbar because there mouse icon changes at 2 points, but conform model or dialog does not show or appear.
Here is my Html code:
<table id="customers" class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Customers</th>
<th scope="col">Membership Type</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
#foreach (var customer in Model)
{
<tr>
<td scope="row">#Html.ActionLink(customer.Name,"Edit","Customers",new { customer.Id },null)</td>
<td scope="row">#customer.MembershipType.Name</td>
<td scope="row"><button data-customer-id="#customer.Id" class="btn btn-link js-delete">Delete</button>
</tr>
}
</tbody>
</table>
Here is my Java Script Code:
#section scripts
{
<script>
$(document).ready(function () {
$("#customers .js-delete").on("click", function () {
//e.preventDefault();
var butten = $(this);
bootbox.alert("Are You sure You want to Delete this Customer?")
bootbox.confirm("Are You sure You want to Delete this Customer?", function (result) {
if (result) {
$.ajax({
url: "/api/customers/" + butten.attr("data-customer-id"),
method: "DELETE",
success: function () {
butten.parent("tr").remove();
}
});
}
});
//if (confirm("Are You sure You want to Delete this Csustomer?")) {
//}
});
});
</script>
}
Also if I use default confirm instead of bootbox confirm , everything works fine but after clicking on delete button record is deleted but page does not refresh.

I found the solution. Looks like Bootbox has issue with Bootstrap 4.0 and higher. I installed bootstrap 3.3.7. Now Bootbox is working fine.
Any suggestion how to make it work with bootstrap 4.0 and newer?

I set up a snippet to use with BS4 and jquery 3.3.1 with Bootbox 4.4.0
I removed your ajax call for simplicity, but otherwise I don't see a problem.
$(document).ready(function() {
$("#customers .js-delete").on("click", function() {
bootbox.alert("Are You sure You want to Delete this Customer?");
bootbox.confirm("Are You sure You want to Delete this Customer?", function(result) {
if (result) {
console.log(result);
}
});
});
});
<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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<table id="customers" class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Customers</th>
<th scope="col">Membership Type</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
#foreach (var customer in Model) {
<tr>
<td scope="row">#Html.ActionLink(customer.Name,"Edit","Customers",new { customer.Id },null)</td>
<td scope="row">#customer.MembershipType.Name</td>
<td scope="row"><button data-customer-id="#customer.Id" class="btn btn-link js-delete">Delete</button>
</tr>
}
</tbody>
</table>

Search Boolean Field in Boostrap-Table

I use Bootstrap-Table to create my table on my Spring WebApp.
I have a question about search filters.
In one of my tables I want to search a boolean field, but I would like to search for it on the basis of a label I assign.
To clarify I attach my code:
<c:url value="/myurl/" var="Url" />
<script type="text/javascript">
<![CDATA[
function booleanFormatter(value) {
if(value){
return '<span class="fa fa-check-circle" aria-hidden="true" style="color:green;"></span>';
}else{
return '<span class="fa fa-times-circle" aria-hidden="true" style="color:red;"></span>';
}
};
$(function() {
$("#tableCli").on('click-row.bs.table', function (e, row, $element) {
window.location= "${Url}"+row.id;
});
});
]]>
</script>
<div class="container">
<table data-toggle="table"
data-url="${Url}listgrid"
data-page-size="30"
data-pagination="true"
data-search="true"
data-show-columns="true"
data-classes="table table-hover"
data-striped="true" id="tableCli"
data-show-refresh="true"
data-sort-name="inUso"
data-sort-order="desc">
<thead>
<tr>
<th data-sortable="true" data-field="ragioneSociale">${labelNomeCliente}</th>
<th data-field="piva" data-sortable="true">${labelPIva}</th>
<th data-field="comune" data-sortable="true">${labelComune}</th>
<th data-field="codiceIdMacchine" data-sortable="true">${labelCodifica}</th>
<th data-field="enable" data-formatter="booleanFormatter" data-sortable="true">${labelEnable}</th>
<th data-field="foreign" data-formatter="booleanFormatter" data-sortable="true">${labelEstero}</th>
</tr>
</thead>
</table>
</div>
The fields Enable and Foreign are Boolean, and for my users I want that if search with tips "Enable" the result is the list of enabled customer, same thing for the field "Foreign".
I try to search in link documentation but I don't see nothing.
Any Ideas?
Thanks

angularjs ng-repeat in a modal with ng-if

I have a list of data which i need to show in a modal popup. This modal is done in bootstrap. I have a controller attached to this html. Based on selected type or click i have to open the popup and display data in it in tabular format.
<modal visible="showModal" >
<div class="table-responsive" > <!-- <div class="table-responsive" > -->
<table class="table table-bordered table-hover success table-striped table-condensed">
<thead>
<tr class="success" style="table-layout:fixed">
<th class="alignAll visited" >Country</th>
<th class="alignAll visited" >Current Date</th>
<th class="alignAll visited" >Previous Date</th>
<th class="alignAll visited" >Difference</th>
</tr>
</thead>
<!-- thead Ends ./ -->
<tbody id="tableRowData">
{{dim}}
<tr ng-if="dim==totalRevenue" ng-repeat="disp in allDimensions">
<td class="alignLeft" ><strong>{{disp.country}}</strong></td>
<td class="textCenter" >{{disp.prevDate}}</td>
<td class="textCenter" >{{disp.prevToPrevDate}}</td>
<td class="textCenter" >{{disp.diffRevenue}}</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>
and the controller looks like this.
app.controller('landingPageController', function($scope,$http,$rootScope,$q)
{
/*Global Variables*/
//Configure Every Page Aspect From MainController Such as common Calendar Dates
/*Modal PopUp At RootScope*/
$rootScope.showModal = false;
$rootScope.toggleModal = function(val)
{
$rootScope.showModal = !$scope.showModal;
if(val=="revenue")
{
$rootScope.dim = "totalRevenue";
log($rootScope.allDimensions);
// Filter Data Based On Selection
//$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
// $.calculateDimensions(dim,$scope.allDimensions);
}
else if(val=="cartAban")
{
$rootScope.dim = "cartAbandonment";
} else if(val=="totalOrders")
{
$rootScope.dim = "totalOrders";
} else if(val=="pageView")
{
$rootScope.dim = "totalPageViews";
}
else
{
log("No Context Found");
}
};
$rootScope.hideModal = function()
{
$rootScope.showModal =false;
}
}
I have all $scope.allDimensions which contains all the object.My object looks like this.
{"data":[
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
},
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
}]}
I am not able to make this work.
Is there any way i can have ng-repeat use with ng-if and make this scenario work. ng-if="dim==<some value> can have any anything and based on that I would populate the table in a modal.

If you're just looking to have your data displayed then take a look at my Fiddle. This I believe is what you need..
<tr ng-repeat="disp in allDimensions.data">

Instead of ng-if you should use a filter (http://docs.angularjs.org/api/ng.filter:filter) on your ng-repeat to exclude certain items from your table.