I am using mbd material design angular7 template. I have a set of tasks that has an edit button each. When i click on the Edit button a modal opens up. I want this modal to have the existing values of the field. I can be done through formControlName. But it is not happening.I click on the edit button and on that click function , i assign the values before opening the edit Modal. However, they don't fill the text boxes in the modal. In console it appears before i click the modal button. Please help
app.component.ts
openEditModal(taskIdValue:number){
console.log("Task Id Value = ", taskIdValue)
for(var i = 0 ; i<this.result.length ; i++){
if(this.result[i].taskId == taskIdValue ){
console.log("this.result[i] = ", this.result[i])
localStorage.setItem('editTaskId',this.result[i].taskId);
localStorage.setItem('editTaskName',this.result[i]. taskName);
}
}
this.editTaskId = localStorage.getItem('editTaskId')
this.editTaskName = localStorage.getItem('editTaskName')
$('#editModal').click();
this.displayEdit = true;
}
editTask(){
console.log("this.result.taskId", )
}
app.component.html
<td>
<button class = "btn btn-primary waves-light"
(click)="openEditModal(data.taskId)">Edit</button>
<button type="button" id = "editModal" style =
"visibility:hidden" class="btn btn-primary waves-light" data-
toggle="modal" data-target="#EditExample"
(click)="centralLarge.show()" mdbWavesEffect>
Edit
</button>
<div mdbModal #centralLarge="mdb-modal" class="modal fade"
id="EditExample" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"
[config]="{backdrop: true, ignoreBackdropClick: false}">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title w-100" id="myModalLabel">Edit
Data</h4>
<button type="button" class="close" data-
dismiss="modal" aria-label="Close" (click)="centralLarge.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" *ngIf = "displayEdit">
<div>
<div>
<form (ngSubmit)="editTask(editTaskForm.value)"
[formGroup]="editTaskForm">
<div class="form-group">
<label>Task Id : </label>
<input type="text" maxlength="100"
class="form-control" placeholder="Enter Task Id "
formControlName="editTaskId"
[formControl]="editTaskForm.controls['editTaskId']"
required>
</div>
<div class="form-group">
<label>Task Name : </label>
<input type="text" maxlength="1000"
class="form-control" placeholder="Enter Task Name "
formControlName='editTaskName'
[formControl]="editTaskForm.controls['editTaskName']"
required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-
secondary btn-sm waves-light" data-dismiss="modal"
(click)="centralLarge.hide()"
mdbWavesEffect>Close</button>
<button type="submit"
[disabled]="!editTaskForm.valid" class="btn btn-primary btn-sm
waves-
light"
(click)="centralLarge.hide()"
mdbWavesEffect>Save </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
You'd better use [(ngModel)] with your object maybe, your typescript code is not clear enough with the way you build editTaskForm, so I suggest to organize the code clearly, and step by step, you will get it working.
Greetz!
you can set the previous value by using this.formGroupname.patchValue({}), For example
this.form.patchValue({ fullname1: this.fullname1, });
Related
I have a function where I add shops. In this function, I can select whether the shop is OPEN or CLOSE. My target is, on my other modal,
when I create a user and selected the shop I created, The status of
the shop whether OPEN or CLOSE will appear on my textbox.
I provided my codes below and my screenshot. Any help will be appreciated
HTML:
<div class="col-md-3 float-left mb-2" >
<button type="button" class=" btn-block btn bbutton text-bold btn-lg" data-toggle="modal" data-target="#accountModal"
data-id="<?php echo $_SESSION['uid']?>" data-user="<?php echo $_SESSION['username']?>"
Edit <?php echo $_SESSION['uid']?>>
Add User
</button>
<div class="modal fade" id="accountModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" style="background-image: linear-gradient(90deg, #00e6ac, #1f9388);">
<h5 class="modal-title text-bold" id="exampleModalLabel">Add Users For shop</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body bg-white">
<form id="createAccount">
<div class="form-group" >
<label>Company</label>
<select class="form-control" name="nameofshop" required>
<option value="">No Selected</option>
<?php
foreach($category as $row):?>
<option value="<?php echo $row->shopName;?>"><?php echo $row->shopName;?></option>
<?php endforeach;?>
</select>
</div>
<div class="form-group">
<label for="exampleInputEmail1">status:</label>
<label class="container">Open
<input type="radio" name="status" value="open">
</label>
<label class="container">Close
<input type="radio" name="status" value="close">
</label>
</div>
</div>
<button type="submit" class="btn btn btn-dark btn-flat float-right" value="">Submit</button>
</form>
</div>
</div>
</div>
</div>
I would listen to any change in the shop input field using javascript. Whenever an option is selected, I would take that option's value (let's say "icecreamshop" for instance), and get the status of that shop from the model. When you finally get that "close" status, you can then insert it manually into the second input field.
An example using jQuery:
let shopField = $('#shop-field');
let statusField = $('#status-field');
shopField.change(() => {
let status = findShopStatus($(this).val());
statusField.val(status);
});
where findShopStatus is a function that gets the status of a shop by its name from the model.
Here's the code of an Angular 4 component used to collect contact information from visitors:
.html:
<form (submit)="onCreateContact()">
<div class="form-group">
<input type="text" [(ngModel)]="contactname" name="contactname" class="form-control form-control-lg" placeholder="Name">
</div>
<div class="form-group">
<input type="email" [(ngModel)]="contactemail" name="contactemail" class="form-control form-control-lg" placeholder="Email">
</div>
<div class="form-group">
<input type="text" [(ngModel)]="contactphone" name="contactphone" class="form-control form-control-lg" placeholder="Phone">
</div>
<input type="submit" class="btn btn-outline-light btn-block" data-toggle="modal" data-target='#addContactModal'>
</form>
<!-- Modal -->
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addContactModalLabel">Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Thanks for contacting us! We will get in touch with you shortly.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
.ts:
onCreateContact() {
let contact = {
contactname: this.contactname,
contactemail: this.contactemail,
contactphone: this.contactphone
}
return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
if(data.success) {
console.log(data);
} else {
console.log('Failed to add contact');
}
}
);
}
All contact fields are required; the data is not passed to the backend if not all fields are filled.
Currently, the Bootstrap modal popups every time I press the submit button, even when the data is not passed. How can I show it only when the data is actually passed to the server?
You are toggling the modal when the user clicks on the submit button.
What you need to do is, toggle the modal from component class(.ts) after getting the response from the backend.
So in your ".ts" file add below line under the imports section
declare var $: any;
Then toggle modal after receiving response from backend as below
onCreateContact() {
return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
if(data.success) {
console.log(data);
$('#addContactModal').modal('show'); // Add this line
} else {
console.log('Failed to add contact');
$('#errorModalId').modal('show'); // If you are planning to show error modal when something goes wrong.
}
});
}
Don't forget to remove data-toggle and data-target attribute from submit button.
Hope this helps.
here is the html file
it contains a model popup with fields name and email id. I need to edit and update them
<tr ng-repeat="item in collection">
<a ng-click=readOne(item.id) data-toggle="modal" data-target="#myModal">Edit</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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="modal-product-title">Edit</h4>
</div>
<div class="modal-body">
<div><b style='color: red'>{{modalstatustext}}</b></div>
<form id="form-dinminder">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input ng-model="name" type="text" class="form-control" id="form-name" placeholder="Name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email ID</label>
<input ng-model="email" type="text" class="form-control" id="form-email" placeholder="Email ID">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct()">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
controller.js
/***********edit************/
$scope.readOne=function(id){
console.log("selected agency id",id)
adminservice.selectedAgency(id).then(function(response){
$scope.aid = response.data[0].id;
$scope.name=response.data[0].name;
$scope.email=response.data[0].webaddress;
//update modal
$('#myModal').modal('show');
},function(error){
$scope.modalstatustext = "Unable to Update data!";
});
}
$scope.updateProduct=function(id){
var Name = $scope.name;
var Email = $scope.email;
service.updateAgency(Name,Email).then(function(response){
//alert(response.data);
$('#myModal').modal('hide');
showAll();//after updating all items are shown
},function(error){
console.log("error in updating ");
});
}
service.js
var updateAgency=function(Name,Email){
return $http({
method: "POST",
url: CONFIG.apiurl + 'edit',
params:{
name:Name,
webaddress:Email
}
});
i have no idea what i have done wrong.
Backend seems to work perfectly.
thanks
Your UpdateProduct function expects a parameter of id,
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct(passidhere)">Save changes</button>
Remove the id parameter from your updateProduct function as this is not used.
I am trying to point my scripts to two different buttons in my html. The scripts both send an email of what the customer entered however both belong to two separate modal forms.
The first form is:
!-- Beginning of Pop-up Device Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-1"></div>
<div class="modal fade" id="modal-1" 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">SpryMobile Device Testing</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Device and Meter Testing" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
The script that I have associated with this modal form is:
<script type="text/javascript">
$(document).ready(function() {
$('#emailForm').on('submit', function(event) {
event.preventDefault();
if( ! $("form")[0].checkValidity() ) {
return false;
}
// Disable the submit button
$('#contactSubmit').attr("disabled", "disabled");
$('#contactSpinner').css('display', 'inline-block');
$.ajax({
type : "POST", cache: false,
url : "#controllers.routes.Application.contactSend()",
data : {
contactName: $("#contactName").val(),
contactEmail: $("#contactEmail").val(),
contactMessage: encodeURIComponent( $("#contactMessage").val() ),
contactType: $("#contactType").val()
},
success : function(msg) {
// Check to see if the mail was successfully sent
if (msg == 'OK_SO_UPDATE') {
$("#messageSuccess").css("display", "block");
}
},
error : function(ob, errStr) {
$("#messageError").css("display", "block");
$("#messageError span.message").text(ob.responseText);
},
complete: function() {
$('#contactSubmit').removeAttr("disabled");
$('#contactSpinner').css('display', 'none');
}
});
return false;
});
});
</script>
This is referencing the scripts by giving the my form an id of "emailForm". However, if I wanted to add a second modal form such as:
<!-- Beginning of Pop-up Professional Form -->
<div class="btn-buy hover-effect" data-toggle="modal" data-target="#modal-2"></div>
<div class="modal fade" id="modal-2" 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">SpryMobile Professional</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<form id="emailForm">
<h4>Name</h4>
<p><input name="contactName" id="contactName" class="form-control" type="text" /></p>
</div>
<div class="col-md-6">
<h4>Email Address</h4>
<p><input class="form-control" required name="contactEmail" id="contactEmail" type="email" /></p>
</div>
<div class="col-md-12">
<h4>Tell us about your operation</h4>
<input type="hidden" value="Professional" id="contactType"/>
<textarea rows="7" cols="20" class="form-control" name="contactMessage" id="contactMessage"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn-u btn-u-default" data-dismiss="modal">Close</button>
<input type="submit" value="Send Message" class="btn-u" id="contactSubmit" name="contactSubmit"> <i id="contactSpinner" class="icon-spinner icon-spin" style="display:none;"></i></button>
<br>
<div class="alert alert-success" id="messageSuccess" style="display:none;">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Thank you!</strong> We appreciate your comments, and will get back to you soon.
</div>
<br>
<div class="alert alert-danger" id="messageError" style="display:none; padding-bottom:35px;">
<button class="close" data-dismiss="alert">x</button>
<div style="float:left;"><strong>Sorry.</strong> There was a problem with the server.</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End of pop-up -->
This references the same script since I gave this form the id of emailForm as well. However, for some reason the alerts that are suppose to appear for the second form are not showing up. Any idea what this could be? Will I need to create a unique script for each form?
Duplicate ID's violate the specifications and are problematic, but here's a way around that to temporarily repair this code.
$(event.target).find("#messageError").css("display", "block");
The FORM tag is also malformed. I moved it up to match the bottom form tag (to after the fourth DIV).
(There are many duplicate ID problems yet unresolved, but the above specifies to the program within the event listener which element to reveal.)
The solution is to use class and name attributes where appropriate.
JSFiddle: http://jsfiddle.net/BloodyKnuckles/s7D98/
I'm just learning about bootstrap..I need help from anyone who know how to send variable value to a modal..
to make it even clearer, I have a table with action column. the action column consist of edit and delete button. if the edit button clicked, then a modal with edit form appear ( I put the modal in the same file with the modal trigger button). my question is, how do I send the ID of the following data to the edit form in the modal???
here is the code of edit(update) data:
<a data-target="#modal-edit-user" data-toggle="modal"> <i class=" glyphicon glyphicon-edit">
and here is the modal code:
<div id="modal-edit-user" class="modal hide fade" 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"><b>Form Edit Data User</b></h4>
</div>
<div class="modal-body">
<form name="tambah_user" method="POST" action="../controller/edit_user.php">
<?php echo $id_user;?>
<div class="controls control-group">
<input class="form-control" type="text" name="nama_user" placeholder=" nama user">
<br><input class="form-control" type="text" name="alamat" placeholder=" alamat user">
<br><input class="form-control" type="text" name="kota" placeholder=" kota">
<br><input class="form-control" type="text" name="no_telp" placeholder=" nomor telepon user">
<br><input class="form-control" type="text" name="username" placeholder=" username login user">
<br><input class="form-control" type="text" name="password" placeholder="password login user">
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Batal</a>
<input type="submit" name="sumbit" value="Simpan" class="btn btn-primary">
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I hope there is someone who can explain me the answer.. thanks a lot :-)
You can do that with Javascript. Just add a click event listener and update the form, when edit button is clicked. Something like this:
$(document).ready(function () {
$('.user-edit').click(function () {
$('span.user-id').text($(this).data('id'));
});
});
Here is a quick fiddle of how you could go about it.