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);
}
});
Related
I am building a Wordpress plugin to display a list of jobs to a user pulled from a recruiting platform API. On click of a job, a cURL request is sent to the API that pulls the job details as a full HTML page (the online job advertisement). I have everything working fine in terms of pulling the HTML, but I cannot figure out how to display it to the user.
How can I either:
Open a new tab to display the HTML pulled from the AJAX request
or
Open the full HTML within a div on the same page (i.e. a modal)
I would prefer to open the HTML in a new page, but don't know how to use jQuery to do this... Opening within the page in a modal is also fine, but as far as I understand iFrames (which I would rather not use anyway), you have to pass a url (and I simply have the full markup). Is there a way to display this within a page, perhaps using canvas? It carries its own links to CSS and Javascript that need to apply only within that sub-page.
EDIT:
As a clarification, I know that I can simply place the HTML within the page. My issue is that it is a full page. This means it has a <head> <body>, and its own CSS links. Just putting it in the page messes with the rest of the CSS and produces invalid HTML.
This is what I already have:
$.post(ajaxurl, data, function(response) {
$('.sg-jobad-full').html(response);
});
It places the response within the page perfectly well... but it messes up the page by introducing a <body> within a <body> and competing CSS.
If you put the response in a <div>, it will mess the markup because css/js/meta definitions may not be put into the <body>.
If there is a way to retrieve the data without the markup already beeing in, you could parse the data and let it print via a javascript, which is the method I'd prefere.
According to your comment, you should really go with iframes, all other methods will alter your markup to have <html> tags inside <html>, which is very bad practice.
Iframes can be styled just like a <div> element, and it is realy not dirty to use iframes for the purpose you mentioned (it does not load from a foreign host, it is not hidden, it does not track).
<iframe class="job-offers-plugin" src=".../wp-content/plugins/yourplugin/getJobs.php">
</iframe>
Put some style into it like width;height;padding;margin;overflow; place it where you like..
This helps you with the databse:
Using WPDB in standalone script?
Add permalinks to your plugin script:
http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/
If you get the full HTML in an jQuery.ajax(...) call, you can always just show it in a certain div on your page.
$.ajax({
success: function (resp){
// resp should be your html code
$("#div").html(resp);
}
});
You can use the $(selector).html(htmlCode) everywhere you want. You can insert it into modals, divs, new pages...
If you have to inject a whole HTML page you can:
strip the tags you don't need
or
use an iframe and write the content to that iframe: How to set HTML content into an iframe
iframes aren't my favourite thing... but it's a possibility
Does anyone know how to load content into a div of external HTML page with jQuery?
Using $('#divname').html("content") only seems to be able to access div elements of the HTML page where the script is in.
If I understand correctly you want to change the content of a DIV of an external page like for example an iframe?
If so, this can't be done with simple jQuery due to security reasons
You can use load() to load all content , or target specific content from remote page into an element in local page. load() is an AJAX method. Do a little research on AJAX
$('#myDiv').load('remotePageUrl')
Or to only get part of the remote page
$('#myDiv').load('remotePageUrl #remotePageID')
API Reference: http://api.jquery.com/load/
Found it! This is what I needed:
access div in iframe parent
I thought I didn't matter that it was a child-parent relationship as long they were in the same domain, but apparently it does.
Thanks for the responses!
$.get("test.php", function(data){
$("div").html(data);
});
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.
If I have this page a.html that has all the jquery codes. And there is another page b.html that has only html tags. Is it possible to do something like:
alert( $('a').fromhref('b.html').html() );
Basically I want to select a tag from another page. I want to basically avoid the use of iframes and httprequests.
You can access parts of another page with jQuery, provided both pages are on the same domain, using load(), but this can only be done with an http request (though if the page is cached, it might not be necessary), as a brief example:
$('#idOfElementOnPageA').load('http://example.com/pageB.html #idOFElementOnPageB');
This will load the html of the element with an id of idOfElementOnPageB into the element with the id of idOfElementOnPageA.
But please note, this in no way avoids making a call to the server, though it does allow you to retrieve elements from another page without using iframe elements in your page.
References:
load().
The filename should be script.js instead of a.html, then, use the script tag.
Basically, something like this (in b.html):
<script src="script.js"></script>
As long as script.js is in the same folder as b.html.
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