hi i found a script which uses checkbox to select all/ unselect all checkboxex which i found a working example here http://jsfiddle.net/ThiefMaster/HuM4Q/
the problem is when i tried to integrate it to my own html. it doenst work anymore, here is my code:
javascript:
<head>
<script>
$('#checkAll').click(function() {
if(this.checked) {
$('input:checkbox').attr('checked', true);
}
else {
$('input:checkbox').removeAttr('checked');
}
});
$('input:checkbox:not(#checkAll)').click(function() {
if(!this.checked) {
$('#checkAll').removeAttr('checked');
}
else {
var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
var numTotal = $('input:checkbox:not(#checkAll)').length;
if(numTotal == numChecked) {
$('#checkAll').attr('checked', true);
}
}
});
</script>
</head>
and these is my html:
<h2>Courses</h2>
<?php
$attributes = array('name' => 'list','id' => 'form' );
echo form_open('courses/edit',$attributes);?>
<table class="data display datatable" id="example">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Units</th>
<th>Notes</th>
<th><input type="checkbox" id="checkAll"></th>
</tr>
</thead>
<tbody>
<?php foreach($query->result_array() as $row): ?>
<tr class="even gradeC">
<td><?php echo anchor('courses/details/'.$row['courseID'],$row['courseID']);?></td>
<td><?php echo $row['courseTitle'];?></td>
<td><?php echo $row['courseDesc'];?></td>
<td><?php echo $row['courseUnits'];?></td>
<td><?php echo $row['courseNotes'];?></td>
<td><input type="checkbox" name="checkID[]" id="checkID" value="<?php echo $row['courseID'];?>"/></td>
</tr>
<? endforeach; ?>
</tbody>
</table>
Try fixing this line:
<td><input type="checkbox" name="checkID[]" id="checkID" value="<?php echo $row['courseID'];?>"/></td>
The id attribute should be unique, eg, only one element should have the id "checkID", not every row. Try removing the attribute altogether or make it unique for each row to see if your javascript sorts itself out.
Also, you need a line like this at the top, in your head:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
That script used jQuery. Make sure you include the jQuery script in your page.
Related
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<?php
foreach($fetchContactData as $value)
{
?>
<tr>
<td><?php echo $value['email'] ?></td>
<td><?php echo $value['name']?></td>
<td><?php echo $value['subject'] ?></td>
<td><button type="button" class="btn btn-warning" value="<?php echo $value['message'] ?>">Show</button></td>
<?php
}?>
</tbody>
<tfoot>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</tfoot>
</table>
Js code:
<script type="text/javascript">
$(document).ready(function(){
$("#example1 button").click(function(){
var id=$(this).attr('value');
});
});
</script>
here at each row there is unique id to button. so onclick of that button i want that id in jquery. I tried many searches from stackoverflow but its not working so anyone can help me with jquery part with this exact same code
Here is my js now i want that long message so that i could show it in modal class div.
[Violation] Forced reflow while executing JavaScript took 73ms ---> This is the error i got
An "id" is always used to identify something and therefore should be unique. So you have to make it unique in the first place. Something like this should work.
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
foreach($fetchContactData as $value)
{
?>
<tr>
<td><?php echo $value['email'] ?></td>
<td><?php echo $value['name']?></td>
<td><?php echo $value['subject'] ?></td>
<td><button type="button" class="btn btn-warning" id="show-<?= $i; ?>" value="<?php echo $value['id'] ?>">Show</button></td>
<?php
$i++;
}?>
</tbody>
<tfoot>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</tfoot>
</table>
In this code, there will be the variable "$i" that is set to 0 in the beginning and just appended to the id "show-". Last step of the foreach-loop, this 0 is just counted up by one.
This will generate and id in the format of "show-0", "show-1" (you could set $i to 1 in the beginning to make it start counting from 1). In jQuery, you then could use the "starts with"-selector to select all buttons and set an onclick event on it. (just one example) https://api.jquery.com/attribute-starts-with-selector/
<script>
$( "button[id^='show-']" ).on('click', clickhandler);
</script>
So for every button that has an id starting with "show-" you can make it do the action "clickhandler".
your id=button is into loop, so is not unique.
I advise you do not use id, better you can use something like class and in your js script listen click to this, like:
<td><button type="button" class="btn btn-warning button_msg" value="<?php echo $value['message'] ?>">Show</button></td>
Js (jquery)
$(".button_msg').click(function(){
//Do anything
})
I have a datatable which retrieves data from db, i want to be to implement a modal pop up under the row improvement actions so instead displaying the actual improvement actions i want like a symbol under that row so when i click it a modal appears with the improvement actions while all the other data remains the same , i want to implement this using ajax but am quite a novice in ajax please assist.
<table class="table table-hover table-striped table-bordered datatable-basic" >
<thead>
<tr>
<tr class="bg-violet-400" >
<th>ID</th>
<th>Site</th>
<th>Date</th>
<th>SN</th>
<th>Gap identified</th>
<th>Improvement Actions</th>
<th>Timeline</th>
<th>Person responsible</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php
$connect = mysqli_connect("localhost", "root", "", "dqa");
$query=mysqli_query($connect,"SELECT * FROM action_plan");
while($row=mysqli_fetch_array($query))
{
?>
<tr>
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['site'] ?></td>
<td><?php echo $row['date'] ?></td>
<td><?php echo $row['sn'] ?></td>
<td><?php echo $row['gap_identified'] ?></td>
<td><?php echo $row['Improvement_Actions'] ?></td>
<td><?php echo $row['timeline'] ?></td>
<td><?php echo $row['person_responsible'] ?></td>
<td><?php if( $row['status'] == 1 )
{
echo ' <button type="button" class="btn bg-grey">Approved</button></span>';
}
elseif( $row['status'] == 0 ) {
echo ' <button type="button" class="btn btn-danger">Active Action</button></span>';
}
elseif( $row['status'] == 2 ) {
echo ' <button type="button" class="btn bg-brown"> Resubmission </button></span>';
}
elseif( $row['status'] == 3 ) {
echo ' <button type="button" class="btn bg-orange">Action Due</button></span>';
}
?></td></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
Without any sample data or example data, I can only speculate at what you are trying to accomplish. Here is an example that I think you may find helpful.
$(function() {
$(".table").DataTable();
$(".table tbody .actions").button({
showLabel: false,
icon: "ui-icon-extlink"
}).click(function(e) {
var self = $(this);
var row = $(this).attr("href").substring(1);
var siteurl = "<?php echo siteurl('improvement');?>";
var form = $("<form>", {
id: "form-" + row
});
form.append($("<input>", {
type: "hidden",
name: "rowid",
value: row
}));
var dialog = $("<div>", {
title: "Improvement Actions - Row " + row
}).append(form).dialog({
modal: true,
create: function(e, ui) {
$.getJSON(siteurl + "/" + row, function(data) {
$('[name="rowid"]', this).val(data.id);
});
},
close: function(e, ui) {
self.data("results", form.serialize());
dialog.dialog("destroy").remove();
}
});
});
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<table class="table table-hover table-striped table-bordered datatable-basic">
<thead>
<tr>
<tr class="bg-violet-400">
<th>ID</th>
<th>Site</th>
<th>Date</th>
<th>SN</th>
<th>Gap identified</th>
<th>Improvement Actions</th>
<th>Timeline</th>
<th>Person responsible</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
LOC-1
</td>
<td>
04/24/2018
</td>
<td>
1001
</td>
<td>
0.1
</td>
<td>
Improvement Actions
</td>
<td>
</td>
<td>
John Smith
</td>
<td>
<button type="button" class="btn bg-grey">Approved</button>
</td>
</tr>
</tbody>
</table>
Assuming you are using DataTable, The table is populated with various data from PHP, resulting in HTML like shown above. You can then use jQuery UI to program the button to build a dialog. One of the callback events for .dialog() is create, see more: http://api.jqueryui.com/dialog/#event-create
You can perform your AJAX call at this time to get specific data for this dialog. In my example, all of it is being created dynamically, so there is no need to reset forms etc.
I advise using $.getJSON(), but there is nothing wrong with the $.ajax() code you implemented. The $.getJSON() simply assumes you are performing a GET call to a resource that will return JSON data. Resulting in simplified code.
Testing of this example is not complete as the PHP Script URL is fake or will be null.
Hope that helps.
I have searched for hours now to find out how I could do this, but unfortunately all to no avail.
I am trying to send entered information so it can run through MySQL and obtain the information, then echo it in table on screen.
The issue (as far as I can tell) must be with my JQuery code:
$("#btnCheckNoteIDs").click(function(){
var noteUser = $("#noteUser").val();
var noteDate = $("#noteDate").val();
$("#LoadNoteIDs").load('check_noteIDs.php?noteDate='+noteDate + "¬eUser="+noteUser);
});
My php code is as follows:
$result = mysqli_query($con,"
SELECT ID, ClientID, Note, ToDoDate, CaseID
FROM ToDoNotes
WHERE ToDoStatus='0' and Deleted='0' and `ToDoDate`='".$_GET['noteIDsDate']."' and User='".$_GET['noteIDsDate']."'");
while($row = mysqli_fetch_array($result))
{
$ID = $row['ID'];
$ClientID = $row['ClientID'];
$Note = $row['Note'];
$ToDoDate = $row['ToDoDate'];
$CaseID = $row['CaseID'];
}
?>
<table class="table table-striped">
<thead>
<tr>
<th>Note ID</th>
<th>Client ID</th>
<th>Case ID</th>
<th>Note</th>
<th>To Do Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><? echo $noteID; ?></td>
<td><? echo $ClientID; ?></td>
<td><? echo $CaseID; ?></td>
<td><? echo $Note; ?></td>
<td><? echo $ToDoDate; ?></td>
</tr>
</tbody>
</table>
Can anyone here offer any assistance please? Any help will be greatly appreciated!
Thanks!
Suppose you have form.php like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form method="post" id="btnCheckNoteIDs">
<label> User</label>
<input type="text" name="user" id="noteUser"><br>
<label>Date</label>
<input type="date" name="date" id="noteDate"><br>
<input type="submit" value="submit">
</form>
<br>
<div id="LoadNoteIDs"></div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$(document ).ready(function() { //make sure document is ready
$('#btnCheckNoteIDs').submit(function(e){
e.preventDefault();//to prevent default behaviour
var noteUser = $("#noteUser").val();
var noteDate = $("#noteDate").val();
if(noteUser==undefined){
alert('No noteuser');
return false;
}else if(noteDate==undefined){
alert('no note date');
return false;//stop sending
}
//to convert %2F, use decodeURIComponent
var param= 'noteDate='+decodeURIComponent(noteDate) + '¬eUser='+noteUser;
$.ajax({
url: "check_noteIDs.php",
data: param,
type: "post",
success: function(data){
$('#LoadNoteIDs').html(data);
}
});
});
});
</script>
in check_noteIDs.php which must be in the same folder where you put the form.php
require_once "dbconfig.php";
$user= isset($_REQUEST['noteUser'])? $_REQUEST['noteUser']:'';
$date = isset($_REQUEST['noteDate'])? date('Y-m-d', strototime($_REQUEST['noteDate'])):'';
//You can validate here.
$result = mysqli_query($con," SELECT ID, ClientID, Note,
ToDoDate, CaseID
FROM `ToDoNotes`
WHERE `ToDoStatus`='0' AND `Deleted`='0'
AND `ToDoDate`='$date'
AND `User`='$user'");
$row = mysqli_fetch_assoc($result);
<table class="table table-striped">
<thead>
<tr>
<th>Note ID</th>
<th>Client ID</th>
<th>Case ID</th>
<th>Note</th>
<th>To Do Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $row['ID']; ?></td>
<td><?php echo $row['ClientID']; ?></td>
<td><?php echo $row['CaseID']; ?></td>
<td><?php echo $row['Note']; ?></td>
<td><?php echo $row['ToDoDate']; ?></td>
</tr>
</tbody>
</table>
<?php
mysqli_free_result($result);
mysqli_close($con);
?>
I think your issue is the submit button in your form, submits the form before the script executes. If that's the case, you need to update your script as below:
$("#btnCheckNoteIDs").click(function(event){
event.preventDefault();
var noteUser = $("#noteUser").val();
var noteDate = $("#noteDate").val();
$("#LoadNoteIDs").load('check_noteIDs.php?noteDate='+noteDate + "¬eUser="+noteUser);
});
Good Afternoon,
I have 3 foreach loops on my page, the first gets the teams, the second gets each person in the team, and the third gets each unique reference to a task that the agent has completed. I have collected this data and it is being displayed fine. I now want to add some JQuery to it so it will hide the agents and references unless the relevant team or agent is clicked on.
So if I load the page everything will be hidden apart from the teams, when I click on a team it will show the agents, when I click on an agent it will show the references.
I am having trouble assigning unique ID's to each row and finding those in the JQuery script.
Here is my code...
<?php if($aForm['sTaskType'] !== 'CP' ){?>
<table style="width: 95%">
<tr>
<th>Area</th>
<th>Pass</th>
<th>Pass with feedback</th>
<th>Fail with Minors</th>
<th>Fail with Majors</th>
</tr>
<?php foreach ($aQualityTeamResults AS $iBusinessStreamId => $aTeamData) {
$aQualityAgentResults = $oRadiusQualityFns->GetQualityAgentResults($sDateFrom, $sDateTo, $sTaskType, $aTeamData['iBusinessStreamId']);?>
<tbody>
<tr class="TeamClick<?php echo $aTeamData['iBusinessStreamId'];?>">
<td><?php echo $aTeamData['sBusinessStream']?></td>
<td><?php echo $aTeamData['Pass']?></td>
<td><?php echo $aTeamData['Pass with Feedback']?></td>
<td><?php echo $aTeamData['Fail with Minors']?></td>
<td><?php echo $aTeamData['Fail with Majors']?></td>
</tr>
</tbody>
<?php foreach ($aQualityAgentResults AS $iUserId => $aAgentData) {
$aQualityPropertyResults = $oRadiusQualityFns->GetQualityPropertyResults($sDateFrom, $sDateTo, $sTaskType, $aAgentData['iBusinessStreamId'], $aAgentData['Agent']);
?>
<tbody>
<tr class="Agent<?php echo $iUserId]?>">
<td><?php echo $oRadiusUser->Get_User_Name($aAgentData['Agent']);?></td>
<td><?php echo $aAgentData['Pass'];?></td>
<td><?php echo $aAgentData['Pass with Feedback'];?></td>
<td><?php echo $aAgentData['Fail with Minors'];?></td>
<td><?php echo $aAgentData['Fail with Majors'];?></td>
</tr>
</tbody>
<?php foreach ($aQualityPropertyResults AS $iUserId => $aPropertyData) { ?>
<tbody>
<tr class="Property<?php echo $aPropertyData['iUserId'];?>">
<td colspan="2"><font color="black"><?php echo $aPropertyData['sPropertyCode']?></font></td>
<td colspan="3"><?php echo $aPropertyData['Result']?></td>
</tr>
</tbody>
<?php
}
}
}
?>
</table>
I have given each of the rows a unique class by adding in the unique identifier from the database. I just dont know how to find these within the Jquery script.
EDIT:
Maybe not explained myself properly, I would like help with how to set up this script but obviously a lot better.
<script language="javascript" type="text/javascript" >
$(document).ready(function() {
$('.Agent').hide;
$('.Property').hide;
$(document).on('click','.TeamClick',function(){
$('.Agent').toggle('show');
$('.Property').toggle('show');
});
});
</script>
But in this case it will show/hide all of the rows as they will all have the same id's, whereas now I have added on the unique id on the end with the php code in the class, I dont know how to call those as they all are called different classes.
So if I click on TeamClick1, it shows the actual rows for that team (Agent1), and not all of them. but obviously I cant type out all of the unique id's I just dont know how to get them from the php in JQuery.
<script language="javascript" type="text/javascript" >
$(document).ready(function() {
$('.Agent').hide;
$('.Property').hide;
$(document).on('click','.TeamClick(UNIQUE ID)',function(){
$('.Agent(UNIQUE ID)').toggle('show');
$('.Property(UNIQUE ID)').toggle('show');
});
});
Hope this makes sense.
I am hasty but it is like this
<?php if($aForm['sTaskType'] !== 'CP' ){?>
<table style="width: 95%">
<tr>
<th>Area</th>
<th>Pass</th>
<th>Pass with feedback</th>
<th>Fail with Minors</th>
<th>Fail with Majors</th>
</tr>
<?php foreach ($aQualityTeamResults AS $iBusinessStreamId => $aTeamData) {
$aQualityAgentResults = $oRadiusQualityFns->GetQualityAgentResults($sDateFrom, $sDateTo, $sTaskType, $aTeamData['iBusinessStreamId']);?>
<tbody>
<tr class="TeamClick<?php echo $iBusinessStreamId;?>">
<td><?php echo $aTeamData['sBusinessStream']?></td>
<td><?php echo $aTeamData['Pass']?></td>
<td><?php echo $aTeamData['Pass with Feedback']?></td>
<td><?php echo $aTeamData['Fail with Minors']?></td>
<td><?php echo $aTeamData['Fail with Majors']?></td>
</tr>
</tbody>
<?php foreach ($aQualityAgentResults AS $iUserId => $aAgentData) {
$aQualityPropertyResults = $oRadiusQualityFns->GetQualityPropertyResults($sDateFrom, $sDateTo, $sTaskType, $aAgentData['iBusinessStreamId'], $aAgentData['Agent']);
?>
<tbody>
<tr class="Agent<?php echo $iUserId; ?>">
<td><?php echo $oRadiusUser->Get_User_Name($aAgentData['Agent']);?></td>
<td><?php echo $aAgentData['Pass'];?></td>
<td><?php echo $aAgentData['Pass with Feedback'];?></td>
<td><?php echo $aAgentData['Fail with Minors'];?></td>
<td><?php echo $aAgentData['Fail with Majors'];?></td>
</tr>
</tbody>
<?php foreach ($aQualityPropertyResults AS $iUserId2 => $aPropertyData) { ?>
<tbody>
<tr class="Property<?php echo $iUserId2 ;?>">
<td colspan="2"><font color="black"><?php echo $aPropertyData['sPropertyCode']?></font></td>
<td colspan="3"><?php echo $aPropertyData['Result']?></td>
</tr>
</tbody>
<?php
}
}
}
?>
</table>
I'm putting the identifiers in classes, but if you want put in IDs you can, is the same thing, like this id="<?php ... ?>"
Two-part question:
I have two tables: one table is items and the other is the table that selected items will be copied into when the Add button is clicked. After, when all items that are wanted are selected, there will be a 'finished' button which will post the items selected to the DB.
I started with Javascript but didn't get far at all because jQuery seems better suited but I'm not very familiar with it
function addto()
{
var div = document.getElementById('fixedDiv','inside');
div.innerHTML = div.innerHTML + 'Item Added';
}
<div id='fixedDiv'>
<table align="center" id="tradee">
<th rowspan="2"> Other Item</th>
<?php while($rowi =$item->fetch_assoc())
{?>
<tr>
<td>
<?php echo $rowi['item_name']; ?>
</td>
<td><?php echo $rowi['item_description'];?></td>
</tr>
<?php } ?>
</table>
<br>
<table align="center" id="tradeTable">
<th>Cat_id</th>
<th>Name</th>
<th>Description</th>
<?php while($row =$item_results->fetch_assoc())
{?>
<tr>
<td><?php echo $cat_id = $row['cat_id']; ?> </td>
<td name="item_name"><?php echo $item_id = $row['item_name'];?></td>
<td><?php echo $item_descrip = $row['item_description'];?></td>
<td><input name ="submit" type="button" class="added" onclick="addto()"
value="Add" >
</td>
</tr>
<?php } ?>
</table>
i dont know what excatly you try to do, but i hope it helps a bit:
Here is the fiddle with some modifications on your html and jQuery:
http://jsfiddle.net/4FArt/5/
function addto(obj)
{
var $row = $(obj).parents("tr");
var $table = $("#tradee");
var item_name = $row.find(".item-name").text();
var item_desc = $row.find(".item-desc").text();
var newTR = $("<tr><td>"+item_name+"</td><td>"+item_desc+"</td></tr>");
$table.append(newTR);
}
You should check also your markup of HTML, a TD has no name Attribute, and ah <TH> is also wrapped by an <TR>... But maybe its just for showing, and you allready know that :)