How to get appended HTML to the consoles log? - javascript

This might be stupid question, but...
Question: How to get the appended HTML to the console's log? I am 100 % sure that my appended HTML is broken and for future purposes I would like to know how to get the result to log? I am trying to implement small software for Android using Jquery Mobile and Phonegap.
Of course you can check my function too, because appends are not correct at the moment.
EDIT: QUESTION 2:
Could you find the reason why I can't see the text PÖÖ/POO. So the second TR is totally missing, but why?
function populateTable(){
console.log("###########populateTable()#############");
$("#table").find('tbody')
.append($('<tr>')
.append($('<td>')
.append($('<img>')
.attr('src', 'images/cart_1.jpg')
.text('Image cell')
)
.append($('</td>')))
.append($('</tr>'))
.append($('<tr>')
.append($('<td>')
.append($('PÖÖ'))
.append($('</td>'))
.append($('</tr>'))
)));
var strinki = JSON.stringify($("#table"));
console.log("2....*******************>>>>>>>>>>>>>>>" +strinki);
}

What you want is console.log($('#table')[0]) so you get the DOM element.
If you prefer a HTML string because you are using a browser with inferior debug tools (in Firebug I can easily view a DOM subtree): console.log($('#table').html())

That was it :) It was so simple that I should know that by meself :)
var strinki = $("#table").html();

Related

.find("tagname") empty result (occasionally works in Chrome)

I need help with some JavaScript. I have a page that does only display correctly in Chrome. That is due to me only developing for Chrome because it is just very easy to use and forgives a lot of mistakes.
I use JQuery to get an XML object $xmlresponse. It has a structure a little something like this:
<evelope:specificbody>
<firstlevel:multimediaobjects>
<secondlevel:thisIsWhatIWant>
TextNode that I need
</secondlevel:thisIsWhatIWant>
<secondlevel:thisIsWhatIWant>
Another TextNode
</secondlevel:thisIsWhatIWant>
</firstlevel:multimediaobjects>
</evelope:specificbody>
$($xmlresponse).find("*") delivers all the nodes correctly. But as soon as I want to address the nodes with jQuery I do not get any results. Even though my page displays in Chrome I can not reproduce
$($xmlresponse).find("thisIsWhatIWant")
results in []
to deliver me all nodes.
Help is appreciated
You forget to include the namespace:
$( $xmlresponse ).find("secondlevel\\:thisIsWhatIWant")
\\ will escape the colon.
But better is to get via nodeName
$( $xmlresponse ).find( "[nodeName=secondlevel:thisIsWhatIWant]" )

Javascript function calling form element is not working in IE8

function HandleFileButtonClick(val)
{
var ss=val.name;
var n=ss.split("choiceimgs");
alert(n[1]);
document.forms["addpoll"]["choiceimg" + n[1]].click();
}
In the above coding it holds the variable value upto n[1]. The alert shows a number. If the line works then it will click a file input and the browser window will open.
This works fine in chrome, but in IE8 is not working. How to write the above line in IE8. And also document.forms['addpoll']['choiceimg'+i].style.display='';
this line also not working in my page. I tried the whole day to fix this. But I can't find any solution. Anyone can help me to solve this issue. Thanks in advance
Because no examples are available I assume that the code line
document.forms["addpoll"]["choiceimg" + n[1]].click();
points to a form field. If so then you have to change it into follows:
document.forms["addpoll"].elements["choiceimg" + n[1]].click();
I am not sure to 100 perscent that the concatenation of .click() is correct, though the change to
document.forms['addpoll'].elements['choiceimg'+i].style.display='';
By the way I recommend the explicit use of value none and display, so you can exclude a source of error.

How to get the value of a custom tag with jQuery

I have a custom tag with format
<ie:menuitems id="ieMenu">Hello World</ie:menuitems>
Now my task is to change the 'Hello World' text, but I am unable to retrieve the value with jQuery/JavaScript, i can get the element for sure because $('#ieMenu").size() gives me 1 as output, but to get the value i tried .text(), .contents(), .val(), .html() but none worked, please help
thanks in advance
EDIT--------------------------------------------------
I think I should mention something here, the above code sample is copied from the page source, i am not sure if this helps you in some way or not, what i wanted to say this is the converted html, and i am running my code in a button click not in page load
Amazing I don't know is it correct or not but I checked and found "Hello World" by using
$("#ieMenu")[0].nextSibling.nodeValue
and you can assign value as
$("#ieMenu")[0].nextSibling.nodeValue = "Test"
This works for me:
​$(function(){
var element = document.getElementsByTagName('ie:menuitems')[0];
console.log(element.innerHTML)
element.innerHTML = 'another'
})​
fiddle: http://jsfiddle.net/WR8MH/
Here is a JSFiddle which does what you want, and works for me in latest Chrome, Firefox, and Opera: http://jsfiddle.net/hTJFk/. The code is reproduced below:
HTML
<html>
<ie:menuitems id="ieMenu">Hello World</ie:menuitems>
</html>
​
JavaScript
$(function() {
$('#ieMenu').text("Goodbye World");
});​
For me, the result was that the tag contained "Goodbye World" as expected.
What browser were you testing on? I suspect that this might be a browser issue, in which case we can try and hack around it.

Problem with jQuery - error when trying to find 2 tags

I have the following DOM structure:
/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>
Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:
// works
var result = $('#testDiv')[0];
alert(result.id);
// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);
I tried selecting id instead of class and got the same results.
My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?
Thanks.
EDIT: Ok this is the official "does not work" version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.
UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.
UPDATE2: I have changed the html back to what it used to look like. I'm using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I'm trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it'll be span or div, but couldnt get out of it to do the second select. I've replaced jQuery.js and jsTestDriver.jar to no avail.
Thanks.
The .className selector matches by class, not ID.
Therefore, $(span.testSpan) won't match any elements.
You need to change it to $('span.testSpanClass') ot $(span#testSpan') (using the #id selector, which matches ID).
For more information, read the documentation.
I don't know why, but for me your code worked well.
I added $(document).ready(function() { before that code, and when I opened the test page, the alert box showed up perfectly, both of them! I don't know when do you want this alert box showed, but if it is when visitor open the page, just add that code. Otherwise, add
function objectid() {
var result = $('#testDiv')[0];
alert(result.id);
var result2 = $('#testSpan')[0];
alert(result2.id);
}
That code worked well for me, too.
PS: Sorry if you don't understand my bad english.
More than likely, there is something else wrong with the HTML you're actually using. Since you're posting only a tiny bit of the html, we can't actually test your problem. Post the entire page, or at least the smallest piece of it that actually has the problem when you run your test.
I tested the jQuery code you reported on JS Bin, and the code worked fine. As the code is very basic, I don't think the problem is caused by the version of jQuery used.
What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.
Not sure whether this is a patch or ugly fix, but it solved my problem for now.
Thanks for all the help!
Use "#" to select by id, use "." to select by class...

prefilling dynamically created textbox with javascript in IE

I'm trying to dynamically add some textboxes (input type=text) to a page in javascript and prefill them. The textboxes are coming up, but they are coming up empty. What is the proper way to pre-fill a textbox. Ideally I'd love to use the trick of creating a child div, setting the innerhtml property, and then adding that div to the parent main div but that didn't work. Then I thought I'd use the dom but setting textboxname.value before or after insertion won't work and doing txttextbox.setattribute('value','somevalue') won't work either. Works fine in firefox. What gives? This has to be possible? Here is my code. I know I'm only using string literals, but these will be replaced with the results of a web service call eventually. Below is some code. Oh and how do you format code to show up as you type it? I thought it said to indent four spaces, and I did that but the code is still on one line. Sorry about that.
var table=document.createElement('table');
var tbody=document.createElement('tbody');
var row=document.createElement('tr');
row.appendChild(document.createElement('td').appendChild(document.createTextNode('E-mail')));
var txtEmail=document.createElement('input');
row.appendChild(document.createElement('td').appendChild(txtEmail));
tbody.appendChild(row);
table.appendChild(tbody);
//document.getElementById('additionalEmails').innerHTML="";
document.getElementById('additionalEmails').appendChild(table);
txtEmail.value = 'my text'
Does not work?
You can also use Prototype to do this easily:
document.body.insert(new Element("input", { type: "text", size:20, value:'hello world' }))
I've encountered problems similar to this in the past, and while my memory is a bit fuzzy on why it was happening exactly, I think you may need to make sure the element is actually added to the DOM before modifying its value. e.g:
var txtEmail=document.createElement('input');
document.getElementById('someElementThatAlreadyExists').appendChild(txtEmail);
txtEmail.value = 'sample text';
I ended up solving this problem by injecting the html directly into a page via a child div. That did work, it's just that I am blind and the software I use to read the screen for some stupid reason failed to see the text in the textbox. Go figure. Thanks for the tip on prototype though, if I ever decide not to cheat and add the eleements to the dom directly, I'll do it that way.

Categories

Resources