I want to set an element.style.height property from clojurescript, but this code unfortunately fails:
(set! (-> (sel1 tr :.ragslide) .-style .-height) (content-height))
(sel1 selects a DOM element, it's a macro from the Dommy library)
With the following error:
clojure.lang.ExceptionInfo:
Assert failed: Can't set! local var or non-mutable field
(or (nil? local) (and (:field local) (or (:mutable local) (:unsynchronized-mutable local) (:volatile-mutable local)))) at line 79 {:tag :cljs/analysis-error, :file nil, :line 79, :column 7}
How can I set that property?
Ok, wow, this seems to be really weird. It failed to work because that code was inside a core.async block which messed everything up...
I think (-> (sel1 tr :.ragslide) .-style .-height) you got is a value of height, you can not set it with a new value.
If you want to add a height element in style, try
set-style! function.
Related
When trying to remove a the parent element I have been able to use this line for most cases:
Polymer.dom(Polymer.dom(this).node.domHost.parentNode).removeChild(Polymer.dom(this).node.domHost);
Yet in some cases I get this error:
Uncaught Error: The node to be removed is not a child of this node: [object HTMLElement]
I have verified the child is there and the objects look correct, but I think I am probably missing a Polymer.dom() somewhere?
I have been able to solve it for all cases that I need by doing this:
var thisNode = Polymer.dom(this).node;
Polymer.dom(Polymer.dom(thisNode.domHost).parentNode).removeChild(thisNode.domHost);
I'm using Jquery to get a list of elements having a class "x".
html:
<p class="x">Some content</p>
<p class="x">Some content#2</p>
If we use Jquery to get both these html elements and do something with it- we use something like:
$(".x").text("changed text");
This will change the text of both the paragraphs. From $(".x") - How can we add a array - subscript notation like we can do with getElementsByclassName as follows:
document.getElementsByClassName("x")[0].innerHTML
I tried this
$(".x")[0].text("asasa")- it doesn't work gives a typeerror in javascript console. I also tried get API here -http://jsfiddle.net/probosckie/jnz825mp/ - and it doesnt work
the error is Uncaught TypeError: $(...).get(...).text is not a function
None of the solutions below WORK!
You can use the get() method for accessing an element from the array, for example:
$(".x").get(index).textContent = "changed text";
More info: https://api.jquery.com/jquery.get/
And for obtaining HTML (innerHTML) you call the .html() function:
// This is equal to document.getElementsByClassName("x")[0].innerHTML
$(".x").get(0).innerHTML;
If you want to set the HTML, then just provide your HTML code inside the function call like this .html('<h1>Hello, World!</h1>').
EDIT: .get() returns the DOM object not the jQuery wrapped element. Therefore .text() and .html() doesn't work. Unless you wrap it.
More options:
$(".x").get(0).innerHTML;
$($(".x").get(0)).html();
$(".x:first").html();
You can do it like this way:
$('.x:eq(0)').text('changed text');
or:
$('.x').eq(1).text('bbb');
both works well
sorry for my before answer..
The solution $(".x").get(index)... will first match all .x (which is bad performance). And then it will filter
If you have 1000 .x it will fill an 1000 items in the jQuery object (before filtered)
But
$(".x:first").text("changed text"); will do better because it won't yield all .x and then filter , but will do it at a first single step (without filling 1000 items)
Chrome 24 has a new way of outputting objects in console.log().
For example, console.log($("p")); on this jsFiddle example outputs this insanity:
▼[<p>, <p>, <p>, prevObject: jQuery.fn.jQuery.init[1], context: #document, selector: "p"]
► 0: <p>
► 1: <p>
► 2: <p>
► context: #document
length: 3
► prevObject: jQuery.fn.jQuery.init[1]
selector: "p"
► __proto__: Object[0]
I can see that it puts the collection of DOM elements at the beginning. But if you try to expand even a simple <p> tag that is mostly empty, it throws up all over you:
▼ 0: <p>
accessKey: ""
align: ""
► attributes: NamedNodeMap
...
[stopping here for sanity's sake]
So how do I use all this information? My first instinct is to tame it down to how it used to look, but on second thought, there really is a lot of info in there that I might want to have access to. But I'm having a hard time understanding what I'm looking at. Much of it looks like jQuery values. Is this a list of every jQuery value that the object has (or doesn't have)?
Then there's the whole issue of the ► context: thing and the ► __proto__: thing. Once you start drilling down in __proto__ you will never stop. I think it goes infinitely down!
How can I begin to learn how to use this new output?
EDIT:
I actually just realized that I'm still using Chrome 23, this isn't something that was introduced in 24. Someone in this thread said it was a Chrome 24 issue, but maybe it's new in 23? At any rate, I only just recently started noticing this on jQuery objects.
EDIT 2: If you're just looking for how to log the old way, try this: (hat tip)
console.log.apply(console, $("div"));
In your demo fiddle, you are logging NodeLists or HTMLCollections. Each of the elements within a NodeList is represented as a numeric index 0, 1, 2, etc. 0 being the first in the NodeList if any elements exist in it.
When you expand the Elements you see all available properties of an HTML Element as defined in DOM Core 3 specification. Refer here for more information about this http://domenlightenment.com/#3.2 and for a list of all properties and their purposes go here: https://developer.mozilla.org/en-US/docs/DOM/element. None of this is new in Chrome.
What is new in the latest Chrome version is the top level logged object, so if you just opened the console and typed:
console.log(window)
Which for me when I just did it logged a preview of what the expanded window object it provides when logging it. So for example, you should see something like:
Window {is_minor: 5, bmi_ie6: false, careers_adselector: "div.hireme, div#hireme"...}
Other NodeLists properties listed below the Elements of the list:
context - the context of the selection - http://domenlightenment.com/#4.4
length - the number of Elements in the HTMLCollection
selector - the selector used to select the Element or NodeList
__proto__ - An Object's __proto__ property references the same object as its internal [[Prototype]] (often referred to as "the prototype"), which may be an object or null (in the case of Object.prototype.__proto__). For more info on this refer to: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/proto
I modified the fiddle slightly and should show the preview of the objects when you view the console http://jsfiddle.net/jaredwilli/H3YWq/2/
You can't really get rid of any of these things either, they're a part of the DOM and will exist always otherwise the NodeType of what you're looking at will be something other than an ElementNode.
I'm just as annoyed as you are with this change. I know this isn't ideal, but it will hopefully help you a little bit.
console.log($('p')[0]);
You may have seen that solution before, and then found it didn't work if you were in a loop for instance:
$('p').each(function(){
console.log($(this)[0]);
});
That doesn't end up giving you the result you were used to either, so I had to use ['context'] instead of [0] like this:
$('p').each(function(){
console.log($(this)['context']);
});
Again, I'm looking for a better solution myself, but I thought I'd share with you what I've found.
You want first element so use [0]
As another option, check out Firebug in Firefox. I know, I love chrome too and use it every day, but Firebug is a great plugin and I've never had an issue with it.
I have a problem I just can't solve, and need your advice since I'm out of ideas:
Context: I'm using tinyMCE Editor on my website and developed a custom plugin to include external xml files. So far everything works as expected. The links to the external xml files are represented as span-Tags:
<span id="-[XML Document 1]-" title="erg" class="xml_embed xml_include">-[XML Document 1]-</span>
but only in the tinyMCE editor with a custom class (xml_include) to distinguish them from normal text and upon switching to the html/source code view or saving, those span tags get replaced to xi:include elements:
<xi:include xmlns:xi="http://www.w3.org/TR/XInclude" show="xml_embed" href="erg">-[XML Document 1]-</xi:include>
The text that was set as innerHTML ("-XML Document 1]-") for the span tag(s) serves as placeholder in the editor and gets moved to the xi:include tag(s) in the source view and serves as placeholder there also.
Now to the problem:
The code to transform span.xml_include to xi:include gets called before the source code popup is displayed:
ed.onPreProcess.add(function(ed, o) {
var elm;
var domelm;
//get all span.xml_include elements
tinymce.each(ed.dom.select('span.xml_include', o.node), function(n) {
//IE ignores innerHTML when created with tinymce.dom, therefore use native JS createElement method to tell IE that custom tag is valid HTML
if(tinymce.isIE)
{
domelm = document.createElement('xi:include');
domelm.setAttribute("xmlns:xi", "http://www.w3.org/TR/XInclude");
domelm.href = n.title;
domelm.innerHTML = n.innerHTML;
domelm.show = n.className.split(/\s+/)[0];
document.body.appendChild(domelm);
ed.dom.replace(domelm, n);
}
else
{
//ed = tinyMCE.activeEditor
elm = ed.dom.create('xi:include', {href: n.title, show: n.className.split(/\s+/)[0]}, n.innerHTML);
elm.setAttribute("xmlns:xi", "http://www.w3.org/TR/XInclude");
ed.dom.replace(elm, n);
}
});
});
this code works perfectly fine in FF and Chrome, but not in IE (I tested 7 & 8): in IE the innerHTML of the new element "domelm" can't be set. Either it stays blank or if set explicitly an error is thrown. n.innerHTML can be accessed. I get an "Unknown runtime error" for the line domelm.innerHTML = n.innerHTML;
What else did I try?
the native JS way: domelm.appendChild(document.createTextNode(n.innerHTML)); to create a text node and append it to the "domelm" with no success (getting error: "unexpected call to method or property access", that should be the translation from "Unerwarteter Aufruf oder Zugriff" (german version))
the tinyMCE API way: tinymce.DOM.setHTML(domelm, n.innerHTML); resulted in no error but also the usual blank innerHTML
the jQuery way: $('#domelm').html(n.innerHTML); or first var jQelm = $(domelm); then jQelm.text(...); or jQelm.html(...); doesn't matter, neither works, IE always returns "unexpected call to method" error in the jquery core, which I obviously won't touch..
the tinyMCE way of creating elements as seen in the "else" part of the if condition above..if domelm.innerHTML = n.innerHTML; isn't explicitly set, elm.innerHTML just stays blank, else the same errors as on the approaches above occur, therefore I could as well skip the if(tinymce.isIE) detection..
What else can I do? Suggestions?
I also made sure to properly declare the custom xml namespaces, changed the MIME-type to application/xhtml+xml instead of simply text/html, "announced" the xi:include node for IE with document.createElement('xi:include'); and generally changed the code to please IE..and this seems to be the last major bug I have to overcome..
I'm not sure if it's an error in my code since FF and Chrome work fine local and remote and don't show any errors..?
Any help is appreciated, I hope I provided enough context for you so that it's clear what I meant. and sorry for mistakes, English is not my first language :)
Ok, wrapping the custom element in a p/div/span tag finally did the trick: I used span to leave the formatting unmodified..here is what I did:
In the "if(tinymce.isIE) part of the onPreProcess function, before "xi:include" is created, a wrapper is needed:
var wrapper = document.createElement('span');
Appending the custom tag-element to the wrapper:
wrapper.appendChild(domelm);
and appending a textNode to the wrapper since appending it to the domelm throws errors:
wrapper.appendChild(document.createTextNode(n.innerHTML));
and finally append the wrapper to the dom and replace the "span" tag (n) with the wrapped "xi:include" (wrapper, span tag to be modified):
document.body.appendChild(wrapper);
ed.dom.replace(wrapper, n);`
The result is a custom "xi:include" tag in IE with the correct innerHTML:
<span><xi:include xmlns:xi="http://www.w3.org/TR/XInclude" href="eh" show="xml_embed">-[XML Document]-</xi:include></span>
I'm using the actionscript-mode-connors.el for indenting Actionscript 3 code in emacs.
I have most things figured out, but one thing bothering me is when I use an inline closure as a function argument, the indentation of the interior of the function is screwed up.
For example:
var foo:int = some_function(
bar,
baz,
function():void {
return qux();
},
zap);
I want return qux() to be a single indent from the function declaration on the previous line, not a single indent from the open paren. The indentation of 'bar' used to be screwed up too but I fixed that with
(add-hook 'actionscript-mode-hook
(lambda ()
(c-set-offset 'arglist-intro '+)
(c-set-offset 'arglist-close 0)))
Typically here I would use C-c C-s to figure out what syntactic symbols I need to change, but the problem on the 'return qux()' line is that the syntax context is
((arglist-cont-nonempty 731 758) (brace-list-intro 731))
where those numbers refer to the 'some_function' line. 'arglist-cont-nonempty' seems like a mistake, and it seems like it should be 'arglist-cont', since there's nothing after the open paren on that line. I can't change the indentation for 'arglist-cont-nonempty' since that would affect the case where the open paren does not end the 'some_function' line as well.
How can I fix this?
I would use espresso-mode for ActionScript. It indents your example correctly.
How about an indirect answer? It seems as though you're relatively comfortable with the C indentation machine. You might want to use advice around 'c-guess-basic-syntax to recognize the particular configuration and modify it to be what you think would make the most sense for that situation.
If you take a look at this answer for an indentation customization for comments, I essentially did the same thing, only at the point of indentation.
Regarding your specifics, I cannot reproduce the same failure you have, my indentation for that chunk of code (in 'actionscript-mode with your two changes) looks like:
var foo:int = some_function(
bar,
baz,
function():void {
return qux();
},
zap);
Also, the syntax for the return qux(); line is: ((brace-list-intro 319)).
It seems that your hunch is correct (that the arglist-cont-nonempty list is the problem), and changing the output of 'c-guess-basic-syntax seems like it would be a viable solution.
Can I also point out the obvious test? Have you started without any customizations and loading just action-script? I did so with the latest action-script and Emacs 23.1 and got the results you see above. Tested with M-x c-version showing both 5.31.3 and 5.31.7 (the later is distributed with Emacs 32.1).