I am making a simple static app in HTML5.
What I am doing now is that I have one single long page in which I have thousands of lines of code.
I am currently doing this to go to another page:
<div data-role="content">
<label for="heading">History</label>
History
Remote Control
</div>
...and then I have module_a & module_b as follow...
<div id="module_a" data-role="page">
//content
</div>
...and same for module_b
Both divs are in same page so my page looks very bad.
What I want to is that I need same functionality but I dont want my divs that is module_a and module_b in the same page.
I want to create different pages for that and then load it as I am going so that my main page looks clear.
If I gather what you're asking correctly you want AJAX. When you click on one of the links/buttons you need a javascript code which will send a request to get the HTML of another page and load it into place on the page.
The best way to do this is to use jQuery. It has this really helpful function called load() which does EXACTLY what you need. http://api.jquery.com/load/
It looks like this:
$('#containerWhereYouWantTheContentToLoad').load('http://url.to/content/you/want/to/load.html');
Hope that helps.
This should work:
Put each of your modules in their own file.
Amend the links to the modules so that they link to the module files.
Replace the modules in your original file with an <iframe> tag.
Add onclick event handler to each link that sets the src attribute of the <iframe> to the URL of the module’s file (and returns false, so that the link isn’t followed).
However, you’ve got more scope for doing stuff with the HTML that you load if you go with AJAX as suggested by #ThomasClayson.
Have you tried AJAX?
$.ajax({
url: 'seperate_page.html',
success: function(data) {
$('#module_b').html(data);
}
});
From how I understood the question, this will solve your problem.. hope it helps
Related
There is a main page and there are links on that page. When the individual links are clicked, it is supposed to load the contents that link loads inside a div tag of the main page.
Example:
MainPage.htm
<html> ...
<body> ...
<div id="MainContent"> </div> ...
<a href='Link1.htm'>Link 1 </a>
...
</html>
Link1.htm
<script src="main.js">...
<div> other contents here </div>
When user clicks on the Link 1, the browser doesn't go to that page, instead AJAX is used to fetch that linked document and load inside #MainContent.
But, the problem is that the linked page has a table and there are table manipulation codes that needed to be run when it first loads. In fact that linked document has link to separate script and some functions that are supposed to run on window.onload.
When I simply load that Linked document using AJAX I am using following approach:
MainContent.innerHTML = XHR.responseText;
This is not helping run the window.onload codes on that linked document.
Are there any solutions or workaround for this type of problem?
Just for side note: I am just Using Javascript no other APIs like angular or jQuery or similar.
Something is wrong with your approach. The main problem here is that the context of the new content that you are getting via ajax is not gonna be executed because the window.onload is already done.
When you refer to "table manipulation codes" I assume that there are a couple of javascript functions that needs to be executed after the content is properly appended in the html, so what you can try over here is moving those "manipulations" to a separate js file and include it in the index.html and execute the proper functions in the success callback after getting the content via ajax.
I think this should be the more accurate approach.
This is going to be very hard for me to explain, but I'll give it my best shot.
I am writing a sort of portable book system, using HTML, CSS, and JavaScript. It's essentially a website; you can throw the package up online and it can function like a full website, or keep it local on the machine to read it as if it were a website.
This means I cannot use things like PHP or MySQL; this is all using browser functionality, as anyone who is reading it on their own computer likely wouldn't have WAMP or the like installed to run it.
I'm having a problem trying to make it so that in my main .htm file's <div id="content"> tag always loads external .htm file, even when those external .htm files have <a> links of their own.
I have tried using jQuery to run load(), but when the new content rendered and I clicked on those links inside that new content, it completely drew away from my main page and loaded the full external .htm file into my browser.
And I think I understand why. When I use the $('a') after loading, it only renders that function to the index.htm's own links, and not the new ones I load into the <div>.
I don't want this effect. I want each and every single link loaded each and every single time to always draw content from the linked .htm file into the index.htm's <div>.
I have looked around and found several related answers here, but they either don't work or give me the same result. One was a plugin called "PJAX", which looked like it worked in the library example, but when I loaded it into my own project it wasn't running. I have tried using the ajax() calls I saw in another answer that addressed the url cache and success parameters, and that didn't work.
What am I doing wrong? I didn't think something as simple as loading an external .htm file and repeating the load inside its <a> wouldn't be so intricate as whatever is cutting me off from fixing this. I thought the load() function did the job up until I clicked the other <a> links.
Code Examples to help clarify what I'm talking about. Not full files or perfect, but a model.
index.htm
<body> <!-- book interface -->
<div id="content"></div>
</body>
page2.htm
<body> <!-- a sample page read on the book, fed in the #content -->
test link <!-- link inside the page -->
<!-- ^^^ That link is supposed to open the page1 inside the #content tag of index.htm instead of on its own. -->
</body>
renderpage.js
$(document).ready(function(){
$('a').click(function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
return false;
});
});
When page2's link loads inside index's <div>, and you click the link inside it, it doesn't change the <div> to page1's content. It reloads the entirety of page1 into the browser.
Turns out Chad's answer was correct. If anyone feels like chiming in, I'd like to learn how this works as it did.
$(document).ready(function(){
$(document).on('click', 'a', function(e){
e.preventDefault();
var ahref = $(this).attr('href');
$('#content').load(ahref);
return false;
});
});
I’m working on making my web site fade in and out every time I click a link to another page. I need to use jQuery to do this. Do I need to put the jQuery code on every page or can I write jQuery into the CSS Stylesheet? If so, how do I format the CSS Stylesheet to accept jQuery?
I’m experimenting with the code from this forum post: Fade Out between pages – CSS-Tricks
Edit to question based on comments
So, I now know that I can’t put JavaScript in CSS file. What’s the best way to put JavaScript code that applies to all pages in a site? I want to write this transition code and then not have to write/edit it into every page.
Save the JavaScript in a file with the extension .js, for example main.js. Then give it a public URL, in a similar way that your CSS files are accessible from a URL. An example URL: http://example.com/js/main.js. You might do that by putting it in a js folder in your public_html folder on your server – it depends on your server.
Then, near the end of each page’s HTML, right above </body>, add this HTML tag:
<script src="/js/main.js"></script>
The script tag with a src attribute will load the JavaScript at the given URL and then run it immediately.
I recommend putting it at the end of your <body> element and not inside the <head> because the script prevents the rest of the page from loading and displaying to the user while the script runs. If you make the script run only at the very end of the page, the page is already loaded and the user can see all of its content.
you need to do a $.fadeout on the window.beforeunload event, bye
PD: in a js file, not in a stylesheet, you can´t use JS in a stylesheet. bye.
I've been searching for a while now, but I can't figure out how to load an entire page via AJAX and still execute all javascript and css.
Mostly I just end up with the plain text without any CSS.
Is there a way to do this? I tried jQuery.get, jQuery.load and jQuery.ajax, but none really work like that.
I have a different solution. You may try it with an iframe. Use jQuery to append an iframe script including all relevant codes into some part of your page (like some div). This may do it for you including CSS, like;
$('<iframe src="your_page.html"/>').appendTo('#your_div');
Or you may try something like;
$('<iframe src="your_page.html"/>').load(function(){
alert('the iframe is done loading');
}).appendTo('#your_div');
I have solved similar problem as following.
Download the webpage over ajax
Iterate it over and find any <script> and </script> tags
Get content from within these tags as text
Create new <script> element and insert there the code
Append the tag to your webpage
Another thing is you will need to somehow call the script..
I have done it this way:
I set standardized function names like initAddedScript callback which I am calling after appending the script to the page. Same as I have deinitScript called when I do not need the code (and its variables,..) anymore.
I must say this is awful solution, which likely means you have bad application architecture so as I have had:)
With css is it the same, but you do not need any handlers. Just append the style tag to your documents head.
If the page you load doesn't have any style data, then the external stylesheets must have relative paths that are not correct relative to the invoking document. Remember, this isn't an iFrame - you aren't framing an external document in your document, you're combining one document into another.
Another problem is that loading your complete page will also load the doctype, html, head, and body tags - which modern browsers will cope with most of the time, but the results are undefined because it's not valid HTML to jam one document into another wholesale. And this brings me to the third reason why it won't work: CSS links outside of the head section aren't valid, and the misplaced head section caused by your haphazard document-in-document collage.
What I'd do for compliance (and correct rendering) is this, which would be implemented in the Success callback:
Copy all link elements to a new jQuery element.
Copy the contents of all script in the head section
Copy the .html() contents from the loaded document's body tag
Append the link elements (copied out in step 1) to your host document's head
Create a new script tag with your copied script contents and stick it in the head too
Done!
Complicated? Kind of, I guess, but if you really want to load an entire page using AJAX it's your only option. It's also going to cause problems with the page's JavaScript no matter what you do, particularly code that's supposed to run during the initial load. There's nothing you can do about this. If it's a problem, you need to either rewrite the source page to be more load-friendly or you could figure out how to make an iFrame suit your needs.
It's also worth considering whether it'd work to just load your external CSS in the host document in the first place.
I suppose you are looking for something like this:
your page div --> load --> www.some-site.com
After a quik search the closest solution seems to be the one by "And": Load website into DIV
You have to run a web server and create a proxy.php page with this content:
Then your JQuery load() function should be like this:
$("#your_div_id").load("proxy.php?url=http://some-site.com");
NB. I have tested this solution and it should not load all the CSS from the target page, probably you'll have to recreate them. For example the image files stored on the remote server will not loaded, I suppose due to authentication policy.
You will be also able to view only the target page without the possibility to browse the target site.
Anyway I hope this could be a step forward to your solution.
Get your entire webpage as text using ajax
document.open();
document.write(this.responseText);
document.close();
OR
document.documentElement.outerHTML = this.responseText;
But you need to change the path of css and js pages in original webpage if the resulting webpage is in another directory.
I know iframes accomplishes this, but I want to find out how to do it without iframe if possible. I have for example 4 pages.
index.html
1.html
2.html
3.html
Where index.html has 3 links. if I click on link 1 on the index.html page, all the html content in 1.html is loaded in. If I clikc on link 2, then 2.html is loaded in.
How do I accomplish this with Jquery/Javascript/HTML only? (No serverside)
With jQuery you can use the get() or load() functions to get the contents of a page. If you use get you can then append it to an element in your current page, or use the html function to overwrite existing content in that element.
Using load is simpler:
$("#yourElementId").load("1.html");
As other folks suggested, .load() may be your friend here. Additionally, note that you can load specific parts of the requested page. This example is from the API doc for load()
$('#result').load('ajax/test.html #container');
It takes the element with ID container from the results of ajax/test.html and loads it into the
local element with ID result. This technique may be more of what you want, particularly if you're trying to combine multiple pages into one.
You can also do this with jQuery Ajax method pretty easily and it gives you a bit more flexibility than the load method (e.g. you can specify you don't want to get a cached version of the page).
<div id="results"></div>
$.ajax({
url: "1.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});