Given the element of a table found with getElementById(), I need to get the body element and add a row to it. This fails in Chrome:
var tabBody = expressionTable.getElementsByTagName('TBODY')[0];
but works in IE.
How can I get the body in all browsers (ie 8, Chrome, FF, and Safari)?
The code looks like this:
var expressionTable = document.getElementById(tableID);
var tabBody = expressionTable.getElementsByTagName('tbody')[0];
var expressionRow = createExpressionRow(FieldTagsValue, row);
tabBody.appendChild(expressionRow);
tabody is 'undefined'
I think it might be because the table starts empty, and Chrome does not have a tbody element for an empty table. Could that be it?
Thanks,
Brian
don't rely on anything working in IE - it might behave slightly non-standard.
i would also advise not expecting tags You have not declared in Your HTML to be present in DOM.
i would try going with an explicit tbody tag if You do rely on it being present in DOM :
<table>
<tbody></tbody>
</table>
I know jQuery has some workarounds for handling tables (in IE) - so, unless You're patient to find out all the hacks Yourself, I would go with a library such as jQuery and add table elements like this :
$('#' + tableID).append(expressionRow);
Related
I don't understand how Gwt setHTML & getHTML work. It doesn't seem to be consistent.
Let see this example:
myInlineHtml.setHTML(SafeHtmlUtils.fromSafeConstant("<table><tr><td>Test</td></tr></table>"));
System.out.println(myInlineHtml.getHTML());
Output: "<table><tbody><tr><td>Test</td></tr></tbody></table>"
Clearly when we set the html for myInlineHtml we don't have <tbody></tbody>, but when we getHTML from myInlineHtml then Gwt include <tbody></tbody>.
Why does that's happen because it can be confusing when you want to get the Html value and you thought it has the same value I the time we set it but it hasn't?
Does this happen independently from browsers or dpendently from
browsers? cos that is serious.
This is how HTML is parsed (how browsers are expected to parse it).
In HTML 4, TABLE was defined (in terms of SGML) as requiring a TBODY child element, and that TBODY is defined with both the start and end tags being optional.
In HTML5 (which codifies how browsers actually parse HTML), this is the same: when building a table, if the browser finds a tr, then it inserts a tbody element before parsing the tr as if there were a tbody initially.
Browsers try to format the html properly even if you omit certain keys or parameters. Most modern browsers will accept almost anything you pass it without complaining much, but instead of inserting exactly what you intended, it will interpret what you meant and insert valid HTML.
Therefore, is is perfectly valid to create a table without specifiyng a tbody node, but the browser will supply it for you. Once you use getHTML() you are accessing the parsed, well formatted tags.
I want the user to be able to select the contents of a element by clicking it once. The code would look like this:
<div onclick="this.xyz()">...</div>
The question is: what method goes where I wrote xyz? I've searched for things like "DOM select object," but the answer is a needle hidden in a haystack of irrelevant hits (or not).
Basically you'd want:
<div onclick="var contents = this.innerText;">foo bar</div>
which would set contents equal to foo bar. Of course, this isn't exactly cross-platform compatible. Firefox expects .textContent instead of .innerText. If you're not opposed to using jquery, then
<div onclick="var contents = $(this).text()">foo bar</div>
would do just as well and be cross-platform.
My questions is - how do I add a class or id to the body tag using a text field within Orchard?
So if I enter the word "product" in the text field then the result should be <body class="product">. I want to use this method instead of creating alternate layout templates as every page has the same layout but I need a different class for each page to reference a different colour scheme I have setup for each page in my CSS.
I have added a text field with the name Area to the Title ContentType in the backend. My problem is now how to get the value of the field to be put into the body in the Document.cshtml.
I have read Setting Unique Body Classes and IDs in Orchard and Using Alternatives for Document.cshtml in Orchard CMS but I still can't get it to work! The second one seems like what I want to do but so far I have been unable to acheive it.
Any answer would be very appreciated?
Thanks
Andy
I am so frustrated that there is no readily available solution found in the net about this. Since I am more comfortable coding in jquery & js...
Here's my solution: Assuming you have jquery loaded...
#using(Script.Foot()) {
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () {
var url = window.location.pathname;
var count = url.match(new RegExp("/", 'g'));
var urlsplit = url.split("/");
var page_class = urlsplit[count.length];
alert(page_class);
$('body').addClass(page_class);
});
//]]>
</script>
}
The easiest way to achieve this is to use the Classy feature from Vandelay.Industries.
Sorry for the bad wording of the title, but here's my problem. Suppose I have a list where every item has a class:
<ol>
<li class="chapter">Chapter 1</li>
<li class="chapter">Chapter 2</li>
...
I want to select the item which is corresponding to make the user's current chapter, which is known by javascript, in bold. So if the user is on Chapter 2 I would do something like:
$(".chapter:eq(2)").css("font-weight", "bold");
But I can't do
$(".chapter:eq("+currentChapter+")").css("font-weight", "bold");
as it gives me Uncaught SyntaxError: Unexpected identifier
Any help would be appreciated.
Edit: I'm using a template to insert the variables but I have verified that currentChapter is in fact defined and the number I expect it to be.
function fetchContent(startSlide) {ldelim}
var chapterSize = {$chapterSize};
var currentChapter = {$chapter};
var chapterName = "{$chapterName}";
alert(typeof(currentChapter)); // number
alert(currentChapter); //e.g. 3 works
alert(currentChapter + "aaa"); //e.g. 3aaa
$(".chapter:eq("+currentChapter+")").css("font-weight", "bold"); // doesn't work
Try a different approach, fetch all elements and then select only the one you want (I know it's best to select your element right in the selector, but just to try it out).
$(".chapter").eq(currentChapter).css("font-weight", "bold");
Also, looking at your code, it seems like currentChapter is a local variable inside the fetchContent function. Are you sure you can access that variable when you are calling the jQuery function? Try to check the existence and value of the currentChapter variable right before calling the jQuery function which is causing you problems.
EDIT
From the jQuery documentation jQuery :eq() selector
Because :eq() is a jQuery extension and not part of the CSS
specification, queries using :eq() cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method. For better performance in modern browsers, use
$("your-pure-css-selector").eq(index) instead.
I'm using the IE8 debugger to fix a script that works great in FF 3.16 and Chrome 12.0, but doesn't work for beans in IE 8.0 or Safari 5.0. The spot in the script that's giving me trouble is here:
I need to find the number of <td>s in the the table id="main_tbody" whose children[0] is the first row of data. Both FF and Chrome understand this perfectly; IE 8 and Safari 5 do not.
I want to look at the DOM tree in the IE 8 debugger to see what's going on. But I can't find the ding-dong DOM, dang it!
So: where is the DOM in the IE 8 debugger?
Alternatively <ahem!>: what's wrong with my JS code?
Thanks!
EDIT: I should have said that the table is set up like this:
<table id ="main">
<tbody id="main_tbody">
And references to table id ="main" and tbody id="main_tbody" are initialized this way:
main = getRefToDiv( 'main' );
main_tbody = getRefToDiv( 'main_tbody' );
Call the position_col_heads() function after your </body>
My suspicion is that this function is declared inside the head tag or being called before the browser renders the body content.
Just try this.
...
...
</body>
<script type='text/javascript'>
position_col_heads();//Set breakpoint here and see if its accessible.
</script>
</html>
Also, see what response you get for main.children[0] and main_tbody.innerHTML in your watch expression.
Unbelievable. According to quirksmode, ie8 fails to implement childElementCount and I believe it because that's the thing that's coming back == 'undefined'. So I'll rewrite my loop with a new exit condition. That sucks, because now I'm going to get all children, including comments and everything else, not just the elements I was looking for. Incredible. FYI, ie8 also does not implement firstElementChild, lastElementChild, nextElementSibling, or previousElementSibling.