I am trying to create something like toggle so when user click on 1sideBarMenui want to displayshowMenu` and if click again it should hide it , i think below code should do it , where i am making mistake ?
main.html
<button type="button" ng-click="showSideBarMenu()" tooltip-placement="top" tooltip-popup-delay="300" uib-tooltip="Browse more" class="btn btn-success btn-circle pull-right"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
<div class="sideBarMenu" ng-show="showMenu">
<ul>
<li>
<button type="button" title="start recording" class="btn btn-danger btn-xlarge" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record"></span></button>
</li>
<li>
<button type="button" class="btn btn-primary btn-xlarge" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop" title="stop recording"></span></button>
</li>
<li>
<!--<button type="button" class="btn btn-success btn-md" ng-click="searchLogs()"><span class="glyphicon glyphicon-search" title="search logs in bowser"></span></button>-->
<button type="button" class="btn btn-info btn-xlarge" ng-click="serverFiles()"><span class="glyphicon glyphicon-folder-open" title="download server logged files"></span></button>
</li>
</ul>
</div>
ctrl.js
$scope.showMenu = false;
$scope.showSideBarMenu = function(){
$scope.showMenu = true;
};
$scope.toggleSideBarMenu = function() { // function name changed to be more semantic
$scope.showMenu = !$scope.showMenu;
};
Note that you don't need to initialize scope vars to false in most cases. Angular treats undefined values and false values the same way in the view.
Related
I want to change form method with button.onclick function. My code is working right now but it looks dirty and if I have too many buttons they will turn unreadable code block. Do we have any option to set it via button.onclick? Something like that ((onclick="form.method='patch'"))
I found something about it but they didn't work. I need to change both method and route in <button ((this area))> SUBMIT </button> If there is any way to do it I'm waiting your answers.
index.blade.php
#if($backup->trashed())
{{ Form::open(['route' => ['backup.patch', $backup->id], 'method'=>'patch', 'role'=>'form']) }}
#endif
#if(!$backup->trashed())
{{ Form::open(['route' => ['backup.delete', $backup->id], 'method'=>'delete', 'role'=>'form']) }}
#endif
<div class="btn-group btn-group-xs" role="group" aria-label="Config Tools">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Edit" onclick="window.location='{{ url("backup/{$backup->id}") }}'">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
#if($backup->trashed())
<button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Activate">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
#endif
#if(!$backup->trashed())
<button type="submit" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Delete">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
#endif
</div>
{{ Form::close() }}
web.php
Route::get('/backup/{id}', 'Admin\BackupController#show')->name("backup.show");
Route::post('/backup/{id}', 'Admin\BackupController#update')->name("backup.update");
Route::delete('/backup/{id}', 'Admin\BackupController#delete')->name("backup.delete");
Route::patch('/backup/{id}', 'Admin\BackupController#patch')->name("backup.patch");
My search results:
https://css-tricks.com/separate-form-submit-buttons-go-different-urls/
https://www.w3schools.com/tags/att_button_formmethod.asp
Thanks for your answers from now on!
Edit: You can ask "Why you didn't write form for each button?"
I'm answering, If I write form inside <div class="btn-group btn-group-xs" role="group"> buttons appearing separately.
Like this: http://jsfiddle.net/kmgd4z17/1/
But I want them as: http://jsfiddle.net/tg21j0f7/
index.blade.php
<div class="btn-group btn-group-xs" role="group" aria-label="Config Tools">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Edit" onclick="window.location='{{ url("backup/{$backup->id}") }}'">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
</button>
#if($backup->trashed())
<button type="button" class="btn btn-default" onclick="javascript : submitForm('PATCH', {{$backup->id}})" data-toggle="tooltip" data-placement="bottom" title="Activate">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
#endif
#if(!$backup->trashed())
<button type="button" class="btn btn-default" onclick="javascript : submitForm('DELETE', {{$backup->id}})" data-toggle="tooltip" data-placement="bottom" title="De-Activate">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</button>
#endif
</div>
script
<script>
function submitForm($method, $id){
var form = document.createElement("form");
form.setAttribute('method', "POST");
form.setAttribute('action',"/backup/" + $id);
var i = document.createElement("input");
i.setAttribute('type',"hidden");
i.setAttribute('name',"_method");
i.setAttribute('value', $method);
form.appendChild(i);
var j = document.createElement("input");
j.setAttribute('type',"hidden");
j.setAttribute('name',"_token");
j.setAttribute('value', "{{Session::token()}}" );
j.setAttribute('id',"csrf-token");
form.appendChild(j);
document.body.appendChild(form);
form.submit();
}
</script>
I solved that issue with this method. I'm creating a form when pressed to a button. Maybe someone can solve with more effective way but my solution is this. :)
I have problem that Button can't click() on javascript if it has multiple button in one div/list. In this case, "ADD" button doing nothing if i click it. But "Delete" button can. If i remove Delete function on js, add button work properly. What's wrong?
I have HTML like this
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And JS function :
var id ="";
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
id = $(this).data('id');
// doing ajax thing
});
This problem happens because the second $('.coll-list').off('click') remove ALL on('click') event you have set before (i.e. on click on .btn-remove-coll, in this case).
You can try to change your off('click').on('click') order in your page and you'll see that will change the working button (or Delete or Add).
Here only remove button works
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
And here add button only
$('.coll-list').off('click').on('click','.btn-remove-coll', function(e) {
alert("remove")
});
$('.coll-list').off('click').on('click','.btn-add-coll', function(e) {
alert("add")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
2 possible solution to make both buttons work are:
Simply remove off('click')
Combine your 2 clicks in 1 on('click')
$('.coll-list').off('click').on('click','.btn-add-coll, .btn-remove-coll', function(e) {
if($(this).hasClass("btn-add-coll")){
alert("add")
} else {
alert("remove")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="coll-list">
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
<li>
<button class="btn btn-primary btn-sm btn-remove-coll" data-id='+data.id+'> Delete </button>
<button class="btn btn-primary btn-sm btn-add-coll" data-id='+data.id+'> Add </button>
</li>
</ul>
Try changing .coll-list from you JavaScript code with .coll_list because that is the class of you ul HTML tag.
Edit
It seems that it is impossible for some reason to have click functions for two different divs in the same <li> tag. I'd sugges you to change the HTML markup a bit, and use the <div> tag instead of <ul>. Fiddle: jsfiddle.net/xpvt214o/592987
I have a problem. Call my button "off" or "on" that I needed. If active status in json is 1 then button off is showing in html, so instead. But I have tried with
ng-bind-html
Still not working, any solution for me ? Thanks
This is my code :
Controller
if(item.active === 1){
html_button = '<button type="button" class="btn btn-success"><i class="fa fa-toggle-on"></i> On</button>';
}else{
console.log(1);
html_button = '<button type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>';
}
$scope.getButtonOnOff = function(html_button) {
return $sce.trustAsHtml(html_button);
};
Html
<span ng-if="data.active === 1">
<button ng-show="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
<button ng-hide="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
</span>
<span ng-if="data.active === 0">
<button ng-show="data.active" type="button" class="btn btn-success" ng-click="FiturThread(data)"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="data.active" type="button" class="btn btn-default" ng-click="FiturThread(data)"><i class="fa fa-toggle-off"></i> Off</button>
</span>
Lets try angular way
<td width="20%">
<button type="button" class="btn btn-primary" ng-click="getData(data)"><i class="fa fa-edit"></i> Edit</button>
<button ng-show="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-on"></i> On</button>
<button ng-hide="item.active" type="button" class="btn btn-default"><i class="fa fa-toggle-off"></i> Off</button>
</td>
In this plunk I have an Angular UI Datepicker that uses a template. I need to change the colors of the "Today", "Clear" and "Close" buttons but changing them in popup.html doesn't work. It should show gray, orange and blue buttons.
I changed from
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
to
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
Note that I changed the button class names to change the color, but when I inspect in the browser, the datepicker is still using the old classes. How to fix this?
To set a custom popup template use datepicker-popup-template-url attribute, for example:
<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" />
Demo
I'm building a multiple-choice question web app. There are 5 options for every question. Before a button is clicked it has a default button class: btn btn-default. At the moment I have it so that when a choice is made, all the buttons are deactivated and a div appears where an explanation of the answer is meant to populate.
When a correct answer is selected I want to change the button class to btn btn-success, but if an incorrect answer is selected I want to change the incorrect selection to btn btn-danger and the correct answer to btn btn-warning.
Here's my controller:
.controller('ChoiceCtrl',['$scope', '$http', function($scope, $http){
$scope.choiceb = true;
$scope.isDisabled = false;
$scope.disableClick = function() {
$scope.isDisabled = true;
return false;
}
}])
And here's my HTML:
<div ng-controller="ChoiceCtrl">
<div id="choices">
<h3>Choose your answer:</h3>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#01</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#02</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#03</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#04</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#05</button>
</div>
<div id="answer" class="choiceb" ng-if="myApp.choiceb"></div>
<hr>
<div id="rating">
<h4>Rate this question:</h4>
<h4 id="thumbs">
<a href="#">
<i class="glyphicon glyphicon-thumbs-up" id="voteup"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-thumbs-down" id="votedown"></i>
</a>
</h4>
</div>
<button class="btn btn-primary pull-right choiceb" id="next-question" ng-if="myApp.choiceb">Next Question</button>
</div>
I've been able to use ng-class to change the correct answer to green, but haven't been able to get the incorrect answer to turn red while highlighting the correct answer in orange. Any help would be great. Thank you!