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();
?>
Related
I want to call ajax from php(i put the function and the php at the same page) but i get error undefined index hash. please help me guys. this is my code:
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
<?php
echo $_POST["hash"];
?>
<script type="text/javascript">
var hash = window.location.hash;
$.ajax({
url:"test.php",
method:"POST",
data:{hash:hash},
success: function (data)
{
}
});
</script>
You need to have 2 files, say index.html:
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var hash = window.location.hash;
$.ajax({
url:"test.php",
method:"POST",
data:{hash:hash},
success: function (data)
{
}
});
</script>
and test.php:
<?php
echo $_POST["hash"];
?>
Here is an example test.php
<html>
<head>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-
FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<script type="text/javascript">
var hash = window.location.href;
$.ajax({
url:"test1.php",
method:"POST",
data:{hash:hash},
success: function (data)
{
alert(data);
}
});
</script>
</body>
</html>
Here is the test1.php
<?php echo $_POST["hash"]; ?>
How i can check $enjaz_youm every second in the index page for my system
<?
if($enjaz_youm == 80) {
echo "<script>";
echo "alert('This is an alert from JavaScript!');";
echo "</script>";
}
?>
Thanks
You can try this.
<?php
if ($_POST['action']=='enjaz_youm') {
//do your checks here
if ($enjaz_youm==80) echo '1';
die();
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function()
{
var refreshId = setInterval( function()
{
var request = $.ajax({
url: "<?=$_SERVER['PHP_SELF']?>",
type: "POST",
data: {action : 'enjaz_youm'},
dataType: "html"
});
request.done(function(msg) {
if (msg=='1') {
alert("This is an alert from JavaScript!");
}
});
}, 1000);
});
</script>
</head>
<body>
</body>
</html>
I have a sample code:
<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(function () {
$("img").lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
});
</script>
click here
<div id="result"></div>
$(document).ready(function() {
$(".click").click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url:'',
data: '',
async: true,
success: function(response) {
$('#result').html('<img src="test.png" />');
}
});
});
}
But when result request ajax is result is
<img src="images/grey.gif" data-original="test.png" />
How to fix it with result is
<img src="test.png" data-original="test.png" />
You seem to assign the Lazyload before the image element is actually in your HTMl.. You need to assign it in the success callback of ajax function..
<script src="js/jquery-1.4.2.min_2.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.min.js" type="text/javascript"></script>
click here
<div id="result"></div>
<script type="text/javascript">
$(document).ready(function() {
$(".click").click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url:'yoururl',
data: '{}',
async: true,
success: function(response) {
// If response contains the image src
// then replace the src of the image with the response
$('#result').html('<img src="test.png" data-original="test.png" />');
$("#result img").attr('src', 'images/grey.gif')
.lazyload({ placeholder: "images/grey.gif", effect: "fadeIn" });
}
});
});
});
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>
How do I retrieve the contents of a simpleXMLElement variable from a php file with jquery?
Send the return value of SimpleXMLElement::asXML()
Self-contained example:
<?php
if ( isset($_GET['foo']) ) {
$foo = new SimpleXMLElement('<foo />');
$foo->bar->baz[] = date('Y-m-d H:i:s');
$foo->bar->baz[] = rand(1,100)." la la la";
header('Content-type: application/xml; charset=utf-8');
echo $foo->asXML();
die;
}
?><html>
<head>
<title>...</title>
<script type="text/javascript" src="jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function foo() {
$.ajax({
type: "GET",
url: "?",
data: { "foo":1 },
dataType: "xml",
success: function(xml) {
$(xml).find("baz").each(function(){
$("#div1").append($(this));
$("#div1").append("<br />");
})
},
error: function() {
alert("that didn't work");
}
});
}
</script>
</head>
<body>
<button onclick="foo()">click</button>
<div id="div1">...</div>
</body>
</html>