Good day, What I'm trying to do is to create a html table in jsp and modify the table with JQuery script(i reused a old, working script). The problem is i have never used JQuery nor web programming before but i have managed to compile a working version of the jsp which can generate a table but i couldn't make the JQuery script to execute.
My Simplified JSP :
<HEAD>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
</HEAD>
<body>
<%
out.println("<table>");
out.println("<tr>");
out.println("<td>"+val_feature+"</td>");
out.println("<td>"+val_project+"</td>");
out.println("<td>"+val_suiteID+"</td>");
out.println("<td>"+val_suiteTitle+"</td>");
..............
..............
..............
out.println("</tr>");
out.println("</table>");
%>
<script type="text/javascript">
console.clear();
var table = $("table");
var rows = table.find($("tr"));
var colsLength = $(rows[0]).find($("td")).length;
var removeLater = new Array();
for(var i=0; i<colsLength; i++){
var startIndex = 0;
var lastIndex = 0;
var startText = $($(rows[0]).find("td")[i]).text();
for(var j=1; j<rows.length; j++){
var cRow =$(rows[j]);
var cCol = $(cRow.find("td")[i]);
var currentText = cCol.text();
if(currentText==startText){
cCol.css("background","gray");
console.log(cCol);
removeLater.push(cCol);
lastIndex=j;
}else{
var spanLength = lastIndex-startIndex;
if(spanLength>=1){
console.log(lastIndex+" - "+startIndex)
//console.log($($(rows[startIndex]).find("td")[i]))
$($(rows[startIndex]).find("td")[i]).attr("rowspan",spanLength+1);
}
lastIndex = j;
startIndex = j;
startText = currentText;
}
}
var spanLength = lastIndex-startIndex;
if(spanLength>=1){
console.log(lastIndex+" - "+startIndex)
//console.log($($(rows[startIndex]).find("td")[i]))
$($(rows[startIndex]).find("td")[i]).attr("rowspan",spanLength+1);
}
}
for(var i in removeLater){
$(removeLater[i]).remove();
}
</script>
</body>
When i execute the page the table is not modified by the JQuery and IE keeps throwing error 'console' undefined. I don't know if these problem related but when i remove the console.clear(), it still doesn't execute the script and throw 'Object is expected' error at 2nd line of the script var table = $("table");
Thanks in advance. Any suggestions would be much appreciated.
Related
Why does this error happen when it try to use jquery? This code was working before but I don't even know what did I do for this error to happen. I tried to search about it and nothing I looked up makes sense or it's about this jsdom or whatever that I don't use. Exception is thrown on the 1st line in the try catch. That's the only error I could get from the browser debugger:
function DisplayName() {
if (Page_ClientValidate()) {
try {
$get("lblNameShow").html = $get("<%= txtNome.ClientID %>").value;
$get("lblDataAdmissaoShow").innerHTML = document.getElementById("datepicker").value;
var ddlD = document.getElementById("<%= ddlDepartamento.ClientID%>");
var strDDLDepart = ddlD.options[ddlD.selectedIndex].text;
$get("lblDepartamentoShow").innerHTML = strDDLDepart;
var ddlF = document.getElementById("<%= ddlFuncao.ClientID%>");
var strDDLFunc = ddlF.options[ddlF.selectedIndex].text;
$get("lblFuncaoShow").innerHTML = strDDLFunc;
//get valor radio button
var rstTel = $('#<%=rblTelemovel.ClientID %> input[type=radio]:checked').val();
if (rstTel == 0)
$get("lblTelemovelShow").innerHTML = "Não"
else
$get("lblTelemovelShow").innerHTML = "Sim"
var message = "";
var checkBoxList = document.getElementById("<%=cblAppAlternativas.ClientID%>");
var checkBoxes = checkBoxList.getElementsByTagName("INPUT");
for (var i = 0; i < checkBoxes.length; i++) {
if (checkBoxes[i].checked) {
var value = checkBoxes[i].value;
var text = checkBoxes[i].parentNode.getElementsByTagName("LABEL")[0].innerHTML;
message += value + "-" + text + ",";
}
}
//alert(message);
$get("lblAcessoShow").innerHTML = message;
$get("lblObShow").innerHTML = $get("<%= txtObservacoes.ClientID %>").value;
} catch (err) {
$get("demo").innerHTML = err.message;
}
$('#NewColabModal').modal('show')
}
return false;
}
EDIT
The code works if I remove the get from the jquery selector, but the strange thing is the code was working before. I can't find any info about using $get in jquery to select elements so I'm not sure about it if it's a plugin. This code was already implemented in the project I'm working on so I have no idea which plugin uses $get.
on the original project these are the only references on it
<link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.custom/jquery-ui.css" />
<script src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript" src="NOTY/js/noty/packaged/jquery.noty.packaged.js"></script>
EDIT 2
So I was using a try catch to catch the error but I was doing it in the wrong way since I'm still new to javascript. The exception I got is that $get is not defined. So rather than asking where $get comes from, how do I define a variable in jquery like $get?
I'd like to set RTF formatted calendar entries, but don't know how to pass the byte[] to the ActiveX object, i.e. the RTFBody property.
The following code reads the RTFBody property after some content has been set - so reading the byte[] is working, but when I try to write exactly the same content (+ trailing 0) back, neither an U/Int8Array nor a Scripting.Directory works.
Maybe it's possible to workaround with some .NET objects, but I don't know how to instanciate those Non-ActiveX components. An alternative solution shouldn't require to script the formattings, e.g. "go to line 2 and make it bold", i.e. I like to generate the rtf via a template and only paste the result into the calendar object.
I'm aware that this has to be eventually encoded in Windows-1252, but for a start I simply want to see the same bytes to be written successfully. The script is executed within a HTA context - so script security is not an issue.
<html>
<head>
<hta:application id="foo" applicationname="foo" version="1" navigable="yes" sysMenu="yes"></hta>
</head>
<script language="JavaScript" type="text/javascript">
function doit2() {
var rtfBody =
"{\\rtf1\\ansi\\ansicpg1252\\deff0\\nouicompat\\deflang1031{\\fonttbl{\\f0\\fswiss\\fcharset0 Calibri;}}\r\n"+
"{\\*\\generator Riched20 14.0.7155.5000;}{\\*\\mmathPr\\mwrapIndent1440}\\viewkind4\\uc1\r\n"+
"\\pard\\f0\\fs22 bla\\par\r\n"+
"}\r\n";
// https://github.com/mathiasbynens/windows-1252
var rtfBody1252 = rtfBody; // windows1252.encode(rtfBody);
var dict = new ActiveXObject("Scripting.Dictionary");
for (var i = 0; i < rtfBody1252.length; i++) {
dict.add(i, rtfBody1252.charCodeAt(i));
}
dict.add(rtfBody1252.length, 0);
// Alternative setting via U/Int8Array also doesn't work ...
// var buf = new ArrayBuffer(rtfBody1252.length+1);
// var bufView = new Int8Array(buf);
// for (var i=0, strLen=rtfBody1252.length; i<strLen; i++) {
// bufView[i] = rtfBody1252.charCodeAt(i);
// }
// bufView[rtfBody1252.length] = 0;
var myOlApp = new ActiveXObject("Outlook.Application");
var nameSpace = myOlApp.GetNameSpace("MAPI");
var recipient = nameSpace.CreateRecipient("user#host.com");
var cFolder = nameSpace.GetSharedDefaultFolder(recipient,9);
var appointment = cFolder.Items.Add(1);
appointment.Subject = "Subject";
appointment.Location = "Location";
appointment.Start = "22.02.2017 17:00";
appointment.Duration = "120";
appointment.Categories = "deleteme";
appointment.Body = "bla";
var va = new VBArray(appointment.RTFBody).toArray();
var bla = String.fromCharCode.apply(null, va);
document.forms[0].output.value = bla;
// var bla2 = windows1252.decode(bla);
appointment.RTFBody = dict.Items();
appointment.ReminderSet = "true";
appointment.Save();
entryId = appointment.EntryId;
appointment.Display();
delete appointment;
delete cFolder;
delete recipient;
delete nameSpace;
delete myOlApp;
}
</script>
<body>
<form>
<input type="button" onclick="doit2()" value="doit"/>
<textarea name="output" rows="5" cols="50"></textarea>
</form>
</body>
</html>
I'm trying to look for a script (with no progess) that could export an HTML table that I am able to get from an iframe. The table is inside the iframe and I can get and display its contents on my parent document.
<script type="text/javascript">
function myFunction() {
var myIFrame = document.getElementById("myIframe");
var content = myIFrame.contentWindow.document.getElementById("table").innerHTML;
alert(content);
// suggestions here to export the table to CSV
}
</script>
I am not asking you to write the code for me. I would appreciate if someone could point me to the right direction.
I made a simple jsfiddle to illustrate the idea. https://jsfiddle.net/anjvsqt7/9/
The code snippet from the example I made is below:
var csvStr = '';
var table = $('#table');
var rows = table.children('tbody').children('tr');
var len = rows.length;
for(var i=0;i<len;i++) {
var row = $(rows[i]);
var cols = row.children('td');
for(var j=0;j<cols.length;j++) {
col = cols[j];
csvStr += col.innerText + ',';
}
csvStr += '\n';
}
//console.log(csvStr);
I have used datatables to do this in the past.
It gives you options to display buttons that can be used to export to CSV, Excel and PDF as well as exporting to your clipboard.
Example page
I have added a random post button to my site (http://factowy.blogspot.com). I want to load random post as the page loads instead of clicking the button. How can I do that? Here is the code for the random post button.
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Fact'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>
You need something like this.
<body onload='showLucky()'>
Go to Blogger > Layout > Edit HTML and replace <body> with above mentioned code and check.
It's just way you would call function on page load. I haven't tried with your function.
I was able to load random post with the following code:
window.onload = function(){fetchLuck(a.rel);}
I trying to generate an input (type="button") and setting the onclick-Event to a function, which should hand over a parameter. The whole object should be appended to a div and thats it. Basically this is my try, but I can't see why it does not work.
I pasted the code to jsfiddle, hence its easier for you to reproduce. Click here.
What am I'm doing wrong? I'm learning it by trial and error, so please explain whats wrong. Thanks a lot!
[edit] for the case jsfiddle will be down one day, here is the code I tried to run... :)
<!doctype html>
<html>
<head>
<title>onclick event example</title>
<script type="text/javascript" language="javascript">
var i = 0;
var h = new Array();
function addButton() {
i++;
var container = document.getElementById("check0");
var h[i] = document.createElement("input");
h[i].type = 'button';
h[i].name = 'number' + i;
h[i].value = "number" + i;
h[i].id = 'number' + i;
h[i].onclick = function() {
showAlert(i)
};
container.appendChild(h[i]);
}
function showAlert(number) {
alert("You clicked Button " + number);
}
</script>
</head>
<body>
<div id="check0">
<input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>
</body>
</html>
Here is the fixed fiddle for you.
var h[i] = ... is invalid JavaScript.
What you write in the "JavaScript" frame on jsfiddle is executed onload, so this code is not yet present when the HTML you provide is executed (and neither is the addButton() function).
<script>
var i = 0;
var h = new Array();
function addButton() {
i++;
var container = document.getElementById("check0");
h[i] = document.createElement("input");
h[i].type = 'button';
h[i].name = 'number' + i;
h[i].value = "number" + i;
h[i].id = 'number' + i;
h[i].onclick = function() {
showAlert(i)
};
container.appendChild(h[i]);
}
function showAlert(number) {
alert("You clicked Button " + number);
}
</script>
<div id="check0">
<input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>
Try using h.push(...) instead of trying to send to a non created element in the array
var x = document.getElementById('pagination');//pagination is an empty div in html
var y ='';
for(var i = 0; i <= (pageMax); i++){
y = y+"<a id ='pageNumber"+i+"' onclick='changePage("+(i+1)+");'>"+(i+1)+"</a>\n ";
} x.innerHTML=y }
i used this to make a pagination for a table. The function will create a row of numbers until button max. 'changePage("+(i+1)+"); ... will call a function and send the i index(number that the page is) of the pagenumber. also i dynamically create a id unique for each number.