Is there a way to load whole new URL / page inside my site element so that you can interact with that page without refreshing my page? It's not a problem if it initially has to load with page refresh.
jQuery.load()?
jQuery.ajax()?
All I could find online was loading parts of your own site and there was no info about using that loaded page without refresing your own page. Example:
jQuery(document).ready(function() {
jQuery("#dynamic").load("single.php");
});
I've previously loaded new pages inside modal but I need it inside div or anything else without "overlay".
I think you are trying to inject content from another domain.
that means you want a part of your page load another domains content.
this page demonstrates the issue very clearly. take a look there and read the answers carefully.
Related
I have a small rental car business and have an existing PHP website that presents our fleet and accepts online reservations using a series of PHP pages and SQL database calls. The system works very well, however I would like users to be able to move between pages of the website without the browser going to the usual blank page in between.
I have made an attempt at using AJAX to asynchronously load content of the pages in question into a "container" page, however I have not been successful in achieving the required result. The pages are heavy with PHP code and when I attempt to load content asynchronously using AJAX I get load issues that I cannot seem to resolve.
I understand that the AJAX load() method allows content to be asynchronously loaded into a container such as a DIV element, however I am wanting to know if this method can be applied to the full page content. In a sense, the full of the page would be the container for the content of each page to be loaded into.
Ideally, each separate page would load in the background with a semi-transparent loader overlay (like an animated moving loader bar) would sit over the current page, and the target page would be loaded and then the overlay removed to fully reveal the new page content. The user would see the loader overlaying the current page content, then would see the new page content without seeing a blank page in-between.
Can the AJAX load() method somehow be applied to the full page rather than to a DIV, and would there be an effective way to apply this method to some or all existing pages without a large amount of rework to the existing page content?
Many thanks,
Scott.
So I'm trying to build an informational page on my website that is fairly expansive, enough so that it has it's own Nav and Sub-nav.
The nav is currently built and now I need to introduce and link the content to appear the way that I want it to, but that's where I'm beginning to get lost in how I should structure it efficiently. I'll try to give as detailed a run-down of the structure it lives is as possible.
First of all, all of this must happen on one page of the site. The links in the navigation should trigger different content, but in interacting with this Nav one should never leave the page (I suppose reloading it is okay, but not preferable).
The page is loaded from a "template.php" that basically just has different div's that contain a function $definepage to load their content.
Something like:
<div class="middleArea" id="infoPage">
<div id="Nav" class="content">
<?php require($definepage); ?>
</div>
<div class="returnNav"><img>backbutton</img></div>
</div>
I want to add a separate div in this template that will be for showing the user's desired content dynamically without leaving the page. So if "Item 6a" is chosen this div will be loaded with the item's corresponding content, then if "Item2b" is chosen the div instead is loaded with that item's content - with the previous content no longer there.
I have about eight Main Nav items and six of them have multi-item subnavs. So there's a lot of content which is why I didn't want to have it all existing on the page and simply hidden and shown with the links for page load reasons.
But I need the links from the first div (in the template) to load the correct .php in the (to be) content area div, as well as stay "active" while the corresponding php is loaded to remain highlighted - show that that link's info is currently being shown.
Can this be accomplished through a href="#anchors"? Or can I somehow have the content area exist in the same div of the template, but still load from external php so all of it doesn't have to load with the page? (I figured php within php within php was a bad idea)
If you want to load some content without reloading the page, you may use AJAX.
You should use JavaScript to change the content of the page without reloading it/changing the URL, using AJAX calls as mentioned by #antoyo to transfer data between the server and client as needed.
Here's an example for an ajax request with jQuery:
http://jsfiddle.net/dj50uev5/1/
HTML:
<div id="placeholder">
</div>
<input type="button" value="Ajax Call Test" />
Javascript:
$('input').click(function() {
$.ajax({
url: "internalUrlOrFile.txt",
context: document.body
}).success(function(data) {
$('#placeholder').html( data );
});
});
I can't really provide a working sample where the content is added automatically due to cross domain origin policies.
Let me know if you need further clarification.
Possible Solution:
What if I use iframe to load a "separate site" as a separate directory in my site's root folder whose pages would contain the needed content. The links in the Nav would then be URLs pointing to the corresponding page in the "content site"?
Any glaring functionality issues here? On paper it looks like it would work.
*(Please disregard the previous idiom's ironic use for the web medium)
I hope this question makes sense because it seems simple, yet I can't work out exactly how to word it in an understandable way.
Basically - I have an Ajax system for loading content onto an HTML file via a seperate PHP file. This is to not need the actual page the browser has loaded to change, only the content.
What I would like to do it be able to create a link WITHIN one of the loaded content pages, which will change the content to another page via the parent. For example:
Load the 'menu' page using Ajax, onto a div contained in the main page
Click a link on the 'menu' page, and a different page is loaded onto the same div on the main page
Cheers
Create a javascript function to load content, and then create javascript: links, or onclick handlers to run it with the requested page :)
I got a situation here. I have a main page and a subpage. The subpage does have an iframe container and there are two pages test1.htm and test2.htm that are loaded into that iframe when your current page is "subpage.htm".
However, what I want to to, is to be able to click on a link on my main page and it opens up the subpage and automatically loads a predefined page, lets say test1.htm into the iframe.
I got the function to load a page into an iframe and I though by using JavaScript and some code this was possible. Unfortunately, I couldn't figure out a way to do this.
function link {
url = '../subpage.htm';
document.target = url;
loadintoiframe(myiframe,test1.htm);
}
I got the function loadintoiframe, it needs the name of the iframe and the page to load.
When I call the function link() as a href link on the main page, it does load the subpage, but it does not load the iframe correctly.
Maybe someone can help me out?
Why not just put
Link
And avoid the JavaScript at all?
So this does not work.
I tried to go for a JavaScript Method that just does a href basically and then calls the method that loads my special page into that iframe on the href site.
That did not work, so anyone else got a clue how I can href a different .htm site and simultaniously tell that site to load a certain page into the iframe?
Best regards,
Alex
I have been learning more about AJAX using PHP and wanted to ask about the relationship of loaded content to the page itis loaded into.
I have been using the AJAX Pagination script v1.2.2 i found at "dynamicdrive". I was able to properly implement the dynamic page load as expected and it works. The pages I load have images in them that i'd like to be able to add hyperlinks to. These links would change content on the original page with a similar function ( perhaps the ajax function .load() )
for some reason I can't seem to reference the objects on the original page fromt he loaded content to do any work. I noticed that when i "view source" on the page, I only see the original page and not the loaded content. I have been searching for anything I can use to determine how to interact between the original page and the loaded content. Is the "loaded" content a child page? i see a lot of references out there to iframes etc, but I know that this is not the method i'm using.
Any suggestions on the ralationship of these pages and how to interact betweent hem would be greatly apprecaited.
Thanks,
Silver
I can answer one part of your question - to view the source, try using Firefox extension - Developers tool bar, which allows you to view the 'Generated source'.
Or if you use element selector in any browser, it will show you the generated source.