I wonder whether someone can help me please.
I've put together this page, which will give the user functionality to load markers with the selection or deselection of checkboxes. They will then be able to click on these markers which in turn shows the nearest POI within a given radius.
The problem I'm having is with loading the xml at lines 143-145 which are:
downloadUrl("loadmylocations.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker")
Firefox tells me that the error is that the 'xml is undefined'. I think I know why and that's because I'm using this code to pull data for the POI's.
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'searchsites.php?siteosgb36lat=' + center.lat() + '&siteosgb36lon=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var xml = parseXml(data);
So they clash, because I define the XML at the end of the script differently, these being
loadmylocations.php
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
searchsites.php
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
Could someone perhaps tell me please how I can change so that I can pull the two sets of data wihtin the same script without them clashing.
Many thanks and kind regards
I did some work around this, and through trial and error I discovered that I could load the information for the 'loadmylocations' script as the 'searchsites' script i.e. var xml = parseXml(data); rather than var xml = data.responseXML;.
Related
I'm trying to use XMLHttpRequest to get image from a sharepoint library. But failed at the point of converting a weird string like
����JFIFS���E������..
back to image.
I managed to get a URL of my sharepoint files that when i put it in the browser, it will automatically download the image. I have also obtained the accessToken to gain permission to the files.
I tried to use base64 encoder from external script to convert the responseText and failed to display as image. Btw, the window.atob() or window.btoa() doesn't seems to do anything for my responseText.
I am not sure what kind of format i received from the responseText to be dealt with. Because i tried manually converting the image to base64 for testing, which begin like this
/9j/4AAQSkZJRgABAQAAAQABAAD/2wB..
. However, the string i got from using the the base64encoder i found online start like this
/f39/QAQSkZJRgABAQAAAQABAAD9/QBDAAs..
<div><img id="imgplaceholder" alt="place here"/></div>
<script>
var url =...;
var accessToken = ...;
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.setRequestHeader("Accept","application/json; odata=verbose");
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
var data = xhr.responseText;
//or var data = base64Encode(data);
document.getElementById("imgplaceholder").src = "data:image/jpeg;base64," + data;
}else{
alert(xhr.status + ":\n " + xhr.responseText);
}
}
</script>
I expect the image to be displayed in the , but nothing happens. I have tried using ajax too, but noting works. Please can someone help me?
I was following this https://sharepoint.stackexchange.com/questions/231251/fetch-and-display-image-from-sharepoint-list-javascript
Hope below script would be helpful for you.
<script type="text/javascript">
function Uint8ToBase64(u8Arr) {
var CHUNK_SIZE = 0x8000; //arbitrary number
var index = 0;
var length = u8Arr.length;
var result = '';
var slice;
while (index < length) {
slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));
result += String.fromCharCode.apply(null, slice);
index += CHUNK_SIZE;
}
return btoa(result);
}
$(function () {
var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/GetFileByServerRelativeUrl('" + _spPageContextInfo.siteServerRelativeUrl + "/MyDoc/panda.jpg')/openbinarystream";
var xhr = new window.XMLHttpRequest();
xhr.open("GET", url, true);
//Now set response type
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function () {
if (xhr.status === 200) {
var sampleBytes = new Uint8Array(xhr.response);
var imageBase64 = Uint8ToBase64(sampleBytes);
document.getElementById("imgplaceholder").src = "data:image/jpeg;base64," + imageBase64;
}
})
xhr.send();
})
</script>
<div><img id="imgplaceholder" alt="place here" /></div>
UPDATED:
I'm trying to parse a response from a URL but have no idea if I'm doing it correctly.
The URL returns the following JSON:
{"make":"truck","date":"23 July 2009","colour":"pink"};
If i replace var newtext = xhttp.responseText; with
var newtext = '{"make":"truck","date":"23 July 2009","colour":"pink"}';
it works but as soon as i go back to the xhttp.responseText it just shows a blank page.
The code I'm using is:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
xhttp.open("GET", "https://url.com", false);
xhttp.send();
var newtext = xhttp.responseText;
var obj = JSON.parse(newtext);
document.getElementById("demo").innerHTML =
obj.make + "<br>" +
obj.colour + "<br>" +
obj.date;
</script>
</body>
</html>
You haven't defined your variable xhttp, but you are trying to call functions on it. This is resulting in the Uncaught ReferenceError error and causing the rest of the code not to run. To create an XMLHttpRequest object as you appear to be trying to do, put this at the top of your script.
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// the object actually exists here now so the functions can be called on it
xhttp.open("GET", "https://url.com", false);
xhttp.send();
...
Then you can continue on with the rest of your code, assured that your xhttp object has been initialized.
I don't normally recommend using w3schools, but the above code was copied from http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
I am a complete novice in the JavaScript and AJAX stuff. I am trying to make a call to the server using AJAX and display the returned HTML. However instead of rendering the HTML, the browser displays the HTML code. I am not using JQuery and I would prefer not using it (an acute shortage of time and my complete unfamiliarity with JQuery are two major reasons for sticking to basic JavaScript). Is there some way to render the HTML as it is supposed to be using just the basic JavaScript. Here is my code
function gotoNext(button){
try {
xmlHttp = new XMLHttpRequest ();
}
catch (e) {
try {
xmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (el) {
try {
xmlHttp = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (el1) {
alert ("Your browser does not support AJAX! Please use a compatible browser!!");
}
}
}
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var df = document.getElementById ("dataForm");
var data = xmlHttp.responseText;
df.innerText = data;
}
};
var id = document.editEnv.id.value;
var sId = document.editEnv.sId.value;
var fileName = document.editEnv.fileName.value;
var group = document.editEnv.group.value;
xmlHttp.open("POST", "newData.jsp", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
xmlHttp.send ("flag=" + flag + "&id=" + id + "&sId=" + sId + "&fileName=" + fileName + "&group=" + group);
You should use df.innerHTML = data;
innerText just gets/sets the value as plain text.
You can try to replace innerText with innerHTML The difference lies in the fact that innerText doesn't include any HTML tags whereas innerHTML does. For example
Here is a link
will display:
Here is a link
if you call innerText on it. However, if you call it with innerHTML it will display:
Here is a link
df.innerHTML = data;
should work!!
Because using innerHTML will render that html on browser.
innerText will just display HTML code as normal text.
I'm trying to read a specific line out of an XML document. It works when 'calling' them directly, but I don't know how to do it with underlying lines.
Here's the XML file:
http://rapidimg.org/server/files/50a55cca752a9ciUnOM.png
Load XML:
// load xml file
if (window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest();
}
else
{
// IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "vragen.xml", false);
xhttp.send();
xmlDoc = xhttp.responseXML;
Now how do I make it so that in a for loop only answer A is shown? I got the for loop, but how do I continue?
for(i=0; i < totalQuestions; i++)
{
document.write("<br />");
document.write((i + 1) + ") " +
xmlDoc.getElementsByTagName("vragen")[i].childNodes[1].textContent +
"<br />");
document.write(xmlDoc.getElementsByTagName("vragen")[i].childNodes[2].childNodex[1].textContent);
//It has to read: vragen/antwoorden/a
}
I want it to show the first answer no matter what question I'm in.
I just started using JSON and found this example from http://imdbapi.com/:
<script type="text/javascript">
// IMDb ID to Search
var imdbLink = "tt1285016";
// Send Request
var http = new ActiveXObject("Microsoft.XMLHTTP");
http.open("GET", "http://www.imdbapi.com/?i=" + imdbLink, false);
http.send(null);
// Response to JSON
var imdbData = http.responseText;
var imdbJSON = eval("(" + imdbData + ")");
// Returns Movie Title
alert(imdbJSON.Title);
</script>
But it just returns a blank page. What is wrong?
I'm sorry not to directly answer your question, but here is a jQuery version:
var imdbLink = "tt1285016";
// Send Request
$.getJSON("http://www.imdbapi.com/?i=" + imdbLink + "&callback=?", function(data) {
alert(JSON.stringify(data));
});
There are a couple possible issues with your code.
1.) ActiveX is IE only, not firefox, chrome, safari, etc.
2.) You have a cross-domain issue.
Example Fiddle