problem is, that the website is loading like for about 20 second or longer (user-problems preprogrammed)
my solution was to load a pre-site where the user sees a loading screen.
i did this with this html-site but i want to do the same in php.
the test-page is http://kater.selfhost.me/test/
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("siteLoader").style.display = "none";
document.getElementById("container").style.display = "block";
}
</script>
</head>
<body>
<div id="container" style="display:none">
<div id="body">
<iframe src="http://kater.selfhost.me/stats/skins.php" frameborder="0" height="2000px" width="1024px"></iframe>
</div>
</div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0'>
Please wait while the page loads...<br /> <br />
</div>
</div>
</body>
</html>
i tried some workarounds, but after searching & testing for about three hours i give up...
thanks in advance for any help provided! :-D
Adding what I alredy said at your question commentary, I made a code loading this content via AJAX:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
//Load content
loadAjaxContent();
});
function loadAjaxContent()
{
//VERY IMPORTANT: the URL domain MUST HAVE be the same as your request
//that's why I'm not writting the full http://kater.selfhost.me/stats/skins.php
$.ajax({
url: "/stats/skins.php"
}).done(function(data) {
//remove loader
$("#siteLoader").hide();
//put PHP content
$("#ajaxContent").html(data);
});
}
</script>
</head>
<body>
<div id="body">
<div id="ajaxContent" style="width:1024px;"></div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0' />
Please wait while the page loads...<br /> <br />
</div>
</div>
This is the most used way to load asynchronous content in the web. But pay attention at this: The http://kater.selfhost.me/stats/skins.php page is made to open as single page in the web, so it has <html> , <head>, <body> , etc.. tags, so..after loading this page into another you'll have two <html>, <body> .. tags in a same page, this is bad, but modern browsers have an awesome common sense and don't bother by this, but you should know that, and be aware.
The actual problem why it isn't loading yet, is this javascript in your content:
<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script>
I removed that and now works fine. Remember that's a quick fix, I don't know what this JS does.
Why it works in <iframe> and doesn't via AJAX? When you open in <iframe> is like opening in a new browser window..and via AJAX, as I have said, it'll load the page content straight inside your "parent" page.
So, removing this Javascript will work, but awesome further solutions:
If you need to open this page both as content to load (via AJAX), both as single page, you can make two pages.. one for each need.
If you just want to use as content to load, remove <html>, <head>, etc.. tags, and fix Javascript to work inside another page.
Related
Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>
I have an HTA, which in turn has an Iframe. We are loading an intranet website. A button in the HTA, when clicked, will automate some task. The first step is to login, wait for the next page to load, then perform next option. The main concern here is to know that the next page has been loaded completely, so that we can initiate the code related to page ?
Can some one shed light on how to achieve this. Just to repeat, IFrame is inside HTA.
Below is my code :
<html>
<head>
<HTA:APPLICATION
APPLICATIONNAME="HTA"
SYSMENU="YES"
NAVIGABLE="YES"
>
<meta http-equiv="x-ua-compatible" content="ie=11">
<title>HTA</title>
<script type="text/javascript">
window.resizeTo(900,700);
</script>
<script type="text/javascript" >
function Start() {
var iframePage = document.getElementById("iframeid").contentDocument;
var userId = iframePage.getElementById("userid");
var passwd = iframePage.getElementById("pwd");
var form = iframePage.getElementById("login");
userId.value='aa';
passwd.value='bb';
form.submit();
var iframePages = document.getElementById("iframeid").contentDocument;
var targetContent = iframePages.getElementById ("ptifrmtgtframe").contentDocument;
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
}
function Show() {
document.getElementById("iframe").style.display = "block";
}
</script>
</head>
<body>
<form class="form" name="form">
<input class="links" type="button" value="Show PIA" onclick="Show();" />
<input class="links" type="button" value="Login" onclick="Start();" />
</form>
<br>
<div class="iframe" id="iframe" style="display:none">
<iframe application="no" src="my URL" width="600" height="600" id="iframeid">
</div>
</body>
</html>
I want that:
var runcntl = targetContent.getElementById("PRCSRUNCNTL_RUN_CNTL_ID");
runcntl.value='test';
Should run, only after the page in the IFrame has loaded properly and completely, since only then the relevant feilds will be loaded. Or else, this will give error.
PS This is a PeopleSoft site.
Here is a simple example of calling code when the iframe has loaded. Check out the onload attribute of the iframe tag. Maybe you can integrate this into your HTA?
<head>
<script>
function frameLoaded() {
alert('frame loaded!');
};
</script>
</head>
<body>
<iframe id="frame" src="https://en.wikipedia.org/wiki/HTML_element#Frames" onload="frameLoaded(this)" />
</body>
If you have access to the page, use javascript inter-window communication to trigger the JS you need. The child iframe can tell the parent when to run java script.
From a pure PeopleSoft perspective you can use related action framework component events to do what you like, too, without customization.
I think you can check the code for related content as reference. Such as OpenRCService and onRCService. In PT_COMMON, the showModalDialog method also related to the RC function which have the logic to detect a iframe is loaded.
How to load divs from page 2 into page 1 with JavaScript.
Page2.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content2"> this is content2</div>
<div id="content3"> this is content3</div>
</div>
</body>
</html>
I want to get and use the id content2 from page2 to create a div into page1 with the content of that div, after link was clicked and deleted, and do the same with content3, content4 and successively.
Page1.html
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
get content
</div>
</body>
</html>
And then would be like that.
<html>
<head>
<title> title </title>
<body>
<div id="main">
<div id="content1"> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>
I'm new in JavaScript and i have no ideia how to do that. If someone can help. Thanks.
Edited: I wanted a way to do it only with javascript and without jquery if that's really possible. I want my project working offline and I can't do that with jquery, because it doesn't work. I've downloaded jquery plugin and pasted it in my directory, but, didn't work, too.
You can use a combination of JavaScript, jQuery, and AJAX to accomplish this.
First, include the jQuery library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
Then write a JavaScript function similar to this one which will replace your div element's html content with the Page2.html file:
var loadNewContent = function {
$.ajax("Page2.html", {
success: function(response) {
$("#content2").html(response);
}
});
};
And then you would need some 'trigger' to run this function such as this:
$("#content2").on('click', loadNewContent);
Hope this helps.
I wrote a small library called ViaJS using javascript & jquery. It basically lets you load content (like a div) from a source to the page. Check it out.
Via is a small library that allows you to load content on to a page dynamically
I have a website with a news feed that I updated regularly. The problem is that when I update it I have to change the code in every page. This wouldn't be a problem if the website was small, but it has about 20 pages
I want to know if there is any way for me to just have a separate html file with just the newsfeed, that I would load on the other pages.
Using jQuery and making an AJAX call would be one solution to your problem, although it's a bit excessive.
<html>
<head>
<script>
$(document).ready(function() {
$.ajax({
url: "news.html",
cache: false
}).done(function(news) {
$("#news").html(news);
});
});
</script>
</head>
<body>
<div id="news">
</div>
</body>
</html>
Another solution would be to simply use an iFrame.
<html>
<head>
</head>
<body>
<div id="news">
<iframe src="news.html"></iframe>
</div>
</body>
</html>
I am currently embedding a third-party javascript file directly on my page.
However, the website I'm embedding it from takes a while to respond so it stops the rendering of my site for several seconds.
I'm currently embedding it on my page on the spot where it will write some values:
<script language="javascript" type="text/javascript" src="[third-party site/file.js]"></script>
The response from the embedded script is just some JavaScript:
document.write('<div class="value">Value 1</div><div class="value">Value 2</div>');
I was thinking that after the page loads use jQuery to make an AJAX request and somehow parsing the response so I can get the values I need.
Is there be a better approach?
You can place this script inside a hidden element on the end of the body (just before </body>) and, after the page has loaded, move it to the desired location with jQuery.
<div id="hiddenElement">
<script type="text/javascript" src="[third-party site/file.js]"></script>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#hiddenElement").appendTo("#someOtherElement");
});
</script>
</body>
Another solution would be to use jQuery .getScript() to load the script in the desired location as you said and #James McDonnell said.
$(document).read(function()
{
$.getScript(/* src */)
});
This will run after the page has loaded.
$.getScript()
Perhaps this could be part of your solution. Here is a stand-alone jQuery example where a button is used to trigger a change event on a DIV. This example just shows you how to access the html content of the div and to see how to manipulate/change it. This is not a solution for you but parts of it might be useful when combined with rcdmk's and James' ideas.
<html>
<head>
<!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button_test').click(function() {
$('.value').html('New stuff').change();
});
$('.value').change(function(){
$('div').each(function() {
alert($(this).html());
});
});
});
</script>
</head>
<body>
<div class="value">Value 1</div>
<div class="value">Value 2</div>
<button id="button_test">Click me</button>