As it is usually on any admin page I have 3 buttons next to each other. One for detail, one for edit and one for delete, it looks like:
<a n:href="detail $candidate->id">
<button type="button" class="btn btn-success btn-sm">
<i class="glyphicon glyphicon-search" style="margin-right:0px"></i>
</button>
</a>
<a href="#">
<button type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-pencil" style="margin-right:0px"></i>
</button>
</a>
<a n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After that I decide I need to add "Confirm modal" when user press "DELETE" to avoid missclicks
<a
data-nette-confirm="modal"
data-nette-confirm-title="Confirm"
data-nette-confirm-text="Are you sure you want to delete?"
data-nette-confirm-ok-class="btn-danger"
data-nette-confirm-ok-text="Yes"
data-nette-confirm-cancel-class="btn-success"
data-nette-confirm-cancel-text="No"
class="btn btn-danger"
data-ajax="off" // or class="ajax"
n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After this I just get my DELETE button twice that BIG as others, I try to just make it xs but still so much bigger. Is there a way how can I avoid this change?
Try removing:
// or class="ajax"
It overwrites previously defined class="btn btn-danger".
Related
Dropdown element is working fine on desktop view but not on mobile view. Click and hover events are not working. What should I do, so them will work on mobile view. I am a new learner stuck with this problem, I tried to google it but couldn't find any solution.
<div class='dropdown-table'>
<button class='dropbtn dottedOpenOrders'>︙</button>
<div class='dropdown-content'>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-edit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/edit-dropdown.png" /> </span><span>Edit</span></a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-danger btn-close-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/cancel-dropdown.png" /> </span> <span>Cancel </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-play-pause-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/pause-dropdown.png" /> </span> <span>Pause/Resume </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-warning btn-exit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/exit-dropdown.png" /> </span> <span>Force exit </span> </a>
</div>
</div>
When using AngularJS ng-repeat with track by in my web application, when the view is updated the old view is still displayed together with the new view during 1 second or so.
The app displays this panel of alarms (it is a home assistant app). Alarms can be enabled, disabled or removed using the icon buttons:
When the user click the icon button in the middle, the view is updated to this:
But when the view is updated, during half a second or so, it is displayed the old view and the new view together at the same time:
Is this a expected behaviout using ng-repeat with track by?. The code in my html view is:
...
<tr ng-repeat= "alarm in GetAlarmsController.alarms track by alarm.getId()" >
<td class="text-right">
<span ng-switch="alarm.isEnabled()">
<button ng-switch-when="false" type="button" rel="tooltip" disabled class="btn btn-danger btn-icon btn-sm" >
<i class="fa fa-power-off"></i>
</button>
<button ng-switch-when="true" type="button" rel="tooltip" disabled class="btn btn-success btn-icon btn-sm" >
<i class="fa fa-power-off"></i>
</button>
</span>
</td>
<td class="text-right" ng-switch="alarm.isEnabled()">
<button ng-switch-when="false" type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm" ng-click="GetAlarmsController.enableAlarm(true, alarm.getId())">
<i class="fa fa-toggle-off"></i>
</button>
<button ng-switch-when="true" type="button" rel="tooltip" class="btn btn-success btn-icon btn-sm" ng-click="GetAlarmsController.enableAlarm(false, alarm.getId())">
<i class="fa fa-toggle-on"></i>
</button>
<button type="button" rel="tooltip" class="btn btn-danger btn-icon btn-sm" ng-click="GetAlarmsController.deleteAlarm(alarm.getId())">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
...
And, in the JS controller:
...
self.getAlarms = function(){
AlarmAPIService.getAlarms()
.then(function(alarms) {
self.alarms = alarms;
},function() {
self.alarms = [];
})
}
...
const ALARMS_REFRESH_TIME_MS = 5000 ;
var refreshAlarmsInterval = $interval(self.getAlarms, ALARMS_REFRESH_TIME_MS);
...
...
self.enableAlarm = function(enable, alarmId){
enableString = (enable ? 'enabled' : 'disabled') ;
AlarmAPIService.enableAlarm(enable, alarmId)
.then(function() {
SweetAlertService.showSuccessAlert('Alarm ' + enableString + ' with success');
},function() {
SweetAlertService.showErrorAlert('Alarm could not be ' + enableString);
})
}
...
Though self.alarm is assigned to a new array of alarms objects in controller, I have checked that the id of this alarms objects remains the same (only changed its state, specifically the enabled state for the alarm enabled)
I have a btn-group with some buttons, each of which will lead to a different page. The btn-group will be visible on every page.
Here is the html for the btn-group,
<div class="btn-group-lg text-center" role="group" aria-label="Basic example">
<a class="btn btn-outline-primary" href="" role="button">Home</a>
<a class="btn btn-outline-primary" href="view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="about/" role="button">About Us</a>
</div>
But whenever I press a button, it modifies the URL in the address bar.
Example:- From http://127.0.0.1:8000/shotokankaratebd/, if I press the Schedule button, it changes the URL to http://127.0.0.1:8000/shotokankaratebd/view_schedule.
After that, if I press the schedule button again, it changes it to http://127.0.0.1:8000/shotokankaratebd/view_schedule/view_schedule which is an invalid URL and I get an error.
How can I write it so that whenever a button is pressed, only the part after http://127.0.0.1:8000/shotokankaratebd/ is affected?
EDITED to include the new hrefs:
<a class="btn btn-outline-primary" href="../shotokankaratebd/" role="button">Home</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/about/" role="button">About Us</a>
You should not hard code your urls. Use django's url template tag to fetch urls for your views.
If your urls are leading to another view or another app's view, you should use django feature of using dynamic urls.
For example if you have a view view_schedule, you should give it a name in urls.py like
urlpatterns = [
...
path('shotokankaratebd/view_schedule/', views.name_of_your_view, name=view_schedule),
...
]
and whenever and whichever template if you want to access this view you can just type
template.html
<button>Schedule</button>
instead of
class="btn btn-outline-primary" href="/shotokankaratebd/view_schedule/" role="button">Schedule</a>
Hard Coding it like that.
Solved.
All I needed to do was start my hrefs with / which would reset the url back to http://127.0.0.1:8000/ after every button click.
HTML buttons are as follows:
<div class="btn-group-lg text-center" role="group" aria-label="Basic example">
<a class="btn btn-outline-primary" href="/shotokankaratebd/" role="button">Home</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/about/" role="button">About Us</a>
</div>
<button id="KullaniciSec" type="button" runat="server" onserverclick="KullaniciSec_OnServerClick" onclick='<%# string.Format("return SecDegerler(\"{0}\");",Eval("id")) %>' class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç </button>
I will call JavaScript code from this code but I have error message and i will open console
<button onclick="return SecDegerler("23"); __doPostBack('ctl00$ContentPlaceHolder1$griduser$cell0_9$TC$KullaniciSec','')" id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">
<i class="fa fa-folder-open-o fa-2x"></i>Seç</button>
how to will be fix? And How to remove __doPostBack?
If i understood everything like you meant it:
<button onclick='return SecDegerler("23");' id="ContentPlaceHolder1_griduser_cell0_9_KullaniciSec_0" type="button" class="btn btn-default btn-xs">
I have an ng-repeat which loops over some items, and am using an editmode parameter to switch between a label and inputfield to let the user edit the value in-line.
Now I would like the functionality to be like this:
when the user presses the Add button, a new empty (or default) item is created, that has the editmode set to true (so that the input textbox shows with the save button, rather than the label with the edit button).
I have googled a lot about this but could not find a clear answer so far. :(
Code is as follows:
<div ng-repeat="todo in todos">
<span data-ng-hide="editMode">
{{ todo.name }}
</span>
<input type="text" placeholder="{{ todo.name }}" data-ng-show="editMode" data-ng-model="name" data-ng-required />
<button type="submit" class="btn btn-default btn-xs" data-ng-hide="editMode" ng-click="editMode = true">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="submit" class="btn btn-default btn-xs" data-ng-show="editMode" ng-click="editMode = false; editTodo(todo._id)">
<span class="glyphicon glyphicon-save"></span>
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="deleteTodo(todo._id)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
Thanks in advance
You could keep it simple by adding a separate input element outside of your ng-repeat.
Plunker: http://plnkr.co/edit/YDkzgtOSNpqDehnPkpZe?p=preview
Add another div element below your ng-repeat as below:
<div>
<button ng-show="!addNew" class="btn btn-sm btn-primary" ng-click="addNew=true">Add New</button>
<br>
<div ng-show="addNew">
<input type="text" ng-model="newTodo.name" ng-required />
<button type="submit" class="btn btn-default btn-xs" ng-click="addNewTodo()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="resetNewTodo()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>
Don't use editMode as scope variable. Use it as todo's object field (todo.editMode). Set it to true for new todo object.
The ngRepeat offers you $index - current position, $first, $last - so you can check against those to determine when you're on the first or when you reached the last element.