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
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.
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);
})
I am new to Thymeleaf. Recently I stumbled in the following situation. Here is a piece of my Thymeleaf html page:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ?') )) return false" >
Delete
</a>
This code works fine as intended. However I want to add employee name as part of the confirmation. Here is the code:
<!-- an delete button link -->
<a th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:onclick="if(!(confirm('Are you sure you want to delete this employee ' + '\'+${tempEmployee.firstName}+\'' +'?' ) )) return false" >
Delete
</a>
Unfortunately the result is:
Are you sure you want to delete this employee
'+${tempEmployee.firstName}+'.
Looks like Thymeleaf does not recognize ${tempEmployee.firstName}. It has no problem with it in th:href tag but does not like it in th:onclick.
I would appreciate if somebody can turn me into the right direction.
Not sure exactly what the problem is (though it may be related to onclick vs th:onclick. Regardless, I think a format more like this will work (with some added benefits like no JavaScript injection).
<!-- an delete button link -->
<a
th:href="#{/employees/delete(employeeId=${tempEmployee.emplId},firstName=${tempEmployee.firstName},lastName=${tempEmployee.lastName})}"
class="btn btn-danger btn-sm py-1 "
th:data-confirm-delete="|Are you sure you want to delete this employee ${tempEmployee.firstName}?|"
onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false"
>
Delete
</a>
(Notice I'm using onlick and not th:onclick.
Instead of this line in above code ---onclick="if (!confirm(this.getAttribute('data-confirm-delete'))) return false">
You can write as:
onclick="return confirm(this.getAttribute('data-confirm-delete'))"
I am using laravel queue to upload a csv file. And, I have used a column completed on the database table.
So, by default the value of this column will be 0 and as soon as the job is completed this column's value will be updated to 1 for that particular row.
Similarly, during uploading phase, this value will be 2 and if some error occured during upload or if some row can't be imported then the value will be 3
On front end, I have a simple button like:
#if($r->completed == 1)
<a class="btn btn-xs btn-primary d-inline-block" href="{{url('/?property='.$r->id)}}">Property</a>
#elseif($r->completed == 2)
<a class="btn btn-xs btn-warning d-inline-block" href="#">Pending</a>
#elseif($r->completed == 3)
<a class="btn btn-xs btn-secondary d-inline-block" href="{{route('property.create',$r->id)}}">Par. Completed</a>
#else
<a class="btn btn-xs btn-secondary d-inline-block" href="{{route('property.create',$r->id)}}">Property</a>
#endif
Yeah, its working totally fine. Here, we need to refresh to check the recent status. However, my requirement is to update the status without refreshing the page.
After some searching, I find that sending ajax request on certain interval might be an option. However, it don't seems ideal, so I don't want to go with that.
Is there any better option available? Currently, I am using jquery/javascript (not any js framework like vue,react).
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();