Following this example https://community.plot.ly/t/hyperlink-to-markers-on-map/17858/6, I am trying to make points my scatter plot clickable (specifically, open a webpage when clicked). How do I get the click event to trigger when a data point is clicked?
This is a python turbogears app, with the plotly_click event happening in js. I'm using plotly.js v1.44.1.. Like in the example, I first create the fig:
plotlyHtml = webhelpers2.html.literal(plotly.offline.plot(fig, include_plotlyjs=True, output_type='div'))
Then I find a div in the figure:
res = re.search('<div id="([^"]*)"', plotlyHtml)
div_id = res.groups()[0]
Then I build a js callback to be inserted into a script tag in the template, as in the example. Here's the script tag injected into the html:
<script type="text/javascript">
var plot_element = document.getElementById('3f56277f-e84b-4b68-ae85-91d3cd62d01c');
console.log('callback js has been added to page. did we get plot_element?');
console.log(plot_element);
plot_element.on('plotly_click', function(data){
console.log('Im inside the plotly_click!!');
console.log(data);
var point = data.points[0];
if (point) {
console.log(point.customdata);
window.open(point.customdata);
}
})
</script>
The first two console.log statements before the event listener print when the page is rendered, meaning the js is successfully injected into the html. Particularly, plot_element is a div with class="plotly-graph-div js-plotly-plot". However clicking points on my scatterplot never results in anything, no errors, events, or console log statements. I at least expect the console log statements in the if to occur. Am I selecting the wrong div id?
The issue was in my layout. I had 'clickmode': 'select', which screwed things up. Removing that enabled events to fire as expected.
Related
I have a cytoscape graph added to my web app. In the core's configuration I've set the boxSelectionEnabled to true.
This is letting me draw a Box with holding Shift or Ctrl around graph elements.
Now i am trying to read all these elements upon the boxend event of graph like this,
this.cy.on("boxend", lang.hitch(this, function (event) {
console.log("boxend");
//read selected elements of graph by boxselection
}));
But, this even is not triggering. I tried with other box events such as boxstart,boxselect,box but those are not working as well. Although, I tried same with events such as tap,cxttap events and they are working fine without any issue.
So, is there any way to get all the box selection elements from graph with these events.
Thanks,
Suraj.
cy.on('boxend') seems to be working fine. You probably have an issue with wrapping the callback the way you have.
I am following this example https://kadira.io/academy/meteor-routing-guide/content/rendering-blaze-templates
When I click on my links the whole page is being reloaded. Is there any way to load only the template part that is needed and not the whole page?
Edit: Also I noted another problem. Everything that is outside {{> Template.dynamic}} is being rendered twice.
Here is my project sample. https://github.com/hayk94/UbMvp/tree/routing
EDIT: Putting the contents in the mainLayout template and starting the rendering from there fixed the double render problems. However the reload problems happen because of this code
Template.mainLayout.events({
"click *": function(event, template){
event.stopPropagation();
console.log('body all click log');
// console.log(c0nnIp);
var clickedOne = $(event.target).html().toString();
console.log('This click ' + clickedOne);
//getting the connID
var clientIp = null // headers.getClientIP(); // no need for this anymore
var clientConnId = Meteor.connection._lastSessionId;
console.log(clientIp);
console.log(clientConnId);
Meteor.call("updateDB", {clientIp,clientConnId,clickedOne}, function(error, result){
if(error){
console.log("error", error);
}
if(result){
}
});
}, // click *
});//events
Without this event attached to the template the routing works without any reloads, however as soon as I attach it the problem persists.
Do you have any ideas why this code causes such problems?
EDIT 2 following question Rev 3:
event.stopPropagation() on "click *" event probably prevents the router from intercepting the click on link.
Then your browser performs the default behaviour, i.e. navigates to that link, reloading the whole page.
EDIT following question Rev 2:
Not sure you can directly use your body as BlazeLayout target layout.
Notice in the first code sample of BlazeLayout Usage that they use an actual template as layout (<template name="layout1">), targeted in JS as BlazeLayout.render('layout1', {});.
In the tutorial you mention, they similarly use <template name="mainLayout">.
That layout template is then appended to your page's body and filled accordingly. You can also change the placeholder for that layout with BlazeLayout.setRoot() by the way.
But strange things may happen if you try to directly target the body? In particular, that may explain why you have content rendered twice.
Original answer:
If your page is actually reloaded, then your router might not be configured properly, as your link is not being intercepted and your browser makes you actually navigate to that page. In that case, we would need to see your actual code if you need further help.
In case your page does not actually reload, but only your whole content is changed (whereas you wanted to change just a part of it), then you should make sure you properly point your dynamic templates.
You can refer to kadira:blaze-layout package doc to see how you set up different dynamic template targets in your layout, and how you can change each of them separately (or several of them simultaneously).
You should have something similar in case you use kadira:react-layout package.
I want two buttons to trigger each his own overlay content (centered vertical and horizontal), but keep the overlay layout the same only the content is different. I wrote a good functional single overlay script for one button, but the two buttons aren't working. In the fiddle there is only the script for one button that i'm using, it is properly quite simple.
Here is the fiddle: link
function funcShow(event){
event.preventDefault();
$('.overlay-info').fadeIn(400);}
function funcClose(event){
event.preventDefault();
$('.overlay-info').fadeOut(400);}
You should put click handlers on your divs using jquery in a document ready function as seen below. Its not as "nice" and accepted to put them in an onclick property like you have.
And also its always nice to have Ids for everything that you are going to use to do things with like click or close. So if you see the example below, you have the document ready function that puts a clickhandler on the first div (id="overlay-one") and the second div as well as the close functions. Try it! It worked for me in you fiddle.
$(document).ready(function(){
$("#overlay-one").click(function(event){
funcShow(event);
});
$("#overlay-two").click(function(event){
funcShow2(event);
});
$("#close-one").click(function(event){
funcClose(event);
});
$("#close-two").click(function(event){
funcClose2(event);
});
});
The document ready function executes after your page is loaded so the clikc handlers are added after the elements have been created. You can also use .click on for classes to add events to a lot of things at once such as $("CLASS").click(function(){//stuff})
I have a modal dialog in my template. This dialog needs to be triggered from the code programatically. So I need to show the modal through javascript, as I cannot have a data-toggle button to launch the modal-dialog.
The modal was working with bootstrap but with bootstrap-3 its not showing up, even though I can show it from the console directly. the problem here is how can I execute javascript post the template render, to launch the modal-dialog.
There is a Template.rendered/created function which is called, and inside this this.autorun(runFunc) is supposed to run the code to update the DOM element. This is called correctly, but I still cannot trigger the modal to show-up.
Template.createDialog.created = function() {
console.log("teamplate created");
this.autorun(function(){
$('#myModal').modal('show');
});
};
Update:
This works:
Template.createDialog.rendered = function() {
console.log("teamplate created");
this.autorun(function(){
$('#myModal').modal('show');
});
};
Using the rendered function, I am able to trigger the modal to show up. But the problem is that rendered and created both are only called once. And I need a way to trigger the modal dialog consistently if a condition is reached.
This bootstrap modal dialog with meteor is turning out to be painful and hacky. Is it not possible to show/hide modal using some class parameters?
Modals can be tricky to get right in Meteor for exactly the reasons you've discovered. I don't use Bootstrap, but the basic principle is that you need to trigger the modal programatically so that you can run the relevant framework code once you know the html has been rendered but still retain reactivity (this is certainly the case with Foundation and Semantic-UI modals) .
In your use case (which appears to be a single modal), this shouldn't be too much of a problem. Set a reactive variable modalVisible (a Session variable or similar), and use that to show or hide the modal as required.
this.autorun(function(c) {
if (Session.get('modalVisible')) {
$('#myModal').modal('show');
} else {
$('#myModal').modal('hide');
}
});
If you put all of that in the rendered callback then it will only try to show the modal once it's been added to the DOM (without which you'll get an error and the computation will stop running, breaking reactivity). Note that you shouldn't make rendering of the template dependent on a reactive variable - it should always be rendered but only visible based on the value of the modalVisible Session variable.
Apologies if this is too simple for your use case - if so I would recommend investigating the several packages on Atmosphere for Bootstrap modals as others will almost certainly have faced the same problem.
I have a web application that creates a graph on another aspx page. Sometimes the graph cannot be created to specification because there is an error in the user specification (such as a string where an integer was expected).
I would like to immediately pop up an alert window telling them that something went wrong when I was trying to render the graph.
The thing is, I don't know how to immediately check to see if I should insert a script for an alert window. Once my code on "chart.aspx"(image URL) is executed, I don't know how to immediately check if anything went wrong from the main page. I know it happened in the code in chart.aspx, but other than not to not render the image or render a different image, I don't know how to tell the user before another postback. I would really like to see if there is any sort or event or stage in the page lifecycle after one of the images is rendered.
If this is not possible, how can I chart.aspx convey an error message to default.aspx if it is simply an image. Maybe some sort of Response.Write(...?)
Thanks again guys.
Maybe you could try monitoring the image's load events and handle onabort and onerror via javascript?
http://www.w3schools.com/jsref/dom_obj_image.asp
Image Object Events
Event The event occurs when...
onabort Loading of an image is interrupted
onerror An error occurs when loading an image
onload An image is finished loading
The old school way of doing this would be to render your image tag like below:
<img src="chart.aspx" onerror="alert('Image failed to load because XYZ.');" />
Nowadays, I'd recommend you use jquery, something like this:
<img src="placeholder.gif" class="chart" alt="chart">
<script type="text/javascript">
jQuery(function($) {
var img = $(document.createElement('img'));
img.on('error', function() { alert ('...'); });
img.on('load', function() { $('img.chart').attr('src', img[0].src); });
});