For the <ngx-datatable-column> html template, I want to add html attribute tabindex to support 508 but it is not working for me. Also the pagination can not hit enter or keyboard event to go to next page.
<ngx-datatable-column name="Name" tabindex="0">
<ng-template></ng-template>
</ngx-datatable-column>`
I think this does not work since there is no -element in the rendered DOM.
You could use templates instead to wrap each cell into something with a tabindex attribute.
<ngx-datatable-column name="Name">
<ng-template let-column="column" ngx-datatable-header-template>
<span tabindex="0">{{column.name}}</span>
</ng-template>
<ng-template let-value="value" ngx-datatable-cell-template>
<span tabindex="0">{{value}}</span>
</ng-template>
</ngx-datatable-column>
See https://stackblitz.com/edit/angular-ngx-datatable-tab for an example.
Related
I'd like to post the contents of a contenteditable field/div whenever it changes. hx-trigger="change" didn't trigger, but using hx-trigger="blur" is okay. How do I submit the value of the contenteditable div in the request?
<div id='parent-div'>
<div contenteditable='true'
hx-post="/update_db"
hx-trigger="blur"
hx-target="#parent-div"
hx-swap="outerHTML">
Hello, I am a content editable field
</div>
</div>
I don't believe htmx supports submitting contenteditable values out of the box. You'd probably need to mirror the content text within contenteditable to a a hidden input and move the hx attributes to the parent div.
You could use something like https://alpinejs.dev/ or htmx's companion https://hyperscript.org/
With hyperscript you could do it with something like this:
<div id='parent-div'
hx-post="/update_db"
hx-trigger="blur"
hx-target="#parent-div"
hx-swap="outerHTML">
<div id="editordiv" contenteditable='true'>
Hello, I am a content editable field
</div>
<input type="hidden" name="editor" _="on keyup from #editordiv put its innerHTML into me" />
</div>
I found an old reference from the htmx Discord that offers another way of doing this:
<form hx-post="/whatever"
hx-vals="javascript: editable:htmx.find('#myEditable').innerHTML"> ...
I tried to add an #click to a font awesome icon. However, whether I add an #click event to span or i tag, it doesn't work at all. I suspect the event is taken by the input field. How can I make the magnifier icon clickable?
<div class="control has-icons-right">
<input v-model="keyword" #keyup.enter="findName" class="input is-large" type="text" placeholder="Input 1 word, hit Enter"/>
<!-- or 2 words separated by space -->
<span class="icon is-right" #click="findName">
<i class="fa fa-search"></i>
</span>
</div>
Source: 3sName.com
It is because, you are using bulma class .icon which having the following css.
pointer-events: none;
Try to override it with
pointer-events: all;
pointer-events css will prevent your element from emitting a click event.
:)
use a button / anchor 'a' instead span to wrap the fa-icon, along with #click method? Span isn't good practice for click event as well.
Have you tried #click.prevent="findName" modifier?
I tried to continue with the example on the vuejs website. I tried to add images and a transition state when I sort data.
However it doesn't work. I have tried to add the following line to make it works but it doesn't:
<tbody name="table-row" is="transition-group">
Do you have some ideas for me?
https://codepen.io/wooza/pen/wezqXP
https://codepen.io/anon/pen/gRmxwJ
https://v2.vuejs.org/v2/guide/transitions.html#List-Transitions
Unlike <transition>, it renders an actual element: a <span> by
default. You can change the element that’s rendered with the tag
attribute.
<transition-group tag="tbody" name="table-row">
<tr v-for="entry in filteredData" :key="entry.name">
//...
</tr>
</transition-group>
I can't make ValidationTextBox to lose focus and I can't see the method blur() either.
How can I make it lose focus?
The blur() method works on dom nodes. A widget is often backed by an html template. If you look at dijit/form/templates/ValidationTextBox.html, you will see that there is a dom node which has a dojoAttachPoint containing "focusNode". Here is the code of the template on dojo 1.7, for reference :
<div class="dijit dijitReset dijitInlineTable dijitLeft"
id="widget_${id}" role="presentation"
><div class='dijitReset dijitValidationContainer'
><input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" value="Χ " type="text" tabIndex="-1" readonly="readonly" role="presentation"
/></div
><div class="dijitReset dijitInputField dijitInputContainer"
><input class="dijitReset dijitInputInner" dojoAttachPoint='textbox,focusNode' autocomplete="off"
${!nameAttrSetting} type='${type}'
/></div
You can achieve your blur trigger through a direct reference of the node referenced in the template as "focusNode" by doing something like :
dijit.byId("myValidationTextBoxId").focusNode.blur();
You have to override the functionality of the class ValidationtextBox.js. By default its is always invoked on the onkeypress event.
I am using selenium for testing my application.
In my application there are 5 buttons, each have a different image associated with it.
I want to click on button which have a specific image associated.
Currently i am using a while loop to get the node of image and then replacing this node into xpath of button to select it.
is there any way either with xpath or css to do this directly.
Providing more information-this is like submit button is there and then below this image is there. submit button and images are sibling element and need to click submit button when the next element is specific image
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking2" src="someimages"/>
</div>
<div class="select">
<span class="sysTxtBtn submit xxs">
<span class="btnTagDummy">
</span>
<div class="specialRateMarking">
<img width="79" height="11" alt="Marking1" src="someimages"/>
</div>
Could you include a snippet of your HTML? Below is an example of an image in a form and a few ways of locating it using Selenium, but these may not be relevant depending on your implementation:
<input id="submitForm" name="imgbtn" type="image" src="images/submit.png" />
id=submitForm
name=imgbtn
//input[#src='images/submit.png']
//input[contains(#src, 'submit.png')]
css=input[src='images/submit.png']
UPDATE:
Given the HTML:
<div class="select">
<span class="submit">
<div class="marking1"></div>
<div class="select">
<span class="submit">
<div class="marking2"></div>
You can locate the 'submit' span parent of the 'marking2' div using the following XPaths:
//div[#class='marking2']/..
//div[#class='marking2']/parent::*
//div[#class='marking2']/parent::span
UPDATE 2:
Based on the HTML now included in the question, you can locate the span with the class of submit related to the image many ways, a few examples follow:
//div[//img[#alt='Marking2']/span[contains(#class, 'select')]
//img[#alt='Marking2']/../../span
//div[img[#alt='Marking2']]/preceding-sibling::span
I hope this gives you some ideas. I'd certainly recommend XPath over CSS for locating these elements as it's much better at these sorts of relationships.