Consider:
File script.js,
function AdaugaComboBox(id, name){
var select_tag = document.getElementById(id);
select_tag.innerHTML += "<select name='"+name+"'><option value='0'>Selecteaza autor</option></select><br/>";
return true;
}
and file index.html:
<html>
<head>
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button"
value="Adauga autor"
onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
The scope of the function is to add a combo box to the specific TD in the TABLE. But when I press the button this error appears:
AdaugaComboBox is not defined
Why?
Update:
!!! I've fixed it. The problem was with another function.
If the script is included in your HTML, then it's possible that you don't have the path correct based on the location of the HTML file. Check with Firefox/Firebug to make sure that the JS file is being downloaded correctly.
Your HTML should be:
<html>
<head>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr>
<td id="autori">...</td>
</tr>
<tr>
<td>
<input type="button" value="Adauga autor" onclick="AdaugaComboBox('autori', 'autori[]')"/>
</td>
</tr>
</table>
</body>
</html>
You have to put a reference to the script.js file.
<script type="text/javascript" src="script.js"></script>
Related
I have created a random table and I've been trying to export it as an excel, csv, pdf, and to be able to copy and print the table. I'm able to do every single thing except export to excel and I'm not sure what's the file that I forgot to add. Here's my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dataTables.js" type="text/javascript"></script>
<script src="dataTables.buttons.js" type="text/javascript"></script>
<script src="buttons.flash.min.js" type="text/javascript"></script>
<script src="buttons.html5.min.js" type="text/javascript"></script>
<script src="buttons.print.min.js" type="text/javascript"></script>
<script src="flashExport.swf" type="text/javascript"></script>
<script src="dataTables.buttons.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
</head>
<body>
<table id="demoTable">
<thead>
<tr>
<th> Name</th>
<th> Program</th>
<th> Age</th>
<th> Homecity</th>
</tr>
</thead>
<tbody>
<tr>
<td> A</td>
<td> Computer Engineering</td>
<td> 20 Years old</td>
<td> Mississauga</td>
</tr>
<tr>
<td> B</td>
<td> Computer Engineering</td>
<td> 19 Years old</td>
<td> Vancouver</td>
</tr>
<tr>
<td> C</td>
<td> Computer Engineering</td>
<td> 19 Years old</td>
<td> Vancouver</td>
</tr>
<tr>
<td> D</td>
<td> Computer Engineering</td>
<td> 19 years old</td>
<td> Ottawa</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(function() {
$("#demoTable").DataTable({
dom: 'Bfrtip',
buttons: ['csv', 'excel', 'pdf', 'copy', 'print']
});
})
</script>
Thank you in advance for helping me.
It's possible that the jQuery script tag outside of the <html> is causing issues with other resources loading. You also want to make sure the <script> containing the DataTable() initialization/configuration is inside the <body> tag or loaded as separate file within the <body> or <head>. I'd make sure by inspecting source on your instance that you can see each and every file being successfully loaded from your local file system/server.
Also, I'd re-evaluate the <script> resources with file type .swf, the working example is only using .js resources. If you need to include .swf files you would likely need to embed them. See this question.
I've created a working example here including exporting to excel.
Hopefully that helps!
i need those both js file, one for adding row, and another for tablesort and pager.
my problem neither script works, if they are both called.
this is my code so far :
<!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" xml:lang="en-us">
<head>
<title>jQuery plugin: Tablesorter 2.0</title>
<link rel="stylesheet" href="./css/style.css" type="text/css" />
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script>
<script >
$(document).ready(function()
{
$(document).on("click","#tdAdd",function(){
var newRow = $("<tr>");
var cols="";
cols+='<td><input type="button" id="tdAdd" value="+"/></td>';
cols+='<td><input type="button" class="tdDelete" value="-"/></td>';
cols+='<td><input type="text" value="enter data here"/></td>';
newRow.append(cols);
newRow.insertAfter($(this).closest("tr"));
});
});
</script>
</head>
<body>
<table id="insured_list" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Age</th>
<th>Premium Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mendes</td>
<td>Domnic</td>
<td>domnic#gmail.com</td>
<td>29</td>
<td>5500</td>
</tr>
<tr>
<td>
<input type="button" id="tdAdd" value="+"/>
</td>
<td>
<input type="button" class="tdDelete" value="-"/>
</td>
<td>
<input type="text" name="name" value="anything"/>
</td>
</tr>
</tbody>
</table>
<div id="pager" class="pager">
<form>
<img src="images/first.png" class="first"/>
<img src="images/prev.png" class="prev"/>
<input type="text" class="pagedisplay"/>
<img src="images/next.png" class="next"/>
<img src="images/last.png" class="last"/>
<select class="pagesize">
<option value="">LIMIT</option>
<option value="2">2 per page</option>
<option value="5">5 per page</option>
<option value="10">10 per page</option>
</select>
</form>
</div>
<script defer="defer">
$(document).ready(function()
{
$("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
}
);
</script>
</body>
</html>
if i add this,for my defer script. neither script wont work. :
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>
EDIT :
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script type="text/javascript">
var j1 = $.noConflict(true);
</script>
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>
<script type="text/javascript">
var j2 = $.noConflict(true);
</script>
<script type="text/javascript" src="./js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="./js/jquery.tablesorter.pager.js"></script>
<script >
$(document).ready(function()
{
j2("#insured_list")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager")});
j1("#tdAdd").click(function(){
X();
});
});
function X(){
var newRow = $("<tr>");
var cols="";
cols+='<td><input type="button" id="tdAdd" value="+"/></td>';
cols+='<td><input type="button" class="tdDelete" value="-"/></td>';
cols+='<td><input type="text" value="enter data here"/></td>';
newRow.append(cols);
newRow.insertAfter($(this).closest("tr"));
}
This is the current script i tried and when i try to run it firebug says :
TypeError: $ is undefined
$.extend({
jquery....rter.js (line 89) // jquery.tablesorter.js
TypeError: $ is undefined
$.extend((
jquery....ager.js (line 2) // jquery.tablesorter.pager.js
TypeError: $ is not a function
$(document).ready(function()
tableso...2).html (line 19) // tablesorter(2).html
I already solve this problem before,
Well, my fault, but when i redownload the jquery-1.3.1.min.js file, both js file is working fine. So, i advice
to double check your sources and its file size when you attempt to use plug in and encounter the same problem.
You cannot load two versions of jQuery without assigning each one different symbols using syntax like this:
var myJQ = jQuery.noConflict();
on the first one before the second one is loaded and then using only the myJQ variable to refer to the first one (see answer here).
Even better would be to make your two plugins both work with the same version of jQuery so you can load just one and not have to do this extra gymnastics.
If the "adding row stuff" you refer to is just the jQuery code you have in your question, then that should work just fine with 1.10.2 so you should be able to use only that version. I'd suggest you just get rid of the 1.3.1 version of jQuery and use only the 1.10.2 version. It should meet both your needs.
FYI, I do some one error in your code. You are trying to add duplicate id="tdAdd" <input> tags which you should not do. If you want to have more than one element like that, then use a class, not an id.
Use Like
Use <script>jQuery.noConflict();</script> above one of your jquery and replace the $ with jQuery
Try With
<script type="text/javascript" src="./js/jquery-1.10.2.js"></script>
<script>jQuery.noConflict();</script>
<script type="text/javascript" src="./js/jquery-1.3.1.min.js"></script>//Now replace this jQuery with $
if I have a simple html table:
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">423</td>
</tr>
</table>
how do I extract the integer from the td so that I can act on it?
the following code returns undefined:
function changeCount(){
var count = $("td.count.test").val();
alert(count);
}
changeCount();
complete html:
<html>
<head>
<title>Creation of array object in javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script language="javascript" >
function changeCount(){
var count = $("td.count.test").text();
console.log(count);
}
changeCount();
</script>
<style>
td{width:200px;text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">423</td>
</tr>
</table>
</body>
</html>
Not .val() for a <td>, but .text().
function changeCount(){
var count = $("td.count.test").text();
alert(count);
}
Note that if there are multiple such <td> elements, that'll return the contents of the first one in the DOM.
The .val() method is for getting the "value" attribute of <input>, <select>, and <textarea> elements. In either case, the DOM access will give you a string. If you need to do computation with the value, then it should be coerced to be a number via parseInt() or one of several other tricks.
The problem is you are trying to access stuff through JavaScript which is not available in the DOM tree at the time your function is executed. You need to make sure changeCount() is fired after the whole DOM tree has been loaded or at least after the element that is required by your function is part of the document DOM tree.
<html>
<head>
<title>Creation of array object in javascript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script language="javascript" >
function changeCount(){
var count = $("td.count.test").text();
console.log(count);
}
$(document).ready(function(){
changeCount();
});
</script>
<style>
td{width:200px;text-align:center;}
</style>
</head>
<body>
<table>
<tr>
<th>header</th>
</tr>
<tr>
<td class="count test">four twenty three</td>
</tr>
</table>
</body>
</html>
I'm using an iframe as target for one of my forms. I need to transform the html of the iframe once the form is submitted. I tried using the onload event, but when the event is fired, my iframe does not have the html resulting from my form yet (right on the debugger breakpoint):
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="javascript">
function loaded(){
var lResponse = document.getElementById('results');
debugger;
}
</script>
<div>
<table>
<tr>
<td width="100%">
<form id="serverForm" target="results" <web:taskProcessorName attribute="action" type="admin"/>>
<div>
<table>
<tr>
<td>
<div name="resultsDiv" id="resultsDiv" style="display: none">
<iframe name="results" id="results" onload="loaded" frameborder="0"></iframe>
</div>
</td>
</tr>
</table>
</div>
<!-- Hidden Inputs -->
<input type="hidden" name="server" value="..." />
</form>
</td>
</tr>
</table>
</div>
<script language="javascript">
document.getElementById('serverForm').submit();
document.getElementById('resultsDiv').style.display='block';
</script>
</body>
</html>
No 3rd party library - pure javascript.
I use the following instead and that seems to catch the event when the iframe html is set already:
function lLoadFunc(){
var lResponse = document.getElementById('results');
}
if(lResponse.addEventListener)
lResponse.addEventListener('load', lLoadFunc, true);
I my application "When a button is clicked it should create a new text field in the table". So i have done like this and its not working as well. So what could be the problem in the following snippet.
<html>
<script type="text/javascript" language="javascript">
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"textfield\"";
newtd.innerHtml=output;
newtr.appendChild(newtd);
function create_row()
{
document.getElementById("table1").appendChild(newtr);
}
</script>
<body>
<table id="table1">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</table>
</body>
</html>
I am using IE7.
In order to make this work in IE you should create a TBODY first then append the TRs in TBODY. If you don't do this IE cannot render the table content, HTML part will be created succesffully but it will not be seen on the page.
So you should modify your script to append TRs into the TBODY
Few remarks about your code:
You need to properly close tags: var output="<input type=\"textfield\"" is not valid
There's no input type="textfield" defined
The property to set the html of a given DOM element is called innerHTML and not innerHtml
You need to create a new tr element every time the button is clicked, so this should be inside the create_row function
You have a typo in your HTML: <input type-"textfield" name="tfield">. This should be changed to <input type="text" name="tfield" />
You are missing a head section in your document
I've tried cleaning your code a bit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('table1').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</table>
</body>
</html>
UPDATE:
As pointed out by Guffa and Serkan answers in IE7 a tbody section needs to be used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('tablebody').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tbody id="tablebody">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
You are missing a head tag.
The script should be in the head tag.
The html code for the input element is missing a closing bracket.
The type "textfield" does not exist.
The code only works once as you create the elements outside the function.
The method is innerHTML, not innerHtml.
You have to add the row to the tbody element, not the table itself.
I have tested this in Firefox 3 and IE 8 and it works:
<html>
<head>
<script type="text/javascript">
function create_row() {
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"text\">";
newtd.innerHTML=output;
newtr.appendChild(newtd);
document.getElementById("table1body").appendChild(newtr);
}
</script>
</head>
<body>
<table>
<tbody id="table1body">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</tbody>
</table>
</body>
</html>