I'm building a few webpages in my webapplication which use a webservice.
While communicating with the webservice, which can take more than a few seconds, I want to display a loading screen. Something like the jquery dialog, where the background is disabled and a loading image appears in the middel of the webpage.
Is this possible and how can I do this?
I use blockUI plugin for such requirement. Its pretty simple and straight forward to use. For example:
$.blockUI({ message: '<h2>Loading</h2>' });
// call to the web service
And in success and failure callbacks of ajax request, include call to unblock
$.unblockUI();
Take a look at the jqModal jQuery plugin - i use this extensively, for example when performing a single-sign-on with Facebook, i show a pretty "Connecting with Facebook" dialog (background is blanked out). very easy to use, and very extensible.
It's basically a hidden div on the page (absolute positioning), which gets shown and centered (and of course other cool effects, such as fading).
So you have full customization of this div - put an image, put an iframe, put a user control.
And it fully supports AJAX - so you can call your WS on load of this modal dialog to load the contents in.
Of course you could roll your own (old school popup, or overlayed image with appropriate z-index), but no point in re-inventing the wheel - especially when there are bucketloads of great solutions available.
Related
I'm displaying a website in a C# WebBrowser. But I would like to display only the search part not the whole website so it won't bo so big on the screen. This is the website http://www.buscacep.correios.com.br/ and I would like to display only the Busca CEP - Endereço Box. Any ideas of how I can do this? I tryed to use htmlagilitypack but it has very little documentation and I couldn't understand it.
The WebBrowser control isn't really designed for what you're asking. You probably could go through all the page elements and remove anything that isn't part of the search box, but that's a lot of work for very little value.
However, there's a bright side. As mentioned in a comment, you should be able to POST directly to the search page. Use a program like Fiddler to find out what form values are being passed to the server with the request. Then you can re-create that request from your own application (using a WebClient or HttpClient). The result will be HTML, which you can display in your WebBrowser by setting the returned HTML to the WebBrowser's DocumentText property.
I have a page which contains user controls with Telerik Charts (grids also, but they work fine). From this page, the user can click on a button to be redirected to a "Printer-Friendly Version" type page, which opens a new window via javascript and goes through a slightly different view (for formatting and stuff), but the telerik code is all the same.
The problem is, my Chart displays just fine in the original window, but the new window displays basically an empty chart with no data. This bug is only present in IE, and only applies to Charts. Grids work fine, for whatever reason. I'm thinking this is due to differences in script caching between browsers -- correct me if I'm wrong, I'm semi-new to client-directed web development.
Anyway I read somewhere that Telerik has issues with loading data and/or js files when loaded via ajax, so maybe that's the problem? If so, how could I get around this? And if not, any ideas on what could be causing this issue? It's causing me a great deal of frustration, since a print preview page seems like it should be the easiest of jobs.
Edit:
The charts are being rendered as html (if somebody can explain how to render them as images, that would be awesome). And dev tools shows basically the same thing between chrome and IE. Whenever my web service goes back up ill WinMerge them and look for any peculiarities/differences between them. In the mean time, though, the "render as an image" concept sounds promising. That way I could just save the image from the first page, and insert it right into the print preview page, right?. And since it's a print-preview page, it's not going to need to be interactive or anything, so that'd work out nicely.
Another (important) Edit:
These are probably the culprit...
And here is a little more detail on that:
And here is a side-by-side of it working(in chrome) and not working (in IE):
Have you considered using a print-specific stylesheet instead, e.g.
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
In which you specify the styling to apply when printing.
That way, you avoid reloading the page (duplicate database hits, etc.) and don't need to delve into the AJAX of Telerik's controls.
EDIT:
Regarding using an image rather than HTML, first make sure you won't lose any features/detail, then check out the .Save() method of the RadChart control. You could either save it to a memory stream, or if you want to re-use the image save it to a directory on the webserver and clean it up periodically. That way, you can just point your print version to the image and not re-generate it.
This Telerik forum post may be of use.
is it possible to take a screenshot of what a textbox holds when the user presses the sumbit button for example?
EDIT: this is an aspx webpage
In short, no it is not possible to do this in a consistent, cross browser fashion (that I am aware of). If your textbox was implemented inside of a flash movie, it would be possible to take a 'screenshot' of what the flash movie was displaying when a button was pressed (discussion on this subject available here). But otherwise, you are going to have to do this processing on the server.
You could simulate this process by having the server render a copy of the page itself (feeding it the data the user entered) and then doing what you wanted with it from there. There are free and paid for solutions to assist you in taking a screenshot of a website (browse options available here).
On the client side I think you're stuck with the limitations of javascript, which might not be possible. Here is another question that is very similar to yours:
Take a screenshot of a webpage with JavaScript?
In the general sense, no, you can't. However if you have a constrained environment (e.g. kiosk, intranet), you can create a browser plug-in which can essentially do anything, including snapping a screenshot and sending it to the server.
If you have lots of control over the environment, you can create your own web browser which can take screenshots. In fact, I've done this with C#. I just wrote an app that hosts a browser control and sends screenshots to the server on certain key presses or at a user-defined interval.
Is there any pattern or kind of "least requirements list" to follow for ensuring an asp.NET application to support BACK button of the browser for each aspx page?
thanks
In general, the back button on the browser will take you to the previous HTML GET or POST that occurred. It navigates by page-wide transactions, so anything done dynamically cannot be navigated that way. Also, the back button doesn't rewind code execution, so if you are determining something based off of a Session variable or something similar, that won't be rewound either. Obviously, it won't rewind database transactions either.
In general, if you want to support the back button, you'll need to make sure to divide everything you need to navigate between with said button is divided by an HTML transaction of some sort.
Again, you're going to run into issues if your page display is dependent on server-side control that changes from one post to the next. This is one reason you see some forms feed a 'Page has expired' error when you try to navigate back to them.
Not really... It depends on your application flow.
There are things that make supporting the back button more awkward.
for example using pure ajax to change the majority of the content on the page,
will look like a 'new' page but wont be compatible with the back button (though you can fudge it)
another example is posting back to the same page more than once, as this can make it appear like the back button is not working, and at the same time re-doing your request (and therefore database transactions)
Fundamentally it depends on your application requirements.
How to show a web page in full screen mode without statusbar and addressbar in all browsers and it should not show the taskbar also.
You can't do this with JavaScript - and that's a good thing...I don't want a full screen advertisement in my face, do you?
Pseudo-out-of-browser plugins can do some of this though, Flash and Silverlight for example...but you can't do it with just a page and JavaScript. Browsers (especially newer ones) actively prevent most resizing and windows-without-bars behavior.
If I want MY browser to be in full screen mode, I will press F11.
It is MY browser. Not yours.
You cannot do this, as Javascript can only change things inside the webpage. It cannot change the behaviour of the browser itself.
You cannot do this in javascript. The reason is that someone might make a screen that looks like a windows lock screen and force users to type in their username/password. Its called phishing and illegal : http://en.wikipedia.org/wiki/Phishing . For right usage you can ask the user to opt into it (the user has to click a button) using Silverlight / Flash. However in this case the keys that function are limited. So you cannot get the user to type alphanumeric keys. Keys commonly used in games (e.g space / arrow keys) will function. So will mouse clicks. With Silverlight if the user accepts you application to be Trusted (FullTrust) you can even capture all keys : http://timheuer.com/blog/archive/2009/11/18/whats-new-in-silverlight-4-complete-guide-new-features.aspx
I did not get what really you wants?
You want code to your page OR manually you want to do with browsers.
If while browsing you want to do IE, Mozilla, Google chrome etc. will Do it with "F11" key (Short cut key)
(Highly NOT RECOMMENDED, but you can try *)*If you want javascript for this, here it is...
<SCRIPT LANGUAGE="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
</SCRIPT>
<--- BODY OF DOCUMENT -->
<body onload="fullScreen('popup_webpage.htm');">
this will open the webpage in new pop-up on page load.