I have a working bootstrap template (an as of yet unmodified dashboard).
I have a separate html file that uses AJAX/jQuery to grab data from a PHP page in a system health monitoring capacity. The html/PHP pair work fine.
When I try to incorporate the health monitoring portion to the working boot strap page nothing is displayed.
here is the html/ajax/jquery that works fine
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#health_monitor').load('health.php').fadeIn("fast");
}, 1000); // refresh every 1000 milliseconds
</script>
</head>
<body>
<div id="health_monitor"> </div>
</body>
</html>
I add the head portion to the head of bootstrap, and have tried putting the
portion in many different places within the body of the bootstrap template, and it doesnt show anything (no error, nor a 1, or a 0)
any suggestions?
Related
I have a simple one page website with bootstrap 5 set up using spring boot with thymeleaf.
On this page I want e.g. to use the bootstrap tooltip. The problem is that the function to initialize the tooltip fires before the bootstrap script has finished loading so there will be an error and the page will not load correctly.
<head>
... // css and meta omitted for brevity
<script th:src="#{/js/bootstrap.bundle.min.js}" async="true"></script>
</head>
<body>
... // page content
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
</body>
I tried to place the bootstrap script
in the head section
with async attribute
with defer attribute
a combination of the attributes
in the body section directly before the tooltip init script
but nothing prevents the second script to fire before the first script has finished loading.
I have read the HTML spec here but in the end I'm not sure if the loading of the script is truly the problem.
Has someone an idea to definitly prevent this error?
Finally solved this problem.
I put all the javascript code in a seperate js-file.
Then I load this file after the bootstrap file at the end of the body and everything works fine.
<head>
... //css and meta
</head>
<body>
... // page content
<script th:src="#{/js/bootstrap.bundle.min.js}"></script>
<script th:src="#{/js/myfunction.js}"></script>
</body>
I am working on a large website with a lot of existing third-party products already set up on it.
I want to add a cookie consent script, which needs to be the first script executed.
So I have added it at the top of <head> and when I do View Source I can see it is there at the top.
<head>
<script src="https://path/to/cookie/consent/stuff/cookie_script.js">
...
And then further down various other external libraries and frameworks are loaded: jQuery, GoogleAds, Hotjar and so on
...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
...
</head>
But by the time the page has finished loading, when I inspect the DOM using the Web Dev Tools, I can see that my cookie script is no longer the first element in the <head>. Some other elements have been inserted in front of it.
<head>
<script src="https://www.googletagservices.com/activeview/js/current/osd.js?cb=%2Fr20100101"></script>
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://securepubads.g.doubleclick.net/pagead/js/rum.js"></script>
...
// Cookie consent script has been pushed down to here
<script src="https://path/to/cookie/consent/stuff/cookie_script.js">
...
</head>
What can I do about this?
These elements are inserted AFTER the page is loaded from your server, this means that by the time that these scripts are loaded and executed, your script have already run.
You can detect this programmatically using something like:
setTimeout(function() {
var topScript = document.querySelector("script");
if (topScript.getAttribute(src) != ...) {
//takeAction
}
}, yourTimeout);
For your action, you can use alert to warn the user to close/not save the page. Alternatively, you could try moving the script you want to be at the top back to the top
I am using a jQuery plugin it has plugin.css and plugin.js as dependencies and code is in script.js. I cant have plugin.js and script.js merged because i am using plugin only on one webpage of my website.
In order to make sure plugin.css is loaded before execution of plugin.js and script.js, normally I have no option but to have plugin.css in <head> which causes render blocking(until all resources in head are loaded,
browser doesnt render html).
Normal Way: Having CSS in <head> and JS before </body>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/plugin.css">
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script src="/js/plugin.js"></script>
<script src="/js/script.js"></script>
</body>
</html>
Proposed Way: Load CSS and JS via ajax calls and inject them when all of them are loaded, using jQuery $.when promise
<!DOCTYPE html>
<html>
<head>
</head>
<body>
// content goes here
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<script class="load-plugin">
$(document).ready(function(){
var loadPlugin = {
css : $.ajax({ url: $(".jquery-plugin-css").data("src") }),
js : $.ajax({ url: $(".jquery-plugin-js").data("src")}),
};
var scriptJs = $.ajax({ url: $(".script-js").data("src") });
$.when(loadPlugin.css, loadPlugin.js, scriptJs).then(function(){
loadPlugin.css.done(function(data){
$(".jquery-plugin-css").html(data);
});
loadPlugin.js.done(function(data){
$(".jquery-plugin-js").html(data);
});
scriptJs.done(function(data){
$(".script-js").html(data);
});
});
});
</script>
<style class="jquery-plugin-css" data-src="/css/plugin.css"></style>
<script class="jquery-plugin-js" data-src="/js/plugin.js"></script>
<script class="script-js" data-src="/js/script.js"></script>
</body>
</html>
This improved my first render time from 3.4 secs to 2.4 secs and total page load time from 8.5secs to 8secs.
But this has some limitations:
Publicly hosted urls cant be used because the urls inside the plugin files like background-images inside css files if mentioned relative to their directory then the path changes after code is pasted into html.
As the injected code is not part of the source files or external scripts they cant be debugged in developer tools.
This way of lazyloading plugins has pros and equal amount of cons. Can anyone suggest is it worth it to do it this way or any better way to do things.
What I would try is:
Combine the JS files so that the dependent code is after plugin.js
Insert a script at the bottom of the page to dynamically load the CSS first and the combined JS second. If you need example code, you might look at https://github.com/filamentgroup/loadJS/ and https://github.com/filamentgroup/loadCSS/.
Using this approach, neither the CSS nor the JS blocks rendering. The CSS is appended to the DOM, so there should be no problems with relative URLs.
I got a JS problem, I want to excute a JS function after the whole page shown,the struct of the page such as:
<iframe id="i_frame" src="xxx.jsp"></iframe>
and the JS included in the xx.jsp:
...
<head>
...
<script type="text/javascript" src="yy.js"></script>
</head>
yy.js:
$(document).ready(function() {
var i_fram = $(window.parent.document).find('[id="i_frame"]');
$(i_fram).load(function() {
alert('trigger!');
});
});
this works well on PC(chrome), but on Iphone4s(IOS8.1, Safari), the alert trigger befor the page completely shown, even it alert befor the bottom-half of the page shown.I'd tried:"http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onpageshow", it still has this problem.
Is there something different between Safari's renderer and other browsers?
My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?
Little more info:
The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?
I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...
a sample:
$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50);
$ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);
The values returned are stored in an array and used for google visualization api.
Each of this is stored in seperate files and i am calling them using include ();
Use jQuery...
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
Right below body start tag put...
<img id="loading" alt="" src="ajax.gif"/>
You can create some ajax loading gifs here... http://www.ajaxload.info/
Add this CSS...
#loading{position:fixed;top:50%;left:50%;z-index:1104;}
Update
Replace with this JS code, leave the googlecode line.
<script type="text/javascript">
$(document).ready(function()
{
$("#info").load("info.php");
$("#linechart").load("linechart.php");
$("#piechart").load("piechart.php");
$("#loading").hide();
});
</script>
HTML:
<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>
Hope it helps.
Use the following function:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#loading").hide();
});
</script>
Well, there are few issues on this path.
First of all, you output html to show loading screen, and run flush() command.
Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.
Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render.
Anyway, I would invest more time in optimization. Or do a light main page and do the rest of functionality via AJAX.
This is not actually php.
But you can do as follows:
Add the following to the head section:
<script type="text/javascript" language="javascript">
function wait()
{
if(document.getElementById)
{
document.getElementById('waitpage').style.visibility='hidden';
}
else
{
if(document.layers)
{
document.waitpage.visibility = 'hidden';
}
else
{
document.all.waitpage.style.visibility = 'hidden';
}
}
}
</script>
Change the <body> to <body onLoad="wait();">
and add the following in the beginning of body section:
<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;">
<table width="100%" height="100%">
<tr>
<td><img src="path-to-image"/></td>
</tr>
</table>
</div>