I am using xui js in PhoneGap and I want to read xml through xui js.I have written some code
and I am getting root Element successfully.And running forloop for each element I am also getting element that is able to display textContent.But I am not able to get further elements inside tags in element.How can I get that.My code is as follows:
xui(window).on('load', function(){
var url="http://www.w3schools.com/dom/books.xml";
fireURL(url,winner);
});
function fireURL(url,success)
{
var option={
async:true,
callback:function(){
success(this.responseText);
}
}
x$().xhr(url,option);
}
function winner(data)
{
domParser = new DOMParser();
var xmlDoc=domParser.parseFromString(data,"text/xml");
x$(xmlDoc).find("book").each(function(element,index){
alert(element.textContent);
//Here I want to get further elements by its tag name
});
}
You can easily use javascript for that.Get reference from Here
Or
Replace your success code with following code:-
function winner(data)
{
domParser = new DOMParser();
var xmlDoc=domParser.parseFromString(data,"text/xml");
var _bookStore=[];
x$(xmlDoc).find("book").each(function(element,index){
var _book={};
_book.author=[];
_book.title=element.getElementsByTagName("title")[0].textContent;
for(j=0;j<element.getElementsByTagName("author").length;j++){
_book.author.push(element.getElementsByTagName("author")[j].textContent);
}
_book.year=element.getElementsByTagName("year")[0].textContent;
_book.price=element.getElementsByTagName("price")[0].textContent;
_bookStore.push(_book);
});
alert("hello"+JSON.stringify(_bookStore));
}
Related
I'm working on a flexible menu, that does not need to jump from page to page when clicking 'links'.
The JavaScript I use for that is as follows:
var inbox = document.getElementById("u-content-inbox");
var friends = document.getElementById("u-content-friends");
var agenda = document.getElementById("u-content-agenda");
var list = document.getElementById("u-content-list");
var news = document.getElementById("u-content-news");
var notes = document.getElementById("u-content-notes");
function Inbox() {
inbox.style.visibility='visible';
}
function Friends() {
friends.style.visibility='visible';
}
function Agenda() {
agenda.style.visibility='visible';
}
function List() {
list.style.visibility='visible';
}
function News() {
news.style.visibility='visible';
}
function Notes() {
notes.style.visibility='visible';
}
The div elements are like this:
<div id="u-content-inbox" style="visibility:hidden;">
Inbox
</div>
<div id="u-content-friends" style="visibility:hidden;">
Friends
</div>
Each div has a "u-content-x".
However, when I try to change the style attribute "visibility" to visible. It gives me the following error: Uncaught TypeError: Cannot read property 'style' of null
I'm not seeing what I'm doing wrong. Could somebody please bring clearance to me why exactly JavaScript, or rather, I fail to make it work?
Whenever I run a check on
if(!inbox) {
alert("Inbox div has not been found);
}
does not show the alert message.
Make sure you call your javascript after the document is loaded! I'm nearly certain you are trying to get element references before they exist in the dom. The best practices is to put all scripts just before the closing of the body tag.
<script src="some/path/to/file.js"></script>
</body>
If your scripts appear in the document before the elements do, you can put your code inside of this load event function:
window.addEventListener('load', function() {
//your code here
});
Just as a note on your code architecture, you could attach a class to each element and then do this:
var toMakeVisible = document.getElementsByClassName('some-class');
for (var i=0; i<toMakeVisible; ++i) {
var elem = toMakeVisible[i];
elem.style.visibility = 'visible';
}
I have following JavaScript function that load contents return by contacts.php into DIV id contacts-container, it takes a lot of time to complete the task. I want to show "LOADING.." text in the DIV id contacts-container while contents are being loaded.
function load_contacts() {
document.getElementById("contacts-container").innerHTML='<object type="text/html" data="contacts.php" ></object>';
}
I want solution in pure JavaScript.
What about some more JS?
function load_contacts() {
var el = document.createElement("object"),
target = document.getElementById("contacts-container")
target.innerHTML = "<span>Loading...</span>";
el.onload = function() {
target.firstChild.remove();
}
el.setAttribute("type","text/html");
el.setAttribute("data","contacts.php");
target.appendChild(el);
}
You can do with ajax. For this my suggestion, you must Jquery Ajax. For example,
$("#loadingElement").html("Loading");
$.load("#contacts-container",{},"contacts.php",function(){
$("#loadingElement").html("");
});
i am trying to append to a div with an ID that is dynamic
<script>
var GameId = "{{$match['gameId']}}";
var Ts = '{{$match['createDate']}}';
var TsInt = parseInt(Ts);
var timeSinceGame = moment(TsInt).fromNow();
$('#'+GameId).append(timeSinceGame );
</script>
the script is run inside of a php foreach loop.
the div ID is set the same as GameID variable
however nothing is appended to anything when run what's wrong here?
None of your jQuery is wrapped in DOM ready events, so the elements are likely not in the DOM yet when the code runs.
Try adding a DOM ready wrapper:
<script>
$(function(){
var GameId = "{{$match['gameId']}}";
var Ts = '{{$match['createDate']}}';
var TsInt = parseInt(Ts);
var timeSinceGame = moment(TsInt).fromNow();
$('#'+GameId).append(timeSinceGame );
});
</script>
$(function(){ is just a handy shortcut for $(document).ready(function(){
The alternative is to simply inject your code after the elements in the page, so that they do already exist.
My goal is to get the text from a HTML document which does not call any functions from my .jsp file.
I've looked around and I thought I had found the answer to my problem but it doesn't seem to be working, and other answers consist of using jQuery (which I am both unfamiliar with and not allowed to use).
This is my code so far:
function getText(divID) {
var w = window.open("test.html");
var body = w.document.body;
var div = document.getElementById(divID);
var textContent = body.textContent || body.innerText;
console.log(textContent);
//div.appendChild(document.createTextNode(textContent));
}
So as you can see, I'm trying to get the body of one HTML document and have it appear in another. Am I on the right tracks?
EDIT: Ok so I seem to have made my problem quite confusing. I call the function in a HTML document called html.html, but I want to get the text from test.html, then have it appear in html.html. It has to be like this because I can't assume that the HTML document I want to read from will include my .jsp file in its head.
At the moment I am getting the following error.
Uncaught TypeError: Cannot read property 'body' of undefined
The reason document.body in the other window is undefined, is because the other window has not loaded and rendered the document yet.
One solution would be to wait for the onload event.
function getText(divID) {
var w = window.open("test.html");
w.addEventListener("load", function() {
var body = w.document.body;
var div = document.getElementById(divID);
var textContent = body.textContent || body.innerText;
console.log(textContent);
});
}
Make sure you run the getText function on a user event like a click, else window.open will fail.
If all you want to do is get the contents of the other window, using AJAX would probably be a better option.
function getText(divID) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 ) {
var body = xhr.response.body;
var div = document.getElementById(divID);
var textContent = body.textContent || body.innerText;
console.log(textContent);
}
};
xhr.open("GET", "test.html", true);
xhr.responseType = "document";
xhr.send();
}
I am passing a string to a table where some of the classes contains html markup in a string (img). After a conversion post appending this table using innerHTML works great in chrome and FF but not IE.
Here is the code that looks something like this:
var dfd = $.Deferred();
var requestParams = {};
templatingIsDone = jsonRequest(ResolveUrl("~/Results/ResultsService.asmx/GetMostRecentUploadsService"), requestParams).success(function (data) {
if (data.Success == true) {
var jheaderResults = $("#jobheaderResults tbody"); //HTML Markup
try {
jheaderResults.empty();
var results = data.Results;
$.tmpl("jobHeaderTemplate", data.Results).appendTo(jheaderResults);
var allCaterLinks = $(".CaterRequestLinking");
$.each(allCaterLinks, function (index, value) {
if ($.browser.msie) {
value.innerHTML = value.innerText;
} else {
value.innerHTML = value.textContent;
}
});
$("#jobheaderResults tbody").trigger("update");
The result shows its image in Firefox and Chrome in the table "jobheaderResults". However IE does not render the image and instead shows the html markup instead. How do I convert this to HTML?
I have also tried the following code but to no avail:
//value.innerHTML = value.empty().html(value.innerHTML);
//value.innerHTML = value.textContent;
//value.innerHTML = value.innerHTML.html();
//value.html(value.innerText);
//value.innerHTML = value.outerText;
None of the above worked, they all failed to render the image onto IE.
For extra information, the actual markup that I am trying to convert is:
"<img src=\"/HWVDB/images/Cater-Icon.jpg\" alt=\"CaterReqAlternate\"/>"
Try this
$.each(allCaterLinks, function () {
$('.allCaterLinks').html($('.allCaterLinks').text());
});
This should work in all browsers. From jQuery.com: "This (.html()) method uses the browser's innerHTML property. Some browsers may not return HTML that exactly replicates the HTML source in an original document. For example, Internet Explorer sometimes leaves off the quotes around attribute values if they contain only alphanumeric characters."