I am using AlpineJS and I have this HTML:
<div x-data="{ open: false }" class="flex">
<button type="button" #click="open = ! open" class="" aria-expanded="false">Women</button>
<div x-show="open" x-transition>
My hidden text
</div>
</div>
What it does is basically showing "My hidden text" when I press the button. So far so good. However I want to add classes to the button itself.
I tried this:
<button type="button" #click="open = ! open" x-transition x-transition:enter="border-indigo-600 text-indigo-600" x-transition:leave="bordertransparent text-gray-700 hover:text-gray-800" class="" aria-expanded="false">Women</button>
But this does not add the classes border-indigo-600 text-indigo-600 to the button itself.
Any idea how can I do that ?
<button ... :class="open?'classes_when_open_is_true':'classes_when_open_is_false'" ... > ... </button>
Related
Im new in vue js and trying to explore it. I have button and that button has an event click, once the button clicked, it will add an input field in my specific div.
Vue file
<div class="item form-group">
<div class="col-md-6 col-sm-6 ">
<button type="button" class="btn btn-secondary" #click="addSchedule"><i class="fa fa-plus"></i>Add Schedule</button>
</div>
</div>
<div class="item form-group added-schedule">
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add qqqqqqq</button>
s
</div>
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add asdasd</button>
</div>
<div class="col-md-4 col-sm-4 ">
<button type="button" class="btn btn-secondary"><i class="fa fa-plus"></i>Add wwwwwww</button>
</div>
addSchedule(e){
e.preventDefault();
return false;
},
Scenario
User clicked the Add schdule,imagine the 3 buttons is my input fields
NOTE: The user can Add Schedule as many as the user like.
Question: How do I append the input fields in my class added-schedule once the button clicked?
I have a html view and this view displays list of elements. All elements have two buttons (edit and delete). When I click on delete all is working correctly but when I click on edit new view is not displayed. When I want to enter my direct url to edit it, all is working...
This is fragment of my code:
<div class="container">
<!-- topics -->
<div class="row topic" th:each="user : ${users}">
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-at"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.email}"></a>
</p>
</div>
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.fullName}"></a>
</p>
</div>
<div class="col-2">
<form action="#" th:action="#{'/user/drop/{id}'(id=${user.getId()})}" th:method="delete" >
<input type="hidden" name="_method" value="delete" />
<button type="submit" class="btn btn-danger">Usuń użytkownika</button>
</form>
</div>
<div class="col-2"></div>
<!--My failed button-->
<button type="submit" class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</button>
</div>
</div>
</div>
A <button> has no href attribute. What you're looking for is a "link" (an <a> "anchor" tag to be specific):
<a class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</a>
The reason your other button "works" is because it's part of a <form> and it submits that form. It doesn't follow any kind of href attribute. You could also make this button part of a form, but that doesn't appear to be the intended functionality. The intended functionality here is to direct the user to a new page, so a link is appropriate.
I am working on the CRUD part of a Laravel app.
It is supposed that when the delete button of an entry is clicked, a modal show up and ask user to confirm delete the corresponding entry or not.
I tried to do this but it said the method written in vue modal template is not defined in the JS console of chrome browser when I clicked the button.
Sure I have defined it. Why does this happen and how to fix it?
If there is any similar example that demonstrate how to do it in vue,
please provide the link. Thanks!
This is the structure of my frontend code.
The blade.php
<button id="show-modal" class="btn btn-danger"
#click="triggerDeleteModal($project)">
delete</button>
<modal-delete></modal-delete>
/resources/js/app.js
Vue.component('modal-delete', require('./components/ModalDelete.vue'));
/resources/js/components/ModalDelete.vue
<template>
<div class="modal fade" tabindex="-1"
role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['project'],
methods: {
triggerDeleteModal(project) {
alert('Did something!' + project + " - project : " + this.project);
}
}
}
</script>
You got two options here. First the one LakiGeri mentioned you put the button inside the vue-template.
The second way is you just calling the the blade.php and you call two templates. First the template with the button and the modal-delete call. And after this you $emit the function from the inside of the modal-delete template.
Vue.js emit events
I would suggest the second way because so you can reuse the modal-delete Template.
I show you one of my examples: create.blade.php
...
#section('content')
<p>Neues Raster anlegen</p>
<div class="col-md-12">
<gridunits></gridunits>
</div>
#endsection
Now calling the first template gridunits. Inside this i forward the methods for the emit-events remove and add to the second template.
<template>
...
<div class="form-group">
<gridunititems
v-for="gridunit in request.gridunits"
:key="gridunit.id"
:gridunit="gridunit"
#remove="removeGridUnit"
#add="addGridUnit"
>
</gridunititems>
</div>
...
</template>
<script>
...
methods: {
addGridUnit(id) {
//doing things
},
removeGridUnit(idToRemove) {
//doing things
},
...
</script>
Second template gridunititems
<template>
...
<div class="input-group-append">
<button type="button" class="btn btn-outline-success" #click.prevent="$emit('add',gridunit.id)">+</button>
</div>
<div class="input-group-append">
<button type="button" class="btn btn-outline-danger" #click.prevent="$emit('remove',gridunit.id)">-</button>
</div>
...
</template>
create.blade.php calling first template
gridunits.vue calling second template and methods in script
gridunitsitems.vue button who emitting event
i started work with Neabular and i'm struggling with the documentation…
I've created a nebular popover with a form and i would like to close it when the form is validated and don't close it when the form is not validated. How can i do this ?
Here is the code :
<button [nbPopover]="addMenunItem" nbButton status="success">AJOUTER</button>
<ng-template #addMenunItem>
<div class="p-4">
<div class="w-100 pb-4">
<h5>Créer un menu</h5>
</div>
<form [formGroup]="createMenuForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group">
<input type="text" placeholder="Titre" formControlName="title" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.title.errors }">
<div *ngIf="submitted && f.title.errors" class="invalid-feedback">
<div *ngIf="f.title.errors.required">Le titre est obligatoire</div>
</div>
</div>
<div class="form-group">
<nb-checkbox id="private" class="private"></nb-checkbox>
<label for="private">Privé</label>
</div>
<button type="submit" [disabled]="loading" class="btn btn-success w-100">Enregistrer</button>
</form>
</div>
</ng-template>
For one popover (source):
#ViewChild(NbPopoverDirective) popover;
[…]
this.popover.hide();
For multiple:
#ViewChildren(NbPopoverDirective) popovers: QueryList<NbPopoverDirective>;
[…]
this.popovers.forEach(pop => {
pop.hide();
});
Found it :
#ViewChild(NbPopoverDirective) popover;
[…]
this.popover.hide();
an interrogation remains : what if there are multiple popover in a component… ?
I want to create a new post in my Database using modal box, and all works fine but when I use the button edit to update the post using modal dialog doenst work, I just want to take the cod('id') via a button from my view and pass to the modal.
the button code:
<a class="tip" id="test" data-toggle="modal" data-target="#myAlert2" title="Modifier">
and this is my code modal dialog
<div id="myAlert2" class="modal hide" id="modal-edit">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button">×</button>
<h3>Modifier un espace de travail</h3>
</div>
<div class="modal-body">
<p>
<div class="form--field">
<label class="labgroupe">Sujet *</label>
<input type="text" name="sujet" id="sujet" value="" class="form--element" placeholder="Sujet..." >
</div>
<div class="form--field">
<label class="labgroupe">Objectif du groupe</label>
<input type="text" name="objectif" class="form--element" placeholder="Objectif..." >
</div>
<div class="form--field" >
<label class="labgroupe">Plan d'action:</label>
<textarea class="form--element textarea" name="textarea" placeholder="Description..."></textarea>
</div>
#endforeach
</p>
</div>
<div class="modal-footer">
<input type="submit" value="Validate" id="button2" class="btn btn-success">
<a data-dismiss="modal" class="btn" href="#">Cancel</a> </div>
</div>
Any help plz ?
you cannot use 2 id's on the same div
<div id="myAlert2" class="modal hide" id="modal-edit">
changed to
<div id="myAlert2" class="modal hide">
and use same id on data-target="#myAlert2"
Modal button:
On your script, add this:
$("#test").click(function () {
$('#id').val($(this).data('id'));
});
Then add an input in the modal called #id.
<input type="text" id="id">