this is what i want onclick:
this is what i get onclick:
Im using this script for capturing image in php:
<script type="text/javascript">
$(function()
{
$('#capture').click(function(){
//get the div content
//proxy: "html2canvasproxy.php",
useCORS: true,
div_content = document.querySelector("#map_canvas")
//make it as html5 canvas
html2canvas(div_content).then(function(canvas) {
//change the canvas to jpeg image
data = canvas.toDataURL('image/jpeg');
//then call a super hero php to save the image
save_img(data);
});
});
});
function save_img(data)
{
$.post('save_jpg.php', {data: data}, function(res)
{
if(res != '')
{
yes = confirm('File saved in output folder, click ok to see it!');
}
else
{
alert('something wrong');
}
});
}
</script>
as you can see if i used proxy that i download from github nothing
will capture. and if i comment that part map will capture but not as
per my conditions.
Im using it on live server with php html5 and css3
Related
This is my jQuery:
$( document ).ready(function() {
var instrID;
var cat;
$(window).load(function(){
});
$.post('ajax.php', {InstrumentID: instrID, catView: "pdf"}, function(data){
$('#displayPDF').append("<php> header('Content-type: application/pdf') </php>");
$('#displayPDF').append("<php> echo("+ data +") </php>");
});
This is my ajax or ajax.php:
<?php
include '../include/xxxxx.php';
$instrumentID = $_POST['InstrumentID'];
$category = $_POST['catView'];
$sql = "SELECT * FROM `xxxxx` WHERE `InstrumentID` = '" . $_POST['InstrumentID'] . "'";
$results = mysql_query($sql);
if($category == "pdf")
{
header("Content-type: application/pdf");
echo (mysql_result($results, 0, 'Instrument'));
}
?>
This is my div displayPDF It's empty:
<div id="displayPDF">
</div>
The jQuery and the div are in the same php file. I am wanting to display a pdf in the same page that the click event happens. Everything is working except for getting the pdf. When the pdf gets echoed to the div it just comes back as a bunch of characters. The pdf I am trying to display is less than 1 mb. Any ideas would be greatly appreciated.
Maybe this is not an answer to the specific question but, This question comes up at very first google search, so I would like to share my approach for downloading pdf when it's blob data.
$.ajax({
url: 'someurl',
method: 'get',
data: { param1: value1, param2: value2 },
xhr: function() {
const xhr = new XMLHttpRequest();
xhr.responseType= 'blob'
return xhr;
},
success: function (blob) {
const link=document.createElement('a');
link.href=window.URL.createObjectURL(blob);
link.download="my-pdf-file-name";
link.click();
}
});
You haven't set a value for instrID, also you're not sanitizing for input.
Anyway instead of using ajax you can just embed the pdf into the page
var source = 'ajax.php?InstrumentID='+encodeUriComponent(instrID)+'&catView=pdf';
$('#displayPDF').append('<object data="'+source+'" type="application/pdf">'+
'<embed src="'+source+'" type="application/pdf"/></object>');
and then use $_GET instead of post in your php.
I don't think you can display a PDF inline in this manner. Try switching to an iframe - that should work. That is set the location of the iframe to your ajax.php.
I have got the following code to show a dialog box when the image is clicked. Instead of running FB.ui I want to run PHP code. It's for facebook.
<html>
<head>
<style> img#share_button { cursor: pointer; } </style>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
This is the image:
<img id = "share_button" src = "img.png">
And this is the code I need to change:
<script type="text/javascript">
$(document).ready(function(){
$('#share_button').live('click', function(e){
e.preventDefault();
FB.ui({
method: 'feed',
name: 'TabPress1',
link: 'http://www.hyperarts.com/',
picture: 'http://www.hyperarts.com/',
caption: 'I am a fan of TabPress',
description: 'TabPress -- Gotta love it!',
message: ''
});
});
});
</script>
</body>
</html>
I don't know any JS, hope you can help me!
If you don't know any javascript, perhaps it's best if you check out some beginner tutorials, like those at http://net.tutsplus.com/category/tutorials/javascript-ajax/?tag=basix , but in regard to your question...
It looks like your using jQuery. The best way to do what your describing is to use AJAX, and jQuery has nice functionality for that.
To select an element from the DOM based on it's ID in jQuery, just do this:
$("#TheIdOfYourImage")
now, to listen for when it's been clicked,
$("#TheIdOfYourImage").click(function(){
//DO SOMETHING
}
Now, for the AJAX fun. You can read the documentation at http://api.jquery.com/category/ajax/ for more technical details, but this is what it boils down to
$("#TheIdOfYourImage").click(function(){
$.ajax({
type: "POST", // If you want to send information to the PHP file your calling, do you want it to be POST or GET. Just get rid of this if your not sending data to the file
url: "some.php", // The location of the PHP file your calling
data: "name=John&location=Boston", // The information your passing in the variable1=value1&variable2=value2 pattern
success: function(result){ alert(result) } // When you get the information, what to do with it. In this case, an alert
});
}
Why you don't use an href attribute with removing underlying and coloring of the link and launch your php script?
As you have jQuery already there: Send an AJAX-Request:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('#share_button').live('click', function(e) {
e.preventDefault();
$.ajax('/path/to/your/script.php');
});
});
//]]>
</script>
cf. the jQuery documentation for further information: http://api.jquery.com/jQuery.ajax/
Additionally I added CDATA-Tags to avoid problems with HTML-Special-Chars. These special chars would normally have to be encoded.
The FB.ui(param1,param2) method can take two parameters. You've specified the first one that dictates how the feed dialog is displayed. Param2 can be your callback function
FB.ui(
{
method: 'feed',
name: 'Facebook Dialogs',
link: 'http://developers.facebook.com/docs/reference/dialogs/',
picture: 'http://fbrell.com/f8.jpg',
caption: 'Reference Documentation',
description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
},
function(response) {
if (response && response.post_id) {
alert('Post was published.');
} else {
alert('Post was not published.');
}
}
);
In the code switch for post was published, you can then use jQuery to make an AJAX call to one of your PHP pages. See: http://api.jquery.com/jQuery.ajax/
to run a javascript function when button is clicked:
<img id = "share_button" src = "img.png" onclick = "dothis()">
here is some basic javascript:
<script type = "text/javascript">
function dothis(){
alert("Button pressed");
}
</script>
This is just some basic javascript that will make a message appear on the screen when the button is clicked
EDIT: It appears you want to use JSON. Take a look at this:
http://ditio.net/2008/07/17/php-json-and-javascript-usage/
Based on your comments, I think you want to do something like this:
$(document).ready(function(){
// on click
$('#share_button').live('click', function(e){
e.preventDefault();
// any parameters you need to pass to your php script,
// you can omit the data parameter if you don't need it
var data = { param1: "a", param2: 2 };
// start the ajax request
$.post("your/script.php", data, function() {
// when the ajax request completes, show the FB dialog
FB.ui({
method: 'feed',
name: 'TabPress1',
link: 'http://www.hyperarts.com/',
picture: 'http://www.hyperarts.com/',
caption: 'I am a fan of TabPress',
description: 'TabPress -- Gotta love it!',
message: ''
});
});
});
});
Relevant javascript references:
.live()
$.post()
FB.ui()
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Is it possible to have a flash/html5 video on a webpage, and when the video is done, it will run a PHP script?
You'd have to do a check inside both the html5 player and the flash player to determine if the video has stopped playing and then you should be able to call a php script through several ways. Let's say you have a php file called 'test.php' then in html5 you'd do the following:
<script>
var video = document.getElementsByTagName('video')[0];
video.onended = function(e) {
$.post(
"test.php",
function(data) {
/*Do stuff here!*/
},
"json"
);
}
</script>
In flash it's a bit different and you could try doing something like the following in actionscript3:
stream.addEventListener(NetStatusEvent.NET_STATUS, statusChanged);
function statusChanged(stats:NetStatusEvent) {
if (stats.info.code == 'NetStream.Play.Stop') {
// create a new loadvars variable
var lv:LoadVars = new LoadVars();
lv.load("http://www.myurl.com/test.php");
// now define what you want to do with the loaded data:
lv.onLoad = function(){
/*Do stuff here!*/
};
}
}
A button click fires my function that fetches image data via an AJAX-call:
$("#toggle_album").click(function () {
album_id = $("#album_id").val();
$.post('backend/load_album_thumbnails.php', {
id: album_id
}, function(xml) {
var status = $(xml).find("status").text();
var timestamp = $(xml).find("time").text();
$("#album_thumbs_data_"+album_id+"").empty();
if (status == 1) {
var temp = '';
var output = '';
$(xml).find("image").each(function(){
var url = $(this).find("url").text();
temp = "<DIV ID=\"thumbnail_image\">[img-tag with class="faded" goes here]</DIV>";
output += temp;
});
$("#album_thumbs_data_"+album_id+"").append(output);
} else {
var reason = $(xml).find("reason").text();
var output = "<DIV CLASS=\"bread\">"+reason+"</DIV>";
$("#album_thumbs_data_"+album_id+"").append(output);
}
$("#album_thumbs_"+album_id+"").toggle();
});
});
The data is returned in XML format, and it parses well, appending the data to an empty container and showing it;
My problem is that my image overlay script:
$("img.faded").hover(
function() {
$(this).animate({"opacity": "1"}, "fast");
},
function() {
$(this).animate({"opacity": ".5"}, "fast");
});
... stops working on the image data that I fetch via the AJAX-call. It works well on all other images already loaded by "normal" means. Does the script need to be adjusted in some way to work on data added later?
I hope my question is clear enough.
Okay, apparantly I hadn't googled it enough. Surfing my own question here on stackoverflow pointed me to other questions, which pointed me to the JQuery live() function: live().
However, it does not work on hover(), so I rewrote the script to use mouseover() and mouseout() instead:
$("img.faded").live("mouseover",function() {
$(this).animate({"opacity": "1"}, "fast");
});
$("img.faded").live("mouseout", function() {
$(this).animate({"opacity": "0.5"}, "fast");
});
... and now it works flawlessly even on the content I fetch from the AJAX-call.
Sorry if anyone has started writing an answer already.
You have to bind the new events each time you add a DOM element to the page.
There is a built-in function in jquery called live that does that for you.
I noticed you add the images from your xml; you can add there the new binds too.
$(xml).find("image").each(function(){
//this actually creates a jquery element that you can work with
$('my-img-code-from-xml-goes-here').hover(
function() {
$(this).animate({"opacity": "1"}, "fast");
},
function() {
$(this).animate({"opacity": ".5"}, "fast");
}
//i did all my dirty stuff with it, let's add it where it belongs!
).appendTo($('some-already-created-element'));
});
EDIT: corrected a wrong sentence.