I'm new to Vue.js and I struggle with modals. I want to first load the modal window as a user navigates to a certain component. I tried to create some example modal and it opens if I click a button and trigger $('#modalId').modal('show'). But when I try to execute the same command from Vue's created () {...} It does not open a modal window. I don't want to open a modal window with a button click, I want to open as page/component loads.
<!-- This works fine -->
<button class="btn btn-dark" #click="openModal" data-target="#loginModal">Open modal</button>
<!-- MODAL -->
<div class="modal" ref="modal" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Insert required data</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Submit</button>
<a href="#" #click="logout" data-dismiss="modal">
<span>{{ $t('pages.userIconInHeader.signOut') }}</span>
</a>
</div>
</div>
</div>
</div>
...
export default {
name: 'test',
data () {
return {}
},
created () {
// HERE I WOULD LIKE TO OPEN MODAL. If it's even possible?
$(document).ready(function () {
this.openModal()
})
},
methods: {
openModal () {
$('#loginModal').modal('show')
},
...
Use in mounted without $(document).ready(function(){}):
mounted() {
this.openModal();
},
Don't mix jQuery and Vue. Vue works with Virtual DOM and you should update, show, hide elements according to Vue documentation, no work around with jQuery. This is article about creating modal in Vue, I hope it helps
https://alligator.io/vuejs/vue-modal-component/
mounted() {
this.showModal()
},
methods: {
showModal() {
this.$modal.show("model-name")
},
}
this can be used for opening model in vuejs
Related
I'm trying to render a razor page as the content of a modal dialog:
This is the razor page
<div class="container">
<div class="title modal " tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>#IdentityResources.ResendEmailConfirmation</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form method="post">
<div class="form-group">
<input class="form-control" type="text" placeholder="Email" id="inputUserName" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary col-md-2">#IdentityResources.Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
</script>
And later in another razor page I create a link to the page:
<a asp-page="/Identity/_ResendConfirmationEmail">#IdentityResources.ResendEmailConfirmation</a>
Once it's clicked the razor page is displayed, but since it's action link, it's redirecting directly to the page, instead of rendering it over the current page.
How can I change this behavior?
You need to call your action, using ajax. so in the response you will get html of your view.
but you need to return PartialView(), because if you return your view as View() then youy view will come with layout, so your page will display layout contents twice in a page.
// your controller
public ActionResult _ResendConfirmationEmail()
{
return PartialView();
}
Now call it using ajax as below.
$.ajax({
url: '#Url.Action("_ResendConfirmationEmail","Identity")',
success: function (data) {
$('#yourdivid').html(data);
},
error : function (error)
{
// handle error code
}
});
I am working on an experimental project and I was trying playing around with javascript when I encountered this weird thing that I have no explanation for its behavior.I am using bootstrap 4 with CDN. SandboxCode
import React from 'react';
const Button = props => {
const showProps = e => {
e.preventDefault();
console.log(props.day, props.slot);
};
return (
<div>
<div data-toggle="modal" data-target="#myModal">
Click Me!
</div>
<div className="modal fade" id="myModal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Add / Edit Slot</h4>
<button type="button" className="close" data-dismiss="modal">
×
</button>
</div>
<div className="modal-body">
<form>
<div className="form-group">
<label>
<h6>Faculty</h6>
</label>
</div>
<div className="form-group">
<label>
<h6>Venue</h6>
</label>
</div>
<div className="form-group">
<label>
<h6>Subject</h6>
</label>
</div>
<button
type="submit"
className="btn btn-success btn-cons btn-block"
onClick={showProps}
>
Save
</button>
</form>
</div>
<div className="modal-footer">
<button
type="button"
className="btn btn-danger btn-block"
data-dismiss="modal"
>
Close
</button>
</div>
</div>
</div>
</div>
</div>
);
};
export default Button;
this component provides a button which opens a modal when the Save button is clicked inside the modal then it console's two props (day and slot).
Its parent component is the main component which is then used In the App.js file to be rendered.
import React, { Component } from "react";
import Button from "./Button/Button";
export default class Main extends Component {
render() {
return ["Monday", "Tuesday"].map((day, dayIndex) => {
return [0, 1].map((slot, slotIndex) => {
return (
<Button key={dayIndex + "-" + slotIndex} day={day} slot={slotIndex} />
);
});
});
}
}
Excepted Result:- Upon clicking the button and clicking the save button in modal, each button should console different data depending on props.
Output:- All the save button clicks output the same thing.
I have been stuck on this for two days now and I have tried a lot of things.
Its an id issue :). Look at the below code:
<div data-toggle="modal" data-target="#myModal">
Make the id unique for every modal, otherwise no matter which button you click, it will bring up the modal for the first element it finds with the given id.
See the fixed code in this sandbox, basically changed these two lines to ensure a unique modal id:
<div data-toggle="modal" data-target={`#myModal_${props.day}_${props.slot}`}>
And
<div className="modal fade" id={`myModal_${props.day}_${props.slot}`}>
I have two Bootstrap Modal's in my Template.PageName.helper Meteor.callPromise() that I would like to fire-up in a specific order. The order being: modal.hide('loadingPageAnimation') followed by modal.show('c2bNotifications').
By default, modal.hide('loadingPageAnimation') is activated in the page Router.route('/page') by modal.show('loadingPageAnimation')
This successfully displays the modal.show(loadingPageAnimation) while (in my helper) my Meteor.CallPromise() is awaiting results:
../client/main
Meteor.callPromise('c2b').then(
function(results) {
//### When results comes through, Modal.hide('loadingPageAnimation')
Modal.hide('loadingPageAnimation');
//### then Modal.show('c2bNotifications' along with results message)
Modal.show('c2bNotifications', {msg: results};
}).catch( function(error) {
alert("Error!");
}
);
The problem here is that, when the Meteor.callPromise('c2b') returns results, the Modal.hide('newLoadingModal'); is successfully hidden, but the Modal.show('c2bNotifications', {msg: results}); only shows sometimes and sometimes it does not show. I would like some consistency in Modal.show('c2bNotifications', {msg: results}); always showing/working. Can anyone explain why this happens and perhaps give a better coding solution whereby Modal.show('c2bNotifications', {msg: results}); is forced to show?
Find below my template file.
../client/main.html
<template name="c2bNotifications">
<div class="modal fade makeAnOffer">
<div class="modal-dialog modal-sm">
<div class="modal-content modal_MakeAnOffer">
<div class="modal-header">
<h4 class="modal-title">Notification </h4>
</div>
<div class="modal-body">
<div id = approvedMsg > {{msg}} </div>
</div>
<div class="modal-footer c2bNotifications">
<button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
Looking forward to your help
First solution: What you can do is to add a little timeout to let the first modal the time to be hidden. Then call the Modal.show().
{
Modal.hide('loadingPageAnimation');
setTimeout(function(){
Modal.show('c2bNotifications');
}, 1000);
}
The problem is that you need to wait for the first modal to hide because there is no parameter to add a callback to the Modal.hide() function with the peppelg:bootstrap-3-modal package. If the code above really doesn't work, you can add this code
Modal.allowMultiple = true;
Second solution: I see you that you are using the first modal to show a loading sign, maybe you could add this sign into the c2bNotifications, and showing it with an helper like that :
<template name="c2bNotifications">
<div class="modal fade makeAnOffer">
<div class="modal-dialog modal-sm">
<div class="modal-content modal_MakeAnOffer">
<div class="modal-header">
<h4 class="modal-title">Notification </h4>
</div>
{{#if isLoaded}}
<div class="modal-body">
<div id = approvedMsg > {{msg}} </div>
</div>
<div class="modal-footer c2bNotifications">
<button type="button" class="btn btn-primary btn-lg" id="paymentNotificationClose" data-dismiss="modal">Close</button>
</div>
{{else}}
<!-- insert loading page animation -->
{{/if}}
</div>
</div>
</div>
</template>
And your helper code should look like that:
Template.c2bNotifications.helpers({
isLoaded(){
// return true if your Meteor.callPromise succeed, otherwise false
},
});
Third solution:
You could try to create a homemade callback, maybe by checking if the modal exist in the DOM.
I was looking for a solution to my problem and I saw a lot of different ways to do that but none of them worked to me.
I'll paste my code here and see if you can help me somehow.
I have a draggable popup to display a note. There is a list of items on the main screen and everytime the user clicks on the "View" link it opens the popup with the Note for this specific item.
Everything is working properly. The popup opens with the right information and I can move the popup around the screen. Then only problem I have is:
Once I close the popup and open a new one, instead of reseting the popup to the original position it opens exactly where I left the other one. I need to reset the position for the popup when the user closes it.
This is my js:
require(['jquery'
, 'bootstrap'
, 'datepicker'
, 'typeahead'
, 'combobox'
, 'tagsinput'
], function($){
// DOM ready
$(function(){
$('.modal-dialog').draggable();
$('#noteModal').on('show.bs.modal', function(e) {
//get data-id attribute of the clicked element
var note = $(e.relatedTarget).data('note');
//populate the textbox
$(e.currentTarget).find('span[name="note"]').text(note);
});
});
});
This is the modal on my html page:
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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" id="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
How can I reset the position for the popup everytime the user closes it?
THank you!
Inside your click handler, you can use JQuery to set the css of the modal like so:
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
This will reset the position of your modal. You can use it before you call your modal in your JavaScript, assuming you are using JS to open your modal.
Try running the snippet below or see this CodePen Demo for an example of this using your modal.
// DOM ready
$(function() {
$(".modal-dialog").draggable();
$("#btn1").click(function() {
// reset modal if it isn't visible
if (!$(".modal.in").length) {
$(".modal-dialog").css({
top: 0,
left: 0
});
}
$("#noteModal").modal({
backdrop: false,
show: true
});
});
$("#noteModal").on("show.bs.modal", function(e) {
var note = $('#btn1').data('note');
$(e.currentTarget).find('span[name="note"]').html(note);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- Modal to display the Note popup -->
<div class="modal" id="noteModal" tabindex="-1" role="dialog" aria-labelledby="noteModalLabel">
<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" id="noteModalLabel">Note</h4>
</div>
<div class="modal-body">
<span name="note" id="note"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button id="btn1" data-note="I am a note. Hello.">Show Modal</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
If you want to keep the background usable while your modal is open, I posted a solution to this a little while ago here.
I hope this helps!
I want to load a modal dialog using bootstrap modal. Inside of it i want to show a fullcalendar (the jquery one) with some events on it. I have created my modal, and put inside the full calendar. But Full calendar won't show when modal appears. But it shows when after the modal has appeared i press on either next or previous buttons. But then no event appears on the calendar.jsfiddle here
and code
Launch demo modal
<div id="myModal" class="modal fade" 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-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-6">
<div id="calendar"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
js
$("#calendar").fullCalendar({
header:{
left:'prev',
center:'title',
right:'next'
},
events:'/eventsfeed/',
defaultView:'agendaDay'
});
That also make events not to appear on calendar. This is what my /eventsfeed is returning
[{"url": "/calendar/entry/223", "start": "2013-12-04T17:00:00Z", "end": "2013-10-04T16:45:00Z", "description": "a body", "title": "Title entry"}]
I use fullcalendar in different pages of my project and events and everything render normally.
How can i make it load when modal appears
You should try this :
$('#myModal').on('shown.bs.modal', function () {
$("#calendar").fullCalendar('render');
});
Here is your fiddle : http://jsfiddle.net/mzAEj/2/
Here is the documentation : http://arshaw.com/fullcalendar/docs/display/render/
FullCalender V4
In reading the doc you can read that this command is deprecated,
You've to call calendar.render() is order to have the same behaviour
Extract of code :
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin ]
});
calendar.render();
Doc source
You can use the this approach.
After the loading of .modal trigger the MONTH, DAY or WEEK button of the Calendar.
$('.modal').focus(function(){
$('.fc-month-button').trigger('click');
});