Get content of URL after the page has loaded - javascript

I need to fetch a string in a <div> from an URL. I'm using Ajax and PHP to retrieve the information. I've managed to collect the "correct" data.
The issue is, the data I'm collecting - which is a number -, is 0in the beginning and directly updates to 103 or some other random number once the page has fully loaded. I need the second one.
This is because the website I'm retrieving data from is made in ReactJS and updates that number dynamically with JSX.
I somehow need to get the data after the page has loaded all of it's content.
Long story short:
How can I fetch data from an URL after the page in question has loaded its full content by javascript?
My code:
/gethtml.php
function curl_get_file_contents($URL)
{
$c = curl_init();
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($c, CURLOPT_URL, $URL);
$contents = curl_exec($c);
curl_close($c);
if ($contents) return $contents;
else return FALSE;
}
function get_number(){
$url = "https://www.example.com";
$html = curl_get_file_contents($url);
$dom = new DOMDocument;
#$dom->loadHTML($html);
$divs = $dom->getElementsByTagName('div');
$compare_string = "someClassName";
foreach ($divs as $div){
$c = $div->getAttribute("class");
if(strpos($c, $compare_string) !== false) {
return $c;
}
}
}
$num= get_number();
echo json_encode(array("value"=>$num));
Javascript / Ajax
jQuery(document).ready(function( $ ){
$.ajax({
url:"gethtml.php",
type: "post",
dataType: 'json',
data: {},
success:function(result){
console.log(result.value);
}
});
});
Visual example

Long story short: You should not manually update "views" that are controlled by React.
Even if you execute your code AFTER the page was initially rendered, there is the chance that the state of the component will change because of some reason and your change will be overwritten yet again.

Related

PHP. saving many pages as png from the command line

I access a page via GET (some of its contents are loaded using jquery), on document.ready this page gets saved as a png.
I want to call this page from a command line using inside the command a for loop to save multiple pngs.
How can I do it?
If I run this on the browser it works fine but the idea is not to make it manually, one by one for each gln code.
curl did not work or am I using it wrong?
<script>
#isset($saveCode)
$("#btnPng").click();
#endisset
$("#btnPng").click(function () {
var selected_date = $('#selectReportDate').find(':selected').val() ;
var selected_gln = $('#selectAccount').find(':selected').val() ;
html2canvas($("#printable"), {
onrendered: function (canvas) {
var url = canvas.toDataURL();
$("<a>", {
href: url,
download: selected_date + selected_gln
})
.on("click", function() {$(this).remove()})
.appendTo("body")[0].click()
}
})
});
</script>
command handle code
public function handle()
{
$date = WeeklyTopSheetsData::max('report_date');
$accounts = REF_GA_GLN::Select('gln')->orderBy('account_name')->get();
foreach ($accounts as $account) {
$auxURL = 'http://localhost:8000/topsheet/' . $account['gln'] . '/' . $date . '/1';
$ch = curl_init();
echo $auxURL;
//set URL and other appropriate options
curl_setopt($ch, CURLOPT_URL, $auxURL);
curl_setopt($ch, CURLOPT_HEADER, 0);
// grab URL and pass it to the browser
curl_exec($ch);
// close cURL resource, and free up system resources
curl_close($ch);
}
echo ' FIN';
}
}

PHP & cURL -- Wierd output

I'm mainly playing with PHP and cURL (the code includes some AJAX and HTML as well).
Architecture:
Front <--> Middle <--> Back <-->MySQL
Description:
In my front section I'm creating an AJAX object and doing a POST request with some data (JSON format) obtain from a Form in the HTML.
Data is sent to my middle server (PHP file). This file receives it and json_decodes it. Determines witch switch case to use and sends it to the back server using cURL.
Back server (PHP file) gets data from POST request and it json_decodes the data. It then proceeds to create MySQL connection checks if passwords match. If the passwords match it echos back a string saying "GRATNED".
Data is passed back to middle server and then to front section where AJAX receives it and displays the string.
So...
All of this works perfect. However, for some reason my data contains a 1 at the end. which messes up my Regular Expression in my JS file.
Can you guys please let me know what option do cURL (if that is the case) do I have to modify or what is it that I'm doing that I get that one(1) and how to remove it.
Thank you guys.
Attached is my code & and images of output...
Front
function whenSubmitt()
{
//Get the data that I want to pass
//JS Object
var parameters = {"case":"login",
"username":document.getElementById("username").value,
"password":document.getElementById("password").value
};
//Make into JSON object
parameters = JSON.stringify(parameters);
//Create AJAX object
var xobj = new XMLHttpRequest();
var method = "POST";
var url = "./front.php";
//Open Connection
xobj.open(method,url,true);
xobj.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//When Submit button is pressed
xobj.onreadystatechange = function()
{
if (xobj.readyState == 4 && xobj.status == 200)
{
var respuestas = xobj.responseText;
document.getElementById("msrv_answer").innerHTML = respuestas;
//window.location.replace(respuestas[0]); //REDIRECTS TO NEW PAGE
}
};
xobj.send(parameters);
}
Front PHP
<?php
function contact_middle_man($parameters)
{
$url = "https://myurl/middle/middle.php";
$obj = curl_init();
curl_setopt($obj, CURLOPT_URL, $url);
curl_setopt($obj, CURLOPT_POST, strlen($parameters));
curl_setopt($obj, CURLOPT_POSTFIELDS, $parameters);
curl_setopt($obj, CURLOPT_RETURNTRANSFER, true); //ALLOWS TO GET ANSWER BACK IN STRING FORMAT, AND DOES NOT OUTPUT ANSWER DIRECTLY.
$ans = curl_exec($obj);
curl_close($obj);
return $ans;
}
/*RECEIVE DATA FROM WEB INTERFACE, USER*/
$indata = file_get_contents("php://input");
/*CONTACT MIDDLE MAN, USE CURL*/
$middle_answ = contact_middle_man($indata);
echo $middle_answ;
?>
Middle PHP
<?php
function http_post_back_server($url, $data)
{
$obj = curl_init();
curl_setopt($obj, CURLOPT_URL, $url);
curl_setopt($obj, CURLOPT_POST, strlen($data));
curl_setopt($obj, CURLOPT_POSTFIELDS, $data);
$ans = curl_exec($obj);
curl_close($obj);
return $ans;
}
/*URL TO BACK SERVER*/
$url_myserver = "https://myurl/loginquery_v2_.php";
/*GLOBAL VARS*/
$back_ans ="";
/*RECEIVE DATA FROM POST REQUEST*/
$indata = file_get_contents("php://input");
$data = json_decode($indata, true);
/*MAKE REQUEST TO SERVERS*/
switch($data["case"]){
case "login":
$back_ans = http_post_back_server($url_myserver,$indata);
break;
default:
$back_ans="NADA";
break;
}
/*ANSWER BACK TO FRON END*/
echo $back_ans;
?>
Back PHP
<?php
/*RECEIVING DATA FROM POST REQUEST */
$indata = file_get_contents("php://input");
/*DATA TO JSON OBJ*/
$indata = json_decode($indata, true);
/*CONNECTION TO DATABASE */
$conn=mysqli_connect(myusername, mypassword);
/*CHECKING DATABASE CONNECTIVITY */
if(mysqli_connect_error())
{ echo "Connection Error: ".mysqli_connect_error; }
/*GOOD CONNECTION ... CONTINUE */
$uname = $indata["username"];
$query="SELECT * FROM alpha WHERE username ='".$indata["username"]."'";
$db_output = mysqli_query($conn,$query);
/* CHECK QUERY RESULT */
if($db_output)
{
/* FETCH RESULTS */
while($result = mysqli_fetch_assoc($db_output))
{
/* COMPARE STORE PWD VS RECEIVED PWD */
if($result["password"] == $indata["password"])
{
/*JSON OBJECT*/
echo "ACCESS GRANTED";
}
/* PASSWORDS DOES NOT MATCH */
else
{
/*JSON OBJECT*/
echo "ACCESS DENY";
}
}
}
/*CLOSE DATABASE CONNECITON */
mysqli_close($conn);
?>
PAGE WITH OUTPUT
Thank you guys.
This is occurring because in your Middle PHP, you are missing the CURLOPT_RETURNTRANSFER option in your curl call. As a result, $ans is assigned the value true (because the curl call is successful) and the output from the curl call (ACCESS GRANTED) is echo'ed into the output from Middle PHP, followed by $back_ans, which being true, when it is echo'ed produces a 1 in the output. Thus the string returned to Front PHP is ACCESS GRANTED1. You can fix this by adding this to Middle PHP:
curl_setopt($obj, CURLOPT_RETURNTRANSFER, true);
Then $ans will be assigned the value ACCESS GRANTED instead of true and your output will be as expected.

Php Web Crawler Click

<?php
include_once('simple_html_dom.php');
$veri = file_get_html("http://apps.istanbulsaglik.gov.tr/Eczane");
preg_match_all('#<a href="(.*?)" class="ilce-link" data-value="(.*?)"
data-ilcename="(.*?)" data-title="(.*?)" id="ilce" title="(.*?)"><i
class="fa fa-dot-circle-o"></i>(.*?)</a>#si',$veri,$baslik);
$length = count($baslik[4]);
for ($i = 0; $i < $length; $i++) {
echo $baslik[4][$i];
echo "</br>";
}
preg_match_all('#<table class="table ilce-nobet-detay" id="ilce-nobet-detay">(.*?)</table>#si',$veri,$adres);
echo $adres[1][1];
?>
In this link;
http://apps.istanbulsaglik.gov.tr/Eczane I can not get the right side elements that will be listed under "Eczaneler".
Because I need to click any of left side elements then, I can see them. What I want to do is getting that elements in my web crawler.
The main problem is how can I make my crawler click? without clicking I can not see any data.
If I can make it click, then I can take the data from html source. If not my crawler will always return empty.
If you use any browser's inspector on http://apps.istanbulsaglik.gov.tr/Eczane link, you will see that each link in İlçeler column has a data-value and binded to a click event:
the page Javascript code:
$(function () {
$(".ilce-link").on("click", function (parameters) {
var title = $(this).data("title").toUpperCase();
var id = $(this).data("value");
var request = $.ajax({
url: "/Eczane/nobetci",
method: "POST",
data: { "id": id, "token": "aa416735d12fd44b" },
dataType: "html"
});
request.done(function (data) {
$("#nobet").empty(" ");
$("#nobet").html('<i class="fa fa-spinner fa-spin"></i>');
$("#nobet").html(data);
document.title = "06-11-2017 TARİHİNDEKİ " + title + " İLEÇSİNDEKİ NÖBETÇİ ECZANE LİSTESİ";
});
});
});
This code means that when you click on any link in the left column, the script will create a post request by AJAX to this url: http://apps.istanbulsaglik.gov.tr/Eczane/nobetci with an id and a token.
So the idea is to directly use this url and post data, you can get the id from the link element and the token from the js code on the first page, and then use CURL PHP to post these data.
Here is an example using CURL post:
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"http://apps.istanbulsaglik.gov.tr/Eczane/nobetci");
curl_setopt($ch, CURLOPT_POST, 1);
// you can use preg_match_all to retrieve the id and the token from the first page
curl_setopt($ch, CURLOPT_POSTFIELDS, "id=$id&token=$token");
$output = curl_exec ($ch);
curl_close ($ch);

Javascript setInterval method return always the same result from PHP method but I need changed data

So my problem is that I need to update some data from other site, and for calling that data I have php function where is the URL as parameter. ..So in JS I create a function that is in cycle with setInterval where I call that php function with URL parameter where are data stored, but it always return the same data..(data is actually playing track on stream, so data changed every +- 3 minutes) Data changes only on refresh page (f5) ..but I need update that data in background ..
this is the PHP function
function get_content($URL){
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $URL);
$data = curl_exec($ch);
curl_close($ch);
$data = str_replace(",,","},",$data);
$data = str_replace("}}]}}","}]}}",$data);
$data = str_replace("]}}","}]}}",$data);
$data = str_replace(",}}","}}}",$data);
$data = str_replace("}}]}}","}]}}",$data);
return $data;
In js I call in setInterval cycle only console.log to show result of php function..
console.log(<?php echo (get_content("http://server1.internetoveradio.sk:8809/status-json.xsl"));?>["icestats"]["source"])
Well, yeah. The PHP only gets called once in this case, the one time you echo out the contents of get_content();
If you want to get the content over and over again, use XmlHTTPRequest to call a PHP file which then returns the the result of get_content();
jQuery implements ajax ( XmlHTTPRequest ) to do exactly that.
jQuery.ajax({
url: "http://path.to/your_script.php",
method: "get",
complete: function( response ){
console.log(response);
}
});
edit:
Create a new .php file and paste this:
<?php
function get_content($URL){
$ch = curl_init();
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $URL);
$data = curl_exec($ch);
curl_close($ch);
$data = str_replace(",,","},",$data);
$data = str_replace("}}]}}","}]}}",$data);
$data = str_replace("]}}","}]}}",$data);
$data = str_replace(",}}","}}}",$data);
$data = str_replace("}}]}}","}]}}",$data);
return $data;
}
echo get_content("http://server1.internetoveradio.sk:8809/status-json.xsl");
In your html, add this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery.ajax({
url: "http://path.to/your_script.php",
method: "get",
complete: function( response ){
console.log(response);
}
});
});
</script>
This is the most rudimentory version, but it should point you in the right direction hopefully.

watch local directory for new files in javascript/html5

as title says, is it possible to monitor a local dir in the real filesystem (not html5 sandbox)? I'd like to write an automatic photo uploader that looks for new photos and uploads them.
Potential repeat of Local file access with Javascript.
My understanding is that you can't access the local filesystem directly through a web browser, you have to use an intermediary like the form input tag or drag and drop.
You may be able to get away with accessing the filesystem if you were to use the operating system's javascript interpreter or something like V8. There may also be experimental javascript api's in Chrome that you could look for on the Chrome flags page if thats your browser of choice. That all depends on whether or not you were doing a personal project or something for the web.
Otherwise another scripting language such as PHP, Ruby, or Python would better suit your needs.
You can set a Javascript Timing event. ie: use the setInterval() method.
On the other hand, you can make a button to trigger an onClick event, or any other event, to execute the following code.
NOTE:
If you set an interval, make sure the request was received before sending it again.
For achieving this, you need to check that the readyState of your XML HTTP Request equals 4, as follows:
xmlhttp.readyState == 4
NOTE:
This is for sending the request, parsing the response and putting it in a Javascript array:
xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "check_dirs.php", true);
xmlhttp.send();
fileArray = new Array();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
xmlDoc = xmlhttp.responseXML;
fileList = xmlDoc.getElementsByTagName("filesChanged");
while (fileArray.length > 0)
// clean the whole array.
// we want to store the newly generated file list
{
fileArray.pop();
}
for (i = 0; i < fileList.length; i++)
{
fileArray[fileArray.length] = fileList[i].childNodes[0].nodeValue;
}
}
}
Moreover, you will need to write a little PHP script to check your custom directory for files newer than a given date, that could be sent in the request by the way, and send an XML response back, like this:
<?php
(...) // check dir. output $files contain the xml nodes for the files to send
// mockup below
// Get our XML. You can declare it here or even load a file.
$xml_builder = '<?xml version="1.0" encoding="utf-8"?>';
$xml_builder .= $files;
// We send XML via CURL using POST with a http header of text/xml.
$ch = curl_init('http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']);
curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/xml'));
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $xml_builder);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);
curl_setopt($ch, CURLOPT_REFERER, 'http://www.hello..co.uk');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$ch_result = curl_exec($ch);
curl_close($ch);
/*
echo $ch_result;
*/
?>
Here are some mockup functions to check the directory and build the XML response:
<?php
function analizeDir($dir)
{
if (is_dir($dir))
{
$dir_resource = opendir($dir);
while (false !== ($res = readdir($dir_resource)))
{
if ($res != "." && $res != ".." && $res != "old")
{
if (is_dir($dir . "\\" . $res)) // this is a subforder
{
analizeDir($dir . "\\" . $res);
} else { // this is a file
checkFile($dir . "\\" . $res);
}
}
}
}
}
function checkFile($file)
{
$today = date("Y-m-d H:i:s");
// if the difference in days between today
// and the date of the file is more than 10 days,
// print it in the response
if (date_diff(datemtime($file), $today) > 10)
{
$files .= "<filesChanged>" . $file . "</filesChanged>";
}
}
?>

Categories