I am returning a list object within a list object and wanted to have the sub list in accordion list. Do I need to do this in JS or jquery? Or is this something within sitefinity controls that will be faster and better to use?
I do something like this
https://github.com/sitefinitysteve/RandomSiteControlsMVC/blob/master/RandomSiteControlsMVC/MVC/Views/DocumentTree/Simple.cshtml
(Try here https://rscdemo.sitefinitysteve.com/components/document-treelist)
If you have bootstrap on there, just add the collapse attributes to your elements
https://getbootstrap.com/docs/4.3/components/collapse/
Related
I am using vue2-editor and i want to toggle the content view of the editor like ckeditor or mailchimp editor does
It is possible using vue2-editor or quill?
You can have a computed property that either returns the actual text or uses a library like hypertext to generate html, the return value of the html would be contingent on another computed property and returns the html you want.
I also have a simpler solution, which I used once but need to take a look at my code in a few hours which is not in front of me.
I have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.
mounted () {
EventBus.$on('change',this.formated);
},
But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.
How can I clear/disappear previous HTML outputs ?
You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.
Is what I am trying to do in this gist possible?
https://gist.run/?id=bea803b05ad8d5b5e3e0afd59bb8dbb1
In app.html, I'm trying to use a repeat.for to create a custom element called button-row
In app.js, I'm creating two button row instances which I then place into a button row array so that I can use the repeat.for to iterate over it and create the button rows on the app.html view.
In button-row.html, I have a repeat.for to create the buttons using the btns array and setting the name of the button.
In button-row.js, I have two properties. label is the label for the button row and btns is the array of all the button names I want to create.
Sorry if this is a noob question, I have only been working with web development and aurelia for about a month.
Instantiating the ButtonRow objects yourself won't work. Aurelia instantiates the instances. you'll need to use the binding system to pass in the information to the custom element. I updated your gist here: https://gist.run/?id=6ec71143f566571960b7a182d4d98ed4
Also, you should refrain from abbreviating words like "Button" let your tooling save you the keystrokes, while making your code more readable :-)
All the elements in the application which i am testing have dynanic ID's . The test always passes when i replay it without refreshing the page but as soon as i refresh the page, The Test Fails because Id's of all the elements changes randomly and selenium cannot match the recorded id's with the new ones .
I tried to use Xpath-position, It works for some objects but in case of Dropdown list and Buttons, it dosent work!
Can anyone please tell me how to find the Xpath (Meathods in JAVA or S*elence*) of an object OR How to create a new Locator Finder for Dropdown list and Buttons
I can show the properties (Inspected by Firebug) of the dropdown which is teasing me.
properties of Dropdown :
<div id="ext-gen1345" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
properties of Dropdown*Choice*:
<ul>
<li class="x-boundlist-item" role="option">Rescue</li>
</ul>
Please search before posting, I have been answering this over and over.
ExtJS pages are hard to test, especially on finding elements.
Here are some of the tips I consider useful:
Don't ever use dynamically generated IDs. like (:id, 'ext-gen1345')
Don't ever use absolute/meaningless XPath, like //*[#class='someclass']/li/ul/li[2]/ul/li[2]/table/tbody/tr/td[2]/div
Take advantage of meaningful auto-generated partial ids and class names. (So you need show more HTML in your example, as I can make suggestions.)
For example, this ExtJS grid example: (:css, '.x-grid-view .x-grid-table') would be handy. If there are multiple of grids, try index them or locate the identifiable ancestor, like (:css, '#something-meaningful .x-grid-view .x-grid-table'). In your case, (:css, '#something-meaningful .x-form-arrow-trigger')
Take advantage of button's text.
For example, this ExtJS example: you can use XPath .//li[contains(#class, 'x-boundlist-item') and text()='Rescue']. However, this method is not suitable for CSS Selector or multi-language applications.
The best way to test is to create meaningful class names in the source code. If you don't have the access to the source code, please talk to your manager, using Selenium against ExtJS application should really be a developer's job. ExtJS provides cls and tdCls for custom class names, so you can add cls:'testing-btn-foo' in your source code, and Selenium can get it by (:css, '.x-panel .testing-btn-foo').
Other answers I made on this topic:
How to find ExtJS elements with dynamic id
How to find unique selectors for elements on pages with ExtJS for use with Selenium?
How to click on elements in ExtJS using Selenium?
Using class names in Watir
how to click on checkboxes on a pop-up window which doesn't have name, label
I would suggest you build a xpath from any of the parent of your DIV. you may get messed if there is no immediate parent node has such one.
example,
//*[#id='parentof div']/div
//*[#class='grand parent of div']/div/div
i did even something like this,
//*[#class='someclass']/li/ul/li[2]/ul/li[2]/table/tbody/tr/td[2]/div
But still, its not encouraged to do so.
I want to create a dynamic Accordion, My usecase is like, On every click of a Action button I want to add 1 Accordion Item.
I am using JSF 2.0 and Richfaces 4.1.0 Final
Pls help me guys.
You would need to maintain a list of items in your managed bean. Then you could use a4j:repeat to iterate over this list in your jsf page and create a rich:accordionItem for each of element in the list. The action method for the button could add items to the list on the bean.