How to get content that isn't loaded yet? - php

I need to get content from ANOTHER SERVER web page, but when I use file_get_content($url), URL won't show up for certain page probably because it isn't loaded yet.
Is there any option to get content if page loads dynamically for couple of seconds?
For example, I need to load oddsportal.com/matches with all matches and odds, but when U use file_get_content('oddsportal.com/matches') in my PHP code, these things won't show up. Why? Probably cause of dynamic content loading.
Maybe I can load content into an iframe and then wait for completely load and on someway get content from iframe?

Use JQuery for this.
<div id="url-contents"></div>
<script>
$( "#url-contents" ).load( "your/url.html" );
</script>

Related

Refresh only a div ("content") by universal button working on every page

To be clear - Ive already checked other Questions about refreshing div and the ideas I found were not exactly what I look for.
My site is made of plenty pages with the same header and footer (top, bottom, menu on both sides). I use smarty templates, and the Whole action of every page happens in one <div id="content">.
My users use to refresh most of those pages many times to do an action they've already done once again. With refreshing browser loads again header, footer, viewed page etc. I would like to bring them the button (instead of F5) which will refresh just a current content page (e.g. account.php) without refreshing whole site.
One of plenty structure:
<?php
$title = 'OneOfPlenty';
require_once("includes/head.php");
{
Whole action
}
require_once("includes/foot.php");
?>
header.tpl ends with <div id="content"> then comes
onofplenty.tpl and then in
footer.tpl I got </div> (close the content)
Here comes the question: Is it even possible? Am I able to create such a flexible button which will recognize which page is being displayed and will "know" to refresh just the content of this page?
Any ideas and help will be aprreciated.
Thank you
TTed
You could do an Ajax call with jQuery to get the output html of the tpl file of the page.
You could use an Ajax call, e.g. by using the jQuery get() function, e.g. like this
$.get("includes/account.php", function(data) {
$("#content").html(data);
alert("Load was performed.");
});
If you saved some kind of variable, either to session or to a data-content on your div. Just so you know which page you are on. Say if you are on account.php you set $('#content').attr("data-content", "account"). Then if you press the refresh button you could use an ajax get on $('#content').attr("data-content") + 'php' to re-import the data. Could be done with a SESSION variable as well.

div contained ajax reload when a link clicked

hi i am using ajax for loading pages, and also for back button facilities. everything is worked fine except one. Well i narrowed down my problem but cant get any solution. my main page has a container div where i load most of the pages without reloading the whole pages like in gmail.
as for pjax it also loads tags for seo friendly url.
but there is a div in the main page contains "<?php echo $pagename; ?>" it gets the pagename from the loaded page and showed it in the div. well it worked only if the browser reloads. otherwise when i open pages continuously it does not change, it shows the previous one.
so how do i fix this issue. i am thinking about refreshing the div that contains the pagename. so how do i do that?
PHP code is always executed on the server side, so this div won't change when you use pjax. You need to change the pagename div manually as you do with the content div. You can do this with 2 pjax calls, or by splitting the ajax response into pagename and content (but maybe then pjax is not the right solution).
You can send a ajax request to the file that contains echo $pagename and display the response(which would be $pagename) using javascript.
Since you are using jquery, you can use $.ajax for this purpose.
Here is the code
$.ajax({
type = "POST",
url = "your-php-file-path",
}).done(function(response){
$("#div-id").html(response);
});

Adding Back button for web page loaded within another web page

I have an index.php with two major sections: the navbar and the main-content. The navbar contains links which will load another webpage to the main-content through this jQuery code:
jQuery('#main-content').load('sampleurl');
Some of these web pages contain links to another web page, so I want to add a back button.
I tried using the history.back() and history.go(-1), as well as the $_SERVER['HTTP_REFERER'], but they don't really work in my case.
How will I add the back button in this situation?
You should keep your last viewed page in JavaScript variable or in value of hidden input and then you only need to add button with
jQuery('#main-content').load(old_url);
You must always update your variable when you load your next page via jQuery('#main-content').load('sampleurl');
Try manipulating the javascript location or location.hash
https://developer.mozilla.org/en-US/docs/DOM/window.location
Of course, you need to be able to turn your URL back into the relevant page content too.
In conjunction with both Charlie and Michael's answers, since you are already using jQuery, another option is to include the jQuery Address plugin.
You can implement this idea, by creating a function to read a hash path to load new content. Following this, the content can be navigated by the built-in back + forward buttons.
The only challenge I foresee with this implementation is associating the new content with the hash path.
Good luck!
Just an idea: Add hash to Url whenever you load the page; and then you can use history.back()
$(function(){
if(window.location.hash === 'sampleurl'){
jQuery('#main-content').load('sampleurl', function(){
window.location.hash = 'sampleurl'; //<<-- match with your loaded page;
});
}
});
good luck !

Opening up a webpage inside a div tag instead of a tab

I was wondering if this was possible to do. I know you can pull a html file and put it on your page like this, <a href='index.php?content=Contact.html'> . Is there someway to pull a webpage from a URL to your site. So instead of a link open in another tab, it would open that webpage on your current site page. If it's not possible, is there some sort of similar solution I can use.
You can use the iframe tag to display other web pages inside your own web page.
When you say:
I know you can pull a html file and put it on your page like this, <a href='index.php?content=Contact.html'>
Actually, that's not a normal feature - it's only a function of whatever index.php file is on your server, and simply displaying content referenced by a GET parameter can actually quite dangerous depending on whether you know what to protect against and how.
I guess it depends on how "embedded" in to your site you wish for it to be, but it sounds like you could use iframes.
If you want to load an external website into your site, have a look at iframes [docs].
If you want to update parts of the page with content coming from your domain and without refreshing the whole page, you can use Ajax.
Yes, it is possible. You can use AJAX to get the other file and then set the .innerHTML property of your div to the loaded content. In the simplest way, with jQuery you'll have something like this:
var data = jQuery.get("http://my.domain.com/file.html")
$('#mydiv').html(data);
you could use jquery's load() function. i would do it something like this:
$(document).ready(function () {
$('a').click(function (e) {
e.preventDefault();
$('#myDiv').load($(this).attr('href'));
}
}

Keep a div from reloading

Basically, I want the same effect as the oldschool html 'frameset' I think.
Take a look at this page please:
http://onomadesign.com/wordpress/identity-design/alteon-a-boeing-company/
If a user selects a project from industry -> transportation for example, I would like that the right scrollmenu keeps its initial state when the new project page comes up. So they won't get lost and have to click again to be in the same submenu section.
So, the right thumbnail navigation should stay in the same way, I don't want it to reload.
Do I have to do it with frames or iframes? Or can I make some kind of jQuery call to 'not reload' that div? Maybe PHP? I'm sorry, I am not a programmer from origin.
Update:
Guys, I managed to put the whole thumbnail navigation code into a seperate php file, called sidebar.php. Now this gets called in my single.php (Wordpress) by <?php get_sidebar(); ?>.
Should it now be easier to make this sidebar.php NOT refresh on page reload? I've been looking at cookies, php sessions, iframes.. but I can't get it to work.
Any more help would be greatly appreciated!
Facebook kinda does this without frames for optimization's sake. They take every single link and, if supported, using AJAX to load the page content without reloading the layout.
Obviously, this sort of thing may require significant restructuring of the internals of your app. Another option is to simply store the menu's state as a cookie on link click (see the jQuery Cookie plugin) and, on every reload, either have Javascript look at the cookie and dynamically restore the menu to its correct state, or use your internal PHP to read the cookie and decide what menu to display.
But if you get really desperate, you may end up falling back on frames. Sometimes that can be okay - but try everything else first :)
You also can detect what menu item was activated (you got the page request due to clicking on the corresponding link) and use this information to restore/select this menu item.
At least that is what I do and... No cookies or AJAX required!
You can use a technique known as "AHAH" Asynchronous HTML and HTTP. Essentially you're doing a jQuery
$.post("whatever.html",function(data) {
$("contentdivelement").html(data);
}
You can wrap this in a function like:
updateContent(sPage) {
$.post(sPage,function(data) {
$("contentdivelement").html(data);
}
}
This will load the content from your "frame" page into the div without reloading the page.
You can also bind to each of the navigation links and use their HREF as your path to load in your content div such as:
$(".menuLink").click(function() {
var menuLink = $(this).attr('href');
updateContent(menuLink);
/* prevents the browser from taking the parent to that link */
return false;
});
ADDITION:
Your menu may look like this:
<ul class="myMenu">
<li>Frame 1</li>
<li>Frame 2</li>
</ul>
Also,
If you want it to remember the page you're on you can use cookies or #anchors. There are many ways to add "tab" or "menu" anchors but one way would just be to use a jQuery plugin.
The most COMMON and TRENDY way to do it is to use #anchors. Your browser address bar ass #frame1 to the end so when the page is refreshed or reloaded it will load up "frame1" automatically with some additional code.
You can even called the anchor #/frame1.html and read the anchor in
$(document).ready(function() {
/* you'll need to either use a plugin or parse out the anchor from your current browser address bar */
updateContent(anchorContentVar);
});
Instead of updating your content using click-handlers I suggest a slightly different approach. Just replace your hyperlinks with this kind of link:
#info_page
Now set up a simple interval that reads out the current URL and updates the DIV accordingly:
__LOC = document.location.href;
setInterval(function(){
if (__LOC!=document.location.href) __LOC=document.location.href;
var fetchURL = __LOC.split("#")[1];
$.get( "/getcontent/"+fetchURL, function(d){ $("#mydiv").html( d ); } )
} 1000);
This allows visitors to use bookmarks as well.

Categories