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); });
});
Related
What would be the correct way to lazy load youtube video but keep focus on play / pause button like on the regular load (so people with disabilities can use space key to pause the video)?
All solution are seem not to keep focus on video and space scrolls the page down.
Is that possible at all?
This might not be the best way to do it as JavaScript will need to be enabled in you client's browser, however you should be able to run a JavaScript function when the iFrame loads like this:
const iframe = document.querySelector('.my-iframe');
iframe.onload = function() {
onLoad();
}
or like this:
<iframe src="https://logrocket.com/" onload="onLoad()" onerror="onError()"></iframe>
If you would then write a function called onLoad() that calls the .focus() method on the play button with code similar to that in the next block, you should be able to have focus set to the play button. Note that the following code block assumes that the ID of the play button will be "play_button" which is unlikely to be the case.
funtion onLoad() {
iframe.contentWindow.document.getElementById("play_button").focus();
};
Hope this helps!
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've got a list of menu items and each is an a tag. Inside those, I've got notification bubbles insides a div. When the notification div is clicked, I'd like to first follow the a tag (the hash is always to a Meteor route, using Iron Router) before it executes the click event attached to the div. Since reverse-propagation hasn't existed since the netscape days, I thought maybe that click event could store a function as a callback when the route changes? Has anyone tried to do something similar? Couldn't find anything in the Iron Router docs about it. I'm currently mitigating the problem with a few Session vars, but would like to clean it up.
Without seeing what your code is currently doing (or even better, a simplified example), I am guessing a bit at what you are trying to do. Maybe you have something like this:
<div id="bubblething">Click Me!</div>
With a click event:
'click #bubblething': function() {
// Do the bubble thing.
}
But the problem is you'd like to trigger the click event after you route but the click is happening to early. Would it be possible to change it to something more like this:
<div id="bubblething">Click Me!</div> //no <a> tag.
With the click event handling the actually routing first then moving on:
'click #bubblething': function(){
Router.go('/yourroute'); // First you route
{ ... } // Code to handle the notification bubble.
}
You may have to update your styling a bit do to the lack of am <a> tag but that should be pretty simple. The routing is handled by the click and then other things happen. You can parameterize this so that instead of calling an id you call a class and inject the route.
I'm modifying a cefsimple app to meet my needs. I have a long starting thread at the background so it takes a while until the web page is shown (5-10 secs). In the meanwhile I want to show some kind of splash screen, or at least some HTML before the main page is rendered. What's the best (or any) way to do it?
Thanks in advance!
We have an html file compiled into our application and we pass that URL to CefBrowserHost::CreateBrowserSync().
See resource_util_win.cpp in cefclient sample, in particular GetResourceId() for associating the URL to the compiled resource ID.
Meanwhile, the body of our splashscreen.html has
<body class="splash" onload=" pageLoad() ">
and the pageLoad() looks like
function pageLoad() {
window.location = "www.yourrealurl.com";
}
}
Our splash screen has a background set by style sheet and an animated gif, and it goes away as soon as the requested url comes in.
If you have already gotten the server response but it takes a long time to render, this won't help. We use Angular in the loaded page to hide it until it is finished loading its dependencies.
<div ng-cloak class="ng-cloak" ng-if="IsInitDone()">
I would like to open a document after my ASP.NET page loads in a separate window. I would like to do this with the document not attempt to be blocked by a pop-up blocked. I tried and I am getting the prompt to ask if I would like to allow the popup. Is the best way to do this using a timer control or is there a better way in the lifecylce?
I have tried several events, but they are all launching the document prior to page load.
Fundamentally what you're trying to do is exactly the thing that pop-up blockers are designed to prevent - load a pop-up window without an explicit user interaction. There may be various tricks you could use to get around certain particular pop-up blockers, but you'll never be able to solve this in the general case.
The best solution is to have a link on your page to open the document in question in a new window. Pop-up blockers do not prevent links targeted to a new window.
I use
function openpage(page) {
if (document.getElementById('hf_open').value == 1) {
openChild(page, 'nueva');
document.getElementById('hf_open').value = 0;
}
}
and in the body onload ="openpage('whateverpage.aspx');"
and in an ASP.NET event I set if I want the popup to be open or not a particular time by setting hf_open to 1 if the pop up has to be opened at that time.
In Internet Explorer 7 with pop up blocker: turn on checked - it works.
How are users getting to your page? You could place the popup JavaScript in the link that takes users to your page.
You could use the onload JavaScript event.
function open_page()
{
popupWin = window.open('windowURL','windowName', ' resizable,dependent,status,width=500,height=400,left=0,top=0')
}
Then have the following body tag
<body onload="open_page()">
However, this won't get around your popup blocking issue.