In my website I use a javascript function to get images from a datasource. It is working when the content
is hard coded as shown below: (the real path is replaced by xxxx for obvious reasons)
function showcampopicture(data){
var mygallery=new fadeSlideShow({
wrapperid: "images", //ID of blank DIV on page to house Slideshow
dimensions: [450, 300], //
imagearray: [["https://xxxx/slikithumb/sliki/Schewnfeld.jpg"],
["https://xxxx/sliki/slikithumb/1/85_2018-11-13.jpg"],
["https://xxxx/sliki/slikithumb/1/85_2018-11-12.jpg"],
["https://xxxx/sliki/slikithumb/1/85_2018-10-28.jpg"]]
displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false},
persist: false, //
fadeduration: 2000, //transition duration (milliseconds)
descreveal: "ondemand",
togglerid: ""
})
}
When I make a ajax request, I get the same content from:
$.ajax({
type: "POST",
url: "pictures_sql.php",
success: function(data){
showcampopicture(data);
}
});
The problem is that my Cromebrowser cannot read the file paths and shows Content error:
[:1 GET https://xxxx/[ 404 (Not Found)
Image (async)
fadeSlideShow # slide-show.js:1
showcampopicture # campo_details.php:165
success # campo_details.php:185
o # 10b7194f44f2a10d55b4d05c5f6aacc2.js:3
h:1 GET https://xxxx/h 404 (Not Found)
Does anybody have a idea why the strange behaviour occurs? Thanks
More info:
I have tried this: calling the function showcampopicture("https://xxxx.mypic.jpg")
Gives the same result that the browser tries to chunk the string by every letter:
errror in Chrome:
GET https://xxxx/s 404 (Not Found),
GET https://xxxx/l 404 (Not Found)
--
So I have found the problem but not solved it. You need to pass an array. Quite simple but I just forgot that you have to convert the php data to a js array. I used json and it is working now.
Related
I am hosting an html page on localhost:8888 with a MAMP Server and I am trying to get some data from a JSON file which I am hosting on localhost:3000 on the 'categories' route. Firstly, I wanted to know is this possible ?
If it is not possible, is it possible for me to route the JSON data to another site. If it is possible, here is the script I have embedded in my HTML
<script>
$(document).ready(function(){
setInterval(test,500);
console.log("document ready");
alert('page ready');
});
function test() {
$.ajax({
url:"HTTP://localhost:3000/categories",
dataType: 'jsonp',
success: function(json){
$("#Address1").html(json[0]["id"]);;
}
});
}
</script>
Here is the JSON file :
[{"_id":"5624711f1a530785d511e747","__v":0,"name":"Beverages","description":"Soft drinks, coffees, teas, beers, and ales","created":"2015-10-19T04:27:11.649Z"}]
Currently, It doesn't display any data. I have tried pure JS instead of jquery but it doesn't help.
This is what I got in the Chrome Console : GET localhost:3000/categories?callback=jQuery1113012827125121839345_1445236000644&_=1445236000645 net::ERR_UNKNOWN_URL_SCHEME
Added http:// - does not make a difference
So I'm trying to use Google Maps by decoding GPS data from a mobile device and then generates a map route out of it. Using the Static Maps API, I can sort of approximate a trip, but the data gets generated every 1-5 seconds, which is far beyond the amount of information you can send over a GET request to Google Maps.
So my JavaScript map looks like this running a webpage:
Edited: DropBox does not apparently persistently store photo links persistently, switching to OneDrive.
Should look like http://bit.ly/1tjxg6u
Which is glorious. I figured that if I used html2Canvas, I could generate a screenshot of the map, and transfer that file onto another portion of my server, or URI encode it. But when I tried that, I get this instead.
Does Look Like http://bit.ly/1jlrOvL
Not glorious at all. I then checked out rasterHTML. But it gave me an error when I used rasterizeHTML.drawDocument of "cannot get innerHTML of undefined" when I call modalMap, (see JavaScript code below). It does let me get the HTML and use drawHTML of the exact same element using .innerHTML. No idea why. Using HTML, that gets me this result:
All Three together http://bit.ly/1ssxIet
rasterizeHTML is in the lower-right. html2Canvas is the lower-left. I'm sort of stuck halfway between on both.
Edited: After doing a lot of testing, the error is:
html2canvas: Error loading ":http://mt0.googleapis.com/vt?...
The URL does show the image when you click on it in the console, but HTML2canvas can't display it. I'm not sure if it's a URL encoding problem or what.
I enabled CORS in my headers, Apache, and the .htaccess just in case that was the issue. I then downloaded the .php proxy file and tried that, just in case that was the issue. Neither worked.
The javascript code:
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
// Try RasterizeHTML
var modalMap = document.getElementById('mainPageCanvas');
var modalMapHTML = modalMap.innerHTML;
var canvasHolder = document.getElementById('rasterizeHTML');
console.log(modalMap);
console.log(canvasHolder);
var options = {
width : 1000,
height : 400,
executeJs : false,
zoom: 2
};
rasterizeHTML.drawHTML(modalMapHTML, canvasHolder)
.then(function success(renderResult) {
console.log(renderResult);
}, function error(e) {
console.log(e);
}.deb());
html2canvas(document.getElementById('mainPageCanvas'), {
proxy: "//localhost:85/ormc/consumer/build/ajax/php/html2canvasproxy.php",
useCORS: true,
allowTaint:true,
logging: true,
onrendered: function(canvas) {
canvas.setAttribute('crossOrigin','anonymous');
$('#secondaryPageCanvas').replaceWith(canvas);
console.log("Canvas function called");
}.deb()
});
}.deb());
Now if I attempt to do a dataUrl conversion, I get this: "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."
The HTML is just:
<div id="mainPageCanvas" style="width:1000px;height:400px;"></div>
<div id='secondaryPageCanvas' style="width:1000px;height:400px;"></div>
<canvas id='rasterizeHTML' style='width:1000px;height:400px;'>
My headers being sent are:
Access-Control-Allow-Methods:OPTIONS, GET
Access-Control-Allow-Origin:*
Access-Control-Request-Method:*
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Just to see if anything is triggering the CSP (It's report only), but nothing is throwing it. So, what am I doing wrong?
im trying to pull data from drupal 7 website from a local files inside
http://example.com:8888/test/test.html
im using this Ajax code with html request since i have tried json and also the website prevents me from pulling even i have added
<?php
header('Access-Control-Allow-Origin: *');
?>
code to pull the data , but no result:
$.ajax(
{
// The link we are accessing.
url: "http://horizon-websolutions.com",
// The type of request.
type: "get",
// The type of data that is getting returned.
dataType: "html",
error: function(){
alert("error");
// Load the content in to the page.
$("#output").html( "<p>Page Not Found!!</p>" );
},
beforeSend: function(){
alert("not yet"); },
complete: function(){
alert("done"); },
success: function( strData ){
alert("success");
// Load the content in to the page.
$("#output").html( strData );
}
}
);
// Prevent default click.
return( false );
please help my telling the website accept my localhost request to pull data from the server . the same code tested on a pure php page and its working fine .
Not sure how secure this would be but one way to solve it is to enable CORS.
For Drupal 7 (would be analogous to Drupal 6) so you need to download and install the CORS module,
enable the module under Modules,
go to the Drupal config (Configuration on Drupal 7 main dashboard top navigator),
search for CORS. Click,
give the path for the links you wish to access. Examples are given on that page of how to put in new links.
Hope this helps.
I have this weird issue that Im not sure if its normal or not.. Im sure its not
I have a drag and drop area that I can upload any file and it works like a charm.
EXCEPT...
I cant upload any .html or .htm files with it. I can take an html file and rename it to .jpg and it works.
This is my piece of code:
xhr = new XMLHttpRequest()
xhr.open 'PUT', "#{tvr.api.url}/transfer/#{userprofile.UserLink.LinkID}/#{userprofile.UserLink.UserName}/#{channelid}/#{filename}"
xhr.upload.addEventListener "progress", (event, filename) =>
window.Appbusy = true
$($(".file-status-#{uid}").find("span")).text("(#{((event.loaded/event.totalSize)*100).toFixed(2)}%)")
,false
xhr.onreadystatechange = (aEvt) ->
if xhr.readyState is 4
if xhr.status is not 200
$(".notification").remove()
notification("The server returned an error uploading the file. Please try again.", 'error')
It even shows that upload progress then at 100% when it needs to push it the server it just fails with Bad Request. (the server never gets any request)
It works if the HTML file has 0 content! Why I do not know
UPDATE:
After some playing around I see that the request works when setting the Content-Type to text/plain:
xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
As soon as I change to text/html it does not work if the file has any content:
xhr.setRequestHeader("Content-Type", "text/html;charset=UTF-8");
Could this be a bug?
I sent this as a possible XML bug
Use jQuery .ajax() instead. Specify type:'PUT' for an upload. For example, using your URL:
$.ajax({
type:"PUT"
url:"#{tvr.api.url}/transfer/#{userprofile.UserLink.LinkID}/#{userprofile.UserLink.UserName}/#{channelid}/#{filename}"
success: function(){
alert('success');
}
});
I'm struggling to get this script working. It's basically a simple ajax call to retrieve data from a php which returns a JSON code.
function refreshWindows(){
if(AjaxPull && AjaxPull.readystate != 4){
AjaxPull.abort();
}
AjaxPull = $.ajax({
type: 'POST',
url: $path,
data: {
ajax: true,
mode: 'update',
to: Math.round(currentDate.getTime() / 1000),
from: Math.round(previousDate.getTime() / 1000)
},
dataType: "json",
success: function (data) {
alert(data); //that's for debug
$replies = data.Updates;
$.each($replies ,function(group,value) {
if (value!=''){
$("#group"+group+" .content").append(value);
$("#group"+group+" .content").stop().animate({ scrollTop: $("#group"+group+" .content")[0].scrollHeight }, 800);
if (!$("#group"+group+" .Window").is(':visible')) {
$("#group"+group+" .BottomBox").fadeTo('fast', 0.5).fadeTo('fast', 1.0);
}
}
});
previousDate = currentDate;
currentDate = new Date();
timeController.push( setTimeout(function(){refreshChatWindows();}, 500) );
}
});
}
The error I get in Internet Explorer is:
SCRIPT5007: Unable to get value of the property 'Updates': object is null or undefined
Everything works fine in Firefox and Google Chrome.
Initially my code was made using .get but someone suggested switching to the .ajax - well, it didn't help. I tried using .done(function(data){ but it didn't work either. I also tried sending all of the data in my URL opposite to the data property, it worked fine in FF, but IE still popped the same error. Finally I tried adding different headers to the PHP, like for example header('Content-Type: application/json'); but it didn't change anything. I run out of ideas / possible solutions I could fine on stackoverflow, so any help would be appreciated.
In IE I went to Developer Tools, network tab and tried to see if everything works - yes, the request is being sent correctly with all the data, and a response I receive is correct JSON, just as it is in Firefox:
{"Updates":{"1":"","2":"","3":"","5":"","6":"","7":"","8":""},"time":{"from":"1367489761","to":"1367489761"}}
which gets me really confused, cause I'd have thought that Undefined error might happen only because something is not being sent back in IE for whatever reason, but clearly: It's not the case. I get my JSON back. Only IE for some unknown reason still thinks that data is undefined.
Ok, I found a solution finally.
Basically:
Remove any headers sent by PHP script. Especially: Content-type headers. (luckily - seems like sessions still can be used)
Use }).done(function ( data ) { instead of success: function (data) {
and that's all. Suddenly it started to work. It's very weird. Seems like the shotgun tactic (randomly changing bits of code till it works) is actually a valid way of solving problems. hehehe
I have a similar json call that returns data that looks like this:
{"GetTombstoneDataRestResult":{"AlphaSort":"Arai Junichi","Classification":"A&D Design Object"...etc
In other words, a lot like your json data. To reference it in jQuery, I use the callback name.
$.ajax({
type: "GET",
dataType: "jsonp",
url: url,
success: function (result) {
$('#screenshot').append('<p><strong>Title: ' +
result.GetTombstoneDataRestResult.Title + '</strong><br />Year: ' +
result.GetTombstoneDataRestResult.Dated + '<br />Artist: ' +
result.GetTombstoneDataRestResult.DisplayName + '</p>');
}
});
Looks like you want to try this too:
var replies = data;
$.each(replies.Updates ,function(group,value) {
You have a character called in your JSON.
See a description here:
What's HTML character code 8203?
It's right before your colon here "time":
Can you clean your output and validate the JSON and try again?