Does anyone know how you can access the DOM from an HTML page you got from the ckeditors getdata function, using javascript?
For instance:
function Delete_ftv_from_text(mfv_id)
{
var content=CKEDITOR.instances.editor1.getData();
content.getelementbyid(mfv_id);
}
So rather then accessing the document.getElementById I want to get the element out of the text from ckeditor, in this case the div element with an id that I get into my function.
The code above of course doesn't function.
You can access the DOM directly from the containing page:
var el = CKEDITOR.instances['editor1'].document.$.getElementById(id);
// do what you want with el
Related
im trying to use puppeteer to get property content of an element, edit it and run the edited version.
For example:
There is this element:
What I need is to get the onclick content, remove the _blank parameter and run the rest of the function... Any ideas?
maybe not the most powerful solution out there but if you only need to do this on this specific tag you could set onclick's attribute with JavaScript within page.evalauate like this:
await page.evalauate(() => {
document
.querySelector(".btn.btn-info")
.setAttribute(
"onclick",
document
.querySelector(".btn.btn-info")
.onclick.toString()
.split("\n")[1]
.replace(",'_blank'", "")
);
});
await page.click(".btn.btn-info");
what's going on here?
we run plain JavaScript within the page's scope with page.evaluate
we select the tag with document.querySelector
and set its onclick attribute (not its property!)
getting the node value of onclick as string:
mojarra.jsfcljs(document.getElementById('j_idt58'),{'j_idt58:j_idt201:0:j_idt203':'j_idt58:j_idt201:0:j_idt203'},'_blank');return false
using the 2nd line of the function (as we don't need the 1st 'function onclick(event) {' line when we reassign it as the attribute)
and replacing ,'_blank' parameter from the original function (string).
the result will be:
mojarra.jsfcljs(document.getElementById('j_idt58'),{'j_idt58:j_idt201:0:j_idt203':'j_idt58:j_idt201:0:j_idt203'});return false
finally clicking the button with page.click executes the new function
alternatively, you can use attributes.onclick.nodeValue if you are not comfortable with toString().split("\n")[1] above:
document.querySelector(".btn.btn-info").attributes.onclick.nodeValue.replace(",'_blank'", "")
I'm trying to add a class to a bunch of links whose suffix ends in .pdf as follows:
var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(addClass("pdf")); // Adding the class
This doesn't work, however, as the browser console prints this error when I try to reload the HTML file calling the .js file:
ReferenceError: addClass is not defined
Why is this happening?
jQuery allows you to perform it's API methods not only on single elements, but also on collections of elements (which is one of the nice advantages over the native DOM API).
The easiest way to achieve your goal is to capitalize on that:
var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.addClass("pdf"); // Adding the class
jQuery $.each() function is for those cases where you want to do something with each element in the collection that is not available as an API method in jQuery. It expects you pass it a function that gets passed the current element in each iteration as this:
var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(function() { console.log(this.href); }) // perform something jQuery doesn't offer as an API method
If you insist on using $.each(), the code is this:
var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.each(function() { $(this).addClass("pdf"); }); // Adding the class
https://api.jquery.com/addClass/
After choosing the pdf links you can directly call the addClass method on the variable pdfs because this is a jquery object and the class will be applied to all the links.
var pdfs = jQuery("a[href$='.pdf']"); //Choosing .pdf links
pdfs.addClass("pdf"); // Adding the class
So... in whole:
$("a[href$='.pdf']").each(function () {
$(this).addClass("pdf");
})
.each needs a function (delegate) for calling it for per item of jQuery result, but func() (in this case: addClass(..)) will call addClass function (that is not defined in current scope) and pass result of calling it to each function.
you can access to addClass function of per item, like this:
pdfs.each(function(index, pdf){
$(pdf).addClass(...);
});
or for all:
pdfs.addClass(...);
addClass(className) is a method of DOM element object. Must be called with element object. when we call addClass() without DOM object reference it look for local function, and thus throw the reference error.
var pdfs = jQuery("a[href$='.pdf']");
pdfs.each(function() {
$(this).addClass( "foo" );
});
Suppose I go
$( '#' + subform_id ) .load( "subform.php" );
where '#' + subform_id is the ID of a DIV
... is there any way the PHP in subform.php can find out, within its PHP code, the identity of the DIV? (e.g. using its own JS code <script> section)
Or otherwise refer to it by some mechanism without knowing its ID? (e.g. to use JQ's append())
Obviously I could pass the subform_id as a param of the data object (2nd param of load()). But I'm just wondering...
later
followed up on what I thought Victor2748 was suggesting... but in fact it was the ID of a <SCRIPT> block in the injected file which I used to gain access to the existing JS DOM.
Victor2748: if you read this, I'm not sure how you could know the "id of the parent container of your subform.php page" without somehow passing this id as a param in the load() function's data object...
even later
Every comment in this thread says something intelligent! In fact, concerning the question of specifying that this is a PHP file, I'm still trying to get my head around something: obviously it is possible to access the DOM when JS runs in the client. But if your PHP code needs to know the name of the DIV into which it's being loaded I believe you do indeed have to pass this through _POST or _GET. I think there are many reasons why injected PHP code might need this sort of info, e.g. so it can contain code which at some point injects more PHP into the same DIV...
Although... clearly that injection code will inevitably use a JS/JQ script, so maybe that would be the appropriate time to find out what you need about where you are in the DOM.
In JavaScript, you can use this.parentNode to get the parent container, and use this.parentNode.id to get the parent div's id.
Here is an example how your loaded block can get itself as an object/node:
var loadedBlock = document.getElementById("nameOfYourDownloadedParentContainer")
Then you can use loadedBlock.parentNode to get its parent element, then you can get any parameter from it, to identify the element/div.
Update:
First you need to get the node of the current executing <script> tag:
var arrScripts = document.getElementsByTagName('script');
var currentScriptTag = arrScripts[arrScripts.length - 1];
Then, to get the parent of the script tag, use: currentScriptTag.parentNode
(I did not test it yet, please tell me if it helped)
I think so... if you have a script tag in subform.php and the file has the following HTML: Submit form, you should be able to:
var subformId = $('#mydiv').parent().id;
It would work because the script tag executes when the PHP file is included. Put the script tag at the end of subform.php to be sure.
I'm not an JS developer, so forgive me if this is a stupid question.
I have this web application, that uses ajax to keep the data update on the screen, but I'm not able to use the ajax value in my JS function, the code generated by my application is:
<span id="c0"></span>
In the web page I just see the numeric value, e.g. 5 and it's updated every second as expected, so I tried to use the same in my JS function:
<script type="text/javascript">
function getPoint()
{
console.log ('<span id="c0"></span>');
return 0;
}
</script>
But in the Chrome's log I just see <span id="c0"></span> instead of a numeric value.
Try the following:
<script type="text/javascript">
function getPoint()
{
var span_element = document.getElementById("c0");
var content = span_element.innerHTML;
console.log(content);
return content;
}
</script>
Explanation:
First you need to access the DOM element of javascript. You identified the element with the id: "c0". To access the element you need to use the function: document.getElementById("someID");
With the element you can do a lot of things. In this case you want to access whatever is inside the tag , so what you want is its inner HTML.
If you are using JQuery, you can also get its content like this:
var span_element = $("#c0");
var content = span_element.text();
Console.log simply logs whatever string you send it as a parameter. So what you are seeing is the expected behavior.
Assuming you are using jQuery, and the ajax returned value is being displayed in the span (id = "c0"), this console.log statement should work:
console.log($("#c0").text());
$("#c0") returns the jQuery object using the id selector (#).
Hello am trying to retrieve the XPATH of a document via the ID of the node, I saw this to be a simple matter when looking at the code a simple:
//iframe[#id=key];
But it won't work, I've tried every combination of syntax I can think of and not luck, the print out is "undefined". This is my code
function getNode(htmlURL, filename, xpath, callback){
var key = filename+xpath;
var frame = document.getElementById(key);
frame.addEventListener("load", function(evt){
var value= frame.contentDocument.evaluate(xpath, frame.contentDocument, null,9,null);
if(value!=null){
callback(value);
}
}, false);
frame.contentWindow.location.href = htmlURL;
}
function init(htmlURL, filename, xpath){
getNode(htmlURL, filename, xpath, function(node) { console.debug(node.outerHTML); });
}
Am trying to get the xpath inside the iframe, so I thought I'd have to point it to the xpath to the iframe first
If you want to find an element inside of an iframe then you need to use the evaluate method on the document in the iframe e.g.
frame.contentDocument.evaluate(xpath, frame.contentDocument, null,9,null)
But if you set the src to load an HTML document don't expect to be able to access nodes in the document in your code setting the src, instead set up an onload event handler to wait until the document has been loaded. In the event handler you can then access the nodes in the loaded document.
You are getting undefined because your xpath syntax translates to a code comment in JavaScript.
What you probably want is:
var finalxpath = "//iframe[#id=key]";
Note the quote characters which makes your xpath a string literal value.