How can I manipulate DOM on page 2 (e.g. TD) when you are in page 1 of Datatables?
Using this code isn't possible because TD of another page is not on DOM until you select page 2.
$("td").html("some code here..");
When using jQuery DataTables, you cannot access the DOM on a different screen, because DOM elements exist on the current screen only.
Instead, you can access or change the DataTable's internal value of a table cell's contents by using the cell().data() function:
myDataTable.cell(row,column).data('some code here ...');
Example Fiddle
Related
Example Image
say I wanted to select the element with class=kbkey button red_selected sel. Its xpath from the example in the pic would be //*[#id="virtualKeysWrapper"]/div[3], so I have the following code:
WebDriverWait(driver,20).until(EC.element_to_be_clickable((By.XPATH, '//*[#id="virtualKeysWrapper"]/div[3]'))).click()
However, the div position of this element would change everytime I refresh the site. Was wondering what should I do to successfully select the element with class=kbkey button red_selected sel successfully everytime?
Avoid using index position in XPath if at all possible for this very reason. Without knowing exactly what the rest of the DOM looks like, my best guess is that you could use the following expression:
//div[#id='virtualKeysWrapper']/div[#class='kbkey button red_selected sel']
Alternatively, you could use
//div[#id='virtualKeysWrapper']/div[#sel='true']
I have a Vue instance whose data contains an array of objects. I display this data in a table without issue.
Upon clicking the table rows, I set a "selected" property on the corresponding data object using:
key.$set('testing', testing);
Upon setting this value, I add a custom css class the the table row, without issue.
However, if I do a simple output of the entire array of objects at the bottom of the page (such as below), it doesn't get updated to reflect the new "testing" attribute I have added.
{{ gridData | json }}
I was able to reproduce my question using some modified vue.js example code in this JSFiddle:
https://jsfiddle.net/wdmatl/531axrtt/
Notice when you click on rows of data, you either see "testing" or "not testing". But this new object data isn't reflected in the json at the bottom of the page. Why not?
I'm using boostrap library on Yii via yii-booster
I've created a relation table view
The related view is a TbGriView itself
Vhen in a row i click on the link on the 'related' column, the row expands itself, and render a TbGridview inside it.
The problem is that the internal gridview cannot be sorte, paged or filtered, because each action on it causes that the entire container grid will empty
Note
- external grid as a id of 'extenalgrid'
- each internal grid has as id like 'internalgrid-$rowId' , so every internal grid as differnt id on div, table and table row elements.
- the action called from "render related tabel" link is using renderPartial without the postProcess option. If i use potProcess, the row will be empty
So is it not possible to rendere a full working gridview/tbgridview into a related table ?
Use different css classes for the filters, buttons and headers for the different tables. From the jquery.yiigridview.js file events are bound to selectors as $('#table-id .selector-class') so elements in your internal gridView still trigger the events bound to the external gridView. You also have to specify a different url for the internal gridView by setting it's ajaxUrl.
I am trying to select a specific item in a page which is at the bottom of the page. I want to verify that element is present and the same time I want to focus to that specific item.
How can I do this in the Selenium IDE?
I tried storeEval, but its specific co-ordinated which I don't want. I am looking for some dynamic command. I tried using css:.groupTile:contains("Concentrated") but the focus is not going to that particular item (Concentrated).
Can someone help me with Command, Target and value please?
CSS Selectors have many formats
i) Using id. Put this in Target: css=tag#id
tag = the HTML tag of the element being accessed,
id = the ID of the element being accessed
ii) Using class. Put this in Target: css=tag.class
tag = the HTML tag of the element being accessed,
class = the class of the element being accessed
In value you enter name of the item.
On my site I have a DataList full of image thumbnails. The thumbnails are HyperLink controls that, when clicked, offer an enlarged view of the source image (stored in my database).
My client wants a facebook Like button on each image and I was hoping to put that in the lightbox window that appears when you click on a thumbnail.
My challenge here is that to generate the info for the Like, I need to create meta tags and each image should, preferably, create it's own meta tags on the fly.
What I can't figure out is how to make the HyperLink click open the lightbox AND create the meta tags at the same time.
Any help will be greatly appreciated.
For a live view of the site, go to http://www.dossier.co.za
The way that we approach similar problems is to hook the onclick event of the href in javascript.
Depending on exactly what you need to do, you can even prevent the standard browser behavior for the hyperlink from executing by returning false from the javascript method.
And in some cases, we just use the hyperlink for "show" by setting the href to "#".
Here is an example that combines all of these concepts:
File Name
In this case, the specified javascript is executed, there is no real hyperlink, and the browser doesn't try to navigate to the specified URL because we return false in the javascript.
Add a Classname to the opening table tag like class="tbl_images" so we can use JQuery to access it. Capture the click on the td and pickup the id of the item. Pass that id to your code as required to generate your meta tags. In the following when the user clicks on an anchor in a td, a function will run.
I use this all the time to access attributes in the td so i can run a function. You could use something like this to pickup values from your image/anchor and create something...
$("#tbl_images > tbody > tr ").each(function () {
//get the id of the tr (if required)
var id = $(this).attr("id");
var ImageTitle = $(this).find("img.Image_Class_Name").attr("title");
//on click of anchor with classname of lighthouse run function,
//passing in our id or other data in the row to our function
$(this).find("td: > a.lighthouse").click(function () {
//update script for this record
MyFunction(id,ImageTitle);
});
});