So I have a winforms(windows) application and it has a form that reloads a datagrid every 30secs, this form has a few other controls in it as well.
I am trying to convert this application to the web(ASP.NET MVC5) and I trying to figure out a way to do the reload portion of my application.
I have the page created and I have a button on the page that reloads the data on the table(partialview is returned). How can I make that partial view auto reload itself? Without using javascript or jquery?
You mentioned a div specifically, but I don't think that's possible. You could however use an iframe, maybe.
You could use a refresh header on a page embedded in an iframe.
So, we'll call the file that goes in the iframe refreshing_form.html and here's its structure:
<html>
<head>
<META http-equiv="refresh" content="5;URL=refreshing_form.html">
</head>
<body>
<!-- Your content here -->
</body>
</html>
And then in the main page, we have the iframe...
<iframe src="refreshing_form.html"></iframe>
The refreshing_form.html will reload itself in a loop forever. The containing page with the iframe will not reload (though the content of the iframe will). Poor man's ajax.
However, this seems like a lot of cludge to do something that javascript is really good at. Are you sure you can't use it?
Related
My site is in HTML, Js, Jquery. It is not having any language to run.Now I want to integrate access level based on login using API call and cookie. If cookie set then allow to access some pages using HTML and CSS.
The private HTML page contains the private data which should be accessible after login and login credentials will be checked by the API call if it is success or not.
If some user will get the private page link and try to access it through the direct hit it should not work and redirect to the login page without disclosing the content using page view source and inspect element through also.
I tried below solutions:
1) Use window.load() function with the redirection code with default body content display none but it is disclosing content in view source
2) I have used the angularjs with ng-show and ng-hide concept but for HTML page it is hiding content in inspector but showing content in view page source.
Angular Js:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">
Show HTML: <input type="checkbox" ng-model="myVar">
<div ng-show="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>
</body>
</html>
In this I want to hide the whole content to the front user without available in view page source also. Can anyone have any idea that how can I do that with HTML pages using JS or any other Js library solution?
David is correct in his comment, if the user shouldn't have access to the data at all, it should not be retrieved by the client. If you're just wanting to keep content out of the inspector and page in general, you can use ng-if instead of ng-show.
I found a website that has the same header for all the pages which never reloads when navigating through pages. After header loads once, it stays in place and the rest of the layout (content and footer) loads from page to page. Its pretty much like when you have a frameset but its not.
Mouse hover the upper menu and click on any item and you will see what I mean.
What is this technique called? I would like to know the name so I can research about it and learn it.
Thank you.
After reviewing the website you submitted I was able to find a javascript file, which as many people suggested uses ajax to load the contents into the page without reloading it, after the webpage is loaded the script triggers a hashchange which changes the url to match the one you clicked on using window.history.pushState as suggested by #escapedcat , the javascript also handles the animation and changes the classes of certain elements in the webpage to reflect it's state (updating, etc..)
The code is uglified but you can still see how this is done
link
edit
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 1</title>
</head>
<body>
<header>
<nav>Link</nav>
</header>
<div id="content">
this is the default content
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$('nav a').on('click', function(e){
e.preventDefault();
console.log('test');
$.get(this.href, function(data){
$('#content').html(data);
console.log(this);
history.pushState({foo:'bar'}, 'second page', 'page.html');
});
});
</script>
</body>
</html>
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page 2</title>
</head>
<body>
This is page 2
</body>
</html>
The above changes the url, you still have to do further development of the code to get full functionality i.e.(back button)
you can refer to Page not reloading via 'back' when using pushState() / onpopstate to add this kind of functionality
edit:
The pushState() method
as the documentation states the pushState method recieves 3 arguments, a state object containing serialized information associated with the new history entry, the page title, and the page url, each time a user navigates to a new history entry the popstate method is fired and the state changes to represent the current state
The technique is called a "Single page application" (a.k.a. SPA).
You can create a SPA using any framework or library you wish (e.g. AngularJS, ReactJS, jQuery, etc) as long as you follow some guidelines.
A single-page application (SPA) is a web application or web site that
fits on a single web page with the goal of providing a more fluent
user experience similar to a desktop application. In a SPA, either all
necessary code – HTML, JavaScript, and CSS – is retrieved with a
single page load, or the appropriate resources are dynamically
loaded and added to the page as necessary, usually in response to user
actions.
Assuming that we're not loading all of the content in advance, the basic guidelines are:
When the server loads the page for the first time, you decipher the URL and return the appropriate page. The page should contain an identical template for all pages, while only a dedicated part of the html file is reserved for the dynamic content.
For example, all pages in my website should return the same header and load the same javascript files, the part that changes is only my #content element which contains the html of that specific page, according to the URL.
When the user clicks an internal link you perform the following operations:
Prevent the link from navigating, using event.preventDefault()
Change the URL yourself, using the history API (history.pushState(stateObj, title, path))
Load the content using Ajax and replace the the existing content with the new one.
Listen to popState events to detect change in the URL due to the use of the back and forward buttons. (window.addEventListener('popstate', handler))
Load content according to the new URL.
Note: The server needs to provide the content (without the rest of the template) using Ajax.
Concerning the "How", that is completely up to you as long as you understand the workflow of a SPA.
The technology used is Angular JS. If you want to learn this technology you can
use http://www.w3schools.com/angular/ or http://www.tutorialspoint.com/angularjs/
.If you want to see the page souce code you can right click and then go to inspect and right click and then go to inspect view page source. By Inspecting you will see the real time changes that are happening in the backend.
Im not sure how this person does it but how you could make this is:
When an user clicks on a menu item load the content with ajax (no refresh)
$(document).ready(function(){
$("menu-item").click(function(){
$("#content").load("something");
});
});
You can update the url with :
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
this updates the url without a refresh
If a user lands on a specific url you can pass the required data based on the url to load the right content.
You can use Meteor.js too.
Their own website is built using meteor.js and you can clearly see the functionality you want on that website.
You can achieve same by the a layers in css (click here to know more)
For the site you suggested there will be three layers
Image
Header(which will scroll down on mouse hover)
The Background image (That is Hidden by the Header)
I am a first poster here so please excuse my noob-like behavior.
I have a button on my website that when pressed should disappear, and a form should be echoed out in its place without a page refresh.
I have easily achieved this with JavaScript / AJAX, but if JavaScript is disabled, I still want the button to do it's task.
My question is: Can I do this only using PHP, WITHOUT a page refresh?
Cannot comment or I would have but the answer would be no. PHP is server side so the only way for it to update a view is to reload to a new page. Also, I would think it is very unlikely to run into a situation where JS is disabled these days.
Not in a way I think you'd want to do it, but you could use an iframe that contains the button. The button would be a link or form submit and the navigation would happen inside the iframe to your form. This way, only the iframe is refreshed, but the full page remains unchanged.
You can only aciehcve this using ajax. You can force your users to enable
javascript noscript tags
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>
</noscript>
I posed a question that related where I could display "Page loading" in asp.net page using jQuery. But, I had no luck.
So, say I have page1 and it navigates to page2 and page2 doesn't some heavy data access. Is there any way I could show the "preloading" page while the page2 is finished.
I want to navigate from Page1 -> "Preload" -> Page2(once page2 is completed).
I want to know if this is possible using Javascript in the code behind.
Thanks.
The way you would typically do this is have a page that shows the message and uses AJAX, in my example using jQuery, to load the other page onto the current page.
<body>
<div id="content">
Page loading
</div>
<script type="text/javascript">
$(function() {
$('#content').load('/url/to/other/page');
});
</script>
</body>
I've omitted loading jQuery itself.
Note: you could do this on a single page by having it generate different content based on some query parameter. You don't need to actually have a separate "loading" page -- though you could probably make that work for several different pages as well.
If using JavaScript is OK, redirect the user to the Preload page, and then use JavaScript to take the user to Page2. This will make the Preload page stay visible while Page2 is loading.
(Also, "JavaScript in the codebehind"? Don't tell me you're using JScript.NET or something as your server side language)
No matter what you do, to begin loading Page2 you'll have to navigate away from Page1 (unless you get complicated and wrap your pages in another container on a single page and navigate within your container).
Otherwise the default content for Page2 should be a "Preloading" message that gets taken away once the document has finished loading its content.
Is a possible solution to have an almost empty page with a few placeholder divs in the right places containing a loading image. Then run web service calls to populate each placeholder in jquery/javascript?
I have an internal web application, that is IE specific, and uses a lot of IE specific modal boxes: (window.showModalDialog).
I recently received a request to remove the "flash" when navigating between pages of the site. To accomplish this, I just added a meta transition tag to my master page:
<meta http-equiv="Page-Enter" content="blendTrans(duration=0.0)" />
This works perfectly except for the modal boxes. When you launch a modal box, and then move it around, the web page behind it keeps a trail of the modal box instead of re-drawing the web page content. This prevents the user from moving the modal box to read anything that was behind it.
Is there a way to prevent the "flash" between pages in an IE specific site and have the site still work with modal boxes?
Please note, this is a large and complex site, so re-architecting it to not use modal boxes isn't an option.
This is an asp.net, c# web application, and all of my users are using IE 7 and IE 8 if it makes any difference.
-Edit-
To duplicate this, put the following into an html page, and open it in Internet Explorer:
<html>
<head>
<title>Test</title>
<meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body>
<script language="javascript">
window.showModalDialog('modal.htm', window);
</script>
</body>
</html>
Have you tried the solutions from this page? It says you need to add a <link /> element to the head section (if you have the unstyled content problem [not the white-page problem]).
Also from Yahoo's Best Practices:
The HTML specification clearly states that stylesheets are to be included in the HEAD of the page: "Unlike A, [LINK] may only appear in the HEAD section of a document, although it may appear any number of times." Neither of the alternatives, the blank white screen or flash of unstyled content, are worth the risk. The optimal solution is to follow the HTML specification and load your stylesheets in the document HEAD.
Make sure you have a <link /> element in the head of all your pages and make sure that you put these stylesheets at the top of the head section and <script /> elements after them (preferably AFTER all page content and immediately before the closing tag).
I know you said you can't use modals but I thought I'd share this example of a JS modal using jQuery and facebox. You don't even have to modify your calls to "showModalDialog" (if you do end up using this modal method you can still use your meta page-exit page transition trick).
window.showModalDialog = function(a){
$.get(a,function(html){
$.facebox(html);
});
};
window.showModalDialog('linkOnSameDomain.htm', window);
Your problem is that showModalDialog isn't handling DirectX surfaces (which is what you end up with when you mess with filters and transitions). IE isn't performing screen updates on the underlying surfaces while the dialog exists. You have no choice but to stop creating those surfaces (stop using transitions) or to use a popup window as shown below. The only real difference is that the new window doesn't lockup the underlying page (which is generally a good thing but you may have to prevent further scripts running if your app relies on it) and you may need to handle any buttons in the dialog differently if you were returning results to the parent (like ok/cancel).
Be aware that IE8 security settings can restrict how much chrome you can hide. If you absolutely have to hide the address bar then you'll need to set "Allow websites to open windows without address or status bars" in the relevant security zone for each user PC.
<html>
<head>
<title>Test</title>
<meta content="blendTrans(duration=0.0)" http-equiv="Page-Exit">
</head>
<body style="background: transparent url(/images/backgrounds/brushed_aluminium.jpg) scroll repeat top left">
<script language="javascript">
var modal = window.open('modal.htm', '_blank', 'height=500,width=600,status=no,toolbar=no,menubar=no,location=no,resizable=no,titlebar=no');
</script>
</body>
</html>
I would avoid built-in page transitions if at all possible.
If the "flash" you are referring to is the page reloading between requests. I would look at two different areas:
Caching
Consider placing images into CSS Sprites and/or making sure you have long expiration dates on your content files. If your page is flashing, it is because the browser is having to grab loads of stuff from the server on each request.
CSS Sprites - CSS Sprites are images that contain several smaller images in one file, which are then referenced using the background-position CSS property. The benefits of this technique are:
Reduced requests to the server.
Once one page has loaded, images on other pages are already cached in the browser (within the sprite).
Content Expiation - If your page is flashing, but page layouts are similar between pages. This could be a symptom that your server is forcing your browser to expire content between requests and re-download everything each time. Look at the headers being set on your content by IIS, or consider setting up a CDN.
A CDN is a web site purpose built for delivering content for another site. The key feature of a CDN though is that headers and cookies are disabled which makes requests quicker and leaves the caching entirely to the browser.
Ajax
If you want to avoid the page flash completely, you need to start putting your page requests through using Ajax style requests. Because you are using ASP.NET, you have a number of options at your disposal, below are two of them:
Update Panels - Update Panels scale quite well, in that you can put an Update Panel around a single button or an entire page. Everything within the Update Panel is posted backed to the server using an Ajax request an the panel is then updated with the results. No page flash at all! I don't use Update Panels in favour off the next option, which provides more control, but is more advanced.
jQuery & Web Services - What I've described above, but controlling the process using Web Services (or Page Methods) and jQuery's Ajax methods.
I hope this helps,
Rich