Currently I have a problem on all the pages.The page contains a form with a submit button and a table that contains buttons.The problem is whenever I click on edit button from the table the cssandjavascript are gone.
Here is jascript code
<script type="text/javascript">
$(document).ready(function() {
var table = $('#datatable').dataTable();
var tableTools = new $.fn.dataTable.TableTools(table, {
'aButtons' : [ ],
'sSwfPath' : 'js/copy_csv_xls_pdf.swf'
});
$(tableTools.fnContainer()).insertBefore('#datatable_wrapper');
});
</script>
The table
<table id="datatable" class="hover" >
<thead>
<tr>
<th width="80">Poll ID</th>
<th width="120">Poll Name</th>
<th width="120">Poll Description</th>
<th width="120">poll publisher</th>
<th width="60">Edit</th>
<th width="60">Delete</th>
<th width="60">Voter</th>
<th width="60">Afficher courbe</th>
</tr>
</thead>
<tfoot>
<tr>
<th width="80">Poll ID</th>
<th width="120">Poll Name</th>
<th width="120">Poll Description</th>
<th width="120">poll publisher</th>
<th width="60">Edit</th>
<th width="60">Delete</th>
<th width="60">Voter</th>
<th width="60">Afficher Courbe</th>
</tr>
</tfoot>
<c:forEach items="${listpolls}" var="poll">
<tbody>
<tr>
<td>${poll.id_poll}</td>
<td>${poll.titre}</td>
<td>${poll.description}</td>
<td>${poll.emp_login}</td>
<td>Edit</td>
<td>Delete</td>
<td>Vote</td>
<td>Afficher courbe</td>
</tr>
</c:forEach>
</tbody>
</table>
Here is an picture of the table before i click on edit.
And now
As you can see css and javascipt code are both gone.
What am I doing wrong here? Any help is much appreciated.
Problem is the /poll/edit/... etc. in link's href. Even if redirected, browser still thinks you're in different directory from where relative paths to your styles & scripts won't work.
Specify base directory for all links on page:
<base href="http://www.domain.com/somebasedir/" />
Then regardless of the redirection, for example this stylesheet:
<link rel="stylesheet" type="text/css" href="path/style.css" />
should always be looked for in:
/somebasedir/path/style.css
Related
I want to display similar table like W3.
Code:
$('table_1').DataTable({
ajax:'ajax_table_1.php',
paging:false,
});
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table_1">
<caption>Delivery slots:</caption>
<tr>
<td></td>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
</tr>
<tr>
<th scope="row">Morning</th>
<td>Closed</td>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
</tr>
<tr>
<th scope="row">Evening</th>
<td>Open</td>
<td>Open</td>
<td>Closed</td>
<td>Closed</td>
<td>Closed</td>
</tr>
</table>
HTML shows my goal which I want to achieve.
How to set up my data array that it should look like to implemented table with 2 headers to fill all table data with ajax call?
You can simply render your columns in order to achieve that check here for the docs
a short snippet to show what you can do is:
"columnDefs": [
{
"createdCell": function (td, cellData, rowData, row, col) {
$(td).attr("scope", "row");
}
"targets": 0 //this is your column number, just change it if you need another column
}
]
I need to change background color for a group of columns using column id.The first two columns background would not need to change.How to achieve in Jquery?
This is I have tried so far.I have added my Complete script in this you can get more info about it.
var fromtime = obj[i].FromTime; // Here fromtime gives id of a column not index
var totime = obj[i].totime; // Here totime gives id of a column not index
$(row1).children('td').slice(fromtime,totime).not('td:eq(0)').not('td:eq(0)').css({ "background-color": workcolor });
Edit:
I have added my HTML Code
<table class="table table-striped" id="table1">
<thead>
<tr>
<th class="" id="profilepic">Image</th>
<th id="empName">Employee</th>
<th id="00">00:00</th>
<th id="01">01:00</th>
<th id="02">02:00</th>
<th id="03">03:00</th>
<th id="04">04:00</th>
<th id="05">05:00</th>
<th id="06">06:00</th>
<th id="07">07:00</th>
<th id="08">08:00</th>
<th id="09">09:00</th>
<th id="10">10:00</th>
<th id="11">11:00</th>
<th id="12">12:00</th>
<th id="13">13:00</th>
<th id="14">14:00</th>
<th id="15">15:00</th>
<th id="16">16:00</th>
<th id="17">17:00</th>
<th id="18">18:00</th>
<th id="19">19:00</th>
<th id="20">20:00</th>
<th id="21">21:00</th>
<th id="22">22:00</th>
<th id="23">23:00</th>
</tr>
</thead>
<tbody id="body1">
</tbody>
Complete script:
$(row1).children('td').not('td:eq(0)').not('td:eq(0)').css({ "background-color": workcolor });
I am appending a new row each time called "row1" that's cells background color needs to modified based on a "fromtime" to "ToTime" values.There is Children('td') td used means the whole row got colored.But I need the certain cells only.
your code have many other things that don't apply or doesn't seem relevant to the question, then, I making here a code that can help you with your exactly question (apply background to columns but not first and second ones).
I'm using a very basic logic, looping through all columns, starting at index 2 (cause you don't want the first 2 columns to have BG)
Maybe you won't use it exactly like I did below, but I'm sure that this can help and you may find a way to use it inside your code.
please, take a look at the snippet and tell me if you need more help here.
EDIT
If you need just some listed IDs to receive the background, maybe you can have or receive an array and then check to see if they are what you need. This will also change the foor loop, because now you don't need to start at 2, you can loop through all columns and will apply background just to the ones listed in the array, look below:
OPTION 1
loop through all columns (to ensure that you will find only columns, not any other element), then check the IDs.
$(document).ready(function(){
var arrayOfIDs = ["02", "03", "04", "07", "10", "15", "21"];
var myTable = $(".table-striped");
var myColumns = $(myTable.find("th"));
//loop through all columns
myColumns.each(function(){
var column = this;
//loop through all IDs you want to change
for (var i = 0; i < arrayOfIDs.length; i++){
if (column.id == arrayOfIDs[i]){
column.style.background = "rgba(50,50,200,0.85)";
}
}
});
});
th{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="table1">
<thead>
<tr>
<th class="" id="profilepic">Image</th>
<th id="empName">Employee</th>
<th id="00">00:00</th>
<th id="01">01:00</th>
<th id="02">02:00</th>
<th id="03">03:00</th>
<th id="04">04:00</th>
<th id="05">05:00</th>
<th id="06">06:00</th>
<th id="07">07:00</th>
<th id="08">08:00</th>
<th id="09">09:00</th>
<th id="10">10:00</th>
<th id="11">11:00</th>
<th id="12">12:00</th>
<th id="13">13:00</th>
<th id="14">14:00</th>
<th id="15">15:00</th>
<th id="16">16:00</th>
<th id="17">17:00</th>
<th id="18">18:00</th>
<th id="19">19:00</th>
<th id="20">20:00</th>
<th id="21">21:00</th>
<th id="22">22:00</th>
<th id="23">23:00</th>
</tr>
</thead>
<tbody id="body1">
</tbody>
OPTION 2
Just loop through IDs to find the columns directly and then apply the BG.
--EDIT 2--> Also, if you need to modify the code on the run, create a function that changes background, this way, every time you need to change the background, call this function, passing the IDs you want and the color you want... as below:
$(document).ready(function(){
//function that loop through all IDs you want to change
var paintBackground = function(arrayOfIds, colorIWant){
for (var i = 0; i < arrayOfIds.length; i++){
var myId = arrayOfIds[i];
var column = $("#"+myId);
column.css('background', colorIWant);
}
}
var firstArrayToPaint = ["00", "01", "02", "06", "07", "08"];
paintBackground(firstArrayToPaint, "orange");
//Added a timeout just to better examplify, don't use the timeout if you don't need it
setTimeout(function(){
//add new row
var myTable = $('.table thead');
var row1 = document.createElement("tr");
myTable[0].append(row1);
//specifying new columns to this row
var qtdOfNewColumns = 6;
var secondArrayToPaint = ["17", "18", "19", "20", "21", "22"];
for (var i = 0; i < qtdOfNewColumns; i++){
var column = document.createElement("th");
column.id = secondArrayToPaint[i];
column.textContent = secondArrayToPaint[i]+":00";
row1.append(column); //adding the columns to the row
}
paintBackground(secondArrayToPaint, "yellow");
},1500);
});
th{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="table1">
<thead>
<tr>
<th class="" id="profilepic">Image</th>
<th id="empName">Employee</th>
<th id="00">00:00</th>
<th id="01">01:00</th>
<th id="02">02:00</th>
<th id="03">03:00</th>
<th id="04">04:00</th>
<th id="05">05:00</th>
<th id="06">06:00</th>
<th id="07">07:00</th>
<th id="08">08:00</th>
<th id="09">09:00</th>
<th id="10">10:00</th>
</tr>
</thead>
<tbody id="body1">
</tbody>
I have one table which has 7 columns. Below is the HTML code:
<table id="multiple-account-table" cellpadding="0" cellspacing="0">
<thead>
<tr class="border-class">
<th>Employee Name</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
Now My requirement is, when I click on table header, that particular border should have thick border at the bottom. And when user will click on some other table header then that border should remove from previous table header and apply on currently clicked table header. Something like below image:
Click here to see image
I wrote this jQuery code:
$(document).on('click', 'thead', function () {
$(this).addClass('sort-border');
});
Below is my CSS class for sort-border:
.sort-border {
border-bottom: 4px solid black;
}
It works fine. But when I click on some other table header then previously clicked table header's border doesnt remove. Any suggestion?
If you first try to remove the class on any header, that should have the class, you will only have one header with the sort-border class.
$(document).on('click', 'th', function () {
$('th.sort-border').removeClass('sort-border');
$(this).addClass('sort-border');
});
Also, the thead would give the border to the whole line, if you select the th, it would only be that cell with the border.
$(document).on('click', 'thead', function () {
$('thead').removeClass('sort-border');
$(this).addClass('sort-border');
});
.sort-border {
background: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="multiple-account-table" cellpadding="0" cellspacing="0">
<thead>
<tr class="border-class">
<th>Employee Name</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
<table id="multiple-account-table" cellpadding="0" cellspacing="0">
<thead>
<tr class="border-class">
<th>Employee Name</th>
<th>Account Number</th>
<th>Account Name</th>
<th>Alias</th>
<th>Due Date</th>
<th>Total Due</th>
<th>Payment Amount</th>
</tr>
</thead>
</table>
do something like this:
$(document).ready(function(){
$('.border-class th').on('click'.function(){
$('.border-class th').removeClass('sort-border');
$(this).addClass('sort-border');
});
});
thead is parent of the column header(th) you want to modify, so you need to be specific on it.
"thead th"
Your JavaScript should now be like,
$(document).on('click', 'thead th', function () {
$(this).addClass('sort-border').siblings().removeClass('sort-border');
});
Adding the class to the column, then removing it from his siblings(other headers)
jsFiddle DEMO
i have this dinamic data html table:
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable">
<thead>
<tr>
<th><input type="checkbox" name="checkall"/></th>
<th width="Auto">Adresa Unica</th>
<th width="Auto">ID</th>
<th width="Auto">Status</th>
<th width="Auto">Time</th>
<th width="Auto">Date</th>
<th width="Auto">Interval I</th>
<th width="Auto">Duty</th>
<th width="Auto">Interval II</th>
<th width="Auto">Duty</th>
<th width="Auto">Interval III</th>
<th width="Auto">Duty</th>
<th width="Auto">Interval IV</th>
<th width="Auto">Duty</th>
<th width="Auto">Calendar</th>
<th width="Auto">Model</th>
<th width="Auto">Installation Address</th>
</tr>
</thead>
<tbody>
<?php
while($griddata=mysql_fetch_assoc($records))
{
echo"<tr>";
echo "<td><input type='checkbox' class='ck'/></td>";
echo"<td class='mac'>".$griddata{'adresaUnica'}."</td>";
echo"<td>".$griddata{'id'}."</td>";
echo"<td class='a_i'>".$griddata{'status'}."</td>";
echo"<td>".$griddata{'time'}."</td>";
echo"<td>".$griddata{'date'}."</td>";
echo"<td>".$griddata{'interval1'}."</td>";
echo"<td class='duty'>".$griddata{'duty1'}."</td>";
echo"<td >".$griddata{'interval2'}."</td>";
echo"<td class='duty'>".$griddata{'duty2'}."</td>";
echo"<td>".$griddata{'interval3'}."</td>";
echo"<td class='duty'>".$griddata{'duty3'}."</td>";
echo"<td>".$griddata{'interval4'}."</td>";
echo"<td class='duty'>".$griddata{'duty4'}."</td>";
echo"<td>".$griddata{'calendar'}."</td>";
echo"<td>".$griddata{'model'}."</td>";
echo"<td>".$griddata{'adresainstalare'}."</td>";
echo"</tr>";
}
?>
</tbody>
</table>
and this code .js that i use to get an alert of all the values from the td's with the class "mac"
$( document).ready(function(e)
{
$('#tSortable td.mac').each(function() {
var $this=$(this);
var value= $this.text();
alert(value);
});
});
what i want is an example on how to get the value of that cell based on the checkbox that i select .?
You can use jQuery's change function. The function is triggered when the state of the check boxes changes. Here is some example code:
// Triggers when a checkbox changes state
$('#tSortable td.mac').change(function() {
// Checks if this object is selected
if($(this).is(":checked")) {
alert($(this).text());
// You can also get a list of all siblings (The other TDs)
$(this).siblings();
}
}
Use the change event, then a conditional to see if it is checked: DEMO
$('body').on('change', 'input[type="checkbox"]', function(e){
if(this.checked) alert($(this).parent().next().text());
});
If you use dynamic elements remember to use event delegation by utilizing the .on() method.
$('.ck').change(function() {
// I deliberately using parents in case that some day you will reorder the columns
var txt = $(this).parents('tr').first().find('.mac').text();
$('#result').text('The text is: ' + txt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" width="100%" class="table" id="tSortable">
<thead>
<tr>
<th><input type="checkbox" name="checkall" /></th>
<th>Adresa Unica</th>
<th>ID</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
<th>Interval I</th>
<th>Duty</th>
<th>Interval II</th>
<th>Duty</th>
<th>Interval III</th>
<th>Duty</th>
<th>Interval IV</th>
<th>Duty</th>
<th>Calendar</th>
<th>Model</th>
<th>Installation Address</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkOne" class="ck" /></td>
<td class="mac">Adresa Unica____1</td>
<td>ID____1</td>
<td>Status____1</td>
<td>Time____1</td>
<td>Date____1</td>
<td>Interval I____1</td>
<td>Duty____1</td>
<td>Interval II____1</td>
<td>Duty____1</td>
<td>Interval III____1</td>
<td>Duty____1</td>
<td>Interval IV____1</td>
<td>Duty____1</td>
<td>Calendar____1</td>
<td>Model____1</td>
<td>Installation Address____1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne" class="ck" /></td>
<td class="mac">Adresa Unica____2</td>
<td>ID____2</td>
<td>Status____2</td>
<td>Time____2</td>
<td>Date____2</td>
<td>Interval I____2</td>
<td>Duty____2</td>
<td>Interval II____2</td>
<td>Duty____2</td>
<td>Interval III____2</td>
<td>Duty____2</td>
<td>Interval IV____2</td>
<td>Duty____2</td>
<td>Calendar____2</td>
<td>Model____2</td>
<td>Installation Address____2</td>
</tr>
</tbody>
</table>
<hr />
<div id="result"></div>
I have created a webpage on my website which gets content updates every 1-60 mins (random/varies) and at first I made the webpage auto refresh using:
<meta http-equiv="refresh" content="30" >
However, this is very annoying when scrolling and just generally using the webpage.
I thought about using an iframe on a separate webpage like so:
<iframe src="output.html" width="2500" height="10000" frameborder="0" allowfullscreen></iframe>
However, again this throws up more problems with it not refreshing (if I remove the meta tags) and my original webpage height varies depending on how much data is on the page.
I'm looking for some advice / code help to get a way to only refresh the main webpage if the content is updated. (It doesn't matter if a suggested solution is in HTML, PHP or any other language)
Any suggestions or constructive comments would be greatly appreciated.
Thanks in advance
- Hyflex
EDIT:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5" >
<title>data data data data data</title>
<style type="text/css">
<!--
#import url("style.css");
-->
</style>
</head>
<body>
<table id="gradle" summary="main">
<thead>
<tr>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data Rank</th>
<th scope="col">data Odds</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">AV10</th>
<th scope="col">data Rank</th>
<th scope="col">data</th>
<th scope="col">data Rank</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">Age</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data 14 Day</th>
<th scope="col">data CSR</th>
<th scope="col">data TSR</th>
<th scope="col">data</th>
<th scope="col">data 14 Day</th>
<th scope="col">data CSR</th>
<th scope="col">data TSR</th>
<th scope="col">data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
</tr>
</thead>
<tbody>
<tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td> </td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>£45552.43</td><td></td><td>data</td><td>data</td><tr>
</tbody>
</table>
</body>
</html>
Closest I've got thanks to a post below is:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
update_content()
$(document).ready(function (e)
{
var refresher = setInterval("update_content();", 250);
})
function update_content()
{
$.ajax(
{
type: "GET",
url: "output.html",
timeout: 10000,
cache: false,
})
.done(function (page_html)
{
var newDoc = document.documentElement.innerHTML;
if (page_html != newDoc)
{
alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
}
});
}
</script>
http://jsfiddle.net/Ask3C/
You will have to replace the path to the one of your page. Should rewrite the document every 30 seconds. It is a bit of a hack approach but if you are still using Meta Refresh - it is light years better. Give it a go. The script for jQuery library is just pulling from Google repository.
$(document).ready(function(e) {
var refresher = setInterval("update_content();",30000); // 30 seconds
})
function update_content(){
$.ajax({
type: "GET",
url: "index.php", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
cache: false, // be sure not to cache results
})
.done(function( page_html ) {
alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
});
}
Your problem is very common. Have you explored how twitter like feed update is working?. You have to do as follows
var interval = function() {
setTimeout(function() {
$.ajax({
// Ajax options goes here
success : function(data) {
// Process Data
// Generate HTML
// Insert Generated HTML whereever you want in document
interval() //Initiate next fetch
}
})
}, 1000 // Interval time
);
};
Note: Here I am using jQuery ajax.
Hopefully this will give an idea.
A good solution would be to use javascript and make ajax calls at set intervals. Then update whatever element with new content from your response. This way you won't have to deal with refreshes which would be very annoying.