angular bootstrap btn-radio does not change value - javascript

I have the following html:
<label class="btn btn-sm btn-info" ng-model="radioModel" btn-radio="'title'"><i class="fa fa-check text-active"></i> Jobprofil</label>
<label class="btn btn-sm btn-success" ng-model="radioModel" btn-radio="'division'"><i class="fa fa-check text-active"></i> Afdelinger</label>
For this i have the following $scope variable:
$scope.radioModel = 'title';
And a listner for changes:
$scope.$watch('radioModel', function (newValue, oldValue) {
if(newValue == 'title'){
$scope.dataset = $scope.titleSet;
}
else if(newValue == 'division'){
$scope.dataset = $scope.divisionDataset;
}
}, true);
However whenever i click either of the elements the value does not change (or atleast the $watch is not being called)
So what am i doing wrong?

It seems everything is OK in your snippet, $watcher is working fine, check the plunker:
http://plnkr.co/edit/c4bwHh8acsQZ2Y7RxCU9?p=preview

Related

How to get a variable in a modal using datatable in laravel?

I am using yajra datatables in laravel and I have the "revisar" button that shows a modal (as shown in the following image):
modal show
I want to fill this textarea with information from the "detail" field of the database that is obviously different for each item of the datatable, how would you do to obtain that data? I thought about getting it from the variable of the partials.actions which I can send from the controller of the datatable, but I can't get that variable in blade view.
my partials.actios view:
<a href="{{ route('tareas.createfrom', Hashids::encode($id)) }}" class="btn btn-sm btn-success">
<i class="fas fa-fw fa-plus"></i>
Tarea
</a>
<a href="{{ route('solicituds.show', Hashids::encode($id)) }}" class="btn btn-sm btn-info">
<i class="fas fa-fw fa-eye"></i>
Ver
</a>
<button type="button" data-id="{{ $id }}" data-toggle="modal" data-target="#RevisaSolicitudModal" class="btn btn-warning btn-sm revisar" id="getActualizaId">
<i class="fas fa-fw fa-check-circle"></i>
Revisar
</button>
<button type="button" data-id="{{ $id }}" data-toggle="modal" data-target="#DeleteProductModal" class="btn btn-danger btn-sm" id="getDeleteId">
<i class="fas fa-fw fa-trash"></i>
Eliminar
</button>
Maybe I can get the variable "$detail" in the modal using JS, I don't know
Check bootstrap documentation: https://getbootstrap.com/docs/4.4/components/modal/#varying-modal-content
<button type="button" data-id="{{ $id }}" data-toggle="modal" data-target="#RevisaSolicitudModal" class="btn btn-warning btn-sm revisar" id="getActualizaId">
<i class="fas fa-fw fa-check-circle"></i>
Revisar
</button>
...
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('id') // Extract info from data-* attributes
...
})
</script>
My Approach which worked:
1.Controller:
return \Yajra\DataTables\DataTables::of($trxDatatables)
->addIndexColumn()
->addColumn('action', function($row){
$stEditRoute = route('admission.students.edit',$row->id);
$stShowRoute = route('admission.students.show',$row->id);
$btns = '<button class="btn btn-danger btn-xs
deleteModalTriggerBtn " id="deleteModalTriggerBtn"
data-catid='.$row->id.' data-toggle="modal"
data-target="#delete"><span class="glyphicon glyphicon-trash" title="Delete Center"/></button>';
return $btns;
})
->rawColumns(['action'])
->toJson();
Jquery:
$(document).ready(function () {
// used the following technique so that I can use the custom attribute (data-catid) value of the trigger button (id="delete") when delete ajax is called.
$(function() {
var stId = null;
function getCatId() {
$('#delete').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('catid'); // Extract info from data-* attributes
stId = id;
});
}
getCatId();
$('.modal-footer').on('click', '.delete', function(e) {
e.preventDefault();
var token = $("meta[name='csrf-token']").attr("content");
var reason = $("#reason option:selected").text();
var notice = $("#notice").val();
$.ajax({
type: 'DELETE',
url: 'http://yoursite.test/workplace/admission/students/'+stId,
data: {
'id': stId,
'reason': reason,
'notice': notice,
"_token": token,
},
success: function (data) {
// console.log(data);
// $('.item' + $('.id').text()).remove();
}
});
});
});
});

edit state in vue js inside v-for

I'm fetching comments from api. and I'm trying to edit a comment from the list.
When i click edit i show a text area inside the comment box and a button to save the comment . which is working nicely.
The problem is when i click edit the edit textarea gets applied to all comment boxes :|
<div>
<i class="fas fa-pen text-action text-success mr-3" #click="showComment(comment.id)" v-if="user == comment.user_id" v-b-tooltip.hover title="edit"></i>
<i class="fas fa-times-circle text-danger" v-b-tooltip.hover title="delete" v-if="!editing" v-show="user == comment.user_id"></i>
<i class="fa fa-times text-action text-danger mr-3" v-if="editing" #click="editing = false" v-b-tooltip.hover title="cancel editing"></i>
</div>
</div>
<div v-if="editing">
<textarea class="form-control" v-model="commentEdited" :id="comment.id" :placeholder="comment.body"></textarea>
<button class="btn btn-xs btn-success" #click="editComment(comment)">save</button>
</div>
The show comment method :
showComment(comment_id) {
console.log("clicked" + comment_id);
for (let i = 0; i < this.comments.length; i++) {
if (this.comments[i].id == comment_id) {
this.comment.body = this.comments[i].body;
this.comment.id = this.comments[i].id;
this.editing = true;
}
}
},
the editing is a boolen.
when i click edit it should only open the textarea for the current comment only . not all the comments :\
I really cant figure this out .Any help is appreciated .
Its because editing boolean is used by all of the components so when setting it to true, all comments show. You could change editing to a string property that is equal to the id of the comment being edited:
<div>
<i class="fas fa-pen text-action text-success mr-3" #click="showComment(comment.id)" v-if="user == comment.user_id" v-b-tooltip.hover title="edit"></i>
<i class="fas fa-times-circle text-danger" v-b-tooltip.hover title="delete" v-if="!editing" v-show="user == comment.user_id"></i>
<i class="fa fa-times text-action text-danger mr-3" v-if="editing" #click="editing = ''" v-b-tooltip.hover title="cancel editing"></i>
</div>
<div v-if="editing == comment.id">
</div>
showComment(id) {
this.editing = id
},
the reason is you are having editing as a common variable, i suggest you instead to carry a variable that holds the 'id'of your clicked comment, so
if you have something like
<div v-if="commentId===comment.id">
<textarea class="form-control" v-model="commentEdited" :id="comment.id" :placeholder="comment.body"></textarea>
<button class="btn btn-xs btn-success" #click="editComment(comment)">save</button>
</div>
where commentId is the variable into which you store the selected comment.id after that make it '' empty...
this would be my approach

jQuery submit form normally or Ajax dependant on variable using FontAwesome buttons

I am using buttons for submit, as that is the only easy way to use fontawesome buttons. I detect which button was selected and place that value in a hidden field so that it is available in my Ajax routine.
This presents a problem, as one button requires a normal submit, as it goes to a script that creates a pdf.
The other conditions submit using Ajax. I attempted the following which, of course, will not work, as it creates a recursion loop.
Cannot figure a means to do this without creating a submit loop.
In Form:
<input type="hidden" id="Clicked" name="Clicked" value="" />
<button type="submit" class="btn btn-success ClickCheck" id="Create" style="display:inline;"> <i class="fa fa-file-pdf-o"> <span>Create Bill</span></i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Reset" style="display:inline;"> <i class="fa fa-times"> <span>Reset</span></i></button>
<button type="submit" class="btn btn-success ClickCheck" id="SaveData"> <i class="fa fa-archive"> <span>Save Only</span></i></button>
<button type="submit" class="btn btn-success ClickCheck" id="Create-Save"> <i class="fa fa-archive"> <span>Create and Save</span></i></button>
jQuery Code:
$(document).ready(function()
{
$('.ClickCheck').click(function()
{
var ButtonID = $(this).attr('id');
$('#Clicked').val(ButtonID);
});
$("#MyForm").on("submit", function(event)
{
event.preventDefault();
var Form = $('#MyForm');
var Valid = verify();
if(Valid)
{
if($('#Clicked').val() == "Create")
{
$(Form).attr('action', './blformpdf.php');
$(Form).submit();
}
else
{
$.ajax(
{
type: "POST",
url: "scripts/Ajax.php",
data: Form.serialize(),
success: function(response)
{
console.log(response);
}
});
}
}
});
});
The callback should be done from verify() , I've written an example .
var goIsWaiting=false;
var goIsActive=false;
function go(){
if(goIsActive)
adviseGoIsActive()
else{
console.log("Go Is Waiting !");
goIsWaiting=true;
}
}
function activate(){
//.. Doing some stuff here
if(goIsWaiting) adviseGoIsActive();
goIsActive=true;
}
function adviseGoIsActive(){
console.log("Go Is Active !")
}
<input type="submit" value="Go" onClick="go()">
<input type="submit" value="Activate Go Action" onClick="activate()">
The solution for this problem was simply to use links rather than <input> or <button>.
Here is the HTML:
<input type="hidden" id="Clicked" name="Clicked" value="" />
<a class="btn btn-success ClickCheck" id="Create" href="javascript:void(0)"> <i class="fa fa-file-pdf-o"> <span>Create Bill</span></i></a>
<a class="btn btn-success ClickCheck" id="Reset" href="javascript:void(0)"> <i class="fa fa-times"> <span>Reset</span></i></a>
<a class="btn btn-success ClickCheck" id="SaveData" href="javascript:void(0)"> <i class="fa fa-archive"> <span>Save Only</span></i></a>
<a class="btn btn-success ClickCheck" id="Create-Save" href="javascript:void(0)"> <i class="fa fa-archive"> <span>Create and Save</span></i></a>
One of these buttons is a reset. Although you can define a <button> as type="reset", for consistency, as well as other reasons, I left that too as a link and, since the button id is part of my post, the Ajax script detects that and just returns a null, then used a jQuery reset to clear the form after the null Ajax call.
$(document).ready(function()
{
$('.ClickCheck').click(function()
{
var ButtonID = $(this).attr('id');
$('#Clicked').val(ButtonID);
var Form = $('#MyForm');
var Valid = verify(); // form verify function
if(Valid)
{
if(ButtonID == "Create") // Send to PDF script
{
$(Form).attr('action', './blformpdf.php');
$(Form).submit();
}
else
{
$.ajax(
{
type: "POST",
url: "scripts/Ajax.php",
data: Form.serialize(),
success: function(response)
{
// Do whatever here with response data
}
}
if(ButtonID == "Reset")
{
$('#MyForm').trigger("reset");
$('#Clicked').val('');
}
}
}
});
});

how to pass value to an angular function using ng-click

I'm trying to pass the value of the ng-model="alertThreshold.value" but when I click on <a class="spin-up" data-spin="up" ng-click = "getAlertThreshold(alertThreshold.value)"><i class="fa fa-caret-up"></i></a> or <a class="spin-down" data-spin="down ng-click = "getAlertThreshold(alertThreshold.value)"" ><i class="fa fa-caret-down"></i></a>
it just call the function without updating the value, the value is always = 10.
<div class="input-group spinner" data-trigger="spinner">
<input type="text" class="form-control text-center" value="0" data-rule="quantity" ng-model="alertThreshold.value" min="0" max="50" ng-change ="getAlertThreshold(alertThreshold.value)">
<div class="input-group-addon">
<a class="spin-up" data-spin="up" ng-click = "getAlertThreshold(alertThreshold.value)"><i class="fa fa-caret-up"></i></a>
<a class="spin-down" data-spin="down" ng-click = "getAlertThreshold(alertThreshold.value)"><i class="fa fa-caret-down"></i></a>
</div>
</div>
and in my controller:
$scope.alertThreshold = {
value: 10
};
$scope.getAlertThreshold = function(value){
console.log("value:",value)
$scope.alertThreshold.value = value;
}
ng-click = "getAlertThreshold(++alertThreshold.value)" ng-click = "getAlertThreshold(--alertThreshold.value)" may resolve the issue.
The value of $scope.alertThreshold.value is always the same because take the value of the input. It's like $scope.alertThreshold.value = $scope.alertThreshold.value every ng-click or ng-change

ng-model doesnt bind with text field

Consider the following JS
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}
);
And the following HTML
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
My problem is that when the page loads, "test" is written in the text field, but when I change the field or press the button, nothing happens (console says "test" on every change or button click. Anyone know what I did wrong?
Try to wrap the value in an object. Objects are passed by reference, but simple values are passed as a copy of that value. It happened to me too several times.
Try this approach
$scope.myObject.searchBooking = "test"
So the full code will look like this
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.myObject.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.myObject.searchBooking);
//$location.path('/bookings/' + $scope.myObject.searchBooking);
//delete($scope.myObject.searchBooking);
}
$scope.printValue = function() {
console.log($scope.myObject.searchBooking);
}
}
);
and the html
<input type="text" class="form-control" placeholder="Testing" ng-model="myObject.searchBooking" ng-change="printValue()">
Find this fiddle which is having ng-model binding in ng-change.
HTML
<div ng-controller="MyCtrl">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
Angular controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}

Categories