Develop Reference

Inputting data into a modal from a parent component Angular 5

I am trying to create a cancel function that cancels a specific viewing based on its id. I have a viewings model that I retrieve from firebase as an observable, I then input it into a child div. The problem being that when I click cancel, it always cancels the first viewing on the page, not the specific one that I click.
The strange thing is, that I created a new component on the same level as my modal component, Input the data in the exact same way, and that works perfectly. It only seems to be with the modal that It does not work.
<div class="col-md-3 buttons" [hidden]='!hidden' [#sliderDiv]="out">
<button class="button button-primary button-sm button-green text-center" (click)="updateViewingStatus()">Update Time</button>
<button data-toggle="modal" data-target="#cancelModal" class="button button-primary button-sm button-previous text-center">Cancel Viewing</button>
</div >
<viewings-cancel-modal [viewings]="viewings"></viewings-cancel-modal>
<testing-cancel [viewings]="viewings"></testing-cancel>
</div>
this is where I input viewings property into the child components. Both identical.
this is my test logic (using just a button) that works perfectly:
export class TestingCancelComponent implements OnInit {
#Input() viewings: TenantViewingModel;
private viewingsId;
constructor(private _viewings: ViewingsService) { }
ngOnInit() {
this.viewingsId = this.viewings.viewings_id;
console.log(this.viewings.viewings_id)
}
updateViewingStatus() {
this._viewings.updateViewingStatus(this.viewingsId);
}
}
And this is my modal logic (that doesnt work) :
export class PropertyViewingsCancelModalComponent implements OnInit {
#Input() viewings: TenantViewingModel;
private viewingsId;
constructor(private _viewings: ViewingsService) { }
ngOnInit() {
this.viewingsId = this.viewings.viewings_id;
// console.log(this.viewings.viewings_id)
}
updateViewingStatus() {
this._viewings.updateViewingStatus(this.viewingsId);
}
}
Which again are identical. The html for the working button is as follows:
<button (click)="updateViewingStatus()"></button>
and the non-working modal:
<div class="modal" id="cancelModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="text-center modal_title"> Are you sure you want to </div>
<h1 class="text-center" id="exampleModalLongTitle">Cancel Viewing? {{viewingsId}}</h1>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container">
<img src="/assets/img/site/cancel.svg" alt="" style="height: auto; width: 100%; padding: 25px">
<div class="row">
<div class="col-md-6">
<button data-dismiss="modal" class="button button-primary button-xs button-previous text-center" (click)="updateViewingStatus()">confirm</button>
</div>
<div class="col-md-6 text-right">
<button data-dismiss="modal" (click)="logViewings()" class="button button-primary button-xs button-blue text-center">back</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
So just as a re-cap:
The button test works perfectly, removing the specific viewing that I want to remove or cancel. But with the modal, it only removes the first viewing on the page, even though the logic is identical, and I pass the data through to each child component in the exact same way.

Here some working example let's try this,
Html File,
<!--Pass your id as argument to your method.-->
<button (click)="onCancel(id)" class="button button-primary button-sm button-previous text-center">Cancel Viewing</button>
<!--This button has been hiden element is used to call your method -->
<button type="button" class="hideElement" data-toggle="modal" data-target="#cancelModal" #cancelModal></button>
<viewings-cancel-modal [viewings]="viewings"></viewings-cancel-modal>
Typescript File,
import { ElementRef, ViewChild } from '#angular/core';
#ViewChild('cancelModal') private cancelModal: ElementRef;
public onCancel(id:number) {
//set some global variable has been id value
localstorage.setItem("Id",id); //here set value as local storage.
this.viewings.viewings_id=id;
this.cancelModal.nativeElement.click(); //then here iam doing call that modal
}
Modal typescript File,
export class PropertyViewingsCancelModalComponent implements OnInit {
#Input() viewings: TenantViewingModel;
private viewingsId;
constructor(private _viewings: ViewingsService) { }
ngOnInit() {
//this.viewingsId = this.viewings.viewings_id;
this.viewingsId = localstorage.getItem("Id"); //here iam getting id value in localstorage
console.log("View Id",this.viewingsId) //here you getting your id you can proceed your process in modal button click time.
}
updateViewingStatus() {
this._viewings.updateViewingStatus(this.viewingsId);
}
}
It is a simple logic you have to implement your convenient. I hope it's helpful to solve your problem.
Thanks,
Muthukumar

Set focus on a input control contained in a second level bootstrap modal

I'm using Vue.js 2.1.10 and Bootstrap 3.3.7 to show a modal that opens another modal dialog. Each modal dialog is contained in a distinct component. Inside the 1st component, there is a reference to the 2nd component (select-travler).
According to the Bootsrap documentation, I have to set the focus by listening to the event shown.bs.modal. This works great to set the focus on an input control contained in the 1st modal. Problem: this way doesn't work when the modal is above another modal.
The 1st modal component looks like this:
<template>
<div ref="tripEdit" class="modal fade" role="dialog">
<!-- Inbeded component -->
<select-travler ref="selectTravler"></select-travler>
<!-- /Inbeded component -->
<div class="modal-lg modal-dialog">
<div class="modal-content">
<div class="modal-body container form-horizontal">
<div class="form-group">
<label for="travler_name" class="control-label">
Travler's name
</label>
<input id="travler_name" ref="travler_name"
v-model="travler_name"/>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
travler_name: null,
}
},
methods: {
show (operationType) {
$(this.$refs.tripEdit).modal('show');
let that = this;
$(this.$refs.tripEdit).on('shown.bs.modal', function () {
$(that.$refs.travler_name).focus();
});
if (operationType === 'newTravel') {
this.$refs.selectTravler.show();
}
},
},
}
</script>
The 2nd component contains a similar layout with the following show method:
show () {
$(this.$refs.selectTravler).modal('show');
let that = this;
$(this.$refs.selectTravler).on('shown.bs.modal', function () {
$(that.$refs.people_names).focus();
});
},
When the 2nd modal opens, the focus is still on the 1st modal behind the 2nd modal dialog (I can see the caret blinking in travler_name). How can I set the focus on people_names when the 2nd modal is shown?

I think there are really several issues at play here. First, as I mentioned in the comment above, you are not properly adding and removing the shown.bs.modal event handlers.
Second, because your second modal is nested inside the first modal, the shown.bs.modal event will bubble up to the parent modal and it's handler will fire. Initially I thought stopPropagation would be a good way to handle this, but in the end, I simply de-nested the submodal component in the template.
Here is an example of this behavior actually working.
console.clear()
Vue.component("sub-modal", {
template: "#submodal",
methods: {
show() {
$(this.$el).modal("show")
},
onShown(event) {
console.log("submodal onshown")
this.$refs.input.focus()
}
},
mounted() {
$(this.$el).on("shown.bs.modal", this.onShown)
},
beforeDestroy() {
$(this.$el).off("shown.bs.modal", this.onShown)
}
})
Vue.component("modal", {
template: "#modal",
methods: {
show() {
$(this.$refs.modal).modal("show")
},
showSubModal() {
this.$refs.submodal.show()
},
onShown(event) {
console.log("parent")
this.$refs.input.focus()
}
},
mounted() {
$(this.$refs.modal).on("shown.bs.modal", this.onShown)
},
beforeDestroy() {
$(this.$refs.modal).off("shown.bs.modal", this.onShown)
}
})
new Vue({
el: "#app",
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
<modal ref="modal"></modal>
<button #click="$refs.modal.show()" class="btn">Show Modal</button>
</div>
<template id="submodal">
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<input ref="input" type="text" class="form-control">
</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 changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
<template id="modal">
<div>
<div ref="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Stuff
<input ref="input" type="text" class="form-control">
</div>
<div class="modal-footer">
<button #click="showSubModal" type="button" class="btn btn-primary">Show Sub Modal</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<sub-modal ref="submodal"></sub-modal>
</div>
</template>
Also, for future readers, I got some useful information about how to construct the template for the modal component used above from this answer. Specifically, unless you manually specify a z-index for the modal, the modal that appears last in HTML will have a higher z-index. The implication being the submodal component needs to come second in the template.

I ran into a similar issue. A b-modal forces focus to stay in the modal. You can disable it by adding a no-enforce-focus attribute.
no-enforce-focus Boolean false Disables the enforce focus routine
which maintains focus inside the modal
https://bootstrap-vue.org/docs/components/modal

This means that the element you're trying to focus is not properly referenced.
Trying to console.log(element); the line before focussing people_names. To see if you're getting the right element.
show () {
$(this.$refs.selectTravler).modal('show');
let element = this.$refs.people_names;
$(this.$refs.selectTravler).on('shown.bs.modal', function () {
$(element).focus();
});
},
Have you considered v-show to open and close your modals ?

How to use multiple references to the same vueJs component?

I have a php page person.php that includes 2 vueJs components: person-details.vue and phones.vue. Each of these components include the same third component notify-delete. This notify-delete component includes a bootstrap modal dialog to confirm a deletion action of the parent component (person or phone).
I use props to set a message in the modal confirmation dialog and $refs to show it.
Problem:
When this props is set the msg props from the component person and the dialog is shown, the message is correctly set. However when I set from the phones component, the dialog shows the message set by person. as if person is constantly overriding the value of the msg props.
here is a sample of the code:
person.php:
<person-details details="<?= json_encode($person) ?>"></person-details>
<phones details="<?= json_encode($phones) ?>"></phones>
Person-details.vue:
<template>
<notify-delete ref="modalDeletePerson" :entity="'person'" :msg="deleteMsg" #confirmed="deleteMe"></notify-delete>
<button type="button" #click="confirmDelete">Delete this person</button>
</template>
<script>
export default {
data () {
return {
deleteMsg: ''
}
},
methods: {
confirmDelete() {
this.deleteMsg = 'Are you sure you want to delete this person?'
this.$refs.modalDeletePerson.show()
},
deleteMe() {
// delete person
}
}
}
</script>
</template>
Phones.vue:
<template>
<notify-delete ref="modalDeletePhone" :entity="'phone'" :msg="deleteMsg" #confirmed="deleteMe($event)"></notify-delete>
<button type="button" #click="confirmDelete">Delete this phone</button>
</template>
<script>
export default {
data () {
return {
deleteMsg: ''
}
},
methods: {
confirmDelete() {
this.deleteMsg = 'Are you sure you want to delete this phone?'
this.$refs.modalDeletePhone.show()
},
deleteMe() {
// delete phone
}
}
}
</script>
Notify-delete.vue:
<template>
<div id="modalDelete" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
{{msg}}
</div>
<div class="modal-footer">
<button type="submit" data-dismiss="modal" #click="confirm">Delete</button>
<button type="button" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['entity', 'msg'],
methods: {
show() {
$('#modalDelete').modal('show')
},
confirm() {
this.$emit('confirmed')
}
}
}
</script>
Any idea how I can have two distinguish instances of the same component?

The problem is here
show() {
$('#modalDelete').modal('show')
}
You are rendering two modals with the same id, then using jQuery to show them. Specifically, $('#modalDelete') will contain two elements. I expect the modal method just picks the first one and shows it.
Try
<div ref="modal" class="modal fade" tabindex="-1" role="dialog">
and
show() {
$(this.$refs.modal).modal('show')
}
This should give each instance of the Notify-delete.vue component it's own reference.

How to add vue js functions to jquery dynamically

I am using a reusable bootstrap modal i.e same modal for edit, delete operations.
When edit or update buttons are clicked same modal will pop up and I need to append appropriate functions to the modal footer buttons according which operation it is.
My footer buttons are like,
<div class="modal-footer">
<button class="btn actionBtn" data-dismiss="modal">
<span id="footer_action_button" class='glyphicon'> </span>
</button>
<button class="btn btn-warning" data-dismiss="modal">
<span class='glyphicon glyphicon-remove'></span> Close
</button>
</div>
When edit button is clicked,
$(document).on('click', '.edit-modal', function() {
$('#footer_action_button').text(" Update");
$('#footer_action_button').addClass('glyphicon-check');
$('#footer_action_button').removeClass('glyphicon-trash');
$('.actionBtn').addClass('btn-success');
.....
......
$('#myModal').modal('show');
$('.actionBtn').click(updateOperation);
});
similarly for delete action too..
here $('.actionBtn').click(updateOperation); would work well normallly.
but here updateOperation is a vueJs function,
methods: {
updateOperation: function () {
.....
.....
},
}
I am unable to call this update operation.
When statically adding #click="updateOperation()", it works fine.
<button class="btn actionBtn" data-dismiss="modal"
#click="updateOperation()">
<span id="footer_action_button" class='glyphicon'> </span>
</button>

I'm not sure to quite understand your question, but here is how I've done it:
I have a Modal component:
Modal.vue:
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" #click="close()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">
{{ title }}
</h4>
</div>
<div class="modal-body">
<slot></slot>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" #click="close()">Fermer</button>
<button type="button" class="btn btn-primary" #click="save()" :disabled="loading"><i class="fa fa-spin fa-spinner" v-if="loading"></i>Confirmer</button>
</div>
</div>
And:
export default {
props: ['title','save','close','loading']
}
As you can see, I take a save and close method in argument of the Modal component.
Then, when I call the component from another one, I send the methods as parameters:
Parent.vue:
<modal v-show="showModal" title="Ajouter une adresse" :save="saveAddress" :close="hideModal" :loading="savingNewAddress">
My Modal content here
</modal>
export default {
data () {
return {
this.showModal = false;
}
},
methods: {
saveAddress () {
console.log('fired from my parent component');
},
hideModal () {
this.showModal = false;
},
displayModal () {
this.showModal = true;
}
},
components: {
Modal
}
}
I hope this helps!

Submit Form in Bootstrap Modal with IronRouter / MeteorJS

I am trying to submit a new appetizer to a web app I am creating that resembles a cookbook. The layout has a constant header/nav that allows the user to add a new appetizer, which triggers a modal and a form containing the appetizer name, description and a photo. I would like the modal to close upon submission, and remain on the current page of which the modal was triggered. Currently, my submit form is not working and I am not sure where the problem is...
The link to the current deployed version is: http://reed-cookbook.meteor.com/
My router:
// lib/router.js
Router.configure({
layoutTemplate: 'layout'
});
Router.map(function() {
this.route('allRecipes', {
path: '/'
});
this.route('appetizers', {
path: '/appetizers'
});
this.route('appetizerPage', {
path: '/appetizers/:_id',
data: function() { return Appetizers.findOne(this.params._id); }
});
this.route('desserts', {
path: '/desserts'
});
this.route('mainCourses', {
path: '/maincourses'
});
this.route('submit', {
path: '/appetizerSubmit'
});
});
My appetizer html form:
// client/views/forms/appetizerForm.html
<template name="appetizerForm">
<!-- This is the appetizer modal -->
<div class="modal fade" id="myAppModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Add An Appetizer</h4>
</div>
<div class="modal-body">
<!-- This is the appetizer form -->
<form>
<div class="form-group">
<label for="inputNewLabel">Name</label>
<input type="text" class="form-control" id="addNewAppetizer" name="appName" placeholder="What is the name of this appetizer?">
</div>
<div class="form-group">
<label for="inputNewLabel">Description</label>
<input type="text" class="form-control" id="addNewAppDesc" name="appDesc" placeholder="Share details about your appetizer.">
</div>
<div class="form-group">
<label for="inputNewLabel">Add Photo</label>
<input type="file" id="addNewAppPic" name="appPic">
<p class="help-block">Upload a photo of your appetizer.</p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" value="submitApp">Submit Appetizer</button>
</div>
</div>
My appetizerForm.js for this specific html feature:
// client/views/forms/appetizerForm.js
Template.appetizerForm.events({
'submitApp': function(e) {
e.preventDefault();
var appetizer = {
name: $(e.target).find('[name=appName]').val(),
description: $(e.target).find('[name=appDesc]'),
photo: $(e.target).find('[name=appPic]').val()
}
appetizer._id = Appetizers.insert(appetizer);
Router.go('/', appetizer);
}
});

Your event map syntax is wrong, it must be eventType cssSelector.
Template.appetizerForm.events({
"submit form": function(event, template) {
event.preventDefault();
[...]
template.$(".modal").modal("hide");
}
});
If you want the modal to close upon form submission, use the jQuery plugin syntax to call the hide method on the modal.