Can someone tell me why this is not working
<script>
$(document).ready(function() {
$("#driver").ready(function(event){
$('#stage').load('index.php');
});
});
</script>
What I have on the index.php is a table with link, the problem is that is really hard to click on one of those link, I have to click like 10 times to make it to work, any ideas why?
Index.php
<script>
$(document).ready(function() {
$('#stage').load('index.php');
});
</script>
<table width="200" border="1">
<tr>
<td>Name </td>
<td>URL Address</td>
</tr>
<tr>
<td>Googe</td>
<td>Google</td>
</tr>
</table>
I include the same function on my index.php, the idea is if a make a change on the index page, and reflect the change on the test page.
The ready event is only triggered on the document, remove the $("#driver").ready( part.
$(document).ready(function() {
$('#stage').load('index.php');
});
Related
I have different view (grid and list). I am using datatable as list view but the datatable function is not working. I am using ajax to refresh the content in div tag.
$('#grid').click(function(){
$('#searchBar').show();
$.ajax({
type:'GET',
url:'/refreshList',
dataType: 'HTML',
success:function(html){
$('#body').html(html);
},
error:function(){
}
});
});
In my another list view file
<table class="table display nowrap" cellspacing="0" width="100%" id="main-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#main-table').DataTable({
"responsive": true
});
});
</script>
I will refresh the content of div replace by this table, but it shows without datatable function. ps.written in 2 different file.
this is driving me mad and hope someone might be able to help.
I have this React.Component:
var Vehicle = React.createClass({
ondragend: function(e) {
e.preventDefault();
// Logic here
console.log('onDragOver');
},
ondragstart: function(e){
e.preventDefault();
console.log('ondragstart');
},
render: function() {
that = this
var loads = this.props.truck.map(function(load , i){
load.truckid = i
return (
<tr key={i} draggable="true" dragstart={that.ondragstart} dragend={that.ondragend}>
<td>
{load.load_number}
</td>
<td>
{load.stops[0].location_name}
</td>
<td>
{load.stops[1].location_name}
</td>
</tr>
)
})
return (
<div className="panel panel-primary" draggable="true">
<VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}></VehiclePanelHeading>
<div className="panel-body" >
<table className="table">
<tbody>
{loads}
</tbody>
</table>
</div>
</div>
)
}
});
As you can see, I am trying to make the s draggable. Unfortunetly, this won't work, even if I use the Chrome dev tools to manually add this into the html in the browser.
I have tried removing my link to Bootstrap incase this is something to do with the CSS rules, and also tried to render just a html table with no dynamic values.
I can't see how the code in this fiddle:
jsFiddle
Works by setting the draggable=true in the render function, but mine won't.
Thanks in advance for any help.
Edit
Added the dropEnd/Start handlers but no change.
Curiously, if I add draggable=true to the div.panel container, this is draggable whilst the containing s remain not.
Update
If I create a quick .html page with this table:
<table className="table">
<thead>
<tr>
<td>Name</td>
<td>Tangyness</td>
</tr>
</thead>
<tbody>
<tr draggable="true">
<td>Apple</td>
<td>4</td>
</tr>
<tr draggable="true">
<td>Orange</td>
<td>7</td>
</tr>
</tbody>
</table>
Then the desired draggble = true works on the table rows. However, if I paste this into the React render function:
return (
<div className="panel panel-primary" >
<VehiclePanelHeading vehicleNbr={this.props.vehicleNbr}></VehiclePanelHeading>
<div className="panel-body" >
<table className="table">
<thead>
<tr>
<td>Name</td>
<td>Tangyness</td>
</tr>
</thead>
<tbody>
<tr draggable="true">
<td>Apple</td>
<td>4</td>
</tr>
<tr draggable="true">
<td>Orange</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
)
Then suddenly, the 'draggability' is lost.
It should work, but you probably want to implement onDragOver event(s) too. Otherwise it will look like it doesn't work because you can drag your component, but don't have any legal place to drop it. onDragOver lets you specify if an element accepts dropping and which elements it accepts.
As you can see in the fiddle you linked there are onDragOver events which look something like this
onDragOver: function(e) {
e.preventDefault();
// Logic here
}
Calling e.preventDefault(); tells the browser that dropping is possible here. You can put the onDragOver event on any of your parent elements, or on the tr itself. You can read more about drop targets here. If you remove the onDragOver event from the jsFiddle you linked the code in the fiddle stops functioning too.
If you implement onDragOver you will be able to implement an onDrop event on your table that handles dropped tr elements.
Here is your code with the events implemented:
var Vehicle = React.createClass({
onDragOver: function(e) {
e.preventDefault();
// Logic here
console.log('onDragOver');
},
onDragStart: function(e){
e.dataTransfer.setData('id', 'setTheId');
console.log('onDragStart');
},
onDrop: function(e) {
console.log('onDrop');
var id = event.dataTransfer.getData('id');
console.log('Dropped with id:', id);
},
render: function() {
that = this;
var loads = this.props.truck.map(function(load , i){
load.truckid = i
return (
<tr key={i} draggable="true" onDragOver={that.onDragOver} onDragStart={that.onDragStart}>
<td>
{load.load_number}
</td>
<td>
{load.stops[0].location_name}
</td>
<td>
{load.stops[1].location_name}
</td>
</tr>
)
})
return (
<div>
<div className="panel-body" >
<table className="table" onDrop={this.onDrop}>
<tbody>
{loads}
</tbody>
</table>
</div>
</div>
)
}
});
Here is a jsFiddle of this: http://jsfiddle.net/kb3gN/10761/
The reason that the item doesn't seem to drag is you have e.preventDefault(); inside onDragStart function, which prevents it from showing the default dragging movement. Just remove that line, so it would look like this and it should work:
var Vehicle = React.createClass({
...
onDragStart: function(e){
// REMOVED THIS LINE
//e.preventDefault();
console.log('ondragstart');
},
...
I am creating a print option on a html table.
this table has hundreds of rows. Data are fetching from php and AJAX.
After getting this data i am creating a print option like below.
function PrintElem(elem){
Popup($(elem).html());
}//
function Popup(data)
{
var mywindow = window.open('', 'my div', 'width=100%');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="<?php echo base_url(); ?>/resources/css/bootstrap.css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close(); mywindow.focus(); //newwindow.focus();
mywindow.print(); mywindow.close();
return true;
}//
<span class="trial_balance_ajax" id="print_section">
<!---- Ajax table data loads here----->
</span>
Now I am trying to print table header column in each page of printed document.
But In this case Data header only shows in first page then data overflows in others page...
I want a Default Column header in Each page
please help
What does your generated table look like? My testing indicates that if you create a table with explicit <thead> and <tbody> the header is automatically set for you:
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
<th>Baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
<!-- Many rows... -->
<tr>
<td>!!!</td>
<td>!!!</td>
<td>!!!</td>
</tr>
</tbody>
</table>
In other words, the above seems to work as requested.
Edit: The requested behaviour seems to occur automatically in Firefox, but is sadly not possible to achieve without compromises in other browsers. See this related question for suggestions.
Why dont you divide rows so you can create another table having header in it.
How to set values for the below div block (setting values in '?' placeholder).
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
? </div>
</td> </tr>
</table>
I have tried with following scenario, but not working
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Your script is working perfectly, it's just that you need to be sure that you are placing the script after the HTML is rendered, so first you need to print the tables out and than use the script tag, because if you place the script before the id="txt3" has rendered, it won't change anything as onload the script didn't find any, so this should be the order...
<table>
<tr>
<td class="tfArrive " valign="top">
<div class="tfArrAp" id="txt3">
?
</div>
</td>
</tr>
</table>
<script type="text/javascript">
document.getElementById('txt3').innerHTML = "TEST";
</script>
Side Note : If you are using HTML5, you don't need
type="text/javascript" anymore, as now, default is JavaScript
$(document).ready(function(){
$('#txt3').html("New Text");
});
Be sure your page is loaded before you manipulate it:
<script type="text/javascript">
window.onload = function() {
document.getElementById('txt3').innerHTML = "TEST";
}
</script>
<form action='./index.php' method='post' class='form'>
<table>
<tr>
<td>$error</td>
</tr>
<tr>
<td>Username:</td>
<td><input type='text' name='user' /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type='password' name='password' /></td>
</tr>
<tr>
<td></td>
<td><input type='image' src='./images/loginbtn.jpg' name='loginbtn' value='Login' alt='Submit Form'/></td>
</tr>
</table>
</form>
The above code is code from my (work in progress) website. I'm using the "image" input type as it allows me to use an image as a button. The thing I'm having trouble with here, is putting in some code that allows me to put another image in for when I mouse over it. This code is enclosed in a PHP tag and set to the variable "$form". This is so I can echo it out and run some other PHP code with it easily.
Is there any CSS that I could use to put in another picture for when I mouse over the button? Am I maybe making this more complicated than it seems?
For native javascript you can use onmouseover as per this example:
http://jsfiddle.net/42E99/
apologies for the long image urls, hope it doesn't confuse.
EDIT
CSS: http://jsfiddle.net/dZ2qL/ using hover to change background image.
2nd EDIT
http://jsfiddle.net/dZ2qL/3/
Use a <div> instead of <input> and also added some lines to the css.
background-color:transparent;
border: 0px solid;
Take a look at this >>fiddle<<
Here is a short jquery code demo:
First you need to include jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
then you include this piece of code:
<script>
$(document).ready(function() {
$("#test").hover(
function () {
$(this).attr('src','http://www.seobook.com/images/smallfish.jpg');
},
function () {
$(this).attr('src','http://www.google.com/images/srpr/logo4w.png');
}
);
});
</script>
and in your html, you set id or class to your element (it must be the same with the one in the sample script, value is test in my example.
<input id="test" type='image' src='http://www.google.com/images/srpr/logo4w.png' name='loginbtn' value='Login' alt='Submit Form'/>