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.
Related
I was recently attempting to do an update to my views and replace the vanilla asterisk "*" character which was meant to represent a star with the unicode black star "★" (U+2605, "★"; "★"; 0xE2 0x98 0x85 (e29885)). Everything seemed to work great as I added the character into a string in the appropriate views. One of such views is shown below.
_recent_updates.html.haml
%table.tablesorter#home
%thead
%tr#header
%th#year Year
%th#name Player Name
%th#position Position
%th#school School
%th#stars Stars
%tbody
- #recent_commits.each do |rc|
%tr{:class => cycle("odd", "even")}
%td#class= rc.player.year
%td#name= link_to display_name(rc.player), player_path(rc.player.slug)
%td#position= Position.find(rc.player.position_id).abbr if rc.player.position_id
%td#school= link_to rc.school.name, school_path(rc.school.slug)
%td#stars= "#{display_star(rc.player.vc_star_rating)}★"
I released the update and went along with my business. A couple of days later, I checked Google Analytics to see how traffic was going to the site, and I noticed a precipitous drop to nearly zero. I did some checking as I knew there was a great deal of traffic to the site during this time period, and realized that there was something wrong with my google analytics code. When I looked at the source code for the page in production, here is what I saw.
<--! ...My Page Contents -->
<script type="text/javascript">
if (typeof gaJsHost == 'undefined') {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXXX-1");
pageTracker._trackPageview();
} catch(err) {}</scr
It appears that the extra bytes consumed by the unicode character were unaccounted for so that they effectively ate the bottom of my page, causing it to end abruptly. What I should have seen was that script tag should have been ended, as well as the end of the body and html tags like so.
<--! ... My Page Contents -->
<script type="text/javascript">
if (typeof gaJsHost == 'undefined') {
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXXXX-1");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
I reverted to the previous change from git (the replacement of asterisks with stars was the only change in the commit in question), and my Google Analytics Tracking Code works fine again, and my script, body and html tags all have their proper closing tags.
My question is two fold.
How do I add the star character back into my view without eating up the end of my code?
I thought UTF-8 was supported out of the box in Rails 3.1, so why is this happening?
I have not seen this issue with Google Analytics in particular, but in general you will get errors if your Rails source files contain Unicode characters without having the
# encoding: UTF-8
line at the top. Double-check that your HAML file is actually encoded as UTF-8 and not anything weird like UTF-16 or a non-Unicode format, then add this tag to the top and see if that solves the issue. You may also try setting Haml::Template.options[:encoding] = "utf-8" in your environment.rb - afaik it should be the default, but may be overridden somewhere.
Rails 3.1 supports Unicode out of the box, but doesn't tolerate Unicode inside its code unless you ask it to. Also note that some database drivers still don't fully support Unicode.
After banging my head against the wall for a few days, and adding some variation of "encoding: UTF-8" to just about every file in my Rails app, I decided to try using the html code ★. First I went to the trusty HTML2HAML converter. It told be that the html code ★ converted to \★ in haml. So I tried that and got a nasty little ISE message. I tried a couple of other variations until finally I stumbled upon a solution.
I created an erb based partial _star.html.erb which I called from my _recent_updates.html.haml file specifically to render the star. Once I did that, everything cleared up and worked like a charm.
I'm still not sure what was going on with the haml, but I'm hoping someone smarter than me can figure it out.
Last line updated:
_recent_updates.html.haml
%table.tablesorter#home
%thead
%tr#header
%th#year Year
%th#name Player Name
%th#position Position
%th#school School
%th#stars Stars
%tbody
- #recent_commits.each do |rc|
%tr{:class => cycle("odd", "even")}
%td#class= rc.player.year
%td#name= link_to display_name(rc.player), player_path(rc.player.slug)
%td#position= Position.find(rc.player.position_id).abbr if rc.player.position_id
%td#school= link_to rc.school.name, school_path(rc.school.slug)
%td#stars
= render 'star', :rc => rc
My new partial
_star.html.erb
<%= "#{display_star(rc.player.vc_star_rating)}" %>★
I use tinymce on my website and I always run into this annoying j is null.
In my template file I originally had the init method out in the open like in the example...
<script type="text/javascript" >
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
But in the error console of Firefox I see something that says "j is null" and the reference is somewhere within the tiny_mce.js file.
Any help is appreciated. Thanks so much.
It's a tinymce bug. Internally, the tinymce code uses a <span id="mce_marker"></span> to remember the caret-position when pasting. when validating the resulting fragment, after the paste, the span is deemed invalid and removed, thus breaking the code by removing the marker.
This issue will be fixed in the next official tinymce minor release. There are some workarounds for this kind of issue. One is to add to add id and mce-data-type attribute to spans as valid elements (init setting). Example:
// The valid_elements option defines which elements will remain in the edited text when the editor saves.
valid_elements: "#[id|class|title|style]," +
"a[name|href|target|title]," +
"#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i,-u" +
"-span[data-mce-type]",
I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.
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);
Is it possible to create Ajax.ActionLink which has instead of text, the whole DIV?
I'd like to map div on Ajax.ActionLink
I don't think that this will work using the standard MVC Ajax scripts. I believe that the MVC javascript is created to use an <a> element by default. On a different note, embedding a div tag within an <a> is not valid XHTML. What are you trying to achieve?
Using Jquery is probably the easiet way you want to go. As an example:
<div onclick="SomeAjaxFunction()">some div content</div>
function SomeAjaxFunction()
{
$.get('<%= Url.Action("SomeAction", "InSomeController") %>', function(data) {
$('.result').html(data); // assuming a partial view
alert('Load was performed.');
});
}
However, if you are dead set on using MS Ajax, to work with divs, you need to possibly look at the Sys.Mvc.MvcHelpers._asyncRequest function and do some of your own re-wrapping to make it usable. I have not tried or tested this, so use at your own risk. (Stick with the Jquery, there is far better help and support available.)