Getting variable class name of JavaScript from Laravel blade loop - javascript

I am in trouble with getting specific variable javascript class name from Laravel loop.I tried to get it from html data but I got only the first data info of loop.
Here is my blade
#foreach($myanmarmenus as $myanmarmenu)
<div class="col-md-6 col-sm-12">
<div class="menu">
<img src="{{ '/images/menus/'. $myanmarmenu->image }}" class="menuimg">
<p class="menutitle">{{$myanmarmenu->title}} <span class="menuprice">{{$myanmarmenu->price}} <span id="kyat">Ks</span> </span>
</p>
<p class='menudescription'>
{{$myanmarmenu->description}}
</p>
<span class="menushop">
#foreach($myanmarmenu->shops as $shop)
{{$shop->name}}
#endforeach
</span>
<!-- spinner -->
<div class="custom_spinner {{$myanmarmenu->title . $myanmarmenu->id}}" data-spinnerclass="{{$myanmarmenu->id}}">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="minus" data-field="quant[2]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[2]" class="form-control input-sm input-number" value="1" min="1" max="1000" id="spinnerval-{{$myanmarmenu->title . $myanmarmenu->id}}">
<span class="input-group-btn">
<button type="button" class="btn btn-danger btn-sm btn-number" data-type="plus" data-field="quant[2]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
<!-- spinner -->
<!-- add -->
<div class="spinner_btn {{$myanmarmenu->title . $myanmarmenu->id}}" data-addclass="{{$myanmarmenu->id}}">Add Item</div>
<!-- add -->
</div>
</div>
#endforeach
And this is js
$('.spinner_btn').click(function () {
var spinner = $(".custom_spinner").data('spinnerclass');
alert(spinner);
});
my actual purpose is to get the specific class name

I think you mean this:
$('.spinner_btn').each(function () {
$(this).on('click', function () {
var spinner = $(this).siblings(".custom_spinner").data('spinnerclass');
alert(spinner);
});
});

Related

How to use Formgroup and react Form in angular2 to fix generated textbox problmes

I'm using angular2 in my project,i have a service which returns this JSON Object :
items={"departure":"New York","arrival":"California","stations":[{"station":"toto"},{"station":"titi"},{"station":"tata"}]}
i tried to populate this JSON object in the UI like this picture shows:
here's what the result looks like
heres the code :
<div class="panel-body panelcolor">
<div *ngIf="items?.departure">
<span>{{items.departure}}</span> -->
<span *ngIf="items.stations.length > 0">
{{items.stations[0].station}}
</span>
<span *ngIf="items.stations.length === 0">
{{items.arrival}}
</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div *ngFor="let item of items.stations; let i=index, let last = last">
<div *ngIf="!last">
<span>{{item.station}}</span> --> <span *ngIf="items.stations[i+1]">{{items.stations[i+1].station}}</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
</div>
<div *ngIf="items?.arrival && items?.stations.length > 0">
<span>{{items.stations[items.stations.length-1].station}}</span> --> <span>{{items.arrival}}</span>
<div class="input-group spinner">
<input type="text" formControlName="price" class="form-control">
<div class="input-group-btn-vertical">
<button (click)="spinnerPriceUp()" class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button>
<button (click)="spinnerPriceDown()" class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<button style="margin-left: 479px;"> Submit </button>
my problem is when i tried clic (up or down) the spinner to change the value of the textBox, all the textBoxes change its value.can anyone help please to fix this problem ? I tried to use formgroup to fix this issue but i didnt manage to fix it.
I am unsure what's inside you're spinnerPriceUp() and spinnerPriceDown() functions.
You are rendering textBox from inside of a ngFor loop.
That is why all the textboxes rendered from this loop are getting
targeted for the value change.
A way to fix this is by assigning dynamic IDs to you're
element.
<input [attr.id]="'textbox' + i">
'i' being index & 'textbox' is some text for the ID.
now you have unique ids to your textboxes. Further, you can pass these IDs to the functions performing the update.
Hope this solves you're issue

Html & Angular : why doesn't my variable update?

I've got some global variables in my html code responsible for showing and / or hiding a new table entry field and an edit table entry field. For some reasons, each time I try to show or hide one of those fields using the buttons in my table, it doesn't work.
Here's my code:
<!--Page HTML du module News du dashboard.-->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="./bower_components/font-awesome/css/font-awesome.min.css">
<meta charset="UTF-8">
</head>
<body ng-app="myApp">
<div class="container" ng-controller="AppCtrl">
<br>
<button type="button" class="btn btn-default pull-right" ng-click="add = !add; updt = false"/>
Ajouter une annonce
<span class="glyphicon glyphicon-new-window"></span>
</button>
<br>
<br>
<table class="table table-striped table-responsive table-bordered table-hover table-condensed">
<thead>
<tr>
<th class="col-md-1 text-center">
<span class="glyphicon glyphicon-pushpin"></span>
</th>
<th class="col-md-7">News</th>
<th class="col-md-1">Auteur</th>
<th class="col-md-1">Date</th>
<th class="col-md-2">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in queryResult">
<td class="text-center">
<b> {{x.pinned}} </b>
</td>
<td>
<b>{{x.title}}</b>
<button type="button" class="btn btn-default pull-right" ng-click="body = !body">
<span class="fa fa-chevron-up" ng-show="body"></span>
<span class="fa fa-chevron-down" ng-hide="body"></span>
</button>
<div class="check-element animate-hide" ng-show="body">
<p>{{x.body}}</p>
</div>
</td>
<td>
{{x.author}}
</td>
<td>
{{x.date}}
</td>
<td>
<div class="text-center">
<button type="button" class="btn btn-default" ng-click="pinUnpin(x.id,x.pinned)">
<span class="glyphicon glyphicon-pushpin"></span>
</button>
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="button" class="btn btn-default" ng-click="delEntry(x.id, x.title)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<div ng-show="add">
<div class="page-header">
<h3>Nouvelle news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="checkbox">
<label><input type="checkbox" value="" ng-model="newPinned"/>Epingler la news?</label>
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="add = !add">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="newEntry()">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
<div ng-show="updt">
<div class="page-header">
<h3>Editer une news</h3>
</div>
<input type="text" class="form-control" ng-model="newTitle" placeholder="Titre (obligatoire)"/>
<br>
<input type="text" class="form-control" ng-model="newBody" placeholder="Commentaire (optionnel)"/>
<div class="pull-right">
<button type="button" class="btn btn-default" ng-click="updt = !updt">
Annuler
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="btn btn-default" ng-click="updtEntry(); updt = !updt">
Envoyer
<span class="fa fa-check"></span>
</button>
</div>
</div>
</div>
<!-- Scripts -->
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./controller.js"></script>
</body>
</html>
For instance, when I click on the first button (Ajouter une annonce), my "add" and "updt" div fields are shown or hidden accordingly. Same when I use the cancel button in those divs. But the button each table row:
<button type="button" class="btn btn-default" ng-click="prepareUpdt(x.id,x.title,x.body); updt = !updt; add = false"/>
<span class="glyphicon glyphicon-edit"></span>
</button>
doesn't seem to update my "add" and "updt" variables. And I know that my function prepareUpdt is called, so I know that ng-click is reached.
Where's the problem ?
This is due to a scoping issue with ng-repeat. More information is here.
Basically, add and updt do not exist in the outer scope (outside of the ng-repeat scope), and therefore their values never change when you click the button in the table.
To resolve, I suggest that you change each definition (line ~11, 55) of
ng-click="add = !add; updt = false"
to
ng-click="viewObj.add = !viewObj.add; viewObj.updt = false"
And
<div ng-show="add">
to
<div ng-show="viewObj.add">
..and..
<div ng-show="updt">
to
<div ng-show="viewObj.updt">
Also,
~77 to:
<button type="button" class="btn btn-default" ng-click="viewObj.add = !viewObj.add">
and
~95 to:
<button type="button" class="btn btn-default" ng-click="viewObj.updt = !viewObj.updt">
You also have a line around ~36 ng-click="body = !body". Since you are using that within the ng-repeat scope, you should be fine, however, bear in mind that will not be available outside of ng-repeat.
You shouldn't put this logic in your view. You should declare the variables in your controller and change them in your controller inside the function prepareUpdt(). This way angular will double bind these variables and update your view upon changes.
vm.updt = true;
vm.add = true;
function prepareUpdt() {
// your other code
vm.updt = !vm.updt;
vm.add = false;
}
and in your html:
<div ng-show="vm.add">
...
<div ng-show="vm.updt">

submit on <input> calls func in ng-click

This snippet of code I am using as template:
<div class="input-group input-group-sm date-time-with-arrows" style="width:100%">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="prevDay()"> <i class="fa fa-angle-left "></i></button>
</span>
<div id="input" class="input-group input-group-sm nested-group" ng-model="model">
<input class="form-control input-sm" ng-disabled="disabled" type="text" ng-attr-placeholder="{{configuration.noSelectionLabel}}" />
<span class="input-group-btn after-date-input">
<button class="btn btn-default pick-cal" ng-disabled="isDisabled" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<span class="input-group-btn after-date-input">
<button class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button>
</span>
</div>
Note functions in tags button prevDay() and nextDay(). When I change date in input and press enter, prevDay() function is called and I have no idea why.
If you don't specificy a type="button" for a <button>, it will default as a submit button.
The button with function prevDay() on it is the first one, which will be used when you hit enter.
Just add type="button" to your <button>s and it will work.
I almost got insane for this just a couple of days ago...
The reason is that angular submits form on click of every button that is not of type="button".
If you change to <button type="button" class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button> it should work.

AngularJs: ng-model is not getting set with typehead

I'm trying the access the input field value using ng-model searchQuerybut it's not getting set. After removing typehead and typeahead-editable it works fine.
<div class="col-md-3">
<div class="input-group" class="pull-right" style="margin: 10px">
<input type="text" name="input" class="form-control"
placeholder="Get quote..." ng-model="searchQuery"
ng-controller="TypeaheadController"
typeahead="script as script.symbol for script in getSymbols($viewValue)"
typeahead-editable="false">
Value - {{searchQuery}}
<span
class="input-group-btn"> <a class="btn btn-default"
type="button" data-toggle="modal" data-target="#search-popup">
<span
class="glyphicon glyphicon-chevron-down">
</span>
</a>
<a class="btn btn-default" type="button"
ng-href="#/show-details/{{searchQuery}}"> <span
class="glyphicon glyphicon-search"></span>
</a>
</span>
</div>
</div>
Thanks for your help.
Move your ng-controller="TypeaheadController" statement to parent div, it will work fine.

BlueImp AngularJS Integration

I want to integrate the BlueImp AngularJS file upload plugin into my site , but the problem is I'm using a template / directive / controller / service model. Ignoring the service I still can't seem to find which part of the code goes where.
My template
<div> <form id="fileuploadbeta" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data" data-ng-app="demo" data-ng-controller="DemoFileUploadController" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple ng-disabled="disabled">
</span>
<button type="button" class="btn btn-primary start" data-ng-click="submit()">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fade" data-ng-class="{in: active()}">
<!-- The global progress bar -->
<div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<!-- The table listing the files available for upload/download -->
<table class="table table-striped files ng-cloak">
<tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
<td data-ng-switch data-on="!!file.thumbnailUrl">
<div class="preview" data-ng-switch-when="true">
<a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
</div>
<div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
</td>
<td>
<p class="name" data-ng-switch data-on="!!file.url">
<span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
<a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
<a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
</span>
<span data-ng-switch-default>{{file.name}}</span>
</p>
<strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
</td>
<td>
<p class="size">{{file.size | formatFileSize}}</p>
<div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
</td>
<td>
<button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</td>
</tr>
</table>
</form></div>
Now my problem is what code should be in the directive? ( I mean what part of the template) And which should be in the Controller?

Categories