I want to prevent a single field (of two fields) from loading the date/time picker programmatically.
I am using flatpickr as a date/time selector https://flatpickr.js.org/
I have a form with two fields and two start/top buttons
<p>Start date</p>
<input type="text" id="start_date" name="start_date">
<p>End Date</p>
<input type="text" id="end_date" name="end_date">
<button type="button" class="btn btn-default btn-sm" id="start_tracking">Start Tracking</button>
<button type="button" class="btn btn-default btn-sm" id="stop_tracking">Stop Tracking</button>
When the start button is clicked, I populate the start_date field with the current time. Then I want to prevent the start date from being changed.
The following code disables the fields, but the date picker is still rendered for start date and the field value can be changed. I need a way to disable the flatpickr plugin, but only for the start_date field
$(document).on('click', '#start_tracking', function () {
var dateTime = currentDate();
$("#start_date").val(dateTime);
// This does not disable the datepickr functionality !!
$('#start_date').prop('readonly', true);
})
Related
I'd like to change the Bootstrap style of the second of my input buttons, which is specified in a layout object:
...,
Div( FormActions(
Submit( 'submit', 'Update', css_class='btn'),
Submit( 'next_button', 'Next>>', css_class='btn btn-warning'),
but the second Submit is generating this HTML
<input type="submit"
name="next_button"
value="Next>>"
class="btn btn-primary btn btn-warning"
id="submit-id-next_button"
/>
and btn-warning is not acted on because (I think) btn-primary earlier in the class list takes precedence. How can I get my css_classes to come first?
[edit] have found a work-around: replace that Submit with
HTML('''<button class="btn btn-warning" type="submit" name="next_button" value=0 >
Next</button> '''),
Don't like it much.
There ought to be a better way of doing this, but I can't find it.
There are a number of elements with the same selector on the page. Only the value property differs. Controls are created dynamically, so I can't pin them down any more precisely.
I am searching for an element with a specific value, using Cypress . HTML looks like this:
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
When I find it I want to click it & jump out of the loop.
This is what I have:
const buttonButton = '[data-cy-component=button-button]';
cy.get(buttonButton).each(($el, index, $list) => {
cy.log(`index: ` + index);
if (index === 5) {
cy.wrap($el)
.should('have.value', 'Save')
// Click Save button.
.click();
}
});
This method works, but seems vulnerable. If my Save button is no longer the 5th (or 6th) element, the test will fail. Is there a way I can test it with an IF rather than a SHOULD?
I might not understand what you are doing, please correct me in comments if I have this wrong. What I believe you are trying to do is find a element by it's value. I wrote this and it worked. Please correct me If what you are trying to do is different..
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"]').should('exist');
cy.get('[value="Save"]').click();
cy.get('input[value="Save"]').should('exist');
cy.get('input[value="Save"]').click();
This also worked
cy.get('[data-cy-component=button-button][value=Save]').should('exist');
cy.get('[data-cy-component=button-button][value=Save]').click();
Per your comment below you said there were 2 on the screen
I created this HTML to test it. Notice one is hidden. I WOULD NEED TO KNOW WHAT IS MAKING YOURS HIDDEN or not visible. Also are they in different divs that perhaps have unique ids?
<input type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
<input style="visibility:hidden" type="button" value="Save" data-cy-component="button-button" class="btn form-control btn-info">
cy.get('[value="Save"][style!="visibility:hidden"]').should('length', 1);
cy.get('[value="Save"][style!="visibility:hidden"]').click();
i have a little error with my ajax success method DOM elements creation. on the success method i have created an html table row and inside that row i have created a form but this form not work ass expected.
this is a code on ajax success
success: function(data) {
html='';
for (i = 0; i < data['qoutations'].length; i++) {
html+='<tr><form method="post" action="index.php?route=catalog/product/getForm&user_token={{ user_token }}">';
html+='<td class="text-center"><input type="checkbox" name="selected[]" value="'+data['qoutations'][i]['qoutation_id']+'" /></td>';
html+='<td class="text-left">'+data['qoutations'][i]['customer_id'];
html+='<input type="hidden" id="customer_id" value="'+data['qoutations'][i]['qoutation_id']+'"/></td>';
html+='<td class="text-left">'+data['qoutations'][i]['description']+'</td>';
html+='<td class="text-left"> <div class="form-group">';
html+='<textarea class="form-control" rows="2" id="qouted"></textarea>';
html+='</div></td>';
html+='<td class="text-left">';
var customer_id1=data['qoutations'][i]['customer_id'];
var qoutation_id1=data['qoutations'][i]['qoutation_id'];
html+='<input class="btn btn-info" type="submit" id="createproduct" value="Create Product" onClick="createProduct(\'' + customer_id1 + '\',\''+qoutation_id1+'\')"/></td>';
html+='<td class="text-left">'+data['qoutations'][i]['qouted']+'</td>';
html+='<td class="text-left">'+data['qoutations'][i]['status']+'</td>';
html+='<td class="text-left">'+data['qoutations'][i]['date'];
html+='<input type="hidden" id="date" value="'+data['qoutations'][i]['date']+'"/></td>';
html+='<td class="text-left">';
html+='<input class="btn btn-danger" type="button" id="cancel" value="cancel"/></td>';
html+='</tr>';
}
$('#detail').html(html);
}
and this picture elaborate my error. as this picture shows form element open and close immediately.
DOM screenshot
please help, thanks in advance.
The problem with your code is that you are actually not following the standard to create html in your ajax callback.
You can't have a form inside a table row. Only way to do this is to divide your table row into sub form. Please take a look at this question.
HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?
I have a button in a directive that I only want to appear on the last object in the array. The ng-show evaluates an expression on the controller.
<button class="btn btn-danger button-xs tsid-btn-sch-pad
glyphicon glyphicon-remove"
type="submit" ng-click=""
ng-show="{{$index == sc.schedule.length - 1}}"></button>
The expression is being correctly evaluated in the browser, but the button is displaying anyway.
So the difference between the highlighted row and the one above where the delete button is not displaying is that ng-hide was added to the class attribute of the row above and it has not been added to the row that is displaying the delete button incorrectly. But I don't know why that update isn't taking place since the ng-show expression is being updated.
Try using the $last variable
<button class="btn btn-danger button-xs tsid-btn-sch-pad
glyphicon glyphicon-remove"
type="submit" ng-click=""
ng-show="$last"></button>
http://plnkr.co/edit/Sf6Xw7YjPlfUuqyHIWng?p=preview
What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums