Develop Reference

Grabbing GeoJSON data in Openlayers

What I'm trying to do:
Figure out how to reference/grab geoJSON data from a server.
In this case I'm just using an example on the openLayers doc.
Ideally I'd just be able to print out a features ID/type, but I cannot get it to work.
What's happening:
var selectElement = document.getElementById('type');
var source = vector.getSource();
var feature = source.getFeatures()[0];
var changeInteraction = function() {
if (select !== null) {
map.removeInteraction(select);
}
var value = selectElement.value;
if (value == 'singleclick') {
select = selectSingleClick;
} else if (value == 'click') {
select = selectClick;
} else if (value == 'pointermove') {
select = selectPointerMove;
} else if (value == 'altclick') {
select = selectAltClick;
} else {
select = null;
}
if (select !== null) {
map.addInteraction(select);
select.on('select', function(e) {
document.getElementById('status').innerHTML = feature.getGeometry().getType();
});
console.log(feature);
}
};
I was hoping my innerHTML would display "Polygon" in this case, but no such luck. I've tried various combinations, and been looking over the documentation, can't see what I'm doing wrong.
The server I'm trying to grab the info from is,
https://openlayers.org/en/v4.6.4/examples/data/geojson/countries.geojson
Any help would be appreciated.
(I can attach full code if helpful)

I was able to replicate your program and find the solution for retrieving the Country's name for a selected feature, as mentioned in your comments.
First, remove the following lines. You don't want the first feature of the source file but the first selected feature instead.
var source = vector.getSource();
var feature = source.getFeatures()[0];
Second, define the feature inside the callback function(e) for the select Event. Also, since getFeatures() will return a Collection of features the getArray() method is necessary.
The get(key) method will return a value for a determined key, "name" in this case.
if (select !== null) {
map.addInteraction(select);
select.on('select', function(e) {
var feature = e.target.getFeatures().getArray()[0];
document.getElementById('status').innerHTML = ' ' +
feature.get("name") + ' ' + feature.getId();
});
}

JavaScript - use link parameter to create text in the H1 tag of another page

In this example I have two pages - 1 product page, and 1 conversion page.
On the product page I will have a link that points to the conversion page. On this link I would like to pass the product name via a parameter. something like this: href = conversionpage.html?productName
On the conversion page I would like use JavaScript to take the product name parameter and populate the h1 tag - so the h1 tag would be something like this < h1 >productName< /h1 >
Make sense? I have no idea how to do this.
Thank you in advance for your help. I have 100,000 + product pages this example was just to simplify the issue.

Here is what I think you want to do.
Get the URL search parameters, then take the one you need and place it in the innerHTML of the desired tag.
Loops = function(collection, fn) {
'use strict';
var i;
if ((collection.item && collection.length) || collection instanceof Array || collection instanceof Element || collection.elements || collection.jquery) {
i = collection.length;
if (i > -1) {
do {
if (collection[i] !== undefined) {
fn(i);
}
} while (--i >= 0);
}
return this;
} else {
throw new Error('"collection" (' + collection + ') is not valid. It should be an array or have an "item" method and a "length" property');
}
};
GetURLParameters = function(keys) {
'use strict';
var pair, arr, query, parameters, queryString;
if (location.search) {
query = location.search.substring(1);
parameters = query.split("&");
queryString = {};
}
function createObject(key, val, i) {
pair = parameters[i].split("=");
if (typeof queryString[pair[key]] === "undefined") {
queryString[pair[key]] = decodeURI(pair[val]);
} else if (typeof queryString[pair[key]] === "string") {
arr = [queryString[pair[key]], pair[val]];
queryString[pair[key]] = arr;
} else {
queryString[pair[key]].push(pair[val]);
}
}
if (parameters && keys === 1) {
Loops(parameters, function(i) {
createObject(1, 0, i);
});
} else if (parameters) {
Loops(parameters, function(i) {
createObject(0, 1, i);
});
}
return queryString;
};
/** \/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/ **/
var params = GetURLParameters();
console.log(params);
document.getElementById('h1').innerHTML = params['parameter-name'];
<h1 id="h1"></h1>

with a url of http://example.com?productName=Walkman
<body>
<h1 id="productName"></h1>
</body>
<script type='text/javascript'>
// start by creating a function
function loadUp(){
var str = window.location.search.replace(/(?:(\D+=))/ig, "") //get the search parameters from the url and remove everything before the "=" sign
document.getElementById('productName').innerHTML = str //assign that string to the "innerHTML" of the h1 tag that has an id of "productName"
};
window.onload = loadUp; // once the page has loaded, fire off that function
</script>
this script will do this once the document has been loaded:
<body>
<h1 id="productName">Walkman</h1>
</body>

Can't seem to move segment into repeating field

I have a piece of code that I'm trying to get to work on an interface. Basically we take some fields and drop into other segments. The problem seems to be that it leaves the data where it is instead of moving it to the indexed PID segment. Also the CP variable is returning 'undefined' for some reason.
var i = msg['PID']['PID.13'].length();
var homeNum;
var netNum;
var cpNum;
while(i--)
{
if (msg['PID']['PID.13'][i]['PID.13.2'].toString() == "PRN")
{
homeNum = msg['PID']['PID.13'][i]['PID.13.9'];
}
if (msg['PID']['PID.13'][i]['PID.13.2'].toString() == "NET")
{
netNum = msg['PID']['PID.13'][i]['PID.13.4'];
}
if (msg['PID']['PID.13'][i]['PID.13.2'].toString() == "CP")
{
cpNum = msg['PID']['PID.13'][i]['PID.13.9'];
}
msg['PID']['PID.13'][i] = "";
}
msg['PID']['PID.13'][0]['PID.13.1'] = homeNum;
msg['PID']['PID.13'][0]['PID.13.4'] = netNum;
msg['PID']['PID.13'][1]['PID.13.1'] = cpNum;
Sample HL7 msg I am using before transforms (from our test system, NOT live data)
It should resemble this instead:
|9999999999^^^test#test.com~99999999999~~~|
Any ideas/pointers on why it's not moving?

You are missing a toString() when you set the variables. A typical Mirth thing, because you get the E4X object back in the variable instead of the value you expected.
In addition to this, you should check the variables for undefined values before setting them on the new structure because otherwise you end up with "undefined" in the fields.
This is a working solution:
var i = msg['PID']['PID.13'].length();
var homeNum;
var netNum;
var cpNum;
while(i--)
{
if (msg['PID']['PID.13'][i]['PID.13.2'].toString() == "PRN")
{
homeNum = msg['PID']['PID.13'][i]['PID.13.9'].toString();
}
if (msg['PID']['PID.13'][i]['PID.13.2'].toString() == "NET")
{
netNum = msg['PID']['PID.13'][i]['PID.13.4'].toString();
}
if (msg['PID']['PID.13'][i]['PID.13.2'].toString() == "CP")
{
cpNum = msg['PID']['PID.13'][i]['PID.13.9'].toString();
}
msg['PID']['PID.13'][i] = "";
}
if(homeNum != null) msg['PID']['PID.13'][0]['PID.13.1'] = homeNum;
if(netNum != null) msg['PID']['PID.13'][0]['PID.13.4'] = netNum;
if(cpNum != null) msg['PID']['PID.13'][1]['PID.13.1'] = cpNum;

Open and close panels based on jQuery cookies

I have the following variables which store the value of a set of cookies:
var filterDate = $.cookie('filterDate');
var filterArea = $.cookie('filterArea');
var filterCategory = $.cookie('filterCategory');
var filterType = $.cookie('filterType');
var filterLevel = $.cookie('filterLevel');
var filterAge = $.cookie('filterAge');
var filterAttendance = $.cookie('filterAttendance');
The name of the cookies and variables are also the ids of some elements that are on the page so for example: <div id="filterDate"></div>
What I want to do is very minimally (i.e. less code as possible) is check if any have the value of open and if so then run the code inside.
if (filterDate == 'open' || filterArea == 'open' || filterCategory == 'open' || filterType == 'open' || filterLevel == 'open' || filterAge == 'open' || filterAttendance == 'open') {
$('#' + filter).find('.menuBox.nav ul').show();
$('#' + filter).find('.menuBox.nav p').hide();
$('#' + filter.find('h3 span').addClass('active');
}
How do I get the above to work as filter works for all the cookies without having to duplicate it per cookie and panel?

A compact solution may be:
//The array below allows you to easily add new filters
var filterNames = ["filterDate", "filterArea", ..., "filterAttendance"];
for (var i in filterNames) {
var filterName = filterNames[i];
var filterStatus = $.cookie(filterName);
if (filterStatus == 'open') {
$('#' + filterName).find('.menuBox.nav ul').show();
$('#' + filterName).find('.menuBox.nav p').hide();
$('#' + filterName.find('h3 span').addClass('active');
}
}

I wasn't clear if you were looking to trigger a different function based on the filter name. If so, you could store all the functions mapped to your cookies, then iterate over the names of the cookies, triggering the associated function if true: e.g.
var cookieList = ["filterDate", "filterArea"...];
var cookieMap = {"filterDate"=filterDateFn, "filterArea"=filterAreaFn...};
for (var i=0; i<numCookies; i++) {
if ($.cookie(cookieList[i]) == "open") {cookieMap[cookieList[i]]();}
if you only want to run one function, then you could skip making a cookieMap, and just run whatever success trigger you want, then break the for loop at that point.

Make an array of cookie names and then generate an object (map of key:pair values), where
the keys are the items from array and the values are the values of an appropriate cookies.
Then use loops to iterate through arrays/objects:
var filters = ['filterA', 'filterB', 'filterC'],
cookies1 = {},
cookies2 = {};
for(var i = 0, f; f = filters[i++];) {
// really here will be $.cookie(f); instead of 'open':
cookies1[f] = cookies2[f] = 'open';
}
// make one of second cookies set 'closed' for testing purpose:
cookies2['filterA'] = 'closed';
function allOpen(cookies) {
for(var i in cookies) {
if(cookies[i] != 'open') {
return false;
}
}
return true;
}
alert(allOpen(cookies1) + ', ' + allOpen(cookies2));
​

Is There a Way of Switching Tabs in JQuery?

First of all I want to give you the link before I forget.
http://www.roblox.com/User.aspx?ID=1
Towards the bottom of the page there are multiple tabs. (Gear, Hats, Faces, Packages, etc.)
function checkForHat() {
$.get (
'http://www.roblox.com/User.aspx?ID=1',
function parse(data) {
var hatid1 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl00_AssetThumbnailHyperLink');
var hatidtitle1 = hatid1.attr('title');
var hatidhref1 = "http://www.roblox.com" + hatid1.attr('href');
var hatidpi1 = $(hatid1).find('img')
var hatidpic1 = hatidpi1.attr('src')
hatLink1 = hatidhref1;
hatTitle1 = hatidtitle1;
hatPic1 = hatidpic1;
var hatid2 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl01_AssetThumbnailHyperLink');
var hatidtitle2 = hatid2.attr('title');
var hatidhref2 = "http://www.roblox.com" + hatid2.attr('href');
var hatidpi2 = $(hatid2).find('img')
var hatidpic2 = hatidpi2.attr('src')
hatLink2 = hatidhref2;
hatTitle2 = hatidtitle2;
hatPic2 = hatidpic2;
var hatid3 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl02_AssetThumbnailHyperLink');
var hatidtitle3 = hatid3.attr('title');
var hatidhref3 = "http://www.roblox.com" + hatid3.attr('href');
var hatidpi3 = $(hatid3).find('img')
var hatidpic3 = hatidpi3.attr('src')
hatLink3 = hatidhref3;
hatTitle3 = hatidtitle3;
hatPic3 = hatidpic3;
if (hatLink3 != null && hatTitle3 != null && hatPic3 != null) {
checkIfNew3();
}
if (hatLink2 != null && hatTitle2 != null && hatPic2 != null) {
checkIfNew2();
}
if (hatLink1 != null && hatTitle1 != null && hatPic1 != null) {
checkIfNew1();
}
}
);
};
Of course some of the variables are already called earlier in the code.
Now my question is how to change tabs with JQuery. Like I said the tabs are towards the bottom.
This answer is starting to become vital because I have alot of requests for an upgrade on the chrome extension that this is in.
Thanks.

It appears that the javascript used to execute tab switching is held in the href attribute. You can execute eval on that method.
//this will click the shirts tab
eval($('#ctl00_cphRoblox_rbxUserAssetsPane_AssetCategoryRepeater_ctl05_AssetCategorySelector').attr('href'))
If you want something a little more robust then:
$shirtElem = $('#assetsMenu a').filter( function() {
if ($(this).html() == 'Shirts') return true;
});
eval($shirtElem.attr('href'));
None of it I like, but this looks like autogenerated visual studio code which means it will be ugly and hard to work with =). I am also assuming that you don't have any control over the source or this would be a lot simpler.