Let's say I have a button on a page, if clicked it adds a div popup.
How can I access the div's content through JavaScript? Is this possible? I've tried searching the page with jQuery selectors but I did not find the div popup.
I have a bookmarklet that is similar to what follows:
javascript:(function() {
alert($('newDivId').val());
})();
...suppose that newDivId is the id of the newly created div, if I execute that code by clicking on the bookmarklet I get an error saying that val() cannot be invoked on a null object.
I do not have access to the page source; do you have any suggestion?
$('#id_of_div').html()
OR
$('.class_of_div').html()
OR
$('#id_of_div_parent div').html()
ETC.
If that doesn't work, you might be trying to select it before it has been full inserted into the DOM. Be sure it's fully loaded before you try to access it.
Related
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
note: a solution in either Selenium or API wrapper Splinter for Selenium is fine!
I have been having issues interacting with the iframes on Twitter.com using the Splinter API for Python.
For example,
with Browser('firefox', profile_preferences= proxySettings) as browser:
#...login and do other stuff here
browser.find_by_id('global-new-tweet-button').click()
this brings up a pop-up box to type in a tweet.
How do I interact with this new box using Splinter to:
1) fill in a message
2) click "tweet" (submit)
..programmatically of course.
I tried inspecting the element but it doesn't seem to be nested inside of an iframe however it targets an iframe. So I am not sure how to find/interact with the elements in this pop-up.
I tried manually typing in a message then clicking the tweet button programmatically:
browser.find_by_css('.btn.primary-btn.tweet-action.tweet-btn.js-tweet-btn').click()
..but I get the error:
ElementNotVisibleException: Message: Element is not currently visible and so may not be interacted with
Stacktrace:
at fxdriver.preconditions.visible (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/fxdriver#googlecode.com/components/command-processor.js:10092)
at DelayedCommand.prototype.checkPreconditions_ (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/fxdriver#googlecode.com/components/command-processor.js:12644)
at DelayedCommand.prototype.executeInternal_/h (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/fxdriver#googlecode.com/components/command-processor.js:12661)
at DelayedCommand.prototype.executeInternal_ (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/fxdriver#googlecode.com/components/command-processor.js:12666)
at DelayedCommand.prototype.execute/< (file:///var/folders/z1/8rqrglqn2dj8_yj1z2fv5j700000gn/T/tmppRsJvd/extensions/fxdriver#googlecode.com/components/command-processor.js:12608)
I strictly want to achieve my goal using Splinter so please do not offer alternatives, I know there are other ways.
Thank you in advance!
You primary problem seems to be that you are treating the results of browser.find_by_xxx as an element object, when in reality it is an element container object (i.e. a list of webdriver elements).
Writing to the field works for me if I reference the element explicitly:
In [51]: elems = browser.find_by_id('tweet-box-global')
In [52]: len(elems)
Out[52]: 1
In [53]: elems[0].fill("Splinter Example")
In [54]:
That will write "Splinter Example" into the field for me.
The button click is failing because your css path is returning a list of three elements, and you are implicitly clicking on the first, hidden element. In my testing, the element you actually want to click on is the second element in the list:
In [26]: elems = browser.find_by_css('.btn.primary-btn.tweet-action.tweet-btn.js-tweet-btn')
In [27]: len(elems)
Out[27]: 3
In [28]: elems[1].click()
In [29]:
When I explicitly click the second element it doesn't throw an error and the button is clicked.
If you add to the css path you can narrow the results to only the button in the visible modal:
In [42]: css_path = "div.modal-tweet-form-container button.btn.primary-btn"
In [43]: elems = browser.find_by_css(css_path)
In [44]: len(elems)
Out[44]: 1
In [45]: elems.click()
In [46]:
Note that no exception was thrown here.
I am trying to add a clickable div to the sceditor. The basic requirement is to use a wysiwyg and programmatically add an element into the editor, which can display a popup when the user clicks on it.
To do this I use:
var text = "<div onClick='editdiv(this)'>"+name+"</div>";▓
$('.sceditor').sceditor('instance').insert(text);
This inserts the div into the editor but when I click on it, I get an error saying editdiv is not defined. Whereas editdiv is a function present inside the javascript same javascript file which runs the above code.
Can someone please tell me what am I doing wrong and/or a way to achieve what I want? Thanks!
What you want is impossible to get without drawbacks.
Events can only be caught inside an active browsing instance (I think that's the name). Everything inside a contentEditable=true" is not an active browsing instance
Based on that, You need to terminate the contentEditable and make a new one inside. For example (code not tested):
var text = "<div contentEditable='false' onclick='editdiv(this)'><div contentEditable='true'>"+name+"</div></div>";
$('.sceditor').sceditor('instance').insert(text);
That should make that click event work as expected
I have an iframe. I want to access a table which present inside iframe.I want to access it from parent window of iframe. I have written JS like
Document.getElementById("table Id");
But the result come null. What is the process to get it?
thanks
x=document.getElementById("iFrameId");
x.contentDocument.getElementById("tableId");
if you can use jQuery i guess it will work across browsers
$("#iFrameId").contents().find("#tableId")
You have to select the element from the iFrame's document. Per Juan's comment, check against both the name, and id of the iFrame
var targetFrame = window.frames["nameOfIFrame"] || window.frames["iFrameId"];
targetFrame.document.getElementById("tableId");
EDIT
I just tested this with the following:
window.frames["fName"].document.getElementById("Adam").innerHTML
in the Chrome console, and it output the html of the Adam div from within my iframe.
I have been writing a CMS for a while now and am currently putting the last few touches on it. one of which includes using ajax to deliver a tinyMCE editor in a lightbox styled window.
when it is loaded, the first time it works perfectly, but when i do it the second time or more, the element names get messed up and it doesn't send data back, or display the current value in the TinyMCE window. When I use Chrome to inspect the element, I can see that the span that contains the previous tinyMCE window is still there.
I use document.body.removeChild to remove the div that is holding it. Does anyone have any ideas?
Addition:
when AJAX gets back from making the request (it has all the html code of what goes in the window), it creates a new div element and uses document.body.appendChild to add the element to the document and puts the html code into the div tag.
Then it travels through the new code and searches for the scripts in that area (of which one is the MCE initiator) and appends them to the head so they are executed.
if the user clicks cancel rather than save, it removes the div tag by using:
document.body.removeChild(document.getElementById("popupbox"));
which works fine,
however when i bring up popup and repopulate as said before, and inspect the elements there, there is still a span there which was created by TinyMCE and the naming has been changed (instead of being identified by 'content', it is now 8 for some reason) and there is no content in the editor region.
I have used:
tinyMCE.execCommand('mceRemoveControl',true,'mce{$Setting['name']}');
tinyMCE.editors[0].destroy();
but neither of them work. They return the tinymce window to a textarea, but the elements are still there.
Removing the editor as you described (using the correct tinymce editor id) before moving or removing the html element holding the tinymce iframe is a good choice. Where do you load your tinymce.js? If you deliver it using ajax i think it might be better to load it on the parent page(!). Some more code would be helpfull.
EDIT: I remember a situation where i had to remove a leftover span. Here is my code for this:
// remove leftover span
$('div .mceEditor').each(function(item){
if (typeof $(this).attr('style') !== "undefined" ){
$(this).removeAttr('style'); // entfernt "style: none";
}
else {
$(this).remove();
}
});