Im trying to load a html page on a div class on my page, but my html page have just a script src ... but is not loading the page on div class ...
This is my code:
$(document).ready(function() { // this runs as soon as the page is ready (DOM is loaded)
$(".Ads_Banner").load("/home/funny/public_html/template/ads_template.php");
});
This is in my html page ( what im trying to load ) :
<script type="text/javascript" language="javascript" charset="utf-8" src="http://adspaces.ero-advertising.com/adspace/113423.js"></script>
If in the html i put just "Text" is working but when i try to load the script is show me blank ... hope someone can tell me how i can make this so ads to be loaded after the website is done loading ...
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 have a JQuery Mobile page set up as such:
<body>
<div class="normal" data-role="page" data-title="Photo Stream">
<script type="text/javascript" src="js/photostream.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
}
</script>
<div id="programholder">
~~addtional HTML~~
The external JS script photostream.js works when the app first opens, but then wont work again if I return to this page. I am assuming this is due to how AJAX loads the pages on top of each other, but seeing as my external link was within the data-role="page" div I assumed this got triggered each time that element reappeared.
Is there a way to have the external JS file reload again whenever this page is re-visited?
If I understand your problem correctly, you want your external js file - photostream.js to be explicitly loaded every time a particular page loads. But this doesnt happen in JQuery Mobile because of the way AJAX loads the pages.
Off the top of my head, have you tried binding the external script to be loaded when the pageshow event is triggered.
$("#page1").on('pageshow', function(event, ui){
var filename = "photostream.js";
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
});
I am using requireJS for my hybrid app . Now I need to change the script tag located into my layout page with conditions on url . The script tag looks something like this
<script data-main="#Url.Content("~/Scripts/main")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Now when the page loads the /Home/Login the script tag above should be changed to
<script data-main="#Url.Content("~/Scripts/login")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Again when I load the page /Mail/Index The script tag above should change to
<script data-main="#Url.Content("~/Scripts/mail")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Now Note that All of the three pages uses the same **_Layout.cshtml** page . And the above script tag is located in **_Layout.cshtml** page only .Now how do I track this scripts to change the script tag on change of the Url routing as mentioned above ?
I'd simply use a section for this. In the layout page:
#RenderSection("RequireScripts")
And put the script in each page:
#section RequireScripts {
<script data-main="#Url.Content("~/Scripts/main")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
}
If you're after a way to avoid re-writing the whole thing (only requiring the relative path), then I suppose you could make use of the dynamic Page variable:
#if (Page.RequireScript != null)
{
<script src='~/Scripts/#Page.RequireScript'></script>
}
Then the script block would get output to pages that define RequireScript.
#{
Page.RequireScript = "Libs/Requirejs/require.min.js";
}
I'm building a webpage and I want to re-use some HTML I have elsewhere on my website. The page I am building (index.html) can dynamically get and insert the HTML I want (existing.html) using XMLHttpRequest. However, the HTML I want to get is populated by some Javscript. That Javascript is not being executed when I load it into my new page:
index.html:
<html>
<head>
<script type = "text/javascript">
... //use XMLHttpRequest to load existing.html
initExistingHTML(); //this is function which populates loaded HTML, is not executed
</script>
</head>
<html>
existing.html:
<div>
<script type = "text/javascript">
function initExistingHTML() {
... // do some stuff
}
</script>
</div>
How can I load existing.html and run the script which populates it?
Once the page has loaded, add in existing.html via innerHTML. Rather than calling its functions, just let existing.html's code execute, which will do the same as if it were in the onload section.
EDIT: Or, you could just correct that typo you have. initExistingHTML != initExistingHtml.
lol
i am creating an ipad app
i have a side navigation, and then a main window. user will click links in the navigation and pages will load up in the main window.
i use ajax to dynamically load my pages in my main window, but when my pages load they do not load with their own css or js files, which i have linked in the page html file.
instead i belive they take on the CSS of the entire site.
i have read i can use 'loadobjs' to load my CSS and my page loads dynamically.
how can i use that with my code?
a reply will be greatly appreciated
thank you
code provided below:
$(document).ready(function(){
// load index page when the page loads
$("#main_content_inner").load("home.html");
$("#home").click(function(){
// load home page on click
$("#main_content_inner").load("home.html");
});
$("#latest").click(function(){
// load contact form onclick
$("#main_content_inner").load("latest.html");
});
$("#important").click(function(){
// load contact form onclick
$("#main_content_inner").load("important.html");
});
$("#personal").click(function(){
// load contact form onclick
$("#main_content_inner").load("personal.html");
});
$("#timetable").click(function(){
// load contact form onclick
$("#main_content_inner").load("timetable.html");
});
$("#tasks").click(function(){
// load contact form onclick
$("#main_content_inner").load("tasks.html");
});
$("#staff").click(function(){
// load contact form onclick
$("#main_content_inner").load("staff.html");
});
$("#university").click(function(){
// load contact form onclick
$("#main_content_inner").load("university.html");
});
});
This doesn't directly answer your question, but my recommendation is for the outer page's CSS to have all the necessary information for each child page you load.
Also, you shouldn't load entire HTML documents via AJAX; your DOM would end up looking something like this (which is bad)
<html>
<head>...</head>
<body>
<div id="ajax_panel">
<html>
<head>...</head>
<body> Content </body>
</html>
</div>
</body>
</html>
Instead, modify your inner documents to only contain the information that should be in your div#main_content_inner.