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.
Related
I have an iframe that contains an upload.php file in my page. So i want my page to refresh once when an upload in the iframe is complete. However, my page refreshes continuously whether or not i have clicked the upload button..Help please
Here is my code...
<script>
var up = document.getElementById("upload");
function iloaded(){
window.location.reload();
}
up.onload = iloaded();
</script>
and here is the iframe
<iframe style="display:none" id="upload" src="upload.php"></iframe>
the upload is successful though but the page refresh is the issue here..
I have got the answer simply add this code to the upload.php file and leave out all the other js functions.
Here is the code..
if(upload==true){?>
<script>
window.top.location.reload();
</script>
<?php}?>
Does the job.
One of my clients has a site on squarespace using the hayden template. They have a banner image (thumbnail) on the home page with text and a button link over the top. The button links to a contact page but I'm trying to also get the ENTIRE background image to link to an external URL.
I do not have access to the HTML, I can only add custom CSS. And there's a thing called PAGE HEADER CODE INJECTION (Enter the code that will be injected onto the header for this page.)
I've been trying to inject jquery into the advanced editor but I think I might be using the wrong ids or classes?
Here's what I've been trying. Is there anyway for me to link this image without touching the HTML?
Site url: www.ironathleteclinics.com
I'm injecting this into the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
And this into the footer:
<script> $(document).ready(function(){ $('#collection-55dc8e2fe4b00187e448da91 .content-fill').css('cursor', 'pointer'); }); </script>
<script>$(function(){ $('#collection-55dc8e2fe4b00187e448da91 .content-fill').bind('click',function() { window.location = "www.google.com" }); });</script>
I actually just now figured it out in my particular case on the hayden template!
Header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Footer:
$('#promotedGalleryWrapper, .promoted-gallery-wrapper, .banner-thumbnail-wrapper, .sqs-featured-posts-gallery').css('cursor', 'pointer'); }); </script>
<script>
$(function(){
$('#promotedGalleryWrapper, .promoted-gallery-wrapper, .banner-thumbnail-wrapper, .sqs-featured-posts-gallery')
.bind('click',function() {
window.location = "http://www.athleteps.com/nike-weightlifting/"
});
});
</script>
My app is doing large amount of database queries and it holds the loading page blank white while doing it. I was wondering if there is anyway I can show the loading icon during the query.
<?php
//large queries
//if all queries pass
//do the redirect
header('Location: index.html');
//else show login screen.
?>
<html>
//show login screen….
</html>
My question is how to show the loading icon when php query database
Thanks.
redirect user to a loading page 2. make an ajax request to the actual content script (does the heavy lifting) 3. when content is ready replace part of the loading page with actual content
Example of a loading page: (index.php returns content of body -element for the page)
<script>
$(document).ready(function() {
$.get("index.php", function(data) {
$("body").html(data);
console.log("page was loaded");
});
});
</script>
<html>
<body>
page is loading // <- shown while loading the page
</body>
</html>
note: example above expects that jquery is included
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 ...
I've got a html page which loads another html page into one of its divs via Ajax. Something like:
Base html page:
<html>
<head>
<script type='text/javascript'>
var greeting = "Hello";
</script>
</head>
<body>
<div id="details-main-content">
</div>
</body>
</html>
Page that gets loaded into the one above (uses django templating so whatever is placed in the 'head' block ends up in the 'head' tag of the base page):
{% block head %}
<script type="text/javascript" language="javascript">
alert("Greeting: " + greeting);
</script>
{% endblock %}
<div>
Hello, world!
</div>
The child content gets loaded when a button is clicked, via a Javascript function (using JQuery) such as this:
function loadContent(url) {
// Load external content via AJAX.
$( '.details-main-content' ).load( "/foo.html", function(){
});
}
The page loads correctly, the child content displays exactly desired, inside the templatepage.
Is it possible to access the JS variables in the base page from the inner page (since the inner page is nestled inside of the outer page)?
Any help is greatly appreciated.
Thanks
EDIT:
I think the issue I was having was due to having the following line in the of the base html page:
var gender = null;
var age = null;
Which, each time a new page would be loaded through the load() function, would re-init the variables back to null. Oops
Yes. It's just a single page, before and after the load (which uses XMLHttpRequest). As a simple example, if you had:
var message = "Annoying message";
you could have
Message
in the inner page.
EDIT: If you're having issues, it might be due to the issue noted on the jQuery load documentation:
During this process, browsers often
filter elements from the document such
as <html>, <title>, or <head>
elements. As a result, the elements
retrieved by .load() may not be
exactly the same as if the document
were retrieved directly by the
browser.
There is no "inner" and "outer" page in your example. You just work with single page, some content of which is loaded dynamically, but it is not treated any differently by the browser.