How to show a page where a DIV is with jQuery - javascript

Hello I have a DIV in the page index.html:
<div id="form"></div>
Now I need a way with jQuery to show another page inside that DIV.
The page I need to call and load there is contact.php
It is a simple HTML + PHP contact form.
Is there a way to load with jQuery the contents of contact.php inside index.html page where the DIV is?
Thanks for your help!

$("#form").load("contact.php");
The jQuery load function fetches data from the server (in this case from contact.php) and replaces the contents of the selected element (in this case #form) with that data.
If necessary, you can also pass data into the page being loaded, and also supply a callback function that will be executed upon completion.
For more information, see the jQuery API.

You probably want to use an <iframe> element. It would look something like this:
<iframe id="form" src="contact.php"></iframe>
This will load contact.php in a separate frame within your index.html, and you can style iframe#form in the same way that you would style a <div>.

Related

Loading a html page with pure Javascript using AJAX

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.

Is it possible to change elements in Object tag in HTML? If yes, how?

I have a HTML page where part of its contents is an external web page loaded into it with a HTML object tag like this:
<object data="someUrl-on-different-domain-than-host" type="text/html"></object>
Now, through jQuery or similar, I want to manipulate the contents of <div id="mydiv"> in the page that someUrl represents.
Is that possible? If yes, how?
Thanks :-)
use Jquery load
$("#mydiv").load("YOUR_URL");
your content from provided will be load into this div automatically
updated
If you want to get some specific content like a div with id mychilddiv you can do it like
$("#mydiv").find('#mychilddiv');

cURL returns full HTML via AJAX - how to display to user?

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

Can you select tags from another page?

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.

jQuery append doesn't work fully with <script> tag

Appending a script element using jquery rather than putting it in the html by hand seems to lead to very different results. For instance
snaphtml = '<script src="http:\/\/seadragon.com\/embed\/lxe.js?width=auto&height=400px"><\/script>';
$('#content').append(snaphtml);
destroys the layout of my page, but putting the script element in the page directly works fine.
I have posted a test case online:
Working example with script in html.
Broken example with script appended via jquery.
The second div should not be deleted / invisible once the silverlight object is added.
Ideas?
I would recommend you to use $.getScript method for loading external script files programmatically:
$.getScript('path/to/script.js', function() {
alert('Script loaded.');
});
The script load is made asynchronously, and as you see in the above example, you can specify a callback function that will be executed when your external file has been loaded and is ready to use.
Tristan, you will not be able to include the script you reference dynamically onto the page after it has finished loading. The external script is using document.write which will only work correctly when called before the page has finished loading. This is why your static implementation works fine, and your dynamic one tears the page apart.
You might want to put together a dummy HTML file that just has a basic HTML structure and this script in it already. Then dynamically add an iframe to your page that loads the HTML. There are even more dynamic ways to make it work with an iframe, but that would be the easiest.
Try to use $.getScript:
$.getScript("http://seadragon.com/embed/lxe.js?width=auto&height=400px");
Edit:
The provided script is using document.write, which is likely causing your problems: you cannot add it dynamically at the middle of the page. Try loading SeaDragon as shown here:
http://www.seadragon.com/developer/ajax/getting-started/
try to break script tag like
snaphtml = '</sc'+'ript>'

Categories

Resources