What I am try to achieve is to insert some content in a specific container element designated by a unique id. This would help me insert content at positions other than cursor positions.
editor.model.insertContent(modelFragment); is a function that would insert the new fragment at the cursor position, the second parameter that would be accepted is selectable which I am not sure how to specify to match to that particular div id.
When I was googling for the same, I found a desirable method in ckeditor4, but unfortunately I am looking for an option in ckeditor5.
Related
Want to enter data:
My Code:
I want to select 2nd row of table and enter data in column because 1st row is disable and if 2nd row contains then it auto clicks on 3rd row. My code selects 1st row every time
You can't use cy.get().get() sequence like that, because the 2nd .get() starts searching at the <body> element and ignores the first cy.get().
The correct sequence for your test is cy.get().find() because .find() does start it's search from the result of the previous cy.get().
To locate the empty row, you can use .emptyRow class in the selector.
cy.get('#TWGanttArea')
.find('tr.emptyRow')
.find('td.taskTitle')
With DevExtreme DataGrid you have to click the cell before you can edit data.
cy.get('#TWGanttArea')
.find('tr.emptyRow')
.find('td.taskTitle')
.click() // edit mode
.type('some data here') // data entry
The DataGrid may modify the DOM after clicking, in which case you may get "detached" error.
If that happens, use an alias to perform the steps.
cy.get('#TWGanttArea')
.find('tr.emptyRow')
.find('td.taskTitle')
.as('editCell')
cy.get('#editCell').click() // edit mode
cy.get('#editCell').type('some data here') // data entry
Your code is selecting the first, uneditable row every time because it contains the same class as your row to select. If cy.get() returns multiple elements, then the first one is yielded to the subsequent commands if a specific element is not specified. So, we can get around this by specifying .eq().
cy.get('#TWGanttArea')
.find('.taskEditRow') // use find, because get always starts from root
.eq(1) // yields the returned element at the index-0'd 1 position
.find('td.taskTitle') // finds child elements of type td with class taskTitle
.type('foo');
I have a table with several columns. The first column contains unique data, the 5th contains three buttons (Edit, Assignments and Delete).
I would like to use an XPath expression to locate on the edit button for one of the rows by indentifying the row using the unique data from column one (think that made sense).
I have built some expressions which will allow me to locate on the first column and edit button independantly as follows:
//td[text()='Managers']
and
tr[2]//button[text()='Edit']
The closest I can get to doing what I want is:
//td[text()='Managers'] | //tr[2]//button[text()='Edit']
...However this will locate on the data/button in column 1 AND 5 at the same time, what I want is just for the button in column 5.
The reason I want to do it this way, is so later I can pass in 'Managers' as a varaible in order to select the row (as its unique and meaningful data), and then press the edit button in a different column on that row.
Hope this makes sense!
Thanks
The question isn't very clear as posted, especially because I can't see any relevant part of the HTML. But if I understand this correctly, you can try to select the row that has Manager in it then get corresponding Edit button like so :
//tr[.//td='Managers']//button[.='Edit']
Semi-newbie to jQuery; just can't quite get this...
I have a list of items on a page, and I want to insert a new item at the top of the list by (a) sliding the existing items down and (b) fading the new item into its position at the top of the list. I can get the new item inserted into the list, but so far all the effects I've gotten to work are things like $('#theList').prepend(theNewItem).hide().fadeIn(1000);, which fades in the entire set of items, including the new one, and doesn't do anything about the sliding.
Of course (?), part of my problem is that I need to be applying the .fadeIn (and, presumably, the .slideUp) methods to the new item, not the whole list, but I can't seem to get my hands on it. I can get the ID of the new item, but it's not showing up in the DOM after the prepend (at least, console.log('#theNewItemsID') is returning an empty list).
Any advice out there? Thanks much!
How about
$('#theList').prepend(theNewItem).children(':first').hide().fadeIn(1000);
Demo: http://jsfiddle.net/gaby/CrjQF/
Alternative
If the variable theNewItem holds a jQuery object then you can also use the .prependTo()docs method to skip the filtering
theNewItem.prependTo('#theList').hide().fadeIn(1000);
demo: http://jsfiddle.net/gaby/CrjQF/1/
Explanation
It happend because your initial selector is the #theList so the chained commands refer to that. Using the .children()docs method combined with :firstdocs selector we reduce the selected items to the first child of #theList (the newly added)
Using Watir to regression test some changes: I want to 'click' a row in a typical old style web page menu, where the menu is a table of tables. In this particular example, the table cell contains the menu item, and the row, which only consists of the one cell, has an onclick handler. I thought I could
cell = browser.element_by_xpath("//div[#id='Menu']/descendant::td[text()='New!'")
and use the cell to get the parent row, but I get the message
c:/ruby/lib/ruby/1.8/rexml/parsers/xpathparser.rb:330:in 'Predicate': undefined
method `[]' for nil:NilClass (NoMethodError)
which makes no sense to me.
We really need more detail before before an answer can be given
Generally speaking there are a few ways to deal with tables. You can use absolute indexes to the row and column numbers if that will always be the same, but a lot of times that's not the case.
If there's known (unique) text on the row somewhere, and the column of the cell is known, then you can often work via using a regular expression to identify the row with the known (and unique) text, and then identify the needed cell via it's 'column' within the row.
browser.row(:text, /my search text/).cell(:index, 2) # 2nd cell in the row that contains text matched by the regex
try this
cell = browser.div(:id,'Menu').cell(:text,'New!')
cell.click
and, maybe you lost closing ']' ?
cell = browser.element_by_xpath("//div[#id='Menu']/descendant::td[text()='New!']")
I haven't been able to find a solution for the particular problem I'm having with this project. I need to the following: dynamically add rows to a table that contain two select boxes AND use ajax to auto-populate the select options of the 2nd select box, based on the value of the first select box... in the respective table row (that was dynamically added on the fly by some js).
Still with me?
I can easily populate, dynamically, a select drop-down using ajax/javascript based on the value of the first drop-down, in the first row. I can even populate three or more select boxes in the same row, using ajax/js functions to load each additional select. Yet, this is not my goal.
Here's what I have... My form contains a simple table with 3 columns. First is a checkbox, the second is the "State" select box and the third column is the "City" select box. I have two buttons above the table that allow me to "Add Row" and "Delete Row". Mind you, the first row (which is programmed-in), works perfectly for loading the city names of a state using ajax.
Upon clicking the Add Row button, I'm able to create the second row dynamically, which contains the checkbox, state select and city select fields. The state select is populated based on the innerHTML content of the original column, but the city select is obviously null because it is expecting ajax to fill it. Note: the names and ID names of these fields are iterative... city_id, city_id_1, city_id_2, city_id_3 and so on... so I have that uniqueness to work with.
My problem lies in the fact that when I select a state from the 2nd or 3rd (and so on) rows, only the firstcity select changes. Why? Because the js/ajax processing function says to operate only on the element with name "city_id"!! Which is the name of the city select box in the first row.
I have not (yet) found a way to dynamically pass the name of the element I need updated to the onreadystate ajax function. When I've needed to populate two or three select boxes in a row (same row), I've had to have complementary ajax functions for each drop-down - which are static, mind you... but what if I create the element dynamically?? I can't pre-program that many functions into my page... or must I?
If you have any ideas on how to accomplish this I would be soo damn appreciative!!!
Thanks!
var i=1; // put here the number of the column being added now.
var x=document.getElementById("city_id_"+i);
// populate x