Bootstrap Modal not launching in form div - twitter-bootstrap-3

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.

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 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>

How to make gmail like search box with bootstrap

I'm trying to implement input field with additional options similar to gmail search box. You can see it on the screenshots below.
When you click on a caret sign then additional form is shown up:
Currently, I'm struggling with making a nice looking form shown after clicking on the caret sign. Anyone knows how to achieve that with Bootstrap?
Here is a jsfiddle link:
https://jsfiddle.net/x1sfs9xb/1/
<div class="container">
<div class="row">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<form action="#" class="form-horizontal">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input 1</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input1" type="text" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label class="col-sm-3 control-label" for="name">Input2</label>
<div class="col-sm-9">
<input class="form-control" id="name" name="input2" type="text" />
</div>
</div>
</div>
</div>
<p>
<input class="btn action-button pull-right" name="commit" type="submit" value="Save">
</p>
</form>
</li>
</ul>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</div><div class="row">
<div class="col-md-12">
<h1>Some content</h1>
</div>
</div>
</div>
You can achieve that by using a little CSS and JS:
CSS (your dropdown menu is relative to input-group-btn so you have to change position of that to static - now your dropdown menu is related to the input-group):
.input-group-btn {
position: static;
}
.dropdown-menu {
left: 0;
}
JS (get width of the input and assign it to your dropdown menu, also change it on browser resize):
var inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
$(window).resize(function () {
inputWidth = $('.form-control').outerWidth();
$('.dropdown-menu').css('width', inputWidth);
});
JSFIDDLE

twitter bootstrap 3++ modal window doesn't load

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.

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>