How do you get source code of all the child elements of an HTML element that gets rendered by Javascript and is not visible in view source? (using selenium's php library)
For example if it's an element with class name "ListTable" you would wait for your target element to load with
$driver->wait(10, 1000)->until(
WebDriverExpectedCondition::visibilityOfElementLocated(WebDriverBy::className("ListTable"))
);
then get the content of the DOM inside this div class using:
$content = $driver->findElement(WebDriverBy::className("ListTable"))->getAttribute('innerHTML');
Related
I have javascript files defined in the <head> of both my layout decorator template and my individual pages which are decorated. When I update a thymeleaf fragment in one of my pages the javascript defined in the head of the parent page no longer works. Is there a standard way to 'refresh' these js files?
Thanks.
Additional clarification :
I have a form submitted by an ajax call which updates a table in the page. I have a Jquery onClick function targeting a button in the updated table. The javascript doesn't seem able to bind to the returned elements in the updated part of the page. I select by element class and can see that the selection works prior to the partial fragment render.
For me it is unclear what you mean by
javascript defined in the head of the parent page no longer works.
The page is created on the server. Normally it contains urls of the javascript files
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
In this case 'refreshing' the javascript files can happen only in the client.
Check the html of the page in the client.
Are the tags as expected ?
Are there tags for all expected javascript files ?
With the browser tools (for example Google Chrom developer tools ) check that all script files are actually loaded.
If this doesnt help, it could be that the order of the script tags has changed between the first and second load. This could cause a different behaviour of the javascript executed in the browser.
EDIT :
With the initial load you bind javascript callbacks to dom elements.
You do this directly or through Jquery or other libraries.
When a new dom element is loaded, it has no callbacks bound to it, even if it has the same id as a replaced dom element.
So after the load you have to bind your callbacks again.
If you bound them 'by hand', just bind it again.
If you are using a JQuery plugin, that made the bindings, look into the code or documentation, many of them have a function for that or you can call initialization again.
Once you added new content to the DOM you need to bind again the new content.
Let's say I have a button with some class, the event in binded to the class:
<button class="someclass">Button 1</button>
<script>
var something = function() {
// do something
};
$(".someclass").on("click", something);
</script>
If I add more buttons from the same class to the DOM, they will have not have the click event binded. So once you load the new content via ajax, also remove all binding and add again (you need to remove or you will have buttons with 2 events).
$(".someclass").off("click");
$(".someclass").on("click" , something);
i set my own template and now i want to load a module to the main content div. In the main template file there is this tag {content}. If i browse through my page into this all modules Content is loaded.
Now i want load a module manualy to this div by ajax. So if i click on a Link i want to load it. Somethink like this:
$( document ).ready(function() {
$("#change").click(function() {
$("#content").load('module/mymodule/template/myfile.html.php');
});
});
But i want to load the whole module not only a template file.
What must i do?
Or maybe it is possible to load a Block into this div. I think this is a better solution.
If you want to call a block file within a template then you have to use : {module name="feed.comment"} this code will call comment block of feed module.
I'm attempting to run the following simple bit of code on an html snippet contained in a php file, loaded with jquery's .load() function:
$(".thumbnail").on("click", function(event){
alert("thumbnail clicked");
});
However, I can't seem to get it to work on this portion of my page. I have other calls to elements not loaded via ajax and they work fine with the .on() function. I was under the impression that .on() would recognize ajax loaded content.
My .thumbnail elements are pictures in img tags contained within a series of divs all loaded via ajax, jquery can't seem to find any of this content. All of my code is contained within the ready function.
Is there a way to get jquery to recognize these new elements?
Thanks.
You need a delegated event handler for dynamic content :
$('#container').load('somefile.php');
$('#container').on('click', '.thumbnail', function(event){
// do stuff
});
The closest non-dynamic parent would probably be the element you're loading the content into, and you need to attach the event handler to that element, filtering based on the .thumbnail class, like the code above.
Hello i am using Prototype javascript library in Magento.
I am getting an ajax response and everything is working fine.
The response is saved in the response variable.
var response = transport.responseText || "no response text";
What i want is to fetch a div and its content from the response variable. I am totally confused on how to do it.
I want to get the div and its content and replace it with the current div and its content.
I know how to do it by $('div').update('content') but i am not able to fetch the exact div the content within the div.
You could try something like this:
var container = new Element("div", {}).update(responseText); // this way you get a valid Prototype Element that you can easily query
// performs your query on the Prototype Element
// NOTE: remember to not include the root "div" when attaching your response to the html page
Hopefully I answered your question. If not, please add a sample of code of what you are trying to accomplish!
After submitting an iFrame, content with AJAX enabled functions is returned and everything works.
Once I move the content out from the iFrame to the main page through DOM manipulation and remove the iFrame, AJAX stops working.
How can I make it work?
I grab the body content of the iFrame and move it to an outside element through .innerHTML
It really depends on the AJAX implementation...
Once you've grabbed the DOM nodes from the iFrame and placed them in your < body >, they are essentially new DOM nodes. Any events attached to them would need to be rebound and any code interacting with them would need to be re-executed.
Why not simply load the iFrame into the main page's DOM to begin with and execute the AJAX code there?