I'm using angularjs. What I want to do is to check student id in database by Angularjs, when the user clicks a button.
If student id exists in database, #modal1 will be shown, otherwise #modal2 will be prompted. Is it possible to do this with angularjs? If possible how..
Html
<tr ng-repeat="g in students">
<td>{{g.studentId}}</td>
<td>{{g.studentName}}</td>
<td>
<div class="btn-group" role="group" aria-label="btnActions">
<button type="button" ng-click="act(g)" title="act" data-toggle="modal" data-target="#deleteModal"></button>
</div>
</td>
</tr>
#Modal that will be displayed
<!-- modal1 -->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
confirm delete?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="delete()">Yes</button>
<button type="button" class="btn btn-default" > No</button>
</div>
</div>
</div>
</div>
<!-- modal2 -->
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Data already existed
</div>
</div>
</div>
</div>
Controller
$scope.act = function (g) {
g.studentId;
}
In controller write code
$scope.act = function(g){
/*
write code for check student is in database
*/
if(student_available == true){
$("#modal1").modal('show');
}
else{
$("#modal2").modal('show');
}
}
Related
Bootstrap Modal button save is not working when clicked.Below is my jquery:
$('#add-more-academic').on('click',function(){
$('#myModal').modal();
})
//==================================================
$('.SaveAcademic').on('click',function(){
var academic = $('#new-academic').val();
alert(academic);
Upon clicking Save on my modal an alert dialog should display showing what I have entered in my text box. Below is my modal:
<!-- Modal -->
<div id="myModal" tabindex="-1" aria-hidden="true" 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">Academic Year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic Year">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success SaveAcademic" id="SaveAcademic">Save</button>
</div>
</div>
</div>
</div>
</html>
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 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 -->
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!
I have four grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.
I'm using modals for the first time, so I'm going directly based off the examples in Bootstrap's website. I have the following code being replicated four times with the only difference being the name of the button, the modal title, and the modal body. Can anyone tell me what I need to change in order to have four unique modals in the same page?
<div class="col-md-3">
<div class="head">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Button1</button>
<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-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">First Log</h4>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="mediumSpacer"></div>
</div>
Each modal should have a different id, the data-target for each button should be the id of each modal.
Example:
<div id="myModal1"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
<div id="myModal2"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
Each button should be something like:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Button1</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Button1</button>