If i feed a page to a user, e.g.:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<SCRIPT type="text/javascript">
function cbCountry_Click()
{
var select = document.getElementById("cbCountry");
select.options[select.options.length] = new Option("Canada", "CA");
select.options[select.options.length] = new Option("United States", "US");
}
</SCRIPT>
</HEAD>
<BODY>
<SELECT id="cbCountry"></SELECT>
<P><BUTTON onclick="cbCountry_Click()">Get Countries</BUTTON>
<P>Visit a link
</BODY>
</HTML>
This page has the capability to modify itself. In this case it's standalone javascript, but imagine it's AJAX code.
If the user then clicks a link to go forward, then clicks to return back to this page; they will be presented with the page as it is cached; rather than how they left it:
Has anyone solved the AJAX problem?
i notice that Google periodically sends the state of your page to the server. If you return to the page they force a timer refresh, which refreshes the state of the page from the server.
i've also noticed that some people simply force the page to not be cached:
Cache-Control: nocache
preventing the page from being cached. Downside of that is that it prevents the page from being cached.
You could use a cookie to store the state on the client side and restore the state of the page from the cookie whenever your page is loaded.
Related
We have our own system which we need to integrate with MS Dynamics 365.For Example : In Accounts section we need to add an extra tab that loads IFrame or something that retrieves some extra information from our system.
The following are the things that I reached :
Inserting IFrame within a new Dashboard: (but it will not fetch specific account information, it will only pass the currently logged in user along with the organization name)
Unified Service Desk (USD): (we may add customization but this is a desktop app and we need it to be on web)
Microsoft flow: this would only work in the background when you create or edit an account (not sure if it has another functionality)
Extensions: Not sure how to use it to achieve the same functionality, I believe the solution may be here but I just need from where to start.
Has anybody done a similar thing before?
Thank you
You can definitely do it,
Here is how I just tried on one of my Trail Instance.
I added new Tab as you need, I called it "HTML Page"
On this Tab I added Webresource, you can add Iframe as well and call your external WebPage.
For my simple use case I created a simple HTML page as webresource in CRM and configured it to Webresource tab as below
Sample code for HTML. Dont worry about long html file. Mostly it is bla bla. What is of our importance is <body onload="myFunction()"> and then in
<script>
function myFunction() {
debugger;
alert("Account Id when from fromcontext is ");
alert(parent.Xrm.getformContext().data.entity.getId());
}
</script>
complete HTML code below
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
</head>
<body onload="myFunction()">
<!-- Site navigation menu -->
<ul class="navbar">
<li>Home page
<li>Musings
<li>My town
<li>Links
</ul>
<!-- Main content -->
<h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere…
<p>There should be more here, but I don't know
what yet.
<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
by myself.</address>
<script>
function myFunction() {
debugger;
alert("Account Id when from fromcontext is ", parent.Xrm.getformContext().data.entity.getId());
}
</script>
</body>
</html>
Also on Form Load of account I added additional Javascript. This javascript will create global variable which could be called from your webresource.
Article Link for additional Javascript
Sample code used for Javascript below
formContext=null;
function onload(executionContext){
debugger;
var formContext = executionContext.getFormContext();
Xrm.getformContext = function (){
return formContext;
};
Xrm.getParentAttribute = function (attrName) {
debugger;
return formContext.getAttribute(attrName);
};
Xrm.getParentControl = function (attrName) {
debugger;
return formContext.getControl(attrName);
};
}
Final Result will be something like below
Summary:
Create Wberesource/Iframe
Create Additiona Js on Load
Use global variable in your webresource.
I am new to MVC 3 and have come accross the following scenario:
First let me explain how I have setup my application:
All post backs to the server use jquery ajax which which return a view from the controller that either appended or prepended or replace a targeted div.
The Scenario:
I have come to a point where I would like to upload images but unfortunately because of the jquery ajax posting I cannot get the values for an html in C# Request.Files. I know there are plugins out there to help out with this but I would like to do this myself so I have created an <iframe> which i then use a bit of javascript and post the form targeted to the iframe (old classic way of doing things):
function UploadImg(SACTION) {
alert(SACTION);
validatorform.action = SACTION;
validatorform.target = "fraImage";
validatorform.method = "POST";
validatorform.submit();
}
the SACTION parameter looks like this #Url.Action("UploadFile", "Response"). This all works well as it hits the controllers action method and I can then save the image:
[HttpPost]
public ActionResult UploadFile(string ArticleID)
{
ViewBag.PreviewImage = cFileUploads.UploadFile(ArticleID, Request.Files[0]);
return View("ImagePreview");
}
I would now like to return a view to the iframe (simply to preview the image and then do a couple of other things but this is besides the point)
The View for previewing the Image:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="">
<img alt="" src="#ViewBag.PreviewImage" />
</form>
</body>
</html>
The Problem:
Unfortunately when I return the View (ImagePreview.cshtml) in C# the whole page is refreshed, all I want is for the iFrame to be refreshed. How should I return the view from the controller?
Fiqured out the problem, I had a bit of javascript that was replacing the contents of a div that the iframe was sitting in ... (slap on my forehead). All working perfectly now :)
Will leave this question here just incase ..
I currently have a link:
<a href="view.php?page=1">Click Here<a>
What I need is to do the same thing using ajax so that I don't have to go to a different url and still get the same result.
UPDATE:
I have page A and page B
On page A I have a link to page B
<a href="view.php?page=1">Display Page B<a>
<div id="page-b-goes-below">
Page B goes here
</div>
Can the above be done please?
HI,
You cant change a pages complete html with ajax, and the script in the ajax file won't be executed. so you have to make some tricks
some thing like iframe or a master div.
if you wish to use iframe ajax is no need.
still you need this in ajax what you have to do is.
1. ajax files should have only the body content not even the body tag.
2. have a div next to body tag of the first page and load all the file with ajax in that div.
Example:
First or Initial page.
<html>
..........
..........
<body>
<div id="ajax-container">
you content comes here..
........................
........................
</div>
<script>
$(document).ready(function() {
init_linkhandler();
});
function init_linkhandler() {
$('a').click(function() {
$('#ajax-container').load($(this).attr('href'));
init_linkhandler();
return false;
});
}
</script>
</body>
1) I have to change images dynamically according to values for every x seconds.
I'm using the following function:
setInterval(function() {
$("#content").load(location.href+" #content>*","");
}, 5000);
It works fine for updating the value, but the images not getting updated into its position.
2) From the 1st question i want to know whether the jquery and css files included in the head tag will load every x seconds or not. if not how to load?
Please give me the suggestion.
If you are returning a whole HTML page and returning it into the body of another page, that is a bad idea.
Think about it, your html structure would be something like
<doc type>
<html>
<head>
</head>
<body>
<div>
<doc type>
<html>
<head>
</head>
<body>
<div>
</div>
</body>
</html>
</div>
</body>
</html>
Ideally you should be retuning just the content that is to be displayed, not everything.
If you are just updating images, there usually is no need to make an XHR call. You can just set the image src and force the browser to update that content that way.
Does this need to be done with Ajax at all? How many images are you going to cycle through? If it is only a few, just keep all of the src's on the page and switch the image src attribute periodically. This requires no page reload. You may also want to preload all the images so there is no flicker when changing to the other image. For example:
$(function () {
var images = ['1.png', '2.png', '3.png'];
$.each(images, function (index, src) {
$("<img />").attr('src', src); //preload
});
var keep = 1;
setInterval(function () {
$("#main_img").attr('src', images[keep]);
keep++;
if (keep >= images.length) { keep = 0; }
}, 5000);
});
Now if you don't want to hard code the image urls in the JS, you can load them initially with a single Ajax request.
I would only recommend using Ajax to do all the work if you are talking about an unpredictable set of images or some massive number of images.
I've got a Classic ASP application that relies on session; if the user leaves a screen idle and then runs a form post or other operation, I'd like to know whether the session has expired.
Currently I'm checking session in each page to see if it's timed out, but is there a better, dynamic, JavaScripty approach that will do what banks do and time out sessions with a notification and redirect to login?
During your page's onload event, start a timer, and then redirect the page after N seconds.
For the timer, use the window.setTimeout function.
For the redirect, set the value of window.location.
Reusable Example:
<head>
<script type="text/javascript">
<!--
function redirect(url) {
window.location = url;
}
function beginSessionTimer() {
// 30000ms = 30s
window.setTimeout(redirect, 30000,
"http://www.yoursite.com/login.asp?session=clear");
}
//-->
</script>
</head>
<body onload='beginSessionTimer();'>
</body>
Quick-n-dirty Example w/ an inline function:
<body onload='window.setTimeout(function(){
window.location="http://www.yoursite.com/login.asp?session=clear";},
30000);'>
Note that if your page performs any AJAX calls, that keeps the session alive, so you'll want to reset the timer using the clearTimeout method (combined w/ a new call to setTimeout). For details on clearTimeout, click here for excellent documentation from Mozilla.)