How to refresh/reload php function without having to refresh entire page? - javascript

I have a php file where I call different php functions to render a page. I am wanting to refresh portions of the page every 5 mins by calling the php functions again. My site works fine as it is but I am not able to update the content without reloading the entire page.
php file 1 index.php
<?php
// Enable functionality
require_once ("lib/config.php"); //this file has all my php includes and db configurations
site_head();
front_stats();
front_browser(20);
site_foot();
?>
php file 2 which includes the functions above - layout.php
<?php
function front_stats ()
{
//my content thats rendered on the page
}
function front_browser ($per_page)
{
//my content thats rendered on the page
}
etc.
?>```

Set the sections you want to reload into special tags i.E
<div id=reload></div>
then setup a new .php file that will return only the html code that should be replaced into the reloaded section.
Now include a Javascript file that accesses this php file via an ajax request periodically. Inside of the ajax request itself you'll need to fetch the new content and overwrite the old content. Here is an example for the ajax and replacing part:
xmlhttp=new XMLHttpRequest()
xmlhttp.onreadystatechange=function({
if(this.readyState==4&&this.status==200{
document.getElementById("reload").innerHTML=this.responseText
}
};
xmlhttp.open("GET","yournewphppagename.php",true);
xmlhttp.send();

Related

jquery ajax - why .load() cannot load self page?

I tried to refresh some div in my page with ajax load by using .load() but didn't work. I have to create new file page that use php to echo my div again. So Question is Do I have to create new file for echo that div, if I just want to refresh some div in my page?
$("button").click(function(){
$("#div1").load("currentpage.php");
});
above is not work.
I have to use below code.
$("button").click(function(){
$("#div1").load("otherpage.php");
});
Use Ajax for this.
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Relevant function:
http://api.jquery.com/load/
eg
$('#thisdiv').load(document.URL + ' #thisdiv');
Note, load automatically replaces content. Be sure to include a space before the hastag.
Reference link : Refresh Part of Page (div)

Reload window DOM after injecting php element

I have two different playlist in php file and I have two buttons playlist1 and playlist2.
<div class="player">
<?php include ('playlist1.php');?>
<?php include ('playlist2.php');?>
</div>
If I click playlist1 in the homepage it has to reload and append the <?php include ('playlist1.php');?> before page loads.
If I click playlist2 in the homepage it has to reload and append the <?php include ('playlist2.php');?> before page loads.
I tried something but no luck.
$( "playlist1" ).click(function() {
var append_php = "<?php include ('playlist2.php');?>";
$('#playlist').append("<div id='playlist2'>"+append_php+"</div>");
});
You're trying to emit PHP directives in Javascript which will never work. Keep in mind that Javascript runs on the client (i.e. on a web browser on the user's machine) and PHP runs on the server. You, therefore, cannot render PHP directly on the client - it must be run on the server.
Running on the server requires you to either navigate to a different page (perhaps using a querystring to pick what playlist you wish to render) or look into using AJAX instead.
Given that you say:
If I click playlist1 in the homepage it has to reload and append the before page loads.
If I click playlist2 in the homepage it has to reload and append the before page loads.
I'd suggest you change your PHP to look something like the following:
<div class="player">
<?php
$playlist = isset($_GET['playlist']) ? $_GET['playlist'] : '1';
include("playlist".$playlist."php")
?>
</div>
Playlist 1
Playlist 2
This basically inspects the querystring and then renders whatever is in playlist1.php or playlist2.php based upon what you pass. By default it renders playlist1.php. It assumes that the PHP file you're running is called index.php.

php/js refresh variable without refresh page

i have problem with my php/js code.
I need to check every 1 second content of file, so before i'm going to load page i set adress.txt content to "localhost" then i go to my website and it displays me localhost, now i want to edit content of text file to "192.168.0.1", so i want to set automatically div text to new content without refresh, its still localhost not 192.168.0.1
My actual js:
$(document).ready(
function() {
setInterval(function() {
var randomnumber = Math.floor(Math.random() * 100);
$('#show').text("<?php echo file_get_contents("adress.txt");?>");
}, 1000);
});
How can i update div text to new txtfile content without refresh?
Sorry for bad english :)
PHP is a server-side language. Your <?php echo file_get_contents("adress.txt");?> executes only when the page is loaded (or refreshed). Then, if you want to do anything without refreshing, you need to use javascript. If you want to call some PHP code without refreshing, you can use AJAX. And you even don't need PHP if you just want to get content of some file.
Try this:
$(document).ready(function()
{
setInterval(function()
{
$.get('address.txt', function(data)
{
$('#show').text(data);
});
}, 1000);
});

How to delay the pdf scan until page loads completely pdfcrowd api in php?

I am using pdfcrowd API for generating PDF from my dynamic PHP webpage, in which I am getting some data from DB and also running some jQuery functions with setTimeout function having 2 to 3 seconds delay at the bottom of page inside document ready function of jQuery.
This jQuery functions I am using to set page layout height dynamically based on content using Lightweight Responsive jQuery - Waterfall plugin, which takes some time to do that.
So, when I try to download PDF, it downloads page without running my JavaScript/jQuery function, which delay approx 2 to 3 second in it.
Code detail that I am using:
MyWebPage Code looks something like this:
//HTML + PHP code here at top of page
//jQuery code to set page height dynamically
function setContainerHeight(containerDiv) {
//function code here..
}
$(document).ready(function() {
setTimeout(
function() {
$(containerDiv).waterfall({gridWidth:[0,500,1000,1500,2000],gap:10});
setTimeout(function() {setContainerHeight(containerDiv);},2000);
},1000
);
});
Download Page
$client->setPageLayout(Pdfcrowd::CONTINUOUS);
$pdf = $client->convertURI($myWebPageUrl);
// Set HTTP response headers
header("Content-Type: application/pdf");
header("Cache-Control: no-cache");
header("Accept-Ranges: none");
header("Content-Disposition: attachment; filename=\"Resume.pdf\"");
// send the generated PDF
echo $pdf;
Please help me in this, how I can delay the PDF scan until my page loads completely.
Thanks in advance.
Since you can't hold webpage to render, as your JavaScript function is running after page load as usingsetTimeout, you should do whatever is required with page load only.
So, You should try calling your function setContainerHeight() after plugin work completion, means you should try call back function of plugin.
And remember to remove setTimeout as they will not be required, after using callback function. Moreover, if your plugin doesn't have callback, so you should mind calling your function from plugin file, though this is not correct way, but it should do the trick.
In your case, you should search for function named sorting in your waterfall API and add your function call in last of it.
Hopefully, this helps you..!!!
Your question does not clarify what the problem really is, may be a problem of the javascript not knowing when the PDF file has loaded fully, can you call it by an ajax call?
If you are loading the PDF to an IFrame you could try this:
$("#iFrameId").on("load", function () {
$(containerDiv).waterfall({gridWidth:[0,500,1000,1500,2000],gap:10});
});
If the problem is in php, may be the output of the PDF beeing slowed by the api you could stop the output buffer until the process is done by:
ob_start(); //at the begining
//Your code until echo
ob_end_flush(); //at the end

Auto refresh JS with appendchild command that grabs data from an external file

I am creating a chat system and I am using html/php/jquery.
How can I append a child with data from an external file to a div using javascript auto refresh feature?
The code that I have:
<script>
var auto_refresh = setInterval(
function()
{
$('#messages_box').load('refresh_messages.php');
}, 1000);
</script>
The code above refreshes the whole DIV with data grabbed from the mentioned document.
<script>
var auto_refresh = setInterval(
function()
{
var textnode=document.createTextNode("Water");
document.getElementById("messages_box").appendChild(textnode);
}, 1000);
</script>
And the code above, appends the text to the div I want.
I want to "combine" this two and obtain the following result:
Auto-refresh an external php file every second and if there are new results (messages in my case) the messages_box DIV should be updated with the results using the appendchils JS method.
I want to create a chat messaging system that will grab messages if a new result is encountered when loading the external php fild. I want to use the appendchild method, because by doing this I will practically add a new child to the div, not refresh the whole div. I absolutely need to append stuff, not to load the whole DIV again.
It seems to me that what you are looking for is an AJAX request.
Here's how I would set this up:
Have a database set up to store messages
Have a PHP file with various functions to both retrieve and send messages to/from the database.
Have another PHP/HTML file with javascript that creates an AJAX request to the other PHP file on a regular basis.
There is tons of documentation on how to create ajax requests with pure javascript, but I personally prefer to used the jQuery .ajax() function.

Categories