editing a textarea value after posting a task on JS - javascript

im creating a task managment system and created a div which all tasks created by the user will append to right here:
</div><div id="ar_notes" class="ar_wrapper">
<button data-toggle="modal" data-target="#myModal" id="add_apt" ><i class="fa fa-pencil"></i></button>
</div>
and bootstrap modal that posts tasks right here:
<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>
</div>
<div class="modal-body">
<ul class="rslides">
<textarea id="put_note" autofocus></textarea>
<input onClick="addmore()" data-dismiss="modal" id="add_note" type="submit" value="הוסף משימה">
</ul>
</div>
</div>
</div>
</div>
this is my script that appends my notes on to the wrapping div:
function addmore() {
var newText = $('textarea').val();
$('#ar_notes').append('<br />');
$('#ar_notes').append('<article><div class="note"><p class="show_note">' +newText +'</p><button><i class="fa fa-trash-o"></i></button>').fadeIn(500);
$('textarea').filter('[id*=put_note]').val('');
}
my question is if i can click on the div of the task and get the modal with the same text in it to edit the task?
thanks!

Related

Prevent Bootstrap Modal close on Esc key press

I am using NGX Bootstrap modal in my project. Inside the modal i have a form, right now if I press Esc key the modal is hiding.
How can I be able to show child modal(confirm modal) if any user is filling up the form and suddenly press the esc key or tries to close the parent modal.
Is there any way to show the child modal without closing the parent modal based on some condition if anyone presses the esc key.
<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
<!-- parent modal -->
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-control">
<input type="text" placeholder="email" />
</div>
<div class="form-control">
<input type="text" placeholder="password" />
</div>
<button type="submit" class="btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
<!-- confirmation modal -->
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you want to exit? Your changes will not be saved.<br>
<button class="btn-danger">Discard</button>
<button class="btn-primary">continue</button>
</div>
</div>
</div>
</div>
Assuming you are using ng-bootstrap.
While using modal.open method you can pass keyboard attribute as false.
Its official doc can be found at :-
https://ng-bootstrap.github.io/#/components/modal/api
Eg:- this.ngbModal.open(content, {keyboard: false});

Showing message in modal popup after closing another modal popup- Angular

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

After modal dismiss some functions are not working

I've got this project, a counter for a game... The idea is that when I click the "#buttonplay", it runs the jQuery function and hides the modal. That is all right, but after the modal is hidden, the function DisplayMoreInfo doesn't work... That function has to, when the user clicks on a specific game, provide more info about it.
I've got a game done without the function that runs after the #buttonplay is clicked, and it shows the info before I create a new game... But after, doesn't do anything...
This is my HTML:
<div id="contentplays" style="display: none">
<button type="button" id="buttonplay" data-toggle="modal" data-target="#myModal">
New Game
</button> <!--This button is to create a new play-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Game</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<!--Here it goes the info of the new game-->
</form>
</p>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submitnew" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!--This is the game WITHOUT the jQuery function of the #buttonplay-->
<div class="game done" onclick="DisplayMoreInfo(NewGame);">
<h1>NewGame</h1><br>
<p class="info">21&sol;01&sol;2017</p><br><br>
</div>
<div class="moreinfodone" id="NewGame" style="display: none">
<p class="person">Player 1&colon; Pirulo</p>
<p class="person">Player 2&colon; Zultano</p>
<p class="person">Player 3&colon; Mengano</p>
</div>
</div>
And this is my JavaScript:
//The jQuery function
$('#submitnew').click(function () {
$('myModal').modal('hide');
//Some code here
});
//The function that does't work after the .modal('hide')
function DisplayMoreInfo(game) {
$(game).toggle();
}
Thanks in advance for any answer!!!
You might have to change this line of code from
onclick='DisplayMoreInfo(NewGame)';
To:
onclick='DisplayMoreInfo("#NewGame")';
Why did not work?
You are trying to pass NewGame to the DisplayMoreInfo function, which is at that point undefined.
Next time try to debug your code better using Chrome!

Is Modal possible with <li> tag?

I have a <li> which when clicking on it, I wish to open a modal before perfoming a certain action. Is this possible? As all the modal examples I found were all concerning button but I do not want to change it.
This is the code I'm using (and what I've tried so far)
Modal
<!-- Modal -->
<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">
Are you sure you want to Add an Iteration?
</div>
<div class="modal-footer">
#using (Html.BeginForm("AddNewIteration", "Index"))
{
#Html.AntiForgeryToken()
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Add Iteration</button>
}
</div>
</div>
<li> in concern
<!-- Start of Add New Iteration -->
<li>
<a href="#myModal" data-toggle="#myModal">
<span class="ca-icon"><i class="fa fa-plus-square fa-3x"></i></span>
<div class="ca-content">
<h2 class="ca-main"> Add new Iteration</h2>
<h3 class="ca-sub"> Add New Iteration to the Project!</h3>
</div> <!-- End of ca-content-->
</a>
</li> <!-- Add New Iteration -->
Thanks in advance
No Matter, I found what I was doing wrong.
Was declaring the tag wrong Had to change it to:
<a href="#" data-toggle="modal" data-target="#myModal">

Dynamic bootstrap modal within a loop

I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
To avoid one static modal that will repeat itself within the loop, I added a dynamic id to the modal dialog :
<div class="modal-dialog" id="{{id}}" >
But it seems that this doesn't work . Here is my code :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<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">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>
If your are in a loop, you must use different modal id, try :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<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">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</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>
I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}".
I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.
If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure
<?php
$id=0;//define on the top of your function
foreach()
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
<div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
<div class="modal-dialog"> <!-- Modal content-->
<div class="modal-content">
//Popup content
</div>
</div>
</div>
$id=$id+;//increase id value by for next iteration?>
endforech;

Categories

Resources