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>
Related
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
I am unable to properly capture data from a modal popup as part of the Html.BeginCollectionItem for a dynamic collection. Could someone point me to a sample?
MainForm.cshtml loads a partial view for items in the model.
_Item.cshtml
Here you would see that I am trying to get the sub-items via modal popup.
#using (Html.BeginCollectionItem("Items"))
{
... details of items
// To get Sub item details via popup
<input class="btn-primary" type="button" value="Add new SubItem" />
<div class="modal fade" id="NewPage_#Model.AddPage.Id" tabindex="-1" role="dialog" aria-labelledby='Button+#Model.AddPage.Id' aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">
loading ...
</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>
}
_SubItem.cshtml
#using (Html.BeginCollectionItem("SubItems"))
{
... details of sub-items
}
I am trying to render a modal with a simple change in my data using a vue #click on an element but I'm not able to get the modal to popup. I am hoping someone can point me in the right direction here.
I'm not using vue-bootstrap in this project just bootstrap 4 for reference here.
my click
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
my Modal
<!--MODAL SECTION-->
<div v-if="showModal" class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--MODAL SECTION-->
my data
data:{
otherData: [],
showModal: false
}
You need data-toggle and data-target on the button:
<div class="d-flex justify-content-between">
<span class="d-block">These students cannot be in the same group:</span>
<button data-target="#myModal" data-toggle="modal" #click="showModal = true" class="btn btn-outline-primary btn-sm">Add constraint group</button>
</div>
See: https://getbootstrap.com/docs/4.0/components/modal/#via-data-attributes
Since the modal is controlled via some bootstrap internals, I do not think you need the v-if and #click handler.
My twitter bootstrap modal window isn't loading properly; it is faded when it loads. Here is an image demonstrating the problem.
I have tried a few things but cannot resolve the issue.
My code is:
<button type=\"button\" class=\"btn btn-danger btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" href=\"#myModal\">
<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>Do you want to save changes you made to document before closing?</p>
<p class=\"text-warning\"><small>If you don't save, your changes will be lost.</small></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 changes</button>
</div>
</div>
</div>
</div></div>
There's invalid syntax in your code example (HTML and Bootstrap). It seems like you're trying to load a warning button before the modal, but you're missing text for the button as well as the closing button tag. Here's a Bootstrap 3 example that should accomplish what you described:
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" href="#myModal">
Save Now!
</button>
<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>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></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 changes</button>
</div>
</div>
</div>
</div>
Edit the button text to read what you'd like. "Save Now!" is just an example for illustration purposes.
Weird issue. When the button that launches the modal window is located inside the form div, the modal window fails to launch. Chrome says
"Resource interpreted as Script but transferred with MIME type text/x-js:"
I already put a type for the source js but it didnt help. I also moved the call to earlier on in the page and that didnt work. The really weird part is, if I move the button outside of the form div, the modal opens just fine with no issue. Has anyone experienced this and can point me in the right direction. Thanks in advance
Edit: Here is the code(I cut out the content)
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<label for="chainCode">Chain Code</label>
<input type="text" class="form-control" id="chainCode" placeholder="Chain Code">
</div>
<div class="form-group">
<label for="nCode">N-Code</label>
<input type="text" class="form-control" id="nCode" placeholder="N-Code">
</div>
<button type="submit" class="btn btn-success">Search</button>
<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal"> Advanced
<span class="glyphicon glyphicon-cog"></span>
</button>
</form>
<!-- Advanced Modal -->
<div class="modal fade" id="advancedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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">Advanced Options</h4>
</div>
<div class="modal-body">
<form role="form" id="myForm" method="post">
<div class="form-group">
</form><!-- end advanced form -->
</div><!-- end modal-body -->
<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><!-- end modal-footer -->
</div><!-- end modal content -->
</div><!-- end modal dialog large -->
</div><!-- end Advanced Modal -->
</div><!-- End Form Container -->
somehow it seems to me, that bootstrap gets confused with the button in the form somehow.
so try using
<a class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
Advanced <span class="glyphicon glyphicon-cog"></span>
</a>
instead of
<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
Advanced <span class="glyphicon glyphicon-cog"></span>
</button>
It should work, and looks just the same.