My radio button in my _form.gsp is coded as
<table>
<thead>
...
</thead>
<tbody>
<g:each in="${locationList}" status="i" var="location">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'}">
...
<td><g:radio name="location" value="${location.id}" onclick="showLocInfo(this)" checked="${false}" /></td>
</tr>
</g:each>
</tbody>
</table>
and my hidden div is
<div id="locationTable" style="display: none">
<table style="width: 100%;">
<tr>
<td>HERES LOCATION INFORMATION</td>
</tr>
</table>
</div>
My create.gsp contains some javascript in the head which currently isn't working
<head>
...
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script type="text/javascript">
$(function() {
$(".datepicker").datepicker();
});
jQuery.noConflict();
function showLocInfo(elem){
if (elem.checked == "true") {
document.getElementById('locationTable').style.display = "block";
}
if (elem.checked == "false") {
document.getElementById('locationTable').style.display = "none";
}
}
</script>
</head>
The datepicker works, but the show location info function does not. What am I doing wrong?
In your showLocInfo, elem.checked is a boolean, not a string. Since you are using 2 if statements, rather than an if/else, neither block is executed, resulting in no behavior.
Try using instead:
if (elem.checked === true) {
// ..
Related
I am using a asp.net mvc web app. I have created a table and now I am wanting to use the plugin in datatables. I saw you only needed 3 lines of code to make this work. I attempted to do exactly what it required in order for it to work and give me the desired datatable, but it does not give me the table I am expecting. I even went to examples -> HTML (DOM) source data -> and under Javascript tab I entered the lines required.
Is there something I am doing incorrect here with the script tags or is the plug in just not working? I do not have the files downloaded and imported to my project.
Expecting a standard look like this
But am getting this... so I am missing the look of the datatable plugin and the following Error.
Cannot set properties of undefined (setting '_DT_CellIndex')
my view:
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html>
Your problem is a mismatch in the number of <td> </td>. You are just rendering 1 <td> in foreach loop but you have two <th></th> in the table header
#model List<Fright>
#{
ViewData["Title"] = "Home Page";
var result = Model.GroupBy(gb => gb.Value);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link href="//cdn.datatables.net/1.11.2/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.11.2/js/jquery.dataTables.min.js" defer></script>
<script>
$(document).ready(function () {
$('#homeTable').DataTable();
});
</script>
</head>
<body>
<div>
<table id="homeTable" class="display" style="width:100%">
<thead>
<tr>
<th>Value</th>
<th>Option</th>
</tr>
</thead>
<tbody>
#foreach (var item in result)
{
var url = "/frightSummary/SummaryIndex?id=" + item.Key;
<tr>
<td>
<a href=#url>#item.Key</a>
</td>
<td>
<a href=#url>#item.Option</a> /* output you Option value*/
</td>
</tr>
}
</tbody>
</table>
</div>
</body>
</html> ```
I have created a website mainly using HTML, CSS, PHP and MYSQL. I have successfully gotten tabledit working on the site, but I am not sure how to add the functionality for dropdown checkboxes. I need it to show as checked if the user has the role and when unchecked to update the MySQL table. Are dropdown checkboxes something that can be implemented with this plugin?
This is how the HTML is set up:
ModifyUser.php
<html>
<head>
<title>Modifying Users</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
<style>
#sample_data tr > *:nth-child(1) {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center">Modifying Users</h3>
<br />
<div class="panel panel-default">
<!-- <div class="panel-heading">Sample Data</div>-->
<div class="panel-body">
<div class="table-responsive">
<table id="sample_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Approval</th>
<th>Roles</th> // COLUMN THAT SHOULD HAVE DROPDOWN CHECKBOX
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br />
<br />
</body>
</html>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){
var dataTable = $('#sample_data').DataTable({
"processing" : true,
"serverSide" : true,
"order" : [],
"ajax" : {
url:"FetchUserTable.php",
type:"POST"
}
});
$('#sample_data').on('draw.dt', function(){
$('#sample_data').Tabledit({
url:'ActionUserTable.php',
dataType:'json',
columns:{
identifier : [0, 'user_id'],
editable:[
[1, 'first_name'],
[2, 'last_name'],
[3, 'email'],
[4, 'admin_approved', '{"1":"Approved","2":"Disapproved"}']
[5, 'role_id'] // THIS SHOULD BE AN EDITABLE DROPDOWN CHECKBOX
]
},
restoreButton:false,
onSuccess:function(data, textStatus, jqXHR)
{
if(data.action == 'delete')
{
$('#' + data.id).remove();
$('#sample_data').DataTable().ajax.reload();
}
}
});
});
});
</script>
I have tried to display a table as a datatable. But the code for displaying that is in another PHP file, so that it is not displayed as datatable instead as a normal table. I have included all the script files also.
**activity_show.php**
<link href="vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
<link href="vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
<table id="datatable-buttons" class="table table-striped table-bordered dataTable " role="grid"
aria-describedby="datatable-buttons_info" style="width: 948px;">
<thead>
<th>id</th>
<th>Date </th>
<th>id2</th>
</tr>
</thead>
<tbody>
<td>1</td>
<td >2</td>
<td>3</td>
</tr>
</tbody>
</table>
<script src="vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="vendors/jszip/dist/jszip.min.js"></script>
<script src="vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="vendors/pdfmake/build/vfs_fonts.js"></script>
Using the below given code the table is called for displaying.
**activity.php**
<div class="row">
<div id="userTable"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
showactivity();
});
function showactivity(){
$.ajax({
url: 'activity_show.php',
type: 'POST',
async: false,
data:{
show: 1
},
success: function(response){
$('#userTable').html(response);
}
});
}
You can use these functions to first create and then update the datatable where needed.
1) Make sure all of the tables with a specific class are DataTable by default.
$(document).ready(function(e) {
$('.dataTable').DataTable();
});
2) Update the table after you've submitted your Ajax.
$('.dataTable').change(function(e) {
$('.dataTable').draw();
});
I'm generating a table using PHP that will retrieve records from a MySQL database. I'm new to DataTables, and my problem is that the "View Products" button that generates along with the table doesn't work. Clicking the button should redirect to a new page with an entirely different table.
here's a screenshot of what it looks like, just in case I'm not making any sense
Here's the entire code for the page.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\reset.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\stylesheet.css">
<link rel="stylesheet" type="text/css" href="\WEBDEV\css\og_stylesheet.css">
<style type="text/css">
thead {
background-color: #dc3545;
color: white;
}
</style>
</head>
<body>
<!-- HEADER -->
<?php include "includes/header.php" ?>
<?php session_start();
?>
<!-- END HEADER -->
<table class="table table-striped" id="table_id">
<thead>
<tr>
<th>Supplier ID</th>
<th>Name</th>
<th>Address</th>
<th>Contact Number</th>
<th>Supplier Details</th>
</tr>
</thead>
<tbody>
<?php
$conn = mysqli_connect("localhost", "root", "", "web_db");
$query = "SELECT * FROM Suppliers";
$search = mysqli_query($conn, $query);
if(mysqli_num_rows($search) > 0 ){
while($row = mysqli_fetch_array($search)){
?>
<form action="supplierdetails.php" method="POST">
<tr>
<td>
<?= $row['supplier_id']?>
</td>
<input type="hidden" value=< ?=$row[ 'supplier_id']?> name = "sup_id">
<input type="hidden" value=< ?=$row[ 'name']?> name = "name">
<td>
<?= $row['name']?>
</td>
<td>
<?= $row['address']?>
</td>
<td>
<?= $row['contactnumber']?>
</td>
<td><input type="submit" name="sub" value="View Products" class="btn btn-info" onclick="sample()"></td>
</tr>
</form>
<?php
}
}
?>
</tbody>
</table>
<script>
$(document).ready(function() {
$(".alert").delay(3000).fadeOut();
});
</script>
<script>
function sample() {
window.alert(document.getElementById("name").getAttribute("value"));
}
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
$('#table_id').DataTable();
});
</script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.filter.range.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#table_id').DataTable();
/* Add event listeners to the two range filtering inputs */
$('#min, #max').keyup(function() {
table.draw();
});
});
</script>
</body>
</html>
The buttons work perfectly before I added DataTables, by the way. I also found out that a table with hard-coded data (as in without PHP) also have buttons that work fine. I'm pretty much at my wits end here. Any help will be appreciated.
Remove the onclick="sample()"
Add this in a document.ready
$(".btn-info").on("click", function() {
window.alert(document.getElementById("name").getAttribute("value"));
});
Maybe use a window.alert('test');
since I dont see the element with the id name anywhere
i want do script can use more than textarea with tinymce
this :
and don't have any problem with add button
But the problem when I delete the last line
Then I do add new line disappears tinymce in textarea
I tried to do I solve this problem but using hide() function instead of remove()
However, many problems occur number IDs
and this all code for this
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function ()
{
$(document).on("click", ".RemoveBottun", function()
{
var numItemsLiens = $('.trLines').length;
if (numItemsLiens > 1)
{
$('#addHereItem .trLines:last').remove();
tinyMCE.execCommand('mceAddControl', false, $("#addHereItem tbody textarea"));
}else
{
return false;
}
})
tinymce.init({
selector: "textarea",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
var max_fieldstable = 500; //maximum input boxes allowed
var add_button = $(".addNewBottun"); //Add button ID
var two = 1;
$(document).on("click", ".addNewBottun", function(e){ //on add input button click
var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
e.preventDefault();
if(xtable < max_fieldstable){ //max input box allowed
xtable++; //text box increment
$("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
}else
{
$(this).hide();
}
tinymce.init({
selector: ".areatexting",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
return false;
});
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
<thead>
<tr>
<td style="width: 1%;">NO</td>
<td style="width: 30%;">Details</td>
</tr>
</thead>
<tbody>
<tr class="trLines showItem" id="remove_0" dir="0">
<td>1</td>
<td>
<textarea required="required" name="display_price[content][0][details]"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" />
<input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>
i found the answer for this question
add this line when remove item
tinymce.execCommand('mceRemoveEditor', true, id_text_area_without#);
and add this line when add a new item
tinyMCE.execCommand('mceAddControl', true, id_text_area_without#);
and this all solv thuisa problem
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function ()
{
$(document).on("click", ".RemoveBottun", function()
{
var numItemsLiens = $('.trLines').length;
if (numItemsLiens > 1)
{
var realId = Number(numItemsLiens - 1);
// console.log(realId);
$('#addHereItem .trLines:last').remove();
tinymce.execCommand('mceRemoveEditor', true, "details_"+realId);
}else
{
return false;
}
})
tinymce.init({
mode : "exact",
selector: "textarea",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
var max_fieldstable = 500; //maximum input boxes allowed
var add_button = $(".addNewBottun"); //Add button ID
var two = 1;
$(document).on("click", ".addNewBottun", function(e){ //on add input button click
var xtable = $('#addHereItem tbody .trLines:last').attr('dir');
e.preventDefault();
if(xtable < max_fieldstable){ //max input box allowed
xtable++; //text box increment
$("#addHereItem tbody").append('<tr class="trLines showItem" id="remove_'+xtable+'" dir="'+xtable+'"><td>'+(two + xtable)+'</td><td><textarea class="areatexting" style="width: 250px;height: 81px;" id="details_'+xtable+'" name="display_price[content]['+xtable+'][details]"></textarea></td></tr>'); //add input box
}else
{
$(this).hide();
}
tinymce.init({
mode : "exact",
selector: ".areatexting",
width: "300",
height: "100",
toolbar_items_size: 'small',
});
tinyMCE.execCommand('mceAddControl', true, "details_"+xtable);
return false;
});
})
</script>
</head>
<body>
<table style="" id="addHereItem" class="table table-bordered">
<thead>
<tr>
<td style="width: 1%;">NO</td>
<td style="width: 30%;">Details</td>
</tr>
</thead>
<tbody>
<tr class="trLines showItem" id="remove_0" dir="0">
<td>1</td>
<td>
<textarea required="required" name="display_price[content][0][details]"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><input type="button" class="addNewBottun btn btn-primary btn-xs" value="+ Add New Item" />
<input type="button" class=" btn btn-danger btn-xs RemoveBottun" value="- Remove Item" />
</td>
</tr>
</tfoot>
</table>
</body>
</html>