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>
Related
I have below code in my GetCourseList.cshtml file (view) that show fetched information from database :
#model IEnumerable<WebApplication8.Models.Courses>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width" />
<title>GetCourseList</title>
<style>
.table thead th,
.table tbody td {
text-align: center;
}
</style>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th scope="col" class="border-top-0 text-center">course name</th>
<th scope="col" class="border-top-0">unit</th>
<th scope="col" class="border-top-0">term</th>
<th scope="col" class="border-top-0">choose</th>
<th scope="col" class="border-top-0"></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td class="align-middle">#item.name</td>
<td class="align-middle">#item.unit</td>
#if (item.term == 0)
{
<td class="align-middle">custom</td>
<td>
<input class="btn btn-success" type="checkbox" value=#item.name id=#item.course_id/>
</td>
}
else
{
<td class="align-middle">#item.term</td>
<td><input type="checkbox" value=#item.name id=#item.course_id /></td>
}
<td class="text-right align-middle">
#*<button type="button" class="btn btn-success">choose</button>*#
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
and I get below result from this view when I run the project :
I want that user choose favorite records , with those checkboxes , and then when pressed final button (this button is out of frame in my picture), id of this checkboxes insert in my database(related table).
think I should get checked checkboxes id's from my html page (but I don't know how?! please help me!) and pass this id's to the action and then execute insert query in my action .
so : I should pass each checked checkboxes id to the specific controller and collect them (for example collect all elements id's in an array) some one tell's me that i can map my view elements to the this array . but I don't give result from this approach . this is issue!
please help me to find out how can I do this . thank you
you can add property IsSelect in Model
Public bool IsSelect {get;set;}
and used
#Html.CheckBoxFor(m => m.IsSelect)
and in server checked which one of items selected
var idList = items.Where(x=>x.IsSelect).Select(x=>x.Id).ToList();
I have a webpage where multiple user information details is there.so when i click on the complete (here complete button is there beside every user details) button it should do some task(eg. I'm sending mail here) and disable the button after i redirected to same page again.
How do I do it?
Any possible suggestion?
[ It's a blade template as i'm making laravel web application]
A demo of my webpage:
<html>
<head>
<title> User Details </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
<div class="container">
<h3> Student Details </h3>
<table class="table table-striped table-bordered" id="example">
<thead>
<tr>
<td>Serial No</td>
<td>Student Name</td>
<td>Stdunet Email</td>
<td>Course Name</td>
<td>Phone Number</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($user as $row)
#if($row->courses()->first())
<tr>
<td>{{$i}}</td>
<td>{{$row->name }}</td>
<td>{{$row->email}}</td>
<td>{{$row->courses()->first()->name}} </td>
<td>{{$row->phone}}</td>
<td>
Complete
</td>
</tr>
<?php $i++; ?>
#endif
#endforeach
</tbody>
</table>
</div>
</body>
</html>
You can use jquery's .one() method.
// prevent anchor to click
$(document).ready(function() {
var clickCtr = 0;
$("a.btn").click( function() {
if(clickCtr > 0) {
return false;
}
clickCtr++;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Complete
So there is couple ways to handle your issue.
A simple one from the client side would be to use jQuery (since your importing it in your HTML) to temporarily disable the button.
Here is an exemple:
$(document).ready(function () {
clicked = false;
$(".btn").on('click', function (event) {
if (!clicked) {
clicked = true;
$(".text").text("Clicked!");
setTimeout(function(){
clicked = false;
$(".text").text("");
}, 2000);
} else {
$(".text").text("Already clicked!");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn btn-warning">Complete</button>
<text class="text"></text>
I have a table with couple of columns, one of which is a link, on clicking it, I am calling JQuery click event. On click I want to get the value of a another column, which is a sibling of this column(td). how can i get it.
HTML
<table class="table table-bordered table-hover">
<thead>
<th>RID</th>
<th>Mobile Number</th>
<th>Outlet Name</th>
<th>Place</th>
<th>Email</th>
<th>Balance</th>
<th>Stock</th>
<th>Password</th>
</thead>
<tr>
<td data-name="rid">5111879</td>
<td data-name="mobile">9066587654</td>
<td data-name="outlet">Rachels</td>
<td>Indhiranagar, BL</td>
<td>rach#yahoo.com</td>
<td><i class="fa fa-inr"></i>378665</td>
<td>TRANSFER</td>
<td>RESET</td>
</tr>
</table>
on clicking the id=retailer_stock, a modal pops up and should have the value of data-name='rid'. How should i do it.
Javascript
$('#retailer_stock').click( function(event){
console.log($(this));
console.log($(event.target).closest('tr').children("[id = 'rid']"));
console.log($(this).closest('tr').children("[id = 'rid']"));
console.log($(event.target).closest('tr').find("[id = 'rid']"));
console.log($(event.target).siblings("[id = 'rid']"));
console.log($(this).closest("[id = 'rid']"));
})
of these code lines, last two is not working, its not fetching me a result, can any of you explain why?
-thanks
Use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').children().eq(0).text() )
})
Check demo: fiddle
If you want to access that cell through data-name attribute use:
$('#retailer_stock').click( function(e){
alert( $(this).closest('tr').find('[data-name="rid"]').text() )
})
However if you plan to have many rows in the table, you will end up with many elements with same retailer_stock id. To avoid this you may decide to change id="retailer_stock" to class="retailer_stock" and then change selector to $('.retailer_stock').
Using the Click event from jQuery:
https://api.jquery.com/click/
Capture the click on "retailer_stock" then you can retrieve the HTML from "rid"
http://api.jquery.com/html/
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('#retailer_stock').click(function (e) {
alert($(this).closest('tr').find('td[data-name="rid"]').text())
})
});
</script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<th>RID</th>
<th>Mobile Number</th>
<th>Outlet Name</th>
<th>Place</th>
<th>Email</th>
<th>Balance</th>
<th>Stock</th>
<th>Password</th>
</thead>
<tr>
<td data-name="rid">5111879</td>
<td data-name="mobile">9066587654</td>
<td data-name="outlet">Rachels</td>
<td>Indhiranagar, BL</td>
<td>rach#yahoo.com</td>
<td><i class="fa fa-inr"></i>378665</td>
<td>TRANSFER</td>
<td>RESET</td>
</tr>
</table>
</body>
</html>
$('#retailer_stock').click(function(e){
$(this).parent().find('[data-name="rid"]').text()
});
I'm using bootstrap and jquery bootgrid, and all was ok first. Then I started a new project and used bootgrid there. And I get a strange thing: on the grid's control panel, refresh button is smaller than others. But I didn't changed any configs in bootgrid, all are default.
Why it can be and how to fix it? This buttons are generated automatically and i have no ideas...
UPD
JS:
$(function () {
var autoOutGrig = $("#autoOutGrig").bootgrid({
navigation: 3,
ajax: true,
url: "controllers/getListFiles",
post: function () {
return {
type: 'req',
expanded: $('#exp').text()
};
},
responseHandler: function (response)
{
return response.data;
}
});
HTML:
<div id="autoOut" class="tab-pane fade in active">
<span id="exp" style="display: none;"></span>
<h3>Auto OUT</h3>
<table id="autoOutGrig" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="date" class="col-md-3">Дата/Время</th>
<th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
<th data-column-id="file" class="col-md-4">Имя файла</th>
<th data-column-id="uid" class="col-md-4">UID</th>
<th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
<!-- <th data-column-id="respType" class="col-md-2">Тип ответа</th>
<th data-column-id="respName" class="col-md-2">Имя ответа</th>-->
</tr>
</thead>
</table>
</div>
UPD: styles from chrome inspect.
UPD2: code from the answer below doesn't work on my server. But it works fine on stack snippset!
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>
<script>
$(function () {
var testGrid = $("#testGrid").bootgrid({
navigation: 3,
ajax: true,
url: "controllers/getListFiles",
post: function () {
return {
type: 'req',
expanded: $('#exp').text()
};
},
responseHandler: function (response)
{
return response.data;
}
});
});
</script>
<div id="autoOut" class="tab-pane fade in active">
<span id="exp" style="display: none;"></span>
<h3>Auto OUT</h3>
<table id="testGrid" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="date" class="col-md-3">Дата/Время</th>
<th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
<th data-column-id="file" class="col-md-4">Имя файла</th>
<th data-column-id="uid" class="col-md-4">UID</th>
<th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
</tr>
</thead>
</table>
</div>
I'd make sure that you are pulling in the latest CSS libraries for your project
https://cdnjs.com/libraries/jquery
https://cdnjs.com/libraries/twitter-bootstrap
https://cdnjs.com/libraries/jquery-bootgrid
It appears to be working okay with the code you provided:
$(function () {
var autoOutGrig = $("#autoOutGrig").bootgrid({
navigation: 3,
ajax: true,
url: "controllers/getListFiles",
post: function () {
return {
type: 'req',
expanded: $('#exp').text()
};
},
responseHandler: function (response)
{
return response.data;
}
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.1.4/jquery.bootgrid.js"></script>
<div id="autoOut" class="tab-pane fade in active">
<span id="exp" style="display: none;"></span>
<h3>Auto OUT</h3>
<table id="autoOutGrig" class="table table-condensed table-hover table-striped">
<thead>
<tr>
<th data-column-id="date" class="col-md-3">Дата/Время</th>
<th data-column-id="expander" data-formatter="expander" class="col-md-1">Список</th>
<th data-column-id="file" class="col-md-4">Имя файла</th>
<th data-column-id="uid" class="col-md-4">UID</th>
<th data-column-id="accReqId" class="col-md-2">AccountsRequestId</th>
</tr>
</thead>
</table>
</div>
There are problems with class name. You have to change class names in "jquery.bootgrid.js" file. So, You can get refresh, search and menu drop down icon.
Change 1 : For Refresh button icon. Please replace the given code in "jquery.bootgrid.js"
actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\"><span class=\"icon glyphicon glyphicon-refresh\"></span></button>"
Instead of
actionButton: "<button class=\"btn btn-default\" type=\"button\" title=\"{{ctx.text}}\">{{ctx.content}}</button>"
Change 2 : For Search icon. Please replace given code in "jquery.bootgrid.js"
search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"icon glyphicon input-group-addon glyphicon-search\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>"
Instead of
search: "<div class=\"{{css.search}}\"><div class=\"input-group\"><span class=\"{{css.icon}} input-group-addon {{css.iconSearch}}\"></span> <input type=\"text\" class=\"{{css.searchField}}\" placeholder=\"{{lbl.search}}\" /></div></div>"
Add this css to your code and hopefully it will fix the refresh button size.
<style>
.glyphicon-refresh{line-height:1.42857;}
</style>
Regards,
I am using the jquery plugin tablesort from http://mottie.github.com on my table. What is meant to happen is
you click the header cell
a jquery ui dialog shows saying loading
the table cache updates using the update event as data changed via user input
sort happens
then the dialog is removed
The problem is the dialog is not opening always or wont close and if I open the dialog in the events sortStart and sortEnd then it opens and closes twice but it waits to open until the update event is complete.
If I use an alert it works better but thats not what I want, I need a dialog.
botton line is I need to use the update event and a dialog..... can yo please help.. my concept code is below.. thanks
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.tablesorter.min.js"></script>
<link href="css/smoothness/jquery-ui-1.9.1.custom.min.css" rel="stylesheet" />
<script src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript">
$(function () {
//add table sort
$("#myTable").tablesorter();
// bind to sort events begin
$("#myTable").bind("sortBegin", function (e, table) {
$('<div id="myDialog">loading</div>').dialog();
$("#myTable").trigger("update"); // update table cache
//alert('open');
})
$("#myTable").bind("updateComplete", function (e, table) {
//alert("updateComplete")
});
$("#myTable").bind("sortStart", function (e, table) {
//alert("sortStart")
});
$("#myTable").bind("sortEnd", function (e, table) {
//alert("sortEnd")
$('#myDialog').dialog("close");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<!-- this is here to simulate loads of extra rows -->
<% For index = 1 To 100
Response.Write("<tr><td>Doe</td><td>Jason</td><td>jdoe#hotmail.com</td><td>$100.00</td><td>http://www.jdoe.com</td></tr> ")
Next
%>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>