Dynamic modal content with multiple variables - dynamic

I realise that this has been asked a number of ways already, but for the life of me I cant find one that is similar to my issue....
I have the adapted the 'recognised' code in the documentation for showing dynamic content in a modal to the following.
Pulling my hair out, and sure I am just doing something silly.......
HTML for the call
<div class="row">
<?php $option=array_column($options, 'name', 'id');?>
<div class="col-5 col-md-6 col-lg-2 clickable" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">Engine 1</div>
<div class="col-7 col-md-6 col-lg-4">
<a href="#" data-toggle="modal" data-target="#Engine1Modal" data-thing1="<?php echo $option[$vesseldata['Engine1Type']];?>" data-thing2="<?php echo $vesseldata['Engine1Number'];?>" title="Update Engine 1">
<?php echo $option[$vesseldata['Engine1Type']];?>
</a>
</div>
<div class="col-5 col-md-6 col-lg-2>Engine 1 Serial</div><div class="col-7 col-md-6 col-lg-4"><?php echo $vesseldata['Engine1Number'];?></div>
</div>
Then the script is just embedded in the page at the moment to try and make life easy.
<script>
$('#Engine2Modal').on('show.bs.modal', function (event) {
var trigger = $(event.relatedTarget); // Button that triggered the modal
var thing1 = trigger.data('thing1'); // Extract info from data-* attributes
var thing2 = trigger.data('thing2'); // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this);
modal.find('.modal-title').text(thing1 + '<br>Serial # ' + thing2);
});
</script>
Then the Modal html is here
<div class="modal right fade in" id="Engine2Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<form id="service_form" method="get">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<label class="control-label col-xs-4 col-md-3" for="DesignRef">Design Reference</label>
<div class="col-xs-8 col-md-7">
<input type="text" class="form-control" name="DesignRef" id="DesignRef" placeholder="Design Reference" value=""/>
<?php if(!empty($registration_error['DesignRef'])) { ?>
<br/>
<div class="alert alert-danger" role="alert"><?php echo $registration_error['DesignRef']; ?></div>
<?php } ?>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</form>
</div>

Finally found it......
Found an article that explains that the text method is not actually the right one to use if you want to parse HTML. And in fact there is an HTML method in jQuery... :-)
modal.find('.modal-title1').html(item);
works.

Related

modal fade not showing,using vuetify, vue js , axios

My system does not show the modal fade when I click on the button I don't know what to do anymore I'm using vuetify , vue js , and axios in the project follow the code section below
<div
ref="modal"
class="modal show"
:class="{show}"
tabindex="-1"
role="dialog"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Criação de Marca</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
#click="criarMarca"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form v-on:submit.prevent="cadastroMarca">
<div class="mb-3">
<label for="formName" class="form-label">Nome</label>
<input class="form-control" type="text" v-model="Marca" id="marca">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary pull-right">Cadastrar</button>
</div>
</form>
</div>
</div>
</div>
</div>
I already tried to reinstall the node module, I already changed it for modal-dialog, then when I change it for modal-dialog it appears more static, I would like to know if anyone has had this problem, if so, what is the way to solve it

How can I intercept the bootstrap "data-target" event?

Elaboration on Question:
I'm using a bootstrap modal dialogue, and I only want it to work if the user is logged in.
While vue.js can make this element disappear entirely if a user is not logged in, or handle links of any kind, 'data-target' is giving me trouble.
Goal: Check if a user is logged in before activating modal. If a user is NOT logged in, I handle it somewhere else in the code (details there are not germane to this question IMO, but involve activating a completely separate modal).
If the user IS logged in, then allow the modal to be activated via 'data-target'
Problem: Currently, when a user is NOT logged in, the 'reportModalIdWithHash' is activated before the
'checkForLogin()'
Code:
<span
class="float-right text-muted smaller-font make-clickable"
data-toggle="modal"
:data-target="reportModalIdWithHash"
v-on:click="checkForLogin()"
>
Report
</span>
Note About Preferred Solution:
I'd like to have "checkForLogin()" to happen before the modal is triggered by "data-target".
While I can always make elements dissappear with Vue.js, I want the user to see the option and then when they click on it, if they're not logged in, then present a login instead of the report modal.
Is it possible to intercept and re-fire 'data-target'?
Why not use a dynamic data-target?
:data-target="`#${isLoggedIn ? 'fancy' : 'login'}-modal`"
new Vue({
el: '#app',
data: () => ({
isLoggedIn: false
}),
methods: {
handleLogin() {
// replace this with an async API call...
this.isLoggedIn = true;
// and switch modals...
['fancy', 'login'].forEach(name => $(`#${name}-modal`).modal('toggle'));
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>
<div id="app" class="container">
<div class="form-check p-3">
<input class="form-check-input" type="checkbox" v-model="isLoggedIn" id="check">
<label class="form-check-label" for="check">
<code>isLoggedIn</code> (click to change)
</label>
</div>
<div class="btn btn-primary" data-toggle="modal"
v-text="`Open Report`"
:data-target="`#${isLoggedIn ? 'fancy' : 'login'}-modal`"></div>
<div class="modal fade" tabindex="-1" role="dialog" id="login-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Login modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Login modal content goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" #click="handleLogin" data-dismiss="modal" >Login</button>
</div>
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="fancy-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Fancy report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Fancy report goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Meh...</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
</div>
Note: this is a simple proof of concept, not production ready code:
don't use Vue + Bootstrap + jQuery as in my example (it's pretty barbaric). You're better off using BootstrapVue (and getting rid of jQuery).
You might want to use a single dynamic modal and inject the body, title and footer contents via slots. That's not always better but, in general, leads to DRY-er code at expense of readability.
With BootstrapVue, your button would look more like this:
<b-btn v-b-modal[`${isLoggedIn ? 'fancy' : 'login'}-modal`]> Open Modal</b-btn>
...or, if you want to handle it in a method:
<b-btn #click="handleOpenModal">Open modal</b-btn>
and:
methods: {
handleOpenModal() {
this.$bvModal.open(this.isLoggedIn ? 'fancy-modal' : 'login-modal');
}
}

how to read file modal window in flask

s3 called up txt file and showed it to new window was successful.
I want to show you the contents of this txt file using a modal pop-up. I've tried it, but I don't show it 'body'.
Thanks very much for your help.
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">
<i class="fa fa-question-circle" aria-hidden="true"></i></button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<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" action="{{ url_for('information') }}" method="POST" >
{{ my_text }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#app.route('/information', methods=['POST'])
def information():
key = request.form['key']
my_bucket = get_bucket()
file_obj = my_bucket.Object('parameter.txt')
my_text = Response(file_obj.get()['Body'].read(), mimetype='text/plain',)
return render_template('html_with_modal.html', my_text=my_text)
You need to do something like this.
Firstly, save your response in a variable, like
my_text = Response(file_obj.get()['Body'].read(), mimetype='text/plain',)
then you need to render your template and pass your text in as an argument, like
return render_template('html_with_modal.html', my_text=my_text)
and then just like you wherever you want to place my_text in your template, you can put something like
<div class="modal-body" open="{{ url_for('information') }}" method="POST" >
{{my_text}}
</div>

Bootstrap modal - popup window not showing

I am using following example
http://www.bootply.com/59864
But when I click on the button which triggers the pop up, background gets darker but window doesn't show. Any idea what's causing this? I am using bootstrap 3.2.0
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="CreateWorkbook.aspx.cs" Inherits="CreateWorkbook" %>
<asp:Content ID="Content0" ContentPlaceHolderID="head" runat="Server">
<script>
$(function () {
$('#myFormSubmit').click(function (e) {
e.preventDefault();
alert($('#myField').val());
/*
$.post('http://path/to/post',
$('#myForm').serialize(),
function(data, status, xhr){
// do something here with response;
});
*/
});
});
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="row">
<div class="col-md-12 col-xs-12" style="margin-top: 10px">
<a data-toggle="modal" href="#myModal" role="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-plus-sign">
</span>Add questions</a>
</div>
</div>
<div class="list-group col-md-8" style="margin-top:20px"> Questions list Q1: Name Q2: Location Q3: Outcome Q4: Next meeting date </div>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">
<form id="myForm" method="post">
<input type="hidden" value="hello" id="myField">
<button id="myFormSubmit" type="submit">Submit</button>
</form>
</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>
</asp:Content>
The working example is based on Bootstrap 2.3.1, if you are importing Bootstrap 3.3.0, then a working example could be: http://bootply.com/va3EnHE0MJ

bootstrap modal loads html into the CONTENT not BODY

According to this source code from bootstrap 3.1.1:
if (this.options.remote) {
this.$element
.find('.modal-content')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
the html fragement loaded from server should be put into the modal body NOT content.
$('#myModal').modal({ remote: '#Url.Action("Create","Template")' });
The loaded html is put inside the whole dialog content NOT body!
I can fix that for myself changing the source code...
if (this.options.remote) {
this.$element
.find('.modal-body')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
But I do not want to modify bootstraps source code !!!
<!-- Modal -->
<div class="modal fade" id="myModal" 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" id="myModalLabel"></h4>
</div>
<div class="modal-body">
...
</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 -->
Thats the partial html fragment:
<script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<form action="/Template/Create" method="post"> <p class="editor-label"><label for="Name">Name</label></p>
<p class="editor-field"><input class="text-box single-line" data-val="true" data-val-length="Name must not be longer than 30 chars." data-val-length-max="30" data-val-length-min="1" data-val-remote="This name already exists." data-val-remote-additionalfields="*.Name" data-val-remote-url="/Template/TemplateExists" data-val-required="Name must not be empty" id="Name" name="Name" type="text" value="" /></p>
<p class="editor-field"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></p>
</form>
I dont understand why you so agressive, but obvioulsy that's not stupid, since that's what boostrap is telling you to do.
you have 2 options 1. what you already did:
if (this.options.remote) {
this.$element
.find('.modal-body')
.load(this.options.remote, $.proxy(function () {
this.$element.trigger('loaded.bs.modal')
}, this))
}
the second one, instead of inserting this:
<form action="/Template/Create" method="post">
<p class="editor-label"><label for="Name">Name</label></p>
<p class="editor-field"><input class="text-box single-line" data-val="true" data-val-length="Name must not be longer than 30 chars." data-val-length-max="30" data-val-length-min="1" data-val-remote="This name already exists." data-val-remote-additionalfields="*.Name" data-val-remote-url="/Template/TemplateExists" data-val-required="Name must not be empty" id="Name" name="Name" type="text" value="" /></p>
<p class="editor-field"><span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span></p>
</form>
you can just insert this (that's what bs script is wating for)
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<form><!--your form here!--></form>
</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>
hope it helps!
Had the same issue just now. I forgot to include some bootstrap js files. If anyone will have the same issue, here are scripts which fixed this problem for me:
<script type="text/javascript" src="bootstrap-modal/js/bootstrap-modal.js"></script>
<script type="text/javascript" src="bootstrap-modal/js/bootstrap-modalmanager.js"></script>