I have an SVG map of the U.S., and I would like to make it so that when you click on a state, a new page loads with information about that state.
Here is my code that fills the states (the paths are already created); it's a choropleth so the color is based on murder rates.
d3.selectAll("path")
.attr("fill", function(d) {
return color(murderrates[codes.indexOf(this.id)])
})
.on("click", **load(new page, this.id)**)
The pseudo code between the asterisks is what I'd like to accomplish: when the state is clicked, open a new page and tell it which state was clicked so it knows what information to display. In other words, the new page should be able to "accept an argument" - the state - so it knows what to display.
Edit: I do not have a different page to load for each state. Instead, it is one page that could display 50 different things depending on which state caused it to load. So let's say I had a variable called origin in my new page. I would like the value of origin to be set to this.id upon loading.
Building off of #StephenThomas's comment, you can define a function loadPage that uses this.id to change the window.location:
function loadPage(){
window.location = URL + "?origin=" + this.id;
}
This will open a new page where the query parameter "origin" will contain this.id. You can then parse the query param, e.g. like this.
Then pass that function as the callback to the onclick, as D3 will automatically set the value of this to the appropriate element:
.on("click", loadPage)
Related
I've looking around and testing for a way to block current transition from one page to another when a third page is called during the loading of the second. The example is this:
I have a menu with three Links (A, B, C), and I'm in the page that corresponds to Link A.
I click on the Link B and react sends the request to the server.
Before the page from Link B is returned, I click the Link C.
The page C loads before the page B, but when the page B returns, the page B is loaded.
Is there a way to tell react to ignore the current active transition? Ignore the response from Link B?
Thank you!
It depends on a lot of implementation details, but I'll give one real world example: I handle this by liberally taking advantage of the bluebird promise library, which implements cancellation. Loading "Page B" would do (roughly) something like this:
const pageRequests = {};
function loadPageB() {
return (dispatch) => {
pageRequests.pageB = makeAsyncRequest('pageB')
.then((res) => dispatch({type: 'LOAD_PAGE', content: res})
.finally(() => {
delete pageRequests['pageB'];
});
};
}
function cancelLoad(page) {
pageRequests[page].cancel();
}
You'd call cancelLoad to abort loading a page, which will cancel the request (note that the function that generates the page load promise will need to support cancellation!).
Alternatively, if you don't want to tangle with promise cancellation you can also just store a flag indicating that you no longer wish to see the results for that page. That flag would get reset every time you initiate a request to load the page.
I have a requirement that we should be able to copy an image displayed in our application, to Clipboard and paste it outside (Like on Excel).
I was trying the below code snippet (Inside a button Click).
Clipboard.generalClipboard.clear();
var dataLoaded:Boolean = Clipboard.generalClipboard.setData(ClipboardFormats.RICH_TEXT_FORMAT,
byteArray, false);
The dataLoaded object is true, however it does not paste anything when tried on Excel or MsPaint.
Do we have any way to achieve this?
Thanks.
The code you are showing is not enough in itself to get a successful transfer. Like many other operations within the security sandbox of a FP app (web) this code can only respond to a direct user interaction. So your code without any valid context cannot work of course but if called within a mouse down listener for example (a true user generated mouse event, creating a fake mouseevent would still not work) it should respond correctly:
private function handleMouseClick(event:MouseEvent):void
{
Clipboard.generalClipboard.clear();
var dataLoaded:Boolean = Clipboard.generalClipboard.setData(ClipboardFormats.RICH_TEXT_FORMAT, byteArray, false);
}
I have a Maven Jetty project with JSPs using JavaScript. I want to be able to highlight parts of a canvas corresponding to the dragged image's size.
When I look at my JSP by simply opening it in the browser everything works as expected but when I start the Jetty Server with the goal jetty:run the ID of the dragged object is not being set or cannot be retrieved from the transferData of the event.
The relevant code: All draggable images have a unique ID. On drag start I set the ID of the dragged image on the event's transferData like this:
function dragShipFromTable(event) {
event.dataTransfer.setData("id",event.target.id);
}
When the image is dragged over the canvas I call the following function
function allowDrop(event) {
event.preventDefault();
var id = event.dataTransfer.getData("id");
var img = document.getElementById(id);
// Do the highlighting stuff
....
}
The problem is that when the server is started and I do the above action then in allowDrop(event) the ID of the dragged image is not being retrieved from the transferData. It is undefined and therefore the highlighting fails. This is not the case when simply opening the JSP as a File.
Well I kind of found the answer to my own question. First of all the setData method on the dataTransfer object only allows certain formats as first parameter. I interpreted it as an associative array but this is not the case. So it should be
event.dataTransfer.setData("text/plain", id);
event.dataTransfer.getData("text/plain");
to set and retrieve the id correctly.
But in the end everything failed due to chrome as there is a bug in Chrome which prevents me from using dataTransfer as intended (see How do you get the selected items from a dragstart event in Chrome? Is dataTransfer.getData broken? ).
I now use global variables to store the information I need. And still I am wondering why everything worked fine when the page was displayed as a file instead of as a response from the webserver.
I haven't had much of an opportunity to look at HTML5 Geolocation yet, but I'm curious: Is it possible to build a web app that can detect when a user enters a certain area (perimeter) and then return a message or something like that?
You can use watchPosition to get periodic updates of the browser's location, and then in your callback, test to see if the new position is within your area of interest. So if you've defined a function isInArea that checks a position to see if it's in your area of interest, you could do something like:
function positionCallback(position) {
if (isInArea(position)) {
alert("Honey, I'm home!");
}
}
function handleError(error) {
alert("Error!")
}
// Request repeated updates.
var watchId = navigator.geolocation.watchPosition(positionCallback, handleError);
Based on Example of requesting repeated position updates from w3c.
I'm using HTML geolocation and I'd like to achieve the following:
1. User arrives at page
2. User is asked to share location
3. When user says yes, Google Maps initialises and centres on their position
4. We add marker to map showing their position
5. (ongoing) As the user moves, the marker continues to move with them
I've implemented this as follows:
// Add a marker
function addMarker(loc) { // adds marker }
function setupMap(loc) { // initialise map and centre on user's position };
setUpMap(???????);
// Start watching user's position
var watchID = navigator.geolocation.watchPosition(addMarker);
So my question is: how can I get the initial position in order to set up the map?
I can see two options, both of which have flaws:
Call setUpMap from within addMarker, but then the map gets re-initialised each time the user moves, which is obviously inefficient.
Call navigator.geolocation.getCurrentPosition before calling watchLocation - but then the user seems to get prompted twice for their location, which looks clunky.
Any better ideas?
Thanks everyone.
UPDATE
OK, it seems I haven't explained this well. My question is really: how do I get the user's location from watchPosition, as a one-off, so that I can initialise the map once?
Call this:
navigator.geolocation.watchPosition
instead of this:
navigator.geolocation.getCurrentPosition
watchPosition function also initializes positions.
3. Call watchLocation in step two, i.e. to get initial location (the user therefore will only get prompted once)