Please see image first
Misaligning of row items to header happens after keypress event in textbox for record searching takes place. It works using javascript using this code
var $KeyPressSearch = jQuery.noConflict();
function filter2(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
var lblTotalDSRdata = $KeyPressSearch("#grd tr").length;
}
this only happens to gridviews with jquery injected codes used to fixate the header. to other gridviews that do not use, all works fine.
So to fix the gridview header I apply the tutorial from this link http://gridviewscroll.aspcity.idv.tw/ (Basic)
[![enter image description here][3]][3]
Related
I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo
Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}
function drawTable() {
var table = document.getElementById("myTable");
var input = prompt("Insert height (in number of cells)");
var a = +input;
var input2 = prompt("Insert width (in number of cells)");
var b = +input2;
for (var i = 0; i < a; i++) {
var row = table.insertRow(i);
for (var j = 0; j < b; j++) {
var cell = row.insertCell(j);
};
};
};
I can't for the life of me figure out how to add a onClick event that would change the color of a cell. Do I create a new function in JavaScript and add an onClick event to the table element? That's what I did, but it doesn't seem to work.
function changeColor() {
var td = document.getElementsById("myTable").getElementsByTagName("td");
td.style.backgroundColor = "red";
}
for (var j = 0; j < b; j++) {
var cell = row.insertCell(j);
cell.addEventListener("click", changeColor.bind(cell), false);
};
function changeColor(e) {
this.style.backgroundColor = "red";
}
Should do the trick. Every cell gets an onclick handler set in the for loop. Bind passes the reference of the cell to the changeColor function. The function can address the cell by using this.
For some situations, the answer suggested by Mouser work well. But if consider a situation taking your example of table creation based on number of rows and columns, then adding eventlistener to each cell doesn't sound a good approach. Suppose at initial user requested for 10X10 table. At that moment,
eventlistener is added to each cell.
But what if at some later point of time, more rows/columns are added dynamically. In that situation, only thing you will left with is to add event listeners.
Better approach is to understand the term
Event Delegation
In this approach, you add event listener to parent and just listen to event bubbled up(default behavior) by the child elements.In that case you dont have to be worry about dynamically created cells and adding event listeners to those.
You can take a look on working sample with Event Delegation approach on your code at below link:
http://jsfiddle.net/zL690Ljb/1/
function drawTable() {
var table = document.getElementById("myTable");
table.addEventListener("click", changeColor);
var input = prompt("Insert height (in number of cells)");
var a = +input;
var input2 = prompt("Insert width (in number of cells)");
var b = +input2;
for (var i = 0; i < a; i++) {
var row = table.insertRow(i);
for (var j = 0; j < b; j++) {
var cell = row.insertCell(j);
//cell.addEventListener("click", changeColor.bind(cell), false);
};
};
};
function changeColor(event) {
if (event.target && event.target.tagName && (!event.target.tagName.match(/table|th|tr|tbody|thead/i)) )
{
var element = event.target;
while (element && element.parentElement)
{
if(element.tagName=='TD'){
element.style.backgroundColor = "red";
break;
}
else
{
element = element.parentElement;
}
}
}
}
drawTable();
I hope Mouser will agree on this. Thanks!
Inside the for you can add the onclick event for each cell:
for (var i = 0; i < a; i++) {
var row = table.insertRow(i);
for (var j = 0; j < b; j++) {
var cell = row.insertCell(j);
cell.onclick = function(){
changeColor(this);
}
};
};
Then the changeColor will be as following:
function changeColor(cell) {
cell.style.backgroundColor = "red";
}
"How can I do hyperlink in JavaScript function for Grid view cell to point another function in the same script.
currently I'm trying to do this:
var gri = document.getElementById('<%= GridView2.ClientID %>');
var rows = gri.getElementsByTagName('tr');
for (var j = 0; j < rows.length; ++j) {
var cells = rows[j].getElementByTagName("td");
if (cells.length > 0) {
cells[0].innerText = serviceWindowdate.link("divcolapse(date)");
}
}
It is not giving me proper output in page.
try this :
if (cells.length > 0) {
cells[0].innerHtml = "<a href='javascript://yourFunction();'>Link text</a>";
}
I am loading data from a json object into a table on my page. Then I allow the user to filter that data via an input and display only the matches. My method of doing this is surely not great but it does work.
Now I want to do the exact same thing with a list of airports and their codes. Problem is that the airport list is much longer and the page bogs down significantly when loading the table with data and when it searches for the user's input in the table.
Here's the information for the page that does work so you can se what Im doing.
What can I do differently to achive the same effect I have here when I have a much larger data set to search?
Page Displaying data: (type "american airlines" or "aa"as an example)
https://pnrbuilder.com/_popups/dataDecoder.php
json object containing airline information:
https://pnrbuilder.com/_java/airlineDecoder.js
Sript that loads data to the page and filters it based on user input:
https://pnrbuilder.com/_java/decodeData.js
Here's the most significant parts of my code:
// This function is called by a for loop on dom ready
// It basically prints data stored in a json object to a table on the page
function fillInfo(line) {
var table = document.getElementById('decodeTable');
var row = document.createElement('tr');
table.appendChild(row);
var col1 = document.createElement('td');
row.appendChild(col1);
var curCode = document.createTextNode(arlnInfo.d[line].IATA);
col1.appendChild(curCode);
var col2 = document.createElement('td');
row.appendChild(col2);
var curArln = document.createTextNode(arlnInfo.d[line].Airline);
col2.appendChild(curArln);
var col3 = document.createElement('td');
row.appendChild(col3);
var curPre = document.createTextNode(arlnInfo.d[line].Prefix);
col3.appendChild(curPre);
var col4 = document.createElement('td');
row.appendChild(col4);
var curIcao = document.createTextNode(arlnInfo.d[line].ICAO);
col4.appendChild(curIcao);
var col5 = document.createElement('td');
row.appendChild(col5);
var curCnty = document.createTextNode(arlnInfo.d[line].Country);
col5.appendChild(curCnty);
}
// This function checks user input against data in the table
// If a match is found whitin a row, the row containing the match is shown
// If a match is not found that row is hidden
function filterTable(input) {
var decodeTable = document.getElementById('decodeTable');
var inputLength = input.length;
// THis first part makes sure that all rows of the generated table are hidden when no input is present
if (inputLength == 0) {
for (var r = 1; r < decodeTable.rows.length; r++) {
decodeTable.rows[r].style.display = "none";
}
}
// This part checks just the airline codes "column" of the table when input is only one or two characters
else if (inputLength < 3) {
for (var r = 1; r < decodeTable.rows.length; r++) {
var celVal = $(decodeTable.rows[r].cells[0])
.text()
.slice(0, inputLength)
.toLowerCase();
if (celVal == input) {
decodeTable.rows[r].style.display = "";
} else {
decodeTable.rows[r].style.display = "none";
}
}
}
// This part checks several "columns" of the table when input is more than two characters
else if (inputLength > 2) {
for (var r = 1; r < decodeTable.rows.length; r++) {
var celVal = $(decodeTable.rows[r].cells[2])
.text()
.slice(0, inputLength)
.toLowerCase();
var celVal2 = $(decodeTable.rows[r].cells[1])
.text();
if (celVal == input || celVal2 == input) {
decodeTable.rows[r].style.display = "";
} else if (celVal2.replace(/<[^>]+>/g, "")
.toLowerCase()
.indexOf(input) >= 0) {
decodeTable.rows[r].style.display = "";
} else {
decodeTable.rows[r].style.display = "none";
}
}
}
}
The first little optimization you could apply is not to do the entire filter on every key up, wait until the user finished typing so delay calling it for half a second:
var timeOut = 0;
$("#deCode").keyup(function () {
// cancel looking, the user typed another character
clearTimeout(timeOut);
// set a timeout, when user doesn't type another key
// within half a second the filter will run
var input = $("#deCode").val().toLowerCase().trim();
timeOut=setTimeout(function(){
filterTable(input)
},500);
});
The next is comparing to your json data instead of jquery objects and converting your JSON data to lower case after creating the table so you don't have to check toLowerCase every time for every row:
function filterTable(input) {
var decodeTable = document.getElementById('decodeTable');
var inputLength = input.length;
if (inputLength ==0) {
for (var r = 1; r < decodeTable.rows.length; r++) {
decodeTable.rows[r].style.display = "none";
}
}
else if (inputLength <3) {
for (var r = 0; r < arlnInfo.d.length; r++) {
if (arlnInfo.d[r].IATA.indexOf(input)===0) {
decodeTable.rows[r+1].style.display = "";
}
else {
decodeTable.rows[r+1].style.display = "none";
}
}
}
else if (inputLength > 2) {
for (var r = 0; r < arlnInfo.d.length; r++) {
if (arlnInfo.d[r].Prefix.indexOf(input)===0) {
decodeTable.rows[r].style.display = "";
}
else if (arlnInfo.d[r].Airline.indexOf(input) >= 0) {
decodeTable.rows[r + 1].style.display = "";
}
else {
decodeTable.rows[r + 1].style.display = "none";
}
}
}
}
Problem is with your JSON data: "Prefix": 430 causes arlnInfo.d[r].Prefix.slice(0, inputLength) to throw an error because the data isn't a string but a number. If you have control over the JSON then you should convert these values to string ("Prefix":"430"), If you don't then convert it once and re create airlineDecoder.js using JSON.stringify(arlnInfo);
To convert your JSON you can copy and paste this in the chrome console (press F12) and run it (press enter). It'll log the converted JSON but you may need an IDE like netbeans to re format it:
var i = 0;
for(i=0;i<arlnInfo.d.length;i++){
arlnInfo.d[i].Prefix=arlnInfo.d[i].Prefix+"";
}
console.log("var arlnInfo = " + JSON.stringify(arlnInfo));
A last optimization you can apply is use DocumentFragment instead of directly adding every row to DOM, here we convert the JSON data to lower case so we don't have to do that for every search:
var decodeTable = document.getElementById('decodeTable');
function createTable() {
var df = document.createDocumentFragment();
for (var i = 0; i < arlnInfo.d.length; i++) {
fillInfo(i, df);
arlnInfo.d[i].IATA = arlnInfo.d[i].IATA.toLowerCase()
arlnInfo.d[i].Prefix = arlnInfo.d[i].Prefix.toLowerCase();
arlnInfo.d[i].Airline = arlnInfo.d[i].Airline.toLowerCase();
}
decodeTable.appendChild(df);
}
createTable();
....
function fillInfo(line,df) {
var row = document.createElement('tr');
df.appendChild(row);
....
row.style.display = "none";
}
I'm trying to have each table row clicked to be highlighted in a color and I'm handling this with a class name but the onclick function is not executing, I tried print statement inside the onclick function to check if it is entering but it's just not.
Here is the JS code related to that part:
var rows = document.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++)
{
rows[i].onclick = function() {
this.className = "highlighted";
}
}
Anyone know why this function isn't getting entered?
EDIT: I realized the mistake in the rows variable and I corrected it but the function is still not getting entered and I have no errors on my JS console
var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler = function(row) {
return function() {
row.className = "highlighted";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
Use this it will works....
Use this code. Your table rows must have an attribute name with the value "tr" to make this work :
var rows = document.getElementsByName("tr");
for (var i = 0; i < rows.length; i++)
{
rows[i].onclick = function() {
this.className = "highlighted";
}
}
use getElementsByTagName instead of getElementsById.
Try this
var rows = document.getElementsByTagName("tr");
Add semicolon
rows[i].onclick = function() {
this.className = "highlighted";
}; // here
It works for me .. Check here : JS Fiddle