I have a table like this:
<tbody>
#foreach (Class cs in Model.MyClass)
{
statut = (cs.statut == "yes") ? "enable": "disable";
<tr class="#(cs.statut == "yes" ? "success" : "danger") ">
<td rowspan="2" >#cs.title</td>
<td>#cs.att[0]</td>
<td>#cs.att2[0]</td>
<td rowspan="2">#cs.att3</td>
<td rowspan="2"><button class="btn btn-primary" data-toggle="modal" data-target="#myModal">#(cs.statut == "yes" ? "Désactiver" : "Activer") </button></td>
<td rowspan="2"><button class="btn btn-primary" data-toggle="modal" data-target="#modify">Modifier </button></td>
</tr>
<tr class="#(cs.statut == "yes" ? "success" : "danger") ">
<td>#cs.att[1]</td>
<td>#cs.att2[1]</td>
</tr>
<div class="modal fade bs-example-modal-md" id="modifier" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modify #cd.title</h4>
</div>
<div class="modal-body">
<form class="form">
<div class="">
<label for="groupe" class="col-sm-3 control-label">Groupe</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="groupe" value="#cs.title">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Confirm</button>
</div>
</div>
</div>
</div>
}
</tbody>
I want to do some modification, but I don't know how can I get the actual value of the row?
When I tested modify button, I get the same value for all those bottons and it's for the first row.
Thanks in advance,
Related
Title could be misleading. I do have a button with onclick event that calls a function to dump some values into POST variable. It also toggles a modal which have a form that POSTs to current document. A brewer example looks like this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$_POST = [];
function send_id(var1, var2) {
$_POST['mainpart'] = var1;
$_POST['subpart'] = var2;
console.log($_POST);
};
function evaluate_form() {
alert($_POST['numsales']);
};
function post_test() {
console.log($_POST);
};
})
</script>
</head>
<body>
<!-- Modal -->
<div class="modal fade" id="modal1" 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form1" action="" method="POST">
<div class="form-group">
<label for="address">Address for sale:</label>
<textarea class="form-control" id="address" name="address" rows="6"></textarea>
</div>
<div class="form-group">
<label for="numsales">Number of sales:</label>
<input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
</div>
<div class="form-group">
<label for="quota">Quota:</label>
<input type="number" value="1" class="form-control only-number" id="quota" name="quota">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="evaluate_form()">Save</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Performance Calculation Form</h2>
<div class="tables">
<div id="1">
<form>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="col-md-10" colspan="2">1. Sales</th>
<th class="col-md-2"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-8">a) Sales to a </td>
<td class="col-md-2">
<p class="text-center">20</p>
</td>
<!-- <td class="col-md-2"><input name = "SCI_adedi" type="number" class="form-control" id="usr"></td> -->
<td style="text-align: center">
<div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1" style="position: center;" onclick="send_id('1','a')">Add</button>
</div>
</td>
</tr>
<tr>
<td class="col-md-10" colspan="2">Subtotal </td>
<td class="col-md-2"><input type="text" class="form-control" id="usr"></td>
</tr>
</tbody>
</table>
<button type="submit" id="submit" name="submit" value="KAYDET"> Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
modal part:
<!-- Modal -->
<div class="modal fade" id="modal1" 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">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="form1" action="<?php echo htmlspecialchars($_SERVER[" PHP_SELF "]); ?>" method="POST">
<div class="form-group">
<label for="address">Address for sale:</label>
<textarea class="form-control" id="address" name="address" rows="6"></textarea>
</div>
<div class="form-group">
<label for="numsales">Number of sales:</label>
<input type="number" value="1" class="form-control only-number" id="numsales" name="numsales">
</div>
<div class="form-group">
<label for="quota">Quota:</label>
<input type="number" value="1" class="form-control only-number" id="quota" name="quota">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="evaluate_form()">Save</button>
</form>
</div>
</div>
</div>
</div>
There is an 'Add' button that onclick event fires up send_id(val1,val2) function. I'm trying to dump table name and row with this send_id() function via POST method onto same page (Don't know if I implemented it correctly). This Add button also pops-up the modal. Modal have a form in it and its save button submits form with post into same page (Again not sure if I did it right way). And now I need to take all these variables and manipulate them to execute a SQL query. So I also defined an onclick event to modal save button to read all variables inside POST and write down a query via evaluate_form. Too see if I can access POST array I've used alert($_POST); but it bring nothing.
This may be a bad implementation but what I want to accomplish is;
Save info about which add buttton is clicked. A variable is needed so I can use it when executing SQL statements(Writing into correct table).
A model should pop after clicking add button.
Modal should include a form and it should be submitted via POST into same page.
After modal submission, all of these variables (variable of save info and modal form variables) could be acceessed via a function so SQL statements could be arranged.
Thanks.
I am trying to create new html/css elements inside a jinja loop while within a form , where i am filling data that I brought from a django view. All the normal browser side stuff like pop-up on button clicks is good. But only the last button successfully makes a GET request whereas every button must do. This is my form here :
<form method="GET" action="{% url 'search_results' %}">
{% csrf_token %}
{% for name,quali,field,address,pro,c in data %}
<div class="ser_tile">
<img src={{pro}} id="user_dr" >
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#{{c}}">Visit Page</button>
<button class="btn_tile" id="btn1" data-toggle="modal" data-target="#b{{c}}">Book Appointment</button><br/><br/>
<span >
Name: {{name}}
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span><br/>
Degree: {{quali}}<br/>
Specialist: {{field}}<br/>
Hospital: Pradyumna Bal Memorial Hospital<br/>
Address: {{address}}
</span>
</div><br>
<div class="modal fade" id="{{c}}" tabindex="-1" role="dialog">
<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">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Specialist:</b></td>
<td>
{{field}}
</td>
</tr>
<tr>
<td><b> Ratting:</b></td>
<td>
3
</td>
</tr>
<tr>
<td><b>Available On:</b></td>
<td>
Monday(10:30AM : 5:00PM), Thursday(10:30AM : 1:00PM) , Saturday(10:30AM : 1:00PM)
</td>
</tr>
<tr>
<td><b>Minimum Chagre:</b></td>
<td>
Rs:500/-
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer qq{{c}}">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button class="btn_tile" data-toggle="modal" data-target="#b{{c}}" data-dismiss="modal">Book Appointment</button>
</div>
</div>
</div>
</div>
<script>
$(".btn_tile").click(function(event){
event.preventDefault();
});
</script>
<div class="modal fade" id="b{{c}}" tabindex="-1" role="dialog">
<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">Profile</h4>
</div>
<div class="modal-body">
<center>
<div class="modal_cov"></div>
<img class="modal_ico" src={{pro}}><br/><b>{{name}}</b><br/>Pradyumna Bal Memorial Hospital
<hr/>
</center>
<div>
<table>
<tr>
<td class="td"><b> Date:</b></td>
<td>
<input name="date" class="td_in" type="date">
</td>
</tr>
<tr>
<td ><b> Time:</b></td>
<td>
<input name="time" class="td_in" type="time">
</td>
<td>
<b>Avilable times: </b>
</td>
<td>
1:00PM, 3:00PM
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</div>
</div>
</div>
</div>
<hr/>
{% endfor %}
</form>
This particular button (Confirm Booking) has to generate a GET request but it fails to. The array request.GET() returns None.
here is a screenshot of the popup
You could try inserting the button into a form as below....
<form method="get" action="<YOUR DESIRED ACTION>">
<button type="submit" name="book" value="confirm" class="btn_tile" >Confirm Booking</button>
</form>
hope it helps...
While clicking remove button, I opened the small popup for confirmation to delete the file.In popup I have a delete button, while user clicks the delete button, I passing the document id and index value.
Problem is, while clicking 3rd or any index, it takes the index 0 and 0th index document id.
Html:
<ng-template #tmplt>
<tr *ngFor="let kbase of Colum; let i =index">
<td *ngIf="kbase.DocumentDetails!=null">{{kbase.DocumentDetails.DocName}}</td>
<td *ngIf="kbase.DocumentDetails==null"></td>
<td>{{kbase.ModifiedBy}}</td>
<td>{{kbase.ModifiedDate}}</td>
<td>
<div class="form-group col-md-8">
<select name="select" class="form-control" (change)="status()" [(ngModel)]="kbase.IsStatus">
<option value="true">Active</option>
<option value="false">In Active</option>
</select>
</div>
</td>
<td>
<app-file-upload [documentModel]="kbase.DocumentDetails" [isDeleteRequired]="true" [isMultipleFile]="true" [model]="kbase" (emitterFile)="fileSelect($event,i)"></app-file-upload>
</td>
<td>
<button class="btn btn-danger" type="button" data-toggle="modal" data-target="#exampleModalCenter">Remove</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Delete</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are You Sure,You Want To Delete This Row?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" data-dismiss="modal" (click)="Delete(i,kbase.DocumentDetails.Id)">Delete</button>
</div>
</div>
</div>
</div>
</td>
</tr>
</ng-template>
TS File:
My Method:
Delete(index: number, id: number) {
this.savestatus = false;
if (index != -1) {
this.Colum.splice(index, 1);
if (id != 0) {
this._knowledgebaseService.Delete(id).subscribe(x => {
if (x.Success)
this.deletemessage = true;
this.result = x;
});
}
}
}
I have a delete link , for that I am using bootstrap modal window . Here window appearing fine When I click yes button of window the record should be delete. So I have to call servlet in yes button along with a parameter Id here I am able to call servlet but parameter is not passing. How can I pass parameter to yes button of modal window. Here is code for it.
The bootstrap modal where I am calling,
<td>Edit
</td>
<td> Delete
</td>
in the same jsp page the markup of modal is,
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Delete Teacher Record</h4>
</div>
<div class="modal-body">
<h3>Are you sure?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
<a href="<%=request.getContextPath()%>/controller/TeacherManagementController?flowName=DELETE_TEACHER_INFO&teacherId=${teacherId.getTeacherId()}"
class="btn btn-primary">Yes</a>
</div>
</div>
</div>
</div>
The problem I am facing is the modal is appearing but record is not delete because of not able to pass the teacherId. Please any one help me in this.
I am using like this call function and assign value to hidden fields
Html:
<div id="add_button" >
<a data-toggle="modal" href="#myModal_new" onClick="pop_up('<?php echo $section_value['subject_name']; ?>','<?php echo $section_value['section_id']; ?>')">Add Subjects</a>
</div>
<script>
function pop_up(name,id){
var standard = document.getElementById("standard");
var standard_id = document.getElementById("standard_id");
var standard_id_new = document.getElementById("standard_id_new");
standard.value = name;
standard_id.value = id;
standard_id_new.value = id;
}
</script>
<div id="myModal_new" class="modal hide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Create Sections</h3>
</div><br><br>
<div id="errorContainers">
<p>Please correct the errors and try again:</p>
<ul />
</div>
<div class="modal-body" style="margin-left: 17%;">
<!-- Modal Form Starts Here -->
<form name="modalForm" id="formss" method="post">
<input type="hidden" name="standard" id="standard">
<input type="hidden" name="standard_id" id="standard_id">
<input type="hidden" name="standard_id_new" id="standard_id_new">
<fieldset>
<div class="division_center"><div class="division_left"><label class="form-signin-signup" for="input1">Sections </label> </div>
<div class="division_right">
<input type="text" name="standard_new" id="standard_new"> </div></div>
</fieldset>
<!-- Modal Form Ends Here -->
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" >Close</a>
<input type="submit" name="newsubmit" class="btn btn-primary btn-large" value="Create">
</div>
</form>
</div>
</div>
</div>
I have two bootstrap modal forms on the same html document.
I want to get these forms to work independently, however, form 1 does not
submit and form2 submits the data entered in both forms.
How do I get these forms to work independently without interfering with the actions
of one another?
Here is the HTML:
<!------------------------form1----------------------------------->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="orderLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="registerLabel"><span class="glyphicon glyphicon-info-sign"></span> Register</h4>
</div>
<form id="form1" action="register.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" name="name" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!------------------------form2----------------------------------->
<div class="modal fade" id="buy" tabindex="-1" role="dialog" aria-labelledby="buyLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="panel panel-primary">
<div class="panel-heading">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="panel-title" id="buyLabel"><span class="glyphicon glyphicon-info-sign"></span> Buy</h4>
</div>
<form id="form2" action="buy.php " method="post" accept-charset="utf-8">
<div class="modal-body" style="padding: 5px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 10px;">
<input class="form-control" item="item" placeholder="Name" type="text" required />
</div>
</div>
<div class="panel-footer" style="margin-bottom:-14px;" data-target="form1" >
<input type="submit" class="btn btn-success" value="Send"/>
<!--<span class="glyphicon glyphicon-ok"></span>-->
<input type="reset" class="btn btn-danger" value="Clear" />
<!--<span class="glyphicon glyphicon-remove"></span>-->
<button style="float: right;" type="button" class="btn btn-default btn-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I can't see the forms ending somewhere.
Please close form before starting another so that it will be independent.