We Keep Coding

DOM does not recognize an "InseartAdjacentHTML"

I am creating an automation with selenium Webdriver. But it does not recognize the .SendKeys() method because of the #shadow-root.
Then I am using javascriptExecutor.executeScript and the only way that I found to insert a text with all the tags which I need was "InsertAdjacentHTML".
until here it is just perfect!!! The text is there exactly as I want, it is in the resolution notes.
The problem comes to the next step, when I click on the btn resolve or save, it will keep asking me to add the resolution notes. although the notes are there, I can see them!
At this point the automation breaks. And then if I manually give just one click upon the resolution notes, and click on btn resolve or save, it will recognize the text and will be able to save it.
My question is: Why the insertAdjacentHTML is not been recognized by the DOM as a text in the first stage. how to fix that?
Should I give a command to refresh or reload the page ??? If I do that, I think I will lost the text! Is there a way to do it?
Please, if you have faced the same problem on your automation, let me know how to fix it.
If you don't use it for automations, but you know how to fix it, let me know too.
Thank you so much!
String eng1 = "return document.querySelector(\"sn-workspace-layout > sn-workspace-main > sn-workspace-content\")" +
".shadowRoot.querySelector(\"now-record-form-connected\").shadowRoot.querySelector(\"sn-form-internal-workspace-form-layout\")" +
".shadowRoot.querySelector(\"now-record-form-blob\").shadowRoot.querySelector(\"sn-form-internal-tabs\")" +
".shadowRoot.querySelector(\"sn-form-internal-tab-contents\").shadowRoot.querySelector(\"now-record-form-section-column-layout\")" +
".shadowRoot.querySelector(\"now-record-html-editor\").shadowRoot.querySelector(\"iframe\")" +
".contentDocument.activeElement.insertAdjacentHTML(\"afterBegin\", \"<p>****************************************************</p>");";
WebElement notes = (WebElement) jsExecutor.executeScript(eng1);

Aligning Text in CSS/JS menu

I'm trying to align the text in the menu at:
http://crango.uofydating.com/dir/New2.html
In the 1st tab, I want there to be a line break after "Item".
In the 2nd and 3rd tab, I want there to be a line break after "This is".
I only posted the part of the menu that I need help with, so it may look a bit odd. But it is connected to some Javascript code which makes it more challenging to edit. The JS can't be removed.

Here is your solution
I have created a fiddle for you
Use .html() instead of .text()
CODE:
.html('<strong>' + $(this).find('a').html() + '</strong>')
It works great ;)
Check it
Fiddle http://jsfiddle.net/krunalp1993/yL6Tn/1/
Hope this helps you :)

In your js code, you are setting back to your original text inside strong tags with .html inside the .click method. So just insert the line break in there.
Insert break in this line in your js:
.html('<strong>' + $(this).text() + '</strong>')

Javascript/JQuery: How to redefine something?

Please pardon my "layman language", but I've been working at this for all day. I almost done customizing this but I just can't seem to wrap my head around this. I'm using Soundmanager (playlist). There's this part in the script that reads:
thisSound._data = {
oLink: o, // DOM reference within SM2 object event handlers
oLI: oLI,
oControls: self.select('controls',oLI),
oStatus: self.select('statusbar',oLI),
oLoading: self.select('loading',oLI),
oPosition: self.select('position',oLI), // HERE IT IS
.......
};
(This is what is setup after the page has finished loading):
controlTemplate = document.getElementById("my_sounds");
controlTemplate.innerHTML = [
// control markup inserted dynamically after each page player link
// if you want to change the UI layout, this is the place to do it.
' <div class="controls">',
' <div class="statusbar">',
' <div class="loading"></div>',
' <div class="position"></div>', // HERE'S WHAT "oPosition" IS CONNECTING TOO
' </div>',
' </div>'
].join('\n');
Now, I'm not using what Soundmanager has setup for me (<div class="position">...), but instead, I have a div somewhere on the page that'd I'd like to be the "new" oPosition (<div class="my_new_position_div">...).
So, in short, I want to have use my_new_position_div as my progress bar instead of the other div.
How do you redefine "oPosition" in this Soundmanger script?
full soundmanager script: page_player.js

I've erased my previous answer. I realized that wouldn't work a second after I posted it. The reason why is because the _data property is only set when it is first needed in a handleClick event (this is pretty bad coding). I was hoping I could find a way to keep the script in tact as much as possible, so you are not stuck with a patched version of somebody elses' handy work. But now it seems there is no other way non-intrusive way then to just replace the oPosition line with:
oPosition: document.getElementById('my_new_position_div');
You need to change <div class="my_new_position_div"> to <div id="my_new_position_div"> also.
I suggest you place some big comments around this patched code. This will help you or somebody else working on this code to upgrade to newer versions in the future.

How can get current element without id and class?

I use an editable QWebView and write some text on it. I want to get current element that text cursor point to it and do some changes. For example text cursor is in a <p> tag that haven't any Id or class. I want to get this paragraph and set it's display to none for example.
How can I get the current element that haven't any Id or class?
I tried: this.style.display="none" it didn't work, but when I try document.getElementsByTagName('p')[0].style.display="none" it works. And I don't know how can i get the current element.
Point that I want to do this just with javascript, not jquery. and without any click or etc. Is it possible? How can i do this?
How does execCommand work? for example how execCommand justifyRight get the current element?
This is my code:
QWebFrame *frame = p->webView->page()->mainFrame();
QString js = QString("this.style.display='none'");
frame->evaluateJavaScript(js);
Thank you

In the case of an editable web page, ideally we'd want to be able to ask the QWebFrame in what QWebElement is the caret, at any time. Then we could tweak this element with C++ code.
Unfortunately, according to the documentation, no such method is provided.
Anyway, there's a workaround in webkit's javascript since we can access the user selection or the caret's position in the DOM with window.getSelection(). Here's some code that finds the nearest <p> tag above the selection and changes its style as needed:
QString js=
" var node = window.getSelection().getRangeAt(0).startContainer;"
" while (node) {"
" if (node.nodeName.toUpperCase()=='P') {"
" node.style.display='none';"
" break;"
" }"
" node=node.parentNode;"
" }" ;
QVariant res = page()->mainFrame()->evaluateJavaScript(js);
You might want to generalize it to take node types and styles as parameters, and possibly test it a bit (I'm no JS expert), but the I believe the principle is sound.

Is there a way to update a jgrowl message?

Is there a way using jgrowl(or any other growl like popup) to update a message if it hasn't been removed yet and if it has been removed just simply add it like normal?

I think I found some changes that will make it possible to do what I want with jgrowl. http://www.moonlitscript.com/post.cfm/jgrowl-modification

Instead of modifying the plugin, I think an easier way would be to make a function to find text inside the growl, then remove it. I've tested the code below, it works and it doesn't appear to cause any problems with the plugin.
This function will remove the growl based on it's contents
function clearGrowl(txt){
$('.jGrowl-notification:contains("' + txt + '")').remove();
}
If you only want to target the header of the growl, then modify it as follows:
function clearGrowl(txt){
$('.jGrowl-notification .header:contains("' + txt + '")').remove();
}