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>
Related
I'm creating a type of content management system that allows users to create pages based on templates.
I have a page that has 2 placeholder divs. Below is an example of one. When you click on the div, a modal pops up that allows the user to use TinyMCE to create content. The idea is to set the content, hit the "Get Data" button and have the modal disappear with the content from the editor now displaying inside the original div.
This is working as far as p utting the content in the div when I hit submit. The body of the modal disappears at this point, but the gray opacity screen that usually sits under the bootstrap modal is still present and I can't any longer do anything on the page. I'm wondering what I'm doing wrong here and how I can fix it to fully close the modal when I hit the submit button.
<div class="leftContent">
<div class="modal fade bd-example-modal-lg" id="leftFiftyModal" tabindex="-1" role="dialog" aria-labelledby="leftFiftyLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="leftFiftyModal">Content Library:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Create your own content</h3>
<form id="form-data" method="post">
<textarea id="mytextarea"></textarea>
<input type="submit" value="Get Data">
</form>
</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>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
return false;
});
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
});
</script>
Try:
<script type="text/javascript">
$(document).ready(function(){
$("#form-data").submit(function(e){
var content = tinymce.get("mytextarea").getContent();
$(".leftContent").html(content);
jQuery.noConflict();
$('#leftFiftyModal').modal('hide');
return false;
});
});
</script>
Hi i'am a beginner in angular. I need to display a success message upon sending an email from modal popup and i'm trying to display the same in another popup.How can i display that?? my code part is
<div id="modalViewImportCode" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<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">Email</h4>
</div>
<div class="modal-body" >
<p>Selectemail</p>
<div *ngFor="let primary of email; let i=index;">
<div *ngIf="primary">
<div class="clearfix">
<div class="margin-5-15">
<span class="pull-left modal3-checkbox">
<input type="checkbox" id="txt{{i}}" [(ngModel)]="primary.Current">
<label for="txt{{i}}"></label>
</span>
<span class="modal3-checkbox-label clsWordWrap width85per">{{primary.EmailAddress}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" (click)="sendMail()" class="btn btn-default">Send Email</button>
</div>
</div>
</div>
I tried something like below by butting below div under above code part
<div id="modalViewImportCodes" *ngIf="mailSent" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<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">Email</h4>
</div>
<div class="modal-body">
<p>Sucess</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
sendMail() function triggers the mail.if success then "mailSent" become true.
thanks in advance.
Hi Jithin,
It very simple don't create new dialog, just use SweetAlerts after
your AJAX request completion these are very simple and easy. Trying
following steps.
Step 1:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Step 2:
Place in your desired location and change the message;
swal("Good job!", "You clicked the button!", "success");
References:
For more options and guidelines use the following URL:
https://sweetalert.js.org/guides/
Regards
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 used JavaScript to load Bootstrap Modal, $('#myModaltictacgame').modal(); with a HTML Form with input details in table so my modal code looks like this
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<span>my modal</span>
</div>
<div class="modal-body table-responsive">
<table...>
<form ....>
<input ...>
...
</form>
</table>
</div>..
..
</div>
So when I use select option Modal window should be open which is fine and showing all the input fields but its coming with a transparent black window, every thing on modal is visible but I can't select of input any detail, unless I open inspect element window on bottom of my browser so on top of inspect window coming with 2 inches gap to select my normal page, hard to explain but please check the attached pictures capture screen 1, capture screen 2
Your HTML structure should follow the structure as mentioned in the Bootstrap Document
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<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>
</div>
<div class="modal-body">
//put your stuff inside the modal-body div
<form ....>
<table...>
<input ...>
...
</table>
</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>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
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