PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
d

php api data ophalen jquery slide down

Door drerrie drap op 30-10-2021 02:14
2.118 views
Hallo ik ben bezig met een api om data ophalen nu wil ik als je op de button klikt dat er een slide down
de data wordt laten zien. ik kom er niet uit iemand die me kunt helpen ?


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideToggle Effect</title>
<style>
    .box{
        width: 400px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }
    .box-inner{
        padding: 10px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").slideToggle();
        });
    });
</script>
</head>
<body>
<?php

$IP = $_SERVER['REMOTE_ADDR'];
$ip = htmlentities($_GET["ip"]);
$hostname = gethostbyaddr($_GET['ip']);

$latitude = htmlentities($_POST['latitude'], ENT_QUOTES, 'UTF-8');
$longitude = htmlentities($_POST['longitude'], ENT_QUOTES, 'UTF-8');
$city = htmlentities($_POST['city'], ENT_QUOTES, 'UTF-8');

// ipapi.com provide api too

// old API without login from: http://freegeoip.net
// https://github.com/apilayer/freegeoip
// $location = json_decode(file_get_contents('http://freegeoip.net/json/'.$ip));

// with new API with login from: http://ipstack.com (www.freegeoip.net) | LogIn there to get your own access key... It's free
// the limit is: 10000 requests on month...
// read documentation: https://ipstack.com/documentation
$location = json_decode(file_get_contents('http://api.ipstack.com/'.$ip.'?access_key=Your-API-Key-here&format=1'));
// with Api from www.ipinfo.io without apikey
$details = json_decode(file_get_contents("http://ipinfo.io/{$ip}/json"));
// API from ip-api.com without access key
$more = json_decode(file_get_contents("http://ip-api.com/json/{$ip}?fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,currency,isp,org,as,asname,reverse,mobile,proxy,query"));

if(isset($_GET['ip']))
{
echo '<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" />
<input type="submit" class="button" value="Lookup IP Address" />
</form>';  
echo "<br><br><b>Short View</b><br>";
echo "<b>IP: </b>" .$details->ip;
echo "<br><b>Country code: </b>" .$details->country;
echo "<br><b>City: </b>" .$details->city;
echo "<br><b>Region: </b>" .$details->region;
echo "<br><b>Postal: </b>" .$details->postal;
echo "<br><b>Hostname: </b>" .$details->hostname;
echo "<br><b>Organization: </b>" .$details->org;
echo "<br><b>Location: </b>" .$details->loc;

echo <<<HTML
<br><br><b>Geolocation Map</b>
<form action="" method="post">
<input type="text" name="city" value="$location->city" />
<input type="submit" class="button" value="Show City on the Map" />
</form>
HTML;

if(isset($_POST['city'])){
// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
}

echo <<<HTML
<br><b>Map Latitude Longitude</b>
<form action="" method="post">
<input type="text" name="address" value="$location->latitude" placeholder="latitude" title="Latitude" /><input type="text" name="address" value="$location->longitude" placeholder="longitude" title="Longitude" />
</form>
HTML;

// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
}

else {

print ('<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" value="'.$IP.'" />
 <button type="button" class="slide-toggle">Slide Toggle</button>
<input type="submit" class="slide-toggle" value="Lookup IP Address" />
</form>');
echo "<div class="box">
        <div class="box-inner"></div>
    </div>";
}

?>
</body>
</html>
- Ariën -
30-10-2021 09:54 gewijzigd op 30-10-2021 09:56
Lekker raadselachtig.... :-P

Waar loop je precies op vast?
Wat heb je geprobeerd?
Wat gebeurt er?

Op regel 100 zie ik overigens wel een fout in je quotes.
d
drerrie drap
30-10-2021 17:28
mijn idee was zodra op submit knop wordt gedrukt dat de data wordt uigelezen dat zou in deze div moeten staan
echo "<div class="box">
        <div class="box-inner"></div>
    </div>";


hij krijgt nu 500 error

ik wil dat die dit uitleest zodra op knop wordt gedrukt met slide down naar beneden gaat

echo "<br><br><b>Short View</b><br>";
echo "<b>IP: </b>" .$details->ip;
echo "<br><b>Country code: </b>" .$details->country;
echo "<br><b>City: </b>" .$details->city;
echo "<br><b>Region: </b>" .$details->region;
echo "<br><b>Postal: </b>" .$details->postal;
echo "<br><b>Hostname: </b>" .$details->hostname;
echo "<br><b>Organization: </b>" .$details->org;
echo "<br><b>Location: </b>" .$details->loc;
- Ariën -
30-10-2021 18:50 gewijzigd op 30-10-2021 18:51
Kijk eens naar je quotes in je 'div'.
Gebruik single of double quotes, maar niet tegelijkertijd.
d
drerrie drap
30-10-2021 20:44
nu heb ik het als volgende nu laat die hem opnieuw pagina terwijl die er onder moet staan in een jquery div maar dat doet die niet

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideToggle Effect</title>
<style>
    .box{
        width: 400px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }
    .box-inner{
        padding: 10px;
    }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").slideToggle();
        });
    });
</script>
</head>
<body>
<?php

$IP = $_SERVER['REMOTE_ADDR'];
$ip = htmlentities($_GET["ip"]);
$hostname = gethostbyaddr($_GET['ip']);

$latitude = htmlentities($_POST['latitude'], ENT_QUOTES, 'UTF-8');
$longitude = htmlentities($_POST['longitude'], ENT_QUOTES, 'UTF-8');
$city = htmlentities($_POST['city'], ENT_QUOTES, 'UTF-8');

// ipapi.com provide api too

// old API without login from: http://freegeoip.net
// https://github.com/apilayer/freegeoip
// $location = json_decode(file_get_contents('http://freegeoip.net/json/'.$ip));

// with new API with login from: http://ipstack.com (www.freegeoip.net) | LogIn there to get your own access key... It's free
// the limit is: 10000 requests on month...
// read documentation: https://ipstack.com/documentation
$location = json_decode(file_get_contents('http://api.ipstack.com/'.$ip.'?access_key=Your-API-Key-here&format=1'));
// with Api from www.ipinfo.io without apikey
$details = json_decode(file_get_contents("http://ipinfo.io/{$ip}/json"));
// API from ip-api.com without access key
$more = json_decode(file_get_contents("http://ip-api.com/json/{$ip}?fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,currency,isp,org,as,asname,reverse,mobile,proxy,query"));

if(isset($_GET['ip']))
{
echo '<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" />
<input type="submit" class="slide-toggle" value="Lookup IP Address" />
</form>';   
echo '<div class="box">';
echo '<div class="box-inner">';

echo "<br><br><b>Short View</b><br>";
echo "<b>IP: </b>" .$details->ip;
echo "<br><b>Country code: </b>" .$details->country;
echo "<br><b>City: </b>" .$details->city;
echo "<br><b>Region: </b>" .$details->region;
echo "<br><b>Postal: </b>" .$details->postal;
echo "<br><b>Hostname: </b>" .$details->hostname;
echo "<br><b>Organization: </b>" .$details->org;
echo "<br><b>Location: </b>" .$details->loc;
echo '</div>';
echo '</div>';

echo <<<HTML
<br><br><b>Geolocation Map</b>
<form action="" method="post">
<input type="text" name="city" value="$location->city" />
<input type="submit" class="button" value="Show City on the Map" />
</form>
HTML;

if(isset($_POST['city'])){
// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
}

echo <<<HTML
<br><b>Map Latitude Longitude</b>
<form action="" method="post">
<input type="text" name="address" value="$location->latitude" placeholder="latitude" title="Latitude" /><input type="text" name="address" value="$location->longitude" placeholder="longitude" title="Longitude" />
</form>
HTML;

// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
}

else {

print ('<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" value="'.$IP.'" />
 <button type="button" class="slide-toggle">Slide Toggle</button>
<input type="submit" class="slide-toggle" value="Lookup IP Address" />
</form>');
}

?>
</body>
</html>

- Ariën -
30-10-2021 21:05
De PHP-code is het probleem niet.
Probeer eerst eens een goed overzicht te hebben met een simpele 'Lorem Ipsum' alinea of iets dergelijks.
En zet dat eens in een JSfiddle text-case, en stuur die link.
d
drerrie drap
30-10-2021 21:09
hij geeft de div wel maar pas op ?ip= de get is denk ik niet goed
- Ariën -
30-10-2021 21:18 gewijzigd op 30-10-2021 21:19
Wat is er volgens jouw niet goed daaraan? Dat lijkt mij geen show-stopper die je slider de nek om kan draaien.

Maak eerst eens een kleine test-case. Dan heb je meer overzicht, i.p.v. dat je een tunnelvisie staat te staren, met een overbodige 40 regels.

Overigens is een hele echo-put met een hoop echo's ook niet nodig, je kan uiteindelijk je HTML prima buiten je PHP-blokken plaatsen.
d
drerrie drap
31-10-2021 19:54
ik heb nu alsvolg hoe je het zei alleen nu als ik op open my page slide die niet naar beneden


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery slideToggle Effect</title>
<style>
div {
    border: 1px solid black;
    width: 200px;
    height: 200px;
}
.mypage-info1 a {
    cursor: pointer;
}
#mypage-info1 {
    display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
 $('.open-mypage1').click(function(){
    $('#mypage-info1').slideDown('2000', "swing", function () {
        // Animation complete.
    });
});
$('#mypage-info1 button').click(function(){
    $('#mypage-info1').slideUp('2000', "swing", function () {
        // Animation complete.
    });
});
</script>
</head>
<body>
<a class="open-mypage1">Open my page ?</a>

<div id="mypage-info1">
<?php

$IP = $_SERVER['REMOTE_ADDR'];
$ip = htmlentities($_GET["ip"]);
$hostname = gethostbyaddr($_GET['ip']);

$latitude = htmlentities($_POST['latitude'], ENT_QUOTES, 'UTF-8');
$longitude = htmlentities($_POST['longitude'], ENT_QUOTES, 'UTF-8');
$city = htmlentities($_POST['city'], ENT_QUOTES, 'UTF-8');

// ipapi.com provide api too

// old API without login from: http://freegeoip.net
// https://github.com/apilayer/freegeoip
// $location = json_decode(file_get_contents('http://freegeoip.net/json/'.$ip));

// with new API with login from: http://ipstack.com (www.freegeoip.net) | LogIn there to get your own access key... It's free
// the limit is: 10000 requests on month...
// read documentation: https://ipstack.com/documentation
$location = json_decode(file_get_contents('http://api.ipstack.com/'.$ip.'?access_key=Your-API-Key-here&format=1'));
// with Api from www.ipinfo.io without apikey
$details = json_decode(file_get_contents("http://ipinfo.io/{$ip}/json"));
// API from ip-api.com without access key
$more = json_decode(file_get_contents("http://ip-api.com/json/{$ip}?fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,currency,isp,org,as,asname,reverse,mobile,proxy,query"));

if(isset($_GET['ip']))
{
echo '<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" />
<input type="submit" class="slide-toggle" value="Lookup IP Address" />
</form>';   
echo "<br><br><b>Short View</b><br>";
echo "<b>IP: </b>" .$details->ip;
echo "<br><b>Country code: </b>" .$details->country;
echo "<br><b>City: </b>" .$details->city;
echo "<br><b>Region: </b>" .$details->region;
echo "<br><b>Postal: </b>" .$details->postal;
echo "<br><b>Hostname: </b>" .$details->hostname;
echo "<br><b>Organization: </b>" .$details->org;
echo "<br><b>Location: </b>" .$details->loc;
echo <<<HTML
<br><br><b>Geolocation Map</b>
<form action="" method="post">
<input type="text" name="city" value="$location->city" />
<input type="submit" class="button" value="Show City on the Map" />
</form>
HTML;

if(isset($_POST['city'])){
// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$city}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe>";
}

echo <<<HTML
<br><b>Map Latitude Longitude</b>
<form action="" method="post">
<input type="text" name="address" value="$location->latitude" placeholder="latitude" title="Latitude" /><input type="text" name="address" value="$location->longitude" placeholder="longitude" title="Longitude" />
</form>
HTML;

// echo "<iframe src='https://google-developers.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
// echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder?hl=pt-br#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
echo "<iframe src='https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/utils/geocoder/#q%3D{$location->latitude}%2520{$location->longitude}' width='100%' height='900' FRAMEBORDER=NO FRAMESPACING=0 BORDER=0 ></iframe><br>";
}

else {

print ('<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" value="'.$IP.'" />
 <button type="button" class="slide-toggle">Slide Toggle</button>
<input type="submit" class="slide-toggle" value="Lookup IP Address" />
</form>');
}

?>
    <button>button</button>
</div>
</body>
</html>




<a class="open-mypage1">Open my page ?</a>

<div id="mypage-info1">Some content here
    <button>button</button>
</div>



$('.open-mypage1').click(function(){
    $('#mypage-info1').slideDown('2000', "swing", function () {
        // Animation complete.
    });
});
$('#mypage-info1 button').click(function(){
    $('#mypage-info1').slideUp('2000', "swing", function () {
        // Animation complete.
    });
});
- Ariën -
31-10-2021 20:07
Probeer je testcase eens simpel te houden, zoals ik aanbeveelde.
d
drerrie drap
31-10-2021 20:21
ik heb het nu zo alleen hij is niet klikbaar en op de knop button maar dan gaat die naar andere pagina wil echt zeg maar als je er op klikt dat die data naar beneden schuift ik heb de code wat netter nu maar werkt nog steeds niet


<head>
<script>
$('.open-mypage1').click(function(){
    $('#mypage-info1').slideDown('2000', "swing", function () {
        // Animation complete.
    });
});
$('#mypage-info1 button').click(function(){
    $('#mypage-info1').slideUp('2000', "swing", function () {
        // Animation complete.
    });
});
</script>
</head>
<?php

$IP = $_SERVER['REMOTE_ADDR'];
$ip = htmlentities($_GET["ip"]);
$hostname = gethostbyaddr($_GET['ip']);

// with new API with login from: http://ipstack.com (www.freegeoip.net) | LogIn there to get your own access key... It's free
// the limit is: 10000 requests on month...
// read documentation: https://ipstack.com/documentation
$location = json_decode(file_get_contents('http://api.ipstack.com/'.$ip.'?access_key=Your-API-Key-here&format=1'));
// with Api from www.ipinfo.io without apikey
$details = json_decode(file_get_contents("http://ipinfo.io/{$ip}/json"));
// API from ip-api.com without access key
$more = json_decode(file_get_contents("http://ip-api.com/json/{$ip}?fields=status,message,continent,continentCode,country,countryCode,region,regionName,city,district,zip,lat,lon,timezone,currency,isp,org,as,asname,reverse,mobile,proxy,query"));

if(isset($_GET['ip']))
{
echo '<div id="mypage-info1">
    <button>button</button>';  
echo "<br><br><b>Short View</b><br>";
echo "<b>IP: </b>" .$details->ip;
echo "<br><b>Country code: </b>" .$details->country;
echo "<br><b>City: </b>" .$details->city;
echo "<br><b>Region: </b>" .$details->region;
echo "<br><b>Postal: </b>" .$details->postal;
echo "<br><b>Hostname: </b>" .$details->hostname;
echo "<br><b>Organization: </b>" .$details->org;
echo "<br><b>Location: </b>" .$details->loc; 
echo '</div>';
}
else {
print ('<form method="get" action="">
<input type="text" name="ip" id="ip" maxlength="15" placeholder="IP" title="Enter IP Address here" value="'.$IP.'" /> 
<a class="open-mypage1">Open my page ?</a>
<input type="submit" class="open-mypage1" value="Lookup IP Address" />
</form>');
}

?>

Reageren

Inloggen om te reageren