I have an interface that allows users to type in MySQL queries and click a button to execute the queries. Then the result of the queries is displayed in a table created by Handsontable. I do it with the following code:
var output = document.getElementById("output");
var hot = new Handsontable(output, table_setting);
The problem now is, every time the button is clicked, it creates a new table over the old one. I would like the new one to replace the old one. I tried using output.innerHTML = ""; before var hot = new Handsontable(output, table_setting); to get rid of the old table. This seems to get rid of the old table, but the new table does not appear anymore. What is the best way to do this?
Thank you!
You want to first do hot.destroy() and THEN create a new hot instance.
Related
I've stumped myself on what I thought was a pretty simple JavaScript function. The function takes 2 parameters. The first is a listbox (oField), and the second is a table (nTable).
The listbox is populated by the user, and each time this listbox's values are changed, I want the function below to be called, to recreate nTable, the original header, and rows for each value in the list box.
function table_build(oField, nTable){
//clear table when selection changes
nTable._HeaderRow.setInstances(1);
//add new selection to table
for(i=0;i<oField.length;i++){
nTable._HeaderRow.addInstance(true);
nTable.HeaderRow[i+1].Cell1.rawValue = oField.getDisplayItem(i);
}
}
The issue that I am having is with the following line:
nTable.HeaderRow[i+1].Cell1.rawValue = oField.getDisplayItem(i);
I am able to update the value of the header row using:
nTable.HeaderRow.Cell1.rawValue = oField.getDisplayItem(i);
Which is weird, because I would have expected it to require HeaderRow[0] after the new instance is added.
What is wrong here?
I have worked out a solution. The addInstance() function returns the new row instance. So I have updated my table_build() function to assign that value to a variable(nRow), then use nRow to reference the row.
var nRow = nTable._HeaderRow.addInstance(true);
nRow.Cell1.rawValue = oField.getDisplayItem(i);
Hope this helps anyone else with a similar query :)
I'm trying to create a Google sheets script which I hear is complete Javascript so I'm told. I'm just trying to create a list of quests relevant to an item in an online game by parsing the HTML in the spreadsheet.
Example: http://everquest.allakhazam.com/db/item.html?item=14295
Ideally in this case it should bring across the 4 quest names, their location and the quest ID (which can be found within the URL in the source code). But I'm just trying to pull the quest ID at the moment as can be found below.
function myFunction(itemid) {
var regexp = /quest.html\?quest\=(.*)"/;
var page = UrlFetchApp.fetch('http://everquest.allakhazam.com/db/item.html?item=' + itemid).getContentText();
var matches = [];
var number = page.match(/<li><a href="\/db\/quest.html\?quest\=(.*)"/);
for (var i in number) {
matches.push(number[i]);
}
return matches;
}
But the script just seems to hang on 'Loading..' and doesn't do anything. If I add 'return number just after the page.match it returns the first quest ID fine.. so it seems it may be related with pushing to the array which is causing the issues.
It is better not to parse HTML as text. You can use a formula with importxml function to get your data using XPath:
=importxml("http://everquest.allakhazam.com/db/item.html?item=14295";"//div[#id='quest']//b|//div[#id='quest']/ul/li/a|//div[#id='quest']/ul/li/a/#href")
Is there any way of using a Dropdown Menu as opposed to the checkbox's that are used in the examples of the Store Locator Library for Maps API. The checkbox is a 'storeLocator.Feature' item.
Essentially I want the user to be able to select an item from the dropdown list and this instantly change the markers on the map.
I am very new to Javascript coding but experienced in CSS, HTML and other computer languages. I have followed the examples in the link fairly closely so you can assume my own code looks the same. –
Here is the section of code i think i have to edit:
DataSource.prototype.parse_ = function(csv) {
var stores = [];
var rows = csv.split('\n');
var headings = this.parseRow_(rows[0]);
for (var i = 1, row; row = rows[i]; i++) {
row = this.toObject_(headings, this.parseRow_(row));
var features = new storeLocator.FeatureSet;
features.add(this.FEATURES_.getById('Cafe-' + row.Cafe));
features.add(this.FEATURES_.getById('Wheelchair-' + row.Wheelchair));
features.add(this.FEATURES_.getById('Audio-' + row.Audio));
var position = new google.maps.LatLng(row.Ycoord, row.Xcoord);
var shop = this.join_([row.Shp_num_an, row.Shp_centre], ', ');
var locality = this.join_([row.Locality, row.Postcode], ', ');
var store = new storeLocator.Store(row.uuid, position, features, {
title: row.Fcilty_nam,
address: this.join_([shop, row.Street_add, locality], '<br>'),
hours: row.Hrs_of_bus
});
stores.push(store);
}
return stores;
};
Thanks.
you need to follow these steps:
set the featureFilter-option of the panel to false
(this will prevent the library from creating the checkboxes)
create a variable where you store all features for later use:
var features=view.getFeatures().asList();
this returns an array with all features
create the select-element
populate the select-element with the needed option-elements
iterate over the features-array created above and append an option for every item to the select .
The text to display inside the option you get by calling the getDisplayName()-method of the item.
add a change-handler to the select with the following callback:
function(){
view.set('featureFilter',
new storeLocator.FeatureSet(features[this.selectedIndex]));
view.refreshView();}
(where view is the storeLocator.View and features the array created in step#2)
5. put the select to the desired place inside the document
Hope i'm allowed to comment here as i found this question very useful for my implementation of store locator.
Dr Molle's solution in the JS fiddle is excellent however i've just noticed that the 'directions' functionality of the map no longer works. Could this easily be rectified? thanks
edit: easier than i thought. In the fiddle "featureFilter:" is set to 'false'. A div with the class="feature-filter" needs to be present in the code for the directions to appear, setting the value to 'true' shows the div (and checkboxes) so that directions work. Checkboxes were hidden in the stylesheet..
.storelocator-panel .feature-filter {
/*overflow: hidden;*/ display:none
}
This may be useful to someone
I have this line at the very beginning of a Chrome extension:
var macroXML = parser.parseFromString(localStorage["myMacro"], "text/xml").getElementsByTagName("section");
After doing some changes, I try to update macroXML, but nothing happens.
alert(macroXML[1]);
macroXML[1] = 'RAWR';
alert(macroXML[1]);
No errors, no anything. It outputs the exact same thing.
Anyone perhaps know why?
You are dealing with a dynamic nodes list. It will change if the document changes, e.g. to remove the second element from the list you can do:
macroXML[1].parentNode.removeChild(macroXML[1]);
Or you replace it by a different node:
var newNode = macroXML[1].ownerDocument.createElement("section");
macroXML[1].parentNode.replaceChild(newNode, macroXML[1]);
But you cannot work with that list as you would do with an array - for that you need an actual array. You can copy the list like this:
var macroArray = Array.prototype.slice.apply(macroXML);
macroArray[1] = 'RAWR';
This will work as expected then.
The problem is simple. I have something like chessboard in HTML. The fields have coordinates, stored in ID attribute (ROW|COLUMN)
Clicking on a specific field makes it marked/unmarked. What is more, selected field's row and column are stored in a <input type="hidden"/> in the form of ROW|COLUMN,ROW|COLUMN,...
For every click I have to process the value of input hidden to check whether the field is already stored, add new field, remove existing and so on. It's a little awkward.
Are there any better ways? Or maybe it is the best way?:)
You don't have to store the fields state in an input field. Better use the a global JavaScript array or manipulate the DOM and serialize it's state before sending it to the server.
Here is some sample code in a JSFiddle: http://jsfiddle.net/U2D9Q/
The important part is where the className of the columns
$td.bind("click", function(e) {
$(this).toggleClass("selected");
});
and how it's serialized when you click the button
var serialize_table = function() {
var output = new Array();
$("table tbody").children().each(function(y) {
var row = new Array();
$(this).children().each(function(x) {
row[x] = $(this).get(0).className;
});
output[y] = row;
});
return output;
}
I used jQuery to keep the code clean. Feel free to use any JS Framework you like or write native JS.