I wanna show a modal when initializing the component, but it doesn't work. I'm using $this->emit('show) to open the modal
When I add a button in my view the emit('show') works!, but I don't want that, what I want is that when the view is loaded, the modal is automatically shown
this is my component:
public function mount($id)
{
if ($id != null) {
try {
$data = DetalleRamComputadora::find($id);
$this->fk_ram_tecnologia = $data->fk_tecnologia;
$this->fk_ram_capacidad = $data->fk_capacidad;
$this->fk_ram_frecuencia = $data->frecuencia;
$this->emit('show'); // Close modal "create"
} catch (\Throwable $th) {
// throw $th;
}
}
}
this is my script on my view;
<script type="text/javascript">
window.livewire.on('show', () => {
$('#exampleModal').modal('show');
});
</script>
and this is my modal:
<div wire:ignore.self class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<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 close-btn">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
</div>
</div>
The emit occurs before the DOM is complete, so your script is not executed.
Suggestion:
wire:init="openModal"
in
<div wire:init="openModal" wire:ignore.self class="modal fade" id="exampleModal"...
And in the component:
public function openModal()
{
$this->emit('show');
}
Or
You can try:
<script>
$(document).ready(function () {
window.livewire.emit('show');
});
window.livewire.on('show', () => {
$('#exampleModal').modal('show');
});
</script>
More simple!
Related
I have a presentation with user notes. The button processing works for me, a modal window appears. Now I need to set its title and body when downloading. I get the body from the parent class of the button, no problem with that.
Here is my code:
const buttons = Array.from(document.querySelectorAll('.card .btn-info'));
function heangleClick() {
const parent = this.parentNode;
console.log($(this).parent().find('.fullBody').html());
$('#exampleModalCenter').modal('show');
$('#exampleModalLongTitle').val('123'); // not work
};
buttons.forEach((button) => {
button.addEventListener('click', heangleClick);
});
<div class="modal fade" id="exampleModalCenter" 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="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="~/js/showTittleTodo.js"></script>
How can i set values in js file exampleModalLongTitle and modalBody
You try below which is not work.
$('#exampleModalLongTitle').val('123');// not work
Please replace below instead of that
$('#exampleModalLongTitle').text('123');
Try to set html or text instead val.
$('#exampleModalLongTitle').html('123');
try with this code:
$('#exampleModalCenter').modal('show');
$('#exampleModalCenter').on('shown.bs.modal', function() {
$('#exampleModalLongTitle').val('123');
})
Update your js as following, using shown.bs.modal event on modal element you can attach a callback which fires when the modal window is completely shown
const buttons = Array.from(document.querySelectorAll('.card .btn-info'));
function heangleClick() {
const parent = this.parentNode;
console.log($(this).parent().find('.fullBody').html());
$('#exampleModalCenter').one('shown.bs.modal', function() {
$('#exampleModalLongTitle').val('123');
})
$('#exampleModalCenter').modal('show');
};
buttons.forEach((button) => {
button.addEventListener('click', heangleClick);
});
I have 3 modals that all have the same format and are activated by different onclicks (Create Contact, Update Contact, Delete Contact). I am wanting the modal-title and modal-body to change depending on which button was clicked. How would I go about creating a function that appends the modal content depending on which button was clicked? Thank you for your help!
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Contact Created!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
I have written the JavaScript "BootstrapModel" class for the same purpose.
It also depends on jQuery so don't forget to embed jQuery before using this class.
class is :
var BootstrapModal = (function (options) {
var defaults = {
modalId: "#confirmModal",
btnClose: "#btnClose",
title: "Confirm",
content: "Some bootstrap content",
onClose: function () {
},
onSave: function () {
}
};
defaults = options || defaults;
var $modalObj = $(defaults.modalId);
var hideModal = function () {
$modalObj.modal("hide");
};
var showModal = function () {
$modalObj.modal("show");
};
var updateModalTitle = function (title) {
defaults.title = title;
//$($modalObj).find(".modal-title").eq(0).html(title);
$modalObj.find(".modal-title").eq(0).html(title);
};
var updateModalBody = function (content) {
defaults.content = content;
$modalObj.find(".modal-body").eq(0).html(content);
};
return {
getDefaults: function () {
return defaults;
},
hide: function () {
hideModal();
},
show: function () {
showModal();
},
updateTitle: function (title) {
updateModalTitle(title);
return this;
},
updateBody: function (body) {
updateModalBody(body);
return this;
}
}
});
Usage :
var emailModal = new BootstrapModal({modalId: "#confirmModal"});
emailModal.updateTitle("Mail sent successfully").updateBody("<br/>This box will automatically close after 3 seconds.").show();
// Hide the Modal
emailModal.hide();
HTML Structure for the Modal:
<div class="modal fade" id="confirmModal" role="dialog" aria-labelledby="thankyouModal" aria-hidden="true" style="overflow-y: hidden;">
<div class="modal-dialog" style="padding-top: 225px">
<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="thankyouModal">Thank you</h4>
</div>
<div class="modal-body">
Thank you. We'll let you know once we are up.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The way I got around this is by loading the data in from external files. So you'd have your initial declaration of your modal box (just the surrounding div), and then in each file you have the containing code for the rest of the modal, then use a bit of jQuery to fire them off:
HTML (in main file)
<div class="modal" id="modal-results" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>
JQuery
$('#create-contact').click(function(){
e.preventDefault();
$("#modal-results").html('create-contact.html');
$("#modal-results").modal('show');
});
I'd like to display user settings in a modal and the url to have /settings/
Not sure how to set it up. Is it done in the router setup or is it done in the click event on the settings link?
I have header.html :
<!-- nav stuff -->
<li><a href="{{pathFor 'userSettings'}}" >Settings</a></li>
header.js:
Template.header.events({
'click #settings-link': function(event){
event.preventDefault();
if (!Meteor.user()) {
Router.go('sign-in');
} else {
$("#userModal").modal("show");
}
}
});
userSettings.html :
<template name="userSettings">
<div class="modal fade" id="userModal">
<!-- Stuff -->
</div>
</template>
routes.js:
this.route('userSettings', {path: '/settings'});
I would do something similar to what's shown on this post, with some modifications:
1. Create a route for settings:
this.route('settings', {path: '/settings'});
2. Create a template for that route, such as under client/views/settings.html.
3. Put the templates into that file, but notice how the calls to projectImageItem and projectImageModal are not in the body, but instead inside the settings template:
<template name="settings">
{{> projectImageItem}}
{{> projectImageModal}}
</template>
<!-- A modal that contains the bigger view of the image selected -->
<template name="projectImageModal">
<div class="modal fade in" id="projectImageModal" 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>
<h4 class="modal-title">Big Image</h4>
</div>
<div class="modal-body">
<img src="{{cfsFileUrl 'bigProjectImage' file=image}}" alt="..." class="img-rounded">
</div>
</div>
</div>
</div>
4. Put the event handling code into the js file, such as client/views/settings.js:
if (Meteor.isClient) {
Template.projectImageItem.events = {
"click .open-modal" : function(e,t) {
e.preventDefault();
$("#projectImageModal").modal("show");
}
};
}
I have a list of links that each open their own modal. Each of these modals contents display an html file. Here is a sample;
<div id="how-rtm-works" class="modal hide 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">×</button>
<h1 id="myModalLabel">How Right to Manage works</h1>
</div>
<div class="modal-body" id="utility_body">
<p>One fine body…this is getting replaced with content that comes from passed-in href</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<li><a data-target="#how-rtm-works" href="modal-content/how-RTM-works.html" role="button" data-toggle="modal">How Right to Manage works</a></li>
Because there is more than one modal, each has its own ID which is referenced in the data-target.
Can anyone advise me on how I would target these modals from another page, or in my case all pages as these will be linked in the website footer nav.
First page you'll use:
Open Modal
At the second page you'll insert your modal and the follow script:
<script type='text/javascript'>
(function() {
'use strict';
function remoteModal(idModal){
var vm = this;
vm.modal = $(idModal);
if( vm.modal.length == 0 ) {
return false;
}
if( window.location.hash == idModal ){
openModal();
}
var services = {
open: openModal,
close: closeModal
};
return services;
///////////////
// method to open modal
function openModal(){
vm.modal.modal('show');
}
// method to close modal
function closeModal(){
vm.modal.modal('hide');
}
}
Window.prototype.remoteModal = remoteModal;
})();
$(function(){
window.remoteModal('#myModalLabel');
});
</script>
Well your modals had IDs, I think you can trigger them by adding #how-rtm-works to the end of the link
for example if you have a modal called
id="My_Modal"
you can make a link
Link me to the modal
If that is your question I guess this can help you out !
I'm trying to show a modal from bootstrap 3(here) in my MVC application.
This is what i've done
#model DatePicker.Models.ViewModels.Appointment.CreateAppointmentSelectPersons
#{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
<link href="~/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
}
<button id="showDetail" class="btn btn-default">Next>></button>
<div id="appointmentModal" class="modal hide fade in" data-url="#Url.Action("Detail", "Appointment", new { appointmentId = Model.AppointmentId })">
<div id="appointmentContainer"></div>
</div>
#section Scripts{
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
#Scripts.Render("~/Scripts/bootstrap.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
<script type="text/javascript">
$("#showDetail").click(function () {
var url = $("#appointmentModal").data('url');
$.get(url, function (data) {
$('#appointmentContainer').html(data);
$('#appointmentModal').modal(show);
});
})
</script>
}
and in partial view
#model DatePicker.Models.ViewModels.Appointment.DetailsAppointment
<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="appointmentModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="appointmentModalLabel">Details</h4>
</div>
<div class="modal-body">
<h5>Your appointment is ready to be sent, please reveiew the details</h5>
<dl class="dl-horizontal">
<dt>Subject/Name</dt>
<dd>#Model.Name</dd>
</dl>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
and in controller
public ActionResult Detail(Guid appointmentId)
{
....
return PartialView(appointmentDetails);
}
Here, when I click the Next>> button in view, my modal doesn't show.
but when I inspect the network part and see the preview section i can see that the data is being collected from my backend. Its just that modal is not showing.
What should i do?
Edit1:
Console error
You made an error in JavaScript function. It should be like following:
$("#showDetail").click(function () {
var url = $("#appointmentModal").data('url');
$.get(url, function (data) {
$('#appointmentContainer').html(data);
$('#appointmentModal').modal('show');
});
})
The change is: modal(show) to modal('show')