"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>";
}
Related
This clever solution:
remove selected items from google form dropdown list
Removes selected items from google form dropdown list based off of an inventory stored in sheets. The problem is, when I run it I get a "Cannot call method "createChoice" of undefined. (line 39, file "Code")". After thoroughly examining the code, it still seems to me that it should work... Any ideas as to how to fix it?
var LIST_DATA = [{title:"Select a Time", sheet:"Doc Appointments"}];
function updateLists() {
//var form = FormApp.getActiveForm();
var form = FormApp.openById("1fTlfq1ciD2C7iLL7Pw43ld-EyfxxM6GYOF-SdoAkTvw");
var items = form.getItems();
for (var i = 0; i < items.length; i += 1){
for (var j = 0; j < LIST_DATA.length; j+=1) {
var item = items[i];
if (item.getTitle() === LIST_DATA[0].title){
updateListChoices(item.asMultipleChoiceItem(), LIST_DATA[0].sheet);
break;
}
}
}
}
function updateListChoices(item, sheetName){
var inventory = (SpreadsheetApp.openById("1tUpcx4CPu3oMc-A1kMOuE7R3OcfeCPHkHXSpEoam4Xw")
.getSheetByName("Doc Appointments")
.getDataRange()
.getValues());
Logger.log(inventory);
var selected = (SpreadsheetApp.openById("1tUpcx4CPu3oMc-A1kMOuE7R3OcfeCPHkHXSpEoam4Xw")
.getSheetByName("responses")
.getDataRange()
.getValues());
Logger.log(selected);
var choices = [];
var selectedReal = [];
for (var i = 0; i< selected.length; i+=1){
selectedReal.push(selected[i][1])
}
for (var i = 1; i< inventory.length; i+=1){
if(selectedReal.indexOf(inventory[i][0])=== -1){
choices.push(item.createChoice(inventory[i][0]));}
}
if (choices.length < 1) {
var form = FormApp.getActiveForm();
form.setAcceptingResponses(false);
} else {
item.setChoices(choices);
}
}
In a GridView, the name of the table is getting generated dynamically. but it will have the dynamic Name with GridView ID gets appended.
something Like "w123443dsfnsbd32dkkd_GridView1". so first part will always keep changing whenever we reloads the grid. so I would like to get the name of the Grid with "_GridView1", with this I would like to fetch the complete Grid Name. So Is there a way to look for this?
I tried this var table = document.getElementById("GridView1"); but didn't work.
Code:
var table = document.getElementById("wcwidget_df5339c463eedb_widget_gridView1");
if (table.rows.length > 0) {
for (var i = 0 ; i < table.rows.length; ++i) {
if (table.rows[i].cells[0].innerText == "Company1" || table.rows[i].cells[0].innerText == "Company2" ||
table.rows[i].cells[0].innerText == "Company5" )
{
for (var k = 1; k < table.rows[i].cells.length; ++k) {
table.rows[i].cells[k].style.fontWeight = "bold";
table.rows[i].cells[k].style.color = "black";
}
}
}
for (var i = 0 ; i < table.rows.length; ++i) {
if (table.rows[i].cells[0].innerText == "Risk" || table.rows[i].cells[0].innerText == "Medium Risk" || table.rows[i].cells[0].innerText == "High Risk" ) {
table.rows[i].cells[0].style.fontWeight = "bold";
table.rows[i].cells[0].style.color = "black";
}
}
}
try this:
document.querySelectorAll("[id*='GridView1']")
this will return an array.
On modern browsers see the #amit's answer.
If compatibility with older browsers is required:
var allElements = document.getElementsByTagName("*");
for (var i = 0, n = allElements.length; i < n; ++i) {
var element = allElements[i];
if (element.id.endsWith("_GridView1")) {
// do something with the found element
break;
}
}
I've created a table dynamically, but now I want to create a dropdown row on demand. I have an onclick handler for each row. Upon clicking, this row should drop something downward (like a hidden div but unfortunately these cannot be easily created in a dynamic setting, as there's not a way to assign a unique id at row creation. Is this even possible in Javascript/jQuery? or, preferably, twitter bootstrap?
function buildHtmlTable(portalData, tablename) {
var columns = [];
var headerTr$ = $('<tr/>');
var n = 0;
if (tablename == "order-table") {
document.getElementById("dist-name").innerText = JSON.parse(JSON.stringify(portalData[0], null, 2))["Company Name"];
n = 1;
}
for (var i = 0 ; i < portalData.length ; i++) {
var rowHash = portalData[i];
for (var key in rowHash) {
if ($.inArray(key, columns) == -1) {
columns.push(key);
headerTr$.append($('<th/>').html(key));
}
}
}
$('#' + tablename).append(headerTr$);
for (i = 0 ; i < portalData.length ; i++) {
var row$ = $('<tr/>');
for (var colIndex = n ; colIndex < columns.length ; colIndex++) { // n is how many columns to drop, based on table name
var cellValue = portalData[i][columns[colIndex]];
if (cellValue == null) {
cellValue = "";
}
row$.append($('<td/>').html(cellValue));
}
$('#' + tablename).append(row$);
}
// Drop unnecessary columns
for(i = 0 ; i<n; i++) {
$("#order-table").find('td,th').first().remove();
}
if (tablename == "order-table") {
var tablerows = document.getElementsByTagName('tr');
for (var x in tablerows) {
tablerows[x].classList.add("clickable");
tablerows[x].setAttribute(data-toggle,"collapse");
tablerows[x].setAttribute(data-target,"");
}
}
}
I'm have multiple tables and have an option dropdown that loops through them. When I tested the code in http://codepen.io/fernandob/pen/JEJRMW , it all works fine but when adding it in my Wordpress page, it doesn't run. In wordpress i'm using visual composer and in a text block, via the text editor i paste the html code, following this.
<script>
if (typeof suffixes !== "undefined") {
suffixes += ",1390152632";
} else {
suffixes = "1390152632";
}
function changeCurrency_1390152632() {
var idx = document.getElementById("id_selected_currency_1390152632").options.selectedIndex;
var currency = document.getElementById("id_selected_currency_1390152632").options[document.getElementById("id_selected_currency_1390152632").options.selectedIndex].value;
var currencies = ["EUR", "USD", "GBP"];
var i, j;
for (i = 0; i < 3; i++) {
var els = document.getElementsByClassName("currency_" + currencies[i]);
var cnt = els.length;
if (currency == currencies[i]) {
for (j = 0; j < cnt; j++) {
els[j].style.display = "block";
}
var a = suffixes.split(",");
for (j = 0; j < a.length; j++) {
document.getElementById("id_selected_currency_" + a[j]).options.selectedIndex = idx;
}
} else {
for (j = 0; j < cnt; j++) {
els[j].style.display = "none";
}
}
}
}
</script>
It's replace with html code because you are using text block.
Use RawHTML and RawJS elements under the structure tab using visual composer.
HTML code paste in the Raw HTML element and JavaScrip code paste in the Raw JS element.
See also image:
Hope this answer help you.
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]