I'm having troubles creating a selector for the button with the data-qa attribute. See html:
<div class="stepsInfo_children__4knGx"><button type="button" class="steps_stepsButton__3Ykpu" data-qa="next-design">
I tried this implementation, with no success (from the official documentation):
this.nextDesign = Selector("div").withAttribute("data-qa","next-design");
Alex is right, you missed it's actually a button.
Or you can avoid withAttribute() and create the following selector:
this.nextDesign = Selector('[data-qa="next-design"]');
it's a bit shorter, which might make it a bit more readable.
You try to create a selector for the button, but you create it for a div element. It looks like you meant this:
this.nextDesign = Selector("button").withAttribute("data-qa","next-design");
Related
The title was kinda long-winded but the question itself is pretty simple.
So I'm looping over some strings and want to make a button for each. On click, the button will call a Vue method. I want to bind the string into the HTML element somehow - it will be more clear with the code:
<li v-for="(name, idx) in $store.state.lobby" :key="idx">
<button data-name="{{name}}" v-on:click='send_game_request'> request game </button>
</li>
so, as you can see, this is very simple. When the send_game_request method gets run, it can read the name off the data-name attribute and do what it needs to with that information.
But, this is invalid syntax, because {{name}} raises an error. I'm really hoping I don't have to wrap each button into it's own sub-component, because that is just extra boilerplate that's not necessary.
I've seen other examples that use v-bind but I don't really have any need to store this information in the component's internal state. I literally just need to know what button was pressed.
You can pass the name as an argument with an inline handler:
<button #click="send_game_request($event, name)">
where $event is the original event data.
In addition to what Tony mentions in his answer,
<li v-for="(name, idx) in $store.state.lobby" :key="idx">
<button :data-name="name" v-on:click='send_game_request'> request game </button>
</li>
You could then extract value of name with datasets like so:
function send_game_request(event){
const name = event.target.dataset.name;
}
NOTE: In this instance you don't need to explicitly pass the $event into your v-on:click function binding, it will already be made available by Vue. So, you can simply invoke your method with the event argument.
I use cell rendering in my ag-grid for editing a date field.Inside that cell datePicker is added as shown
view of my cell
But when i am clicking the date icon date picker view is like it is fully mounded inside the cell and not visible properly.the below picture shows my issue
#Component({
selector: 'app-gender-renderer',
template: ` `
<input type="text" id="recording_date_to" [(ngModel)]="changedRecDateTo" (change)="edit()"
ngbDatepicker #d="ngbDatepicker" style="z-index: 0;"
class="form-control input-sm" />
<button class="glyphicon glyphicon-calendar" (click)="d.toggle()" type="button"></button>
})
Tried z index , it is also not working..
Can anyone please help me to solve this ?
Thank You in advance
As mentioned before, to be able to use DatePicker in cell you need to create cellEditor instead of cellRenderer, however, cellEditor just like an extension for cellRenderer.
So for angular, you need to use ICellEditorAngularComp interface and take care of
agInit(params: any): void // for init value which would be used in DatePicker
and
getValue(): any // for passing value back to the grid (and update the cell)
don't forget to return true in isPopup(): boolean method - for correct visibility.
Now, about DatePicker itself, I'm using #danielmoncada/angular-datetime-picker
(but for sure you can use anything)
And there are a few things that you need to take care :
what type of value is the datepicker library using
what type of value you will use for view and for database
and it could be handled with getValue and valueFormatter methods
That's all for theory, check my demo below and feel free to ask anything related, will try to help.
DEMO
Two things...
First, if you are really using a date picker in a cell renderer, don't.
That should be done in a cell editor, not a renderer.
Second, if you want to have an editor that is not constrained by the cell,
you have to specify that the editor is a 'popup' editor by implementing isPopup() in your editor, and returning true.
The documentation for this is at https://www.ag-grid.com/javascript-grid-cell-editing/#popup
I'm trying to use aurelia dragula. All the examples I can find use the custom element
<dragula-and-drop drop-fn.call="itemDropped(item, target, source, sibling)"></dragula-and-drop>
with then having divs that act as sources/targets like this
<div class="drag-source drop-target drop-style" data-list="things">
<compose repeat.for="thing of things" view-model.bind="thing" data-index.bind="$index"></compose>
</div>
That is working great, and I can see I can add other function bindings for drag end, etc. However the documentation shows a bunch of events that Dragula can listen for, but it looks like I'd have to use the API, instead of the custom element, to make use of those. I can't seem to figure out how to make use of the Dragula object along with divs like above in the view. For instance...
import { Dragula } from 'aurelia-dragula';
...
let dragula = new Dragula();
dragula.on('drag', (el, source) => {
console.log('started dragging...');
});
doesn't pick up on the drag events from the div above.
I'm pretty new to aurelia, so maybe I'm missing something framework related?
How can I go about using the Dragula API approach instead of the custom element?
Thanks
In safari,
i had a simple edtable div with a input button, on deletion of the element (backspace or delete), caret moves to center of edtiable div with some inline styled p tag with text-align:center and inline style "color"
<div class="editable" contenteditable="true">
<input type="button" value="inputBtn" />
</div>
http://jsfiddle.net/VqCvt/
its a strange behavior observed only in safari.
Over a year after this post, this issue is still a problem. This issue is directly tied to the input tag. Once an input tag has been in a contenteditable element, Safari will attempt to make the style of the text similar to the input (I confirmed this by observing that the resulting style was different for type="text" vs type="button"). It's a very strange bug. I have found a workaround that works, but it's pretty absurd. My fix is basically to test when my main input no longer has content, and then removing the element, and re-adding it
<div id="content-wrapper">
<div contenteditable="true" id="content" role="textbox"></div>
</div>
and in my "keyup" listener, I put the following code
// Grab main editable content div
var element = document.getElementById("content");
// Check empty state conditions. These work for me, but you may have your own conditions.
if (element.getElementsByTagName("input").length == 0 &&
element.innerText.trim().length == 0) {
// Grab parent container
var elementContainer = document.getElementById("content-wrapper");
// Add a copy of your element to the same specifications. If you have custom style attributes that you set through javascript, don't forget to copy them over
elementContainer.innerHTML = '<div contenteditable="true" id="content" role="textbox"></div>';
// Re-focus the element so the user doesn't have to click again to keep typing
element = document.getElementById("content");
element.focus();
}
What this code does works for my case because input is the only elements which are allowed in my code other than text nodes and <br>, so I first check to make sure there are no input elements, and then make sure the innerText is empty (this indicates no content in my case, you may have to customize your conditions for the "empty" state). Once the empty state is confirmed, I replace the old div with a new one to the same specification, and the user never notices. A very strange issue with a hacky workaround, but I think contenteditables.
You could probably also strip out the HTML that Safari is generating, but for my case this solution is much simpler. I hope this helps someone in the future.
I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.