I have a script code to upload photos on imgur using AJAX. But I can not hide the Client-ID of the public.
I think I need to use PHP to do that use this code:
<?php $idClient = "abc12abc12abc";
echo $idClient ;
?>
But it turned Client-ID is still visible when in view its source code.
Here's the full code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Imgur Upload Test</title>
<style>
#image_preview, #image_preview_2 {
max-width: 200px;
}
</style>
</head>
<body>
<h1>Imgur Upload Test</h1>
<input type="file" id="image_selector" />
<div id="image_preview"></div>
<h2>Image On Imgur:</h2>
<div id="image_preview_2"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("#image_selector").change(function() {
var reader = new FileReader();
reader.onload = function(e) {
var data = e.target.result.substr(e.target.result.indexOf(",") + 1, e.target.result.length);
$("#image_preview").html("<img src='" + e.target.result + "' />");
$.ajax({
url: 'https://api.imgur.com/3/image',
headers: {
'Authorization': 'Client-ID <?php $idClient = "abc12abc12abc";
echo $idClient ;?>'
},
type: 'POST',
data: {
'image': data,
'type': 'base64'
},
success: function(response) {
$("#image_preview_2").html("<img src='" + response.data.link + "' />");
}, error: function() {
alert("Error while uploading...");
}
});
};
reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
What's the solution?
Related
I want to save the image generated on the server. For this I use iframe, but the File Save dialog does not appear after the click. What am I doing wrong?
index.php
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#onv-save-button').click( function() {
$.ajax ({
url: "/ajax.php",
type: "POST",
success: function(data) {
$('#downloadFrame').attr('src' , data);
}
});
});
});
</script>
</head>
<body>
<iframe src="" id="downloadFrame" ></iframe>
<button id="onv-save-button">Go!</button>
</body>
</html>
ajax.php
<?
// Some actions to generate image
echo "1.png" ;
?>
I did. Here is the answer to the question.
index.php
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#onv-save-button').click( function() {
$.ajax ({
url: "/ajax.php",
type: "POST",
success: function(data) {
alert(data);
$('#downloadFrame').attr('src' , "download.php?file=" + data);
}
});
});
});
</script>
</head>
<body>
<iframe src="" id="downloadFrame" ></iframe>
<button id="onv-save-button">Go!</button>
</body>
</html>
ajax.php
<?
echo $_SERVER["DOCUMENT_ROOT"]."/1.png";
?>
download.php
<?php
$content = file_get_contents($_REQUEST['file']);
header('Content-Description: File Transfer');
header("Cache-Control: ");
header("Pragma: ");
header("Content-Disposition: attachment; filename=\"".basename($_REQUEST['file'])."\"");
ob_end_clean();
ob_start();
echo $content;
ob_end_flush();
exit();
?>
I read all other question but nothing really helped.
I have one page with display and other php files supporting it but when I pass a POST and make a $_SESSION['view'] out of it with another POST request but not same one the $_SESSION['view'] is gone.
So in practic when user change view from four months (default) to one month and then click NEXT view gets back to four months.
Display Page
<?php
session_start();
$dateb = (new DateTime())->getTimestamp();
$_SESSION['usrdate'] = $dateb;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="site.css" type="text/css" rel="stylesheet">
<script>
$(document).ready(function () {
$("#four").click(function () {
var jqXHR = $.ajax({
type: "POST",
url: "switcher.php",
data: {
view: "four"
},
success: function (html) {
$("#loadplace").html(html);
}
});
return jqXHR.responseText;
});
$("#one").click(function () {
var jqXHR = $.ajax({
type: "POST",
url: "switcher.php",
data: {
view: "one"
},
success: function (html) {
$("#loadplace").html(html);
}
});
return jqXHR.responseText;
});
$("#next").click(function () {
var jqXHR = $.ajax({
type: "POST",
url: "switcher.php",
data: {
toggle: "next"
},
success: function (html) {
$("#loadplace").html(html);
}
});
return jqXHR.responseText;
});
});
</script>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="nav"></div>
<div id="loginform"><?php
/*require "navigation.php";*/
if (!isset($_SESSION['id'])) {
include "logon.php";
} else {
echo "<a href='logoff.php'>Logout</a>";
}
?>
</div>
<div id="loadplace">
<?php
if (isset($_SESSION['id'])) {
include "switcher.php";
}
?>
</div>
<div id="tog"><button type="button" id="prev">Prev</button>
<button type="button" id="next">Next</button></div><br/><br/>
<div id="view"><button type="button" id="four">Four</button>
<button type="button" id="one">One</button></div>
</body>
</html>
Script
<?php
session_start();
$_SESSION['view'] = $_POST["view"];
$_SESSION['toggle']= $_POST["toggle"];
$tog = $_SESSION["toggle"];
if ($_SESSION['view'] == "four") {
include_once "four_m.php";
} elseif ($_SESSION['view'] == "one") {
include "calendar.php";
} elseif ($_SESSION['view'] == "week") {
include "week.php";
} elseif ($_SESSION['view'] == "day") {
include "day.php";
} else {
include "four_m.php";
}
?>
I'm trying to save a Google Maps Marker's coordinates to my database after the user placed the Marker. When I send the coordinates to the server, I always receive an empty $_POST array.
Where did I go wrong?
Here's my index.php:
<!DOCTYPE html>
<html>
<head>
<title>MyMap</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/main.css">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyCZseZXpWTYc2Z2aI4mJEtoLz8WUYQCITM"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var loc;
var map;
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(46.2428219,20.14682)
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
var lat = event.latLng.lat();
var lng = event.latLng.lng();
$.ajax({
type: "POST",
url: "index.php",
data: lat,
success: function (data) {
console.log(data);
}
});
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="result">
<?php
print_r($_POST);
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
echo 'POSTed';
} else {
echo $_SERVER['REQUEST_METHOD'];
}
?>
</div>
<div id="map_canvas"></div>
</body>
</html>
Add a key to your data?
data: {'lat':lat}
Try something like this:
var lat_value = event.latLng.lat();
var lng_value = event.latLng.lng();
$.ajax({
type: "POST",
url: "index.php",
data: {lat:lat_value},
success: function (data) {
console.log(data);
}
});
In your index.php script use:
$lat=$_POST['lat'];
hi i have a html file which use ajax for loading contents from other html files in the same server. for some reason it does not work?? i have no clue as i am new to ajax.
here is the index.html(default home page)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head><body><div id="rounded">
<img src="img/top_bg.gif" alt="top" /><div id="main" class="container">
<h1>ajax example</h1>
<h2>ajax jquery</h2>
<ul id="navigation">
<li>Page_1</li>
<li>Page2</li>
<li>Page_3</li>
<li>Page_4</li>
<li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>
</ul>
<div class="clear"></div>
<div id="pageContent">
it is a test</div>
</div><div class="clear"></div>
<img src="img/bottom_bg.gif" alt="bottom" /></div>
</body>
</html>
script.js(for adding hash in the url and enable back button and also loading content)
ar default_content = "";
$(document).ready(function () {
checkURL();
$('ul li a').click(function (e) {
checkURL(this.hash);
});
default_content = $('#pageContent').html();
setInterval("checkURL()", 250);
});
var lasturl = "";
function checkURL(hash) {
if (!hash) hash = window.location.hash;
if (hash != lasturl) {
lasturl = hash;
if (hash == "")
$('#pageContent').html(default_content);
else
loadPage(hash);
}
}
function loadPage(url) {
var datastring = url.replace('#', '');
$('#loading').css('visibility', 'visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'datastring=' + datastring,
dataType: "html",
async: false,
success: function (msg) {
if (parseInt(msg) != 0) {
$('#content').html(msg);
$('#loading').css('visibility', 'hidden');
}
}
});
}
and load_page.php
<?php
$url = $_REQUEST['datastring'];
echo $url;
if(file_exists(''.$url.'.html')){
echo file_get_contents(''.$url.'.html');
}
else{
echo 'There is no such page!';
}
?>
need help! as you can see when the ajax calls the "pagecontent" div loads the content from the requested page, but nothing happens here! what am i doing wrong?
Looks like you have "#content' in the ajax response handler... should be '#pageContent' to match the div id. That is:
success: function (msg) {
if (parseInt(msg) != 0) {
$('#pageContent').html(msg);
$('#loading').css('visibility', 'hidden');
}
}
This script is supposed to run a jQuery Ajax script every second, it is supposed to fetch all newer posts then put them on top of the original ones. But at the moment nothing is happening, it loads the initial posts but nothing else. Firebug console is reporting no errors, or no Ajax requests being sent at all. Can you see anything wrong with this script at all that could cause this? Thanks :)
Source code -
index.php(i left out css):
<?php
include('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Twitter Style load more results.</title>
<link href="frame.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(function () {
setInterval(oneSecondFunction, 1000);
});
function oneSecondFunction() {
var ID = $(this).attr("id");
if (ID) {
$("#more" + ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg=" + ID,
cache: false,
success: function (html) {
$("ol#updates").prepend(html);
$("#more" + ID).remove();
}
});
} else {
}
return false;
};
});
</script>
</head>
<body>
<div id='container'>
<ol class="timeline" id="updates">
<?php
$sql=mysql_query("select * from updates ORDER BY item_id DESC LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['item_id'];
$message=$row['item_content'];
?>
<li>
<?php echo $message; ?>
</li>
<?php } ?>
</ol>
</div>
</body>
</html>
ajax_more.php -
<?php
include("config.php");
if(isset($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$result=mysql_query("select * from updates where item_id<'$lastmsg' order by item_id desc limit 9");
$count=mysql_num_rows($result);
while($row=mysql_fetch_array($result))
{
$msg_id=$row['item_id'];
$message=$row['item_content'];
?>
<li>
<?php echo $message; ?>
</li>
<?php
}
?>
<?php
}
?>
Some of the code in the beginning looks wrong. This should work. It will call the oneSecondFunction every second:
$(document).ready(function() {
setInterval(oneSecondFunction, 1000);
function oneSecondFunction() {
//console.log('run oneSecondFunction');
var ID = $(this).attr("id");
if(ID) {
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({ type: "POST", url: "ajax_more.php", data: "lastmsg="+ ID, cache: false,
success: function(html){
$("ol#updates").prepend(html);
$("#more"+ID).remove();
}
});
} else {
} return false; };
});
i quoted out the section where it gets the id, because 'this' wasn't referring to anything.
<script type="text/javascript">
$(function() {
setInterval(oneSecondFunction, 1000);
});
function oneSecondFunction() {
//var ID = $(this).attr("id");
var ID = '1';
if(ID){
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ol#updates").prepend(html);
$("#more"+ID).remove();
}
});
}
return false;
}
</script>