so i am just wondering if i could do this:
a basic site, nothing on it but 4 different photos that have different priority levels which indicate the time-span of actually displaying an image ( lvl1=1min, lvl2=3min, lvl3=10min...and so on)
How could i do this with html and php.. I am not sure if answer is really basic but i cant seem to get my head around it.
Is html code running parallel to php code or does an infinite while loop in php stop the whole html code in process?
I was thinking of creating an infinite while loop in but i am worried it would eventualy somehow crash the site?
I guess i dont understand how html code runs..
Thanks to anyone who helps.
As OP mentioned. You have to use JavaScript. PHP is for server side processing, once it send final output to web browser you have to request again from the web server. You can use AJAX for your purpose easily.
In the context of the WWW (and simplifying a bit):
PHP runs
The output of PHP is received by the web server
The web server sends the output to the browser
The browser displays the page
You can look at the current time and use that to decide what <img> tag to send to the browser.
You can't change an image already displaying in the browser using server side code. The code has already run. New code won't run unless the browser makes a new HTTP request.
If you want to change the image displaying in the browser you need client side code. For all practical purposes that means JavaScript.
You can use the timer functions to run code after time has passed and DOM to change the HTML elements already on the page.
Understanding bits from your question this may be what you need
PHP code will send all four images to the browser in img tags. You can add priotity to one of the attributes to each tag for example <img data-priority="1" src...
When this code is fully loaded in browser you start a timer in javascript which then looks at current time and subtract it from time it loaded and get number of miliseconds. You can get all this using date and time functions in javascript.
At each time difference you check if that requires an image to be hidden or shown and then show or hide it. Look at jquery show and hide functions for html nodes.
If you want to show one image just hide them all in beginning and then show the one you want according to whatever rule you have either server side or client side. PHP will help you narrow down rules on server and send only required data to client however you can use simple html to hide and show if its not critical and you will avoid making multiple calls to server for images.
If this is the scenario you are looking for then try it in jsfiddle or code with sample images. You can get 4 sample images from http://lorempixel.com/ and use javascript to play with it.
For you purpose you can use AJAX which is update your code on given time interval.
If you want to set something on a timer, you can use JavaScript's setTimeout or setInterval methods:
setTimeout ( expression, timeout );
setInterval ( expression, interval );
Here expression is a normal function and timeout and interval are integers in milliseconds. setTimeout runs the timer once and runs the expression once whereas setInterval will run the expression every time the interval passes.
So in your case it would work something like this:
setInterval(function() {
//call $.ajax here
}, 5000); //5 seconds
As far as the Ajax goes, see jQuery's ajax() method. If you run an interval, there is nothing stopping you from calling the same ajax() from other places in your code.
Anymore expression need please let me know.
Related
I'm using file_get_contents + regular expressions to scrape data from a website.
I'm using the function inside a "for" loop to scrape all pages from 1 to 2000.
The website I'm trying to scrape is coded in React I guess, because I see things like this in its html: data-reactid="408"
My code works well to scrape data from the first page only, but when it goes to second page and later pages, it returns different html tags to what I'm expecting and thus my regular expressions return 0 element found.
After investigating a little, I discovered that file_get_contents is very fast to the point it returns a version of the page not fully loaded, I think React does some post-modifications to HTML href links and transforms span tags to a tags.
Now I'm looking for a way to tell file_get_contents to wait until the page is in it's final loaded state, and then return me the HTML.
Do you have an idea of doing so ?
PHP (and file_get_contents) only fetches the html code, it will not execute any client-side JavaScript and because of that it will not reflect any dynamic changes to the website.
For that, you would have to use something like puppeteer or CasperJS. These can do client-side rendering on your side and return you the final html code.
The default value for a timeout in file_get_contents() is 60 seconds, that seems pretty long and you did not specify how long was the page to process.
If it is more than 60 seconds, you can use :
ini_set('default_socket_timeout', 90);
to ask for more, for instance 90 seconds.
If the pages loads faster than 60 seconds, then I guess the problem is in your code logic, like you expect some client side Javascript to be run.
I have a little bit of a conundrum. Basically I'm developing a WYSIWYG Editor plugin for jQuery specifically for my web application. One of the features will be inserting an inline image tooltip based on the images a user has uploaded. For example:
Hello there my name is [i="profile_pic.png"]A. Username[/i]
The part that I'm having an issue with is, when defining which images are available to a user, whether I should insert the PHP array directly into the Javascript like so:
var available_images = "<?=json_encode($User->Profile->images)?>";
or to go for an Ajax GET that returns an encoded array of the image sources? I think the inline php makes more sense since it removes the need for an unnecessary ajax call but I didn't think that inserting inline php into javascript is terribly good form?
Any suggestions?
There's nothing wrong with inserting data collected by PHP into JS, how else would JS get the data? The only reason you should consider the AJAX call would be, if users could upload new images while they are editing. This would mean the information needs to be updated, which would make the AJAX call more appealing than the static JSON on page load.
Unless the array changes in any way over the life time of the page, then I'd spit out the array exactly as you suggest in your code snippet. There isn't any real benefit to having an extra ajax call because the size of the array I'm guessing won't be so huge as to impact the initial page load time.
If you look around the Stack Overflow pages and do view-source, they do this sort of thing all the time.
If the amount of data is huge and maybe adds a seven or more seconds to the page load time then I'd consider an ajax call. At least the page is rendered and the user has something to look at, meanwhile you can have a throbber image with a status message saying loading or whatever.
I'd also say that I see a lot of unnecessary ajax goings on just for the sake of it. It's like premature optimisation, people adding complexity to solve a problem they don't have. Start off simple as you're doing, if you're having response time issues down the road with the said page, then consider what benefits ajax will bring to the table.
Do you always get the array of images, or only sometimes (e.g. in response to a user's action)? If the former, I'd say do it inline. Otherwise do it as AJAX. i.e. only do it by AJAX if it'll reduce your traffic etc. But if you have to always do it, I don't see any advantage. I don't see any problem with mixing inline php and javascript, other than it means you have to do your javascript inline too instead of in external .js files that can be cached (or at least the part where you populate your array).
I want to write a php code that displays a html button only till some point of time.
Since php is a scripting language and code get executed only when the html page is rendered,
I was thinking that instead of polling I can just check the time at the time the page is getting rendered. If the current time does not satisfy my condition then I simply won't echo that button else I can echo the button.
Is this approach right or should I do polling ?
Once the page loads, php has no more control. If you have displayed a button, and you want to remove it after a certain time frame, you will need to use javascript anddo some kind of setTimeout() to schedule that. Obviously, the javascript won't be 100% reliable (if someone has js disabled, or a browser not supporting js).
I don't understand why you would use polling. PHP already has all needed functionality to both check the time and to conditionally output HTML. The only thing that may cause trouble is timezones, but that can be handled by adding an offset to the relevant times.
I am trying to found out how to see if a php file has changed and then show a div with saying Page changed in JQUERY
You'd better do that in PHP using filemtime, no need for JQuery here.
You only need jQuery for this task if you're trying to detect the page change without waiting for the user to request a new page. If not, do as the other responder suggests and use PHP.
But if you need to do it without a page reload, use one of the $.ajax() methods in jQuery in combination with a JavaScript timer. You'll have to poll the server periodically (thus the timer) to ask if the page has been altered.
You would also need to set up something on the server that can tell your page about changes. Perhaps a very simple service that provides the timestamp of the last edit in JSON format. Use $.ajax() to poll for the timestamp, then compare it with the last edit the page knows about. If the timestamp from JSON is more recent, display your div.
Javascript cannot access the server, you will have to use some sort of server side technology. Like PHP that was suggested by Pekka.
In short, javascript is client side, which means it interacts with the user on their side, while php is server side, meaning it interacts with the server. Checking the file modified date is a server side issue, your client isn't serving the pages (unless you're on freenet)
Or you could output a <meta> tag for when the page was updated with PHP or whatever framework or language you are using. Then create a cookie with your JS and compare the cookie with the meta tags content.
Ugly solution but it would work. I wouldn't want to resort that this however.
I would like to load/refresh a particular page for every 10 secs to view updated data's fetched from Database.
I used META for doing it
<META HTTP-EQUIV=Refresh CONTENT='10; URL=livedata.php'>
But still i agree we also do this by
using :
Javascript to load a div by settimeout
Ajax dynamic refresh
Would be great if you share the performance issues using META , AJAX dynamic refreshing , Javascript settimeout .. Also share the best way of doing it.
Note : Need to refresh whole page rather than specific frame or div.
Using AJAX is the least intruisive to the user, because the user doesn't notice that something is being refreshed/reloaded until it is complete.
Please note that AJAX can perform better or worse than META depending on the situation:
If the data to be updated is small with respect to the full HTML page size, AJAX is better than META, because with AJAX you can send only the data difference, and/or you can send data in more compact format than HTML.
Running JavaScript puts a burden to the user's browser. If the user has 20 tabs open (which is not uncommon), and each of them runs some setTimeout in the background, it can make a huge difference in browser respoinsiveness to convert all of them to JavaScript-free refresh.
If you plan on refreshing the entire page, using <META> tags is the cleanest way. It just seems awkward to have a JS timer refreshing your page when you have a fully-supported HTML-only way of doing this.
However, if you just need a specific part of the page refreshed, use AJAX. It's better in terms of user experience, as well as performance.
using javascript to fetch dynamic content has one more benefit: if the content doesn't load for one time, it can still keep trying. if you reload the whole page and it doesn't load, then it would stop there.
also if you use Ajax, then the display is nicer because you don't see the whole page blanking out and re-rendering again and again.
For the client, there's really no difference between all the methods you mentioned. The only difference I can find is that using doesn't require javascript, like other solutions do, but nowadays everybody has javascript anyway.
The big difference, to me, is in the server usage. If you have 100 users refreshing every 10 seconds, that's already about 10 reqs/sec. Depending on the logic you have to generate the page (which is likely dinamic), this may cause the server usage to skyrocket. Make sure you're careful about that.
note that you can also use header() in PHP to accomplish what the meta tag is doing too. Just make sure you make the header() call before other output.
With jQuery you can do it):
var seconds = 10;
var id = setInterval(function()
{
$('#container').load('whatever.php');
}, 1000*seconds);
:)