I search for a method to get plain xml(with tags ect.) from a file and save it so the localStorage.
I found a few opportunities, but every one of them returns the xml without tags. I prefer jQuery to do this...
I tried $.get, $("").load() and AJAX but I don't get it. I just want to save the whole xml as string into the localStorage and read it out later (and work with it).
Does anyone have a idea?
Regards
You can use:
$.ajax({
url: 'http://example.com',
dataType: 'text',
success: function (data) {
localStorage.setItem('xml-content', data);
}
});
This will provide you the XML document as plain text and save it to the localStorage.
Here is a full solution:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<pre id="output">
</pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function setXML() {
$.ajax({
url: 'test.xml',
dataType: 'text',
success: function (data) {
localStorage.setItem('xml-content', data);
getXML();
}
});
}
function getXML() {
var xml = localStorage.getItem('xml-content');
$('#output').text(xml);
}
setXML();
</script>
</body>
</html>
Related
I need to post data and display it also. I am using ajax post method. I am able to get the event Id where data is saved, but not able to display the data. I searched a lot and got some answer also. I tried it in my code, but didn't got the result. My code is:
<!DOCTYPE html>
<html>
<head>
<title>POST API</title>
<script type="text/javascript" src="http://ajax.googleapis.com /ajax/libs /jquery/1.2.6/jquery.js"></script>
</head>
<body>
<button id="btn1">Check HTTP POST</button>
<p>Display sample output from POST API:</p>
<p id="one" />wEventId :
<p id="two" />
<script>
$(document).ready(function() {
$("#btn1").click(function() {
$.ajax({
url: 'url',
dataType: 'json',
type: 'POST',
crossDomain: true,
contentType: 'application/json',
data: {},
success: function(data) {
console.log(data);
document.getElementById("two").innerHTML = data.result.wEventId;
},
failure: function(errMsg) {
console.log(errMsg);
}
var myData = data;
myData = new Array;
});
});
});
</script>
</body>
</html>
Anyone please help me how to modify the code to print the data saved. I have not given the url as it is an internal server and supposed not to disclose it. Thanks in advance.
First I need to know, what is the structure of your json data.
Assuming that it is in a format like given below:
{"field_A":"value_a","field_b":"value_b"}
your code where you are trying to print as innerHTML should be like this:
success: function(data)
{
console.log(data);
document.getElementById("two").innerHTML = data.field_A;
},
Try to adjust accordingly.
I am still surprised from where are you getting the result of data.result.wEventId
I am trying to render this url http://online.wsj.com/xml/rss/3_7085.xml to fetch all the xml information using jquery but i came across something on jsonp thats giving me a callback ,how do i handle that callback to render each node in the html.
I tried the below code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>RSS Feed testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var result;
function jsonparser1() {
$.ajax({
type: "GET",
url: "http://online.wsj.com/xml/rss/3_7085.xml",
dataType: "jsonp",
success: function (result) {
$("div").html(result);
},
});
}
$(document).ready(function(e) {
jsonparser1();
});
</script>
</script>
</head>
<body>
<div></div>
</body>
</html>
I googled, about jsonp ,its quite confusing to me.
Rss feed in xml format. Use datatype = json.
function jsonparser1() {
$.ajax({
type: "GET",
url: "http://online.wsj.com/xml/rss/3_7085.xml",
dataType: "xml",
success: function (result) {
$("div").html(result);
},
});
}
This is not doable directly. You need to use a service like Superfeedr's Feed API or Google's.
These services will serve your the content of the feed in JSON using JSONP so that you can easily integrate any feed into any page.
This is the code I have. I am trying to pull out the "data" attribute and drop it into the div at the end with id "question". I'm pretty new to JS and know there must be something really basic that I'm doing wrong, what is it?!
<!DOCTYPE HTML>
<html>
<head>
<script language="javascript" type="text/javascript">
function display() {
var base = document.getElementById("output");
var CompleteSuggestion = base.getElementsByTagName("CompleteSuggestion")[1];
var suggest = CompleteSuggestion.getElementsByTagName("suggest")[0];
var question = suggest.getAttribute("data")[0].firstChild.data;
document.getAttribute("data").innerHTML = question;
}
</script>
</head>
<body onload="display()">
<xml id="output" style="display: none;">
<CompleteSuggestion>
<suggest data="hello">
</CompleteSuggestion>
</xml>
<div class="question" id="question"></div>
</body>
</html>
Here's a better way to get the attributes from an xml file
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
//use ajax to grab the xml file
//I had an xml file named your.xml in the same directory as this script
$.ajax({
type: "GET",
url: "your.xml",
dataType: "xml",
success: function (xml) {
//when the file has loaded via the ajax request loop over each suggestion element
$(xml).find('suggestion').each(function() {
//get the value of the first attribute (data), from this suggestion row
console.log( this.attributes[0].value );
});
}
});
</script>
http://te.chni.ca/twitter.api/tweet.php
I tried all tutorials but unable to get the data from that please help me
try to get atleast one attribute so i can try the remaining ones
<!DOCTYPE html>
<html>
<head>
<title>Twitter</title>
</head>
<body>
<button id="initquery">Search</button>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function(){
$('#initquery').click(function(){
$.getJSON('http://te.chni.ca/twitter.api/tweet.php',function(data){
var item=[];
$.each(data,function(key,val){
items.push('<li id="'+key+'">'+val+'</li>');
});
$('<ul/>',{
'class':'interests-list',
html:items.join('')
}).appendTo('body');
});
});
});
</script>
</body>
</html>
You need to be using jsonp. Do you see the parenthesis around the response from that API? That is tell-tale sign that this is intended to be jsonp.
You should use ajax() method for this:
$ajax(
url: 'http://te.chni.ca/twitter.api/tweet.php',
dataType: 'jsonp',
success: function(data) {
// your success function
}
);
I have two html files (for add and edit) which contains js codes. These two files are identical except few js lines in its functions. Actually I don't like to have common code for both files. Is there a good way to handle this kind of situations ?
Example:
(file one)
<html>
<title>title goes here</title>
<javascript>
$('#button1').click(function () {
$.ajax({
type: "POST",
url: '/admin/test/checkcode',
data: {code:code, id:id}, // in here there is an id
async: false,
success: function(data){
}
});
}
</script>
<body>
</body>
</html>
(file two)
<html>
<title>title goes here</title>
<javascript>
$('#button1').click(function () {
$.ajax({
type: "POST",
url: '/admin/test/checkcode',
data: {code:code}, // in here there is no id
async: false,
success: function(data){
}
});
}
</script>
<body>
</body>
</html>
You may want to try putting that JavaScript code into a separate file. That way, you can just include the single JavaScript file into each of those pages... and only have to make changes to that one JavaScript file.
For reference, here is a way to include a JavaScript file:
<script type="text/javascript" src="javascript_file_here.js"></script>
Inside of that JavaScript file, there could be some type of basic function that takes parameters for that data value that is used in the $.ajax() call. For example, something like:
function example(data1, data2) {
// your code here
// then just check for data1 and data2 (etc.)
// to see what to include in the `data:`
}