I have created a bootstrap modal with a input text as shown in the following image. The input gets focus on click(sometimes), however when I try to enter text, nothing happens.
I am using angular 4, and in my project structure I have a component which has another modal dialog - and the inputs work fine, however the child of that component has this modal (which is appended to the document body on show) and the input is not editable.
Do you have any idea why this is happening?
Thanks
Code for modal:
<div class="modal fade" id="boardDetailsModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit timeline</h4>
</div>
<div class="modal-body">
<input type="text">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" (click)="saveTimeline()">Save</button>
<button type="button" class="btn btn-default" (click)="close()">Close</button>
</div>
</div>
</div>
</div>
Code for showing modal:
ngAfterViewInit() {
let self = this;
self.element.appendTo("body").modal('show');
}
I think you have a small typo.
Change your input to:
<input type="text" />
Notice the forward slash.
Related
Below is example HTML straight from the docs except that I added an id to the form element. Why are they showing the buttons outside of the form? Shouldn't they be located within the form so that when clicked, the form is submitted? Please see my typical JavaScript at the bottom. If not, is it required to attach an event to the button.btn-primary which will then submit the form, or not even use this event and just do the work within the click primary button event?
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="my-form">
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
My typical JS would be something like the following:
const form = document.getElementById( "my-form" );
form.addEventListener( "submit", function ( event ) {
event.preventDefault();
// Make a XMLHttpRequest as necessary
} );
The button element has an optional form attribute that is used to associate it with a form. This allows the button to be positioned anywhere, not necessarily inside of the form element. It also allows for multiple button elements to be associated with a single form in cases where different submit parameters might be needed.
I'm able to validate user form in normal page without using modal, the alert is able to pop up if submit the form with empty text field.
Now I'm trying to make the form inside a modal and try to validate it but the validation does not show up and insert the blank data to database.
Here is the partial code.
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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">Upload </h4>
</div>
<div class="modal-body">
<form method="POST" >
<p>EventTitle :
<input type="text" name="eTitle" id="eTitle" placeholder="Say something about this image...">
</p>
<script type= "text/javascript">
$(document).ready(function(){
$('#createEvent').click(function(){
var event_Title = $('#eTitle').val();
if(event_Title =='')
{
alert("Title cannot be empty");
return false;
}
});
});
</script>
</div>
<div class="modal-footer">
<input type="submit" name="createEvent" id="createEvent" value="Insert" class="btn btn-info">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</form>
</div>
For one, you can use the built in HTML required attribute for validating empty input.
Ex: <input type="text" name="eTitle" id="eTitle" placeholder="Say something about this image..." required />
Otherwise you could try to use if (!event_Title.length > 0) {...}
One more advice, I recommend removing the javascript from inside the html code and put it on the bottom of the file or in an external file.
Hope this helps, feel free to reach out if this does not work.
I have a modal that contains just one form field, however once the user enters this value it remains even when the modal is closed. I want it to reset on dismiss so that when the modal is opened again, the form is empty. I have some code for this already, however it's not working as it should. If anyone could help out it would be greatly appreciated.
HTML/Modal:
<!-- Modal -->
<div id="myModalViewAddress" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">View Hidden Information</h4>
</div>
<div class="modal-body">
<p>Please enter authorisation code</p>
<form id="auth_form10">
<div class="form-group has-feedback" name="auth_code10" id="auth_code10">
<input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
<span class="form-control-feedback glyphicon" id="iconBad10"></span>
</div>
</form>
<hr>
<div id="modal-loader" style="display: none; text-align: center;">
<!-- AJAX loader -->
<img src="img/ajax-loader.gif">
</div>
<div id="dynamic-content-address" class="hidden">
<!-- Dyanamic address -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
jQuery:
$('.myModalViewAddress').on('hidden.bs.modal', function() {
$(this).find('auth_form10')[0].reset();
});
JSFiddle
A few issues here. You were using .myModalViewAddress instead of #myModalViewAddress. Also you need to just clear the value with:
$('#myModalViewAddress').on('hidden.bs.modal', function() {
$('#auth_form10 input').val('');
});
jsFiddle example
try this:
after the onclick action:
$('#auth_code_input10').val() == null;
Your problem is given because of your selectors.
if you want to reset your form elements you shold select your form by his id using # and then call the .reset() method.
also your event registration wasn't being made because you are using class selector . $('.myModalViewAddress') instead of id selector # $('#myModalViewAddress')
https://jsfiddle.net/cLkekytx/1/
I am relatively new the web programmer so this may or may not be a solution solvable through JavaScript. If not, please point me in the correct direction.
{% for thought in user.thoughts %}
<div class="panel panel-default">
<!-- Icon to Display Modal -->
<div class="panel-heading" align="right">
Icon Here!
</div>
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action={{ "/editthought/" ~ thought.id }} method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text">{{ thought.body }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Thought Body -->
<div class="panel-body">
{{ thought.body }}
</div>
{% endfor %}
Here I am iterating through every thought associated with a user. Each thought displays a panel showing the thought with an icon to edit the thought.
When you click the icon, a modal pops up with the body of the thought. The issue I'm having is all of the modals contain the same pre-populated thought (the first one in the list).
The link (href={{ "/edit/" ~ thought.id }}) on the edit icon is correct as well as the body of the panel, however when you load the modal, it is not loading the correct thought. Any ideas?
EDIT: I can't figure out how to comment code. Following advice, I took the modal out of the for loop. I'm currently using this function to pass data from my button in the for loop to my modal.
<script>function testFun(variable){document.getElementById('thought_id').innerHTML=variable;}</script>
It's working however I can only pass information if it's formatted like this:
<h1 id="thought_id"></h1>
Is there any way to change this function so I can pass it as a string ike this:
<h1>thought_id</h1>
Again this is not the most efficient solution but would prevent you from having to pull the modal outside your loop and use JS to update your modal.
Quick fix for your links datatarget
<a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal_{{thought.id}}" data-placement="left" title="Edit">
Quick Fix to your modal id
<div class="modal fade" id="EditModal_{{thought.id}}" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
!!!!! OR GO THE MORE EFFICIENT ROUTE !!!!!
If you do go the route of moving the dialog out of for loop you can do something like below by adding a class to your links and attache a click event to them. Also add data-thought_id and data-thought_body to the link in your for loop.
jQuery:
$(function() {
$('.thought-link').click(function(event) {
event.preventDefault();
var action_path = '/editthought/' + $(this).attr('data-thought_id');
var thought_body = $(this).attr('data-thought_body');
$('#EditModal form').attr('action', action_path);
$('#EditModal textarea').text(thought_body);
$('#EditModal').modal('show');
});
});
Your new link:
Icon Here!
Your modal(outside the for loop):
<!-- Modal -->
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel">
<div class="modal-dialog" role="document">
<div class="modal-content" align="left">
<!-- Form in Modal-->
<form action="" method="post" role="form">
<div class="modal-body">
<textarea class="form-control" rows="10" type="text"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
So I have a ASP .NET MVC application in which users should be able to add content to a page. This content can be things like a location, photos, ...
I have a dropdownlist in my View with all the different content options. When an option is selected, the page should show a modal form where they can enter details based on the type of content they selected.
My modalform is constructed like this:
<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<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">Map</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="locationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="address" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Add location</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
It's easy to fire up the modal with a button with the data-toggle and data-target attributes like this:
<p class="text-center">
<button id="addLocation" class="btn btn-default" data-toggle="modal" data-target="#locationModal"></button>
</p>
But how do I achieve this form to be shown when selecting a value from the dropdown list? I have added a JS function to the OnChange of my dropdownlist select but I don't know how to fire up the modal form.
Thanks in advance
You can load the modal using javascript on the change event of the dropdown.
Just check this link :
Bootstrap Modal doesn't show