This is the table where I'm getting the list of my ToolRequests.After Clicking the Assign Button I'll be hiding The table and showing another table.
Here is my table addUser where I'm getting all the previous data specific to a particular row. Here how to get a Checkbox having Assets for Given ToolNumber
This is my Html Page.
`
<html>
<head>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
/* padding: 15px 32px; */
text-align: center;
text-decoration: none;
display: inline-block;
/* font-size: 16px;
margin: 4px 2px; */
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
</style>
</head>
<body ng-app="myApp" ng-controller="myController7">
<div class="container-fluid">
<div class="card">
<div class="header">
<h4 class="title">UnassignedTool Requests List</h4>
<p class="category">Details of Requests for Tools</p>
</div>
<div class="content table-responsive table-full-width">
<table class="table table-striped" ng-show="table">
<thead>
<th>Order Number</th>
<th>Customer Request Number</th>
<th>Field Engineer Name</th>
<th>Tool Number</th>
<th>Tool Name</th>
<th>Tool Quantity</th>
<th>Details</th>
<th>Action1</th>
<th>Action2</th>
</thead>
<tbody>
<tr ng-repeat="request in Unassignedrequests">
<td>{{request.orderNumber}}</td>
<td>{{request.customerRequestNo}}</td>
<td>{{request.user.userName}}</td>
<td>{{request.tool.toolNumber}}</td>
<td>{{request.tool.toolName}}</td>
<td>{{request.quantity}}</td>
<td>{{request.details}}</td>
<td><button class="btn btn-info btn-fill btn-wd" ng-click="edit(request)" >Assign</button> </td>
<td><button class="btn btn-info btn-fill btn-wd" ng-click="deleteUser(user.customer_id)" >Reject</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div>
<pre>
<form ng-show="addUser">
<label> ORDER NUMBER </label> <input type="text" ng-model="request.orderNumber"> <br>
<label> CUSTOMER REQUEST NUMBER</label> <input type="text" ng-model="request.customerRequestNo"> <br>
<label> FIELD ENGINEER NAME</label> <input type="text" ng-model="request.user.userName"> <br>
<label> TOOL NUMBER</label> <input type="text" ng-model="request.tool.toolNumber"> <br>
<label> TOOL NAME</label> <input type="text" ng-model="request.tool.toolName"> <br>
<label> QUANTITY</label> <input type="text" ng-model="request.quantity"><br>
<label> DETAILS</label> <input type="text" ng-model="request.details"> <br>
<label> REQUIRED FROM DATE</label> <input type="date" id="myDate">
<!-- <button ng-click="insertUser(user)" ng-show="insert">insert</button> -->
<button ng-click="updateUser(request)" ng-show="edit" > ✎submit</button>
</form>
</pre>
</div>
</body>
</html>
`
This is My Angular Controller
myApp.controller("myController7", function($scope, $http, $state,UnassignedRequests) {
$scope.table=true;
$scope.addUser=false;
UnassignedRequests.getAllUnassignedRequests().then(function(response) {
if (response != undefined) {
$scope.Unassignedrequests = response.data;
}
});
$scope.edit=function(request){
$scope.table=false;
$scope.addUser=true;
$scope.update=true;
$scope.insert=false;
$scope.request=request;
} ; });
This is My Angular Service
myApp.factory('UnassignedRequests',function($http) {
return {
getAllUnassignedRequests : function() {
return $http
.get('/Tool_Management/WareHouseManager/getAllUnassignedRequests',
{
'Content-Type' : 'application/json'
}).then(function(response) {
return response;
});
}
}});
How to get the Assets for Selected ToolNumber
Related
EDITED: the first one was already solved but this is the project that I've been working on the one that i deleted was just a test, anyways the answer on the previous post before i edit this was solved, i applied the same solution but can't seem to be solve the problem. can someone tell me the difference why this won't work compare to the previous one, thanks :).
<!DOCTYPE html>
<html>
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="src/jquery.timepicker.min.css">
<script src="src/jquery.timepicker.min.js"></script>
</head>
<style>
#media print {
.active {
background-color: #ff0000;
}
}
.card-default {
color: #333;
background: linear-gradient(#fff,#ebebeb) repeat scroll 0 0 transparent;
font-weight: 600;
border-radius: 6px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
.signature {
border: 0;
border-bottom: 1px solid #000;
}
.active {
background-color: #ff0000;
}
input {
text-align: center;
}
</style>
<script type="text/javascript">
var total = 0;
var meal_allow_table = document.getElementsByClassName("meal_allow");
var days = [];
$(document).ready(function() {
$("table").find("input").attr("disabled", true);
$('input[name="inlineRadioOptions"]').change(function () {
$("table").find("input").removeAttr("disabled");
if ($('#pay_period_from').prop('checked')) {
$('.first-period').addClass('active');
$('.second-period').removeClass('active');
}else if ($('#pay_period_to').prop('checked')) {
$('.second-period').addClass('active');
$('.first-period').removeClass('active');
}
});
});
function printForm() {
window.print();
}
</script>
<body>
<div class="container">
<div id="accordion">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
<h3>LINA GROUP OF COMPANIES</h3>
</div>
</div>
</div>
<div class="card card-default">
<div class="card-header">
<h4 class="card-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<i class="glyphicon glyphicon-search text-gold"></i>
<b>Meal and Overtime Authorization Form</b>
</a>
</h4>
</div>
<div id=hideDiv>
<form action="index.php" method="POST">
<div id="collapse1" class="collapse show">
<div class="card-body">
<div class="row">
<div class="col-md-3 col-lg-6">
<div class="form-group">
<label class="control-label">Company:</label>
<input id="inputCompany" name="company" type="text" class="form-control" />
</div>
</div>
<div class="col-md-1 col-lg-4">
<!-- <div class="form-group">
<label class="control-label">Dept/Location:</label>
<input type="text" class="form-control" />
</div> -->
</div>
</div>
<div class="row">
<!-- <div class="col-md-2 col-lg-3">
<div class="form-group">
<label class="control-label">City</label>
<input type="text" class="form-control" />
</div>
</div> -->
<div class="col-md-2 col-lg-6">
<div class="form-group">
<label class="control-label">Pay Period:</label>
<div class="row">
<div class="form-check col-lg-2"></div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_from" value="option1">
<label class="form-check-label" for="inlineRadio1">Day 1 - 15 </label>
</div>
<div class="form-check col-lg-5">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="pay_period_to" value="option2">
<label class="form-check-label" for="inlineRadio2">Day 16 - 31 </label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="pull-right">
<button class="btn btn-success btn-lg" type="submit" name="btnSubmit" id="btnSubmit"><i class="fa fa-save"></i> Save</button>
<button class="btn btn-success btn-lg" type="submit" name="btnPrint" id="btnPrint" onclick="printForm()"><i class="fa fa-save"></i> Print</button>
<a class="btn btn-warning btn-lg" href="#" id="btnToTop"><i class="fa fa-arrow-up"></i> Top</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="div">
<table class="table" style="width:100%">
<tr>
<th colspan="2" rowspan="3" style="vertical-align: middle;" >Date</th>
<th colspan="2" style="vertical-align: middle;">OT Field</th>
<th rowspan="3" style="vertical-align: middle;">Purpose of Overtime</th>
<th rowspan="3" style="vertical-align: middle;">OT hours</th>
<th rowspan="3" style="vertical-align: middle;">Meal Allow</th>
<th rowspan="3" style="vertical-align: middle;">Boss</th>
</tr>
<tr>
<th colspan="2">() rarbk & file ()</th>
</tr>
<tr>a
<th style="max-width: 40px">From</th>
<th style="max-width: 40px">To</th>
</tr>
<tr>
<td colspan="2">December</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="width:10%" class="first-period">1</td>
<td style="width: 10%" class="second-period">16</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="first-period">2</th>
<td class="second-period">17</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="timepicker_from" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td class="pot" style="width: 250px; table-layout: fixed; padding: 0">
<input type="textarea" style="width: 100%; height: 50px;">
</td>
<td class="ot" style="width: 100px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
<td style="width: 100px; table-layout: fixed; padding: 0">
<input class="meal_allow" value="0" type="text" style="width: 100%; height: 50px;">
</td>
<td class="boss" style="width: 200px; table-layout: fixed; padding: 0">
<input type="text" style="width: 100%; height: 50px;">
</td>
</tr>
<tr>
<td class="total"><b>TOTAL</b></th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td id="total"></td>
<td></td>
</tr>
</table>
<div style="margin-top: 15px" class="footer">
<p>Note: Pls Encircle corresponding meal allowance and always indicate covered pay period.</p>
</div>
</div>
</div>
</div>
</div>
<input type="text" id="inputMultiDate" class="form-control" placeholder="Pick the multiple dates">
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body>
By default the majority (afaik) of browsers disable backgrounds when printing html. In chrome, after clicking the button and the print dialog appears, click on "more settings" -> "background graphics"
Add a #media rule to the CSS file
#media print {
.print-para {
background-color: #ff0000;
}
}
add this class when printing the clicking the button
$('#btnChange').click(function() {
$('body').addClass('print-para');
window.print();
});
Enable background display in the print preview settings in your browser
Print Preview > More Settings > Background Graphics
I try to change the color of a button if the two checkboxes are checked. But I can't figure out how to do this. I understand that I need javascript, but have no experience at all with javascript.
I copied some lines from internet but this doesnot change the color of the button. So if the checkboxes are checked there should be another style selected for the button.
this is my code sofar:
<!DOCTYPE html>
<html>
<head>
<style>
.button1 {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color: red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
</style>
<script type="text/javascript">
function checkbox_checked {
if (input.getAttribute('type') == 'checkbox' && input.checked)
n++;
checkbox_checked.elements.boxes_checked.value = n;
if n = 2 button.className = "button2";
}
</script>
</head>
<body style="background-color:#E3CEF6;">
<button class="button1">General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;">
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td><label class="container"> <input type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td><label class="container"> <input type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
</body>
</html>
Attach onchange() to the check boxes. Then simply check both check boxes to change the class accordingly. Try the following:
function checkbox_checked(){
var chk = document.querySelectorAll('input[name^=cb_General_]')
if(chk[0].checked && chk[1].checked)
button.className = "button2";
else button.className = "button1";
}
.button1 {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:#E3CEF6;" >
<button id = "button" class="button1" >General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_1"> <span class="checkmark"></span> </label> </td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td><label class="container"> <input onchange= "checkbox_checked()" type="checkbox" name="cb_General_2"> <span class="checkmark"></span> </label></td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
</body>
</html>
You need to set the attribute onchange for the checkbox inputs, and also there are some errors in your javascript code. You can achieve the result like this:
.button1 {
background-color: #FF0000;
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
<script>
var n = 0;
function checkbox_checked(e) {
if(e.checked) {
n++;
}
else {
n--;
}
document.getElementsByTagName("button")[0].className = (n == 2) ? "button2" : "button1";
}
</script>
<button class="button1" >General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
You are right that you need JavaScript but if you do not call the function it will do nothing. However, there is a better way of doing it, called eventListener. This always 'listens' to your code and fires up when something changes.
Event Listener Example
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="checkbox" id="check1">
<input type="checkbox" id="check2">
<button id="button">Watch me change</button>
</div>
</body>
</html>
<script>
document.getElementById("check1").addEventListener("change", function(){
if(document.getElementById("check1").checked && document.getElementById("check2").checked){
document.getElementById("button").style.backgroundColor = "red";
}
});
</script>
Explanation
In the HTML body part there are two checkboxes both with a unique ID (check1 and check2) and a button whose backgroundColor will change if the two checkboxes are checked. Then an eventListener is added to check1 with the addEventListener function. Inside it, it checks that both (&&) checkboxes are checked with the checked attribute. If both are true, it changes the backgroundColor of the given button.
Reference and further reading
Article about the addEventListener function
Try this
var i = 0;
function checkbox_checked(e) {
if(e.checked) {
i++;
}
else {
i--;
}
document.getElementsByTagName("button")[0].className = (i == 2) ? "button2" : "button1";
}
button {
border: 4px;
border-radius: 20px 20px 20px 20px;
border-color:red;
color: yellow;
padding: 15px 25px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button1{
background-color: #FF0000;
}
.button1:hover {
background-color: green;
}
.button2 {
background-color: #FF00FF;
}
<button class="button-css button1" >General</button>
<!-- Insert a table in a div, so this can be hide -->
<div id="General">
<table style="width:50%;margin-left:50px;" >
<colgroup>
<col span="3" style="background-color:#E3CEF6;">
<col style="background-color:yellow">
</colgroup>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_1" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Protocol name(s) : </td>
<td><input type="text" name="Protocol name(s)" size="35"> </td>
</tr>
<tr>
<td>
<label class="container">
<input type="checkbox" name="cb_General_2" onchange="checkbox_checked(this)">
<span class="checkmark"></span>
</label>
</td>
<td>Order name(s):</td>
<td><input type="text" name="Order name(s)" size="35"></td>
</tr>
</table>
</div>
Maybe this one would help you to have an idea. It's just a simple code with html and javascript.
function myFunction() {
var checkBox = document.getElementById("myCheck");
var button = document.getElementById("myButton");
if (checkBox.checked == true){
button.style.backgroundColor = "green";
} else {
button.style.backgroundColor = "red";
}
}
<input id="myCheck" type="checkbox" onclick="myFunction()">Click Me<br>
<button id="myButton" style="background-color: red; color: white">Button</button>
I have a table with data. Above the table I have an add button and when clicking that button a form will display. But what I want is to display that form in a popup window to submit when clicking the add button.
How can I do that?
Below I have attached my screenshot.
My table view code:
<html>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 3px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<body>
<td><input type='button' name='add' class='add_class' value='Add'/></td>
<div id="created"></div>
<?php
$doc = $display['hits']['hits'];
$html = '<table id = "customers" >
<tr>
<th>Id</th>
<th>First_name</th>
<th>Last_name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Password</th>
<th>Status</th>
<th>Createddate</th>
<th>Updateddate</th>
<th>File</th>
<th>Edit</th>
<th>Delete</th>
</tr>';
foreach($doc as $key => $value)
{
$html = $html."<tr>
<td>".$value['_source']['Id']."</td>
<td>".$value['_source']['First_name']."</td>
<td>".$value['_source']['Last_name']."</td>
<td>".$value['_source']['Email']."</td>
<td>".$value['_source']['Phone']."</td>
<td>".$value['_source']['Address']."</td>
<td>".$value['_source']['Password']."</td>
<td>".$value['_source']['Status']."</td>
<td>".$value['_source']['Createddate']."</td>
<td>".$value['_source']['Updateddate']."</td>
<td>".$value['_source']['File']."</td>
<td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
<td><input type='button' name='Delete' id='Delete' value='Delete'/></td>
</tr>";
}
$html = $html."</table>";
echo $html;
?>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$('.add_class').click(function(){
$("#created").toggle();
});
});
</script>
<script>
$(document).ready(function(){
$(".add_class").click(function(e) {
e.preventDefault();
$.ajax({
url : "Crud_controller/Add",
data : '',
dataType: "HTML",
success: function(response) {
var result = $(response).find("body");
$("#created").html(response);
}
}).error(function() { alert("Something went wrong"); });
});
});
</script>
My form code:
<!DOCTYPE html>
<html>
<head>
<title>Add Employee</title>
<style>
label
{
display:inline-block;
width:100px;
margin-bottom:10px;
}
</style>
</head>
<body>
<h1>Add Employee</h1>
<div id="add_div">
<form method="post" id="add_form" action="Crud_controller/add">
<label>ID:</label>
<input type="text" name="Id" /><br/>
<label>First Name:</label>
<input type="text" name="First_name"/><br/>
<label>Last Name:</label>
<input type="text" name="Last_name"/><br/>
<label>Email:</label>
<input type="email" name="Email"/><br/>
<label>Phone:</label>
<input type="text" name="Phone"/><br/>
<label>Address:</label>
<input type="text" name="Address"/><br/>
<label>Password:</label>
<input type="password" name="Password"/><br/>
<label>Status:</label>
<input type="text" name="Status"/><br/>
<label>CreatedDate:</label>
<input type="text" name="Createddate"/><br/>
<label>Updateddate:</label>
<input type="text" name="Updateddate"/><br/><br/>
<label>FileUpload:</label>
<input name="File" type="file" multiple="true"><br/><br/>
<input type="submit" name="submit" class="add" value="Insert"/>
</form>
</div>
</body>
</html>
enter image description here
You need to add a bootsrap modal in your html.
<html>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 3px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 3px;
padding-bottom: 3px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<body>
<td><input type='button' name='add' class='add_class' value='Add' data-toggle="modal" data-target="#myModal"/></td>
<?php
$doc = $display['hits']['hits'];
$html = '<table id = "customers" >
<tr>
<th>Id</th>
<th>First_name</th>
<th>Last_name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Password</th>
<th>Status</th>
<th>Createddate</th>
<th>Updateddate</th>
<th>File</th>
<th>Edit</th>
<th>Delete</th>
</tr>';
foreach($doc as $key => $value)
{
$html = $html."<tr>
<td>".$value['_source']['Id']."</td>
<td>".$value['_source']['First_name']."</td>
<td>".$value['_source']['Last_name']."</td>
<td>".$value['_source']['Email']."</td>
<td>".$value['_source']['Phone']."</td>
<td>".$value['_source']['Address']."</td>
<td>".$value['_source']['Password']."</td>
<td>".$value['_source']['Status']."</td>
<td>".$value['_source']['Createddate']."</td>
<td>".$value['_source']['Updateddate']."</td>
<td>".$value['_source']['File']."</td>
<td><input type='button' name='Edit' id='Edit' value='Edit'/></td>
<td><input type='button' name='Delete' id='Delete' value='Delete'/></td>
</tr>";
}
$html = $html."</table>";
echo $html;
?>
<!-- Modal -->
<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>
<h4 class="modal-title">Add Employee</h4>
</div>
<div class="modal-body" id="created">
<form method="post" id="add_form" action="Crud_controller/add">
<label>ID:</label>
<input type="text" name="Id" /><br/>
<label>First Name:</label>
<input type="text" name="First_name"/><br/>
<label>Last Name:</label>
<input type="text" name="Last_name"/><br/>
<label>Email:</label>
<input type="email" name="Email"/><br/>
<label>Phone:</label>
<input type="text" name="Phone"/><br/>
<label>Address:</label>
<input type="text" name="Address"/><br/>
<label>Password:</label>
<input type="password" name="Password"/><br/>
<label>Status:</label>
<input type="text" name="Status"/><br/>
<label>CreatedDate:</label>
<input type="text" name="Createddate"/><br/>
<label>Updateddate:</label>
<input type="text" name="Updateddate"/><br/><br/>
<label>FileUpload:</label>
<input name="File" type="file" multiple="true"><br/><br/>
<input type="submit" name="submit" class="add" value="Insert"/>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Don't forget to include Bootstrap js and css in your file.No need to send AJAX request to fetch form html.
Basically just use a modal (popup) then move your #add_div inside the modal and also the insert button. Then in your add button just add a event that triggers the modal with your #add_div below is the attached link on how to create and trigger a modal by just using plain javascript.
https://www.w3schools.com/w3css/w3css_modal.asp
I am trying to align tick marks on a horizontal slider that steps by 5 units. I have two issues:
1 - How do I make the slider longer to accommodate the tick marks?
2 - How do I properly align these tick marks directly under the slider, each representing each 5units point on the slider?
Right now, I used a table for the markers because I felt that would push the start marker to the beginning of the slider line - not getting desired output.
Here is my HTML:
<!-- Slider.html-->
<html>
<link rel="stylesheet" type="text/css" href="slider.css">
<head>
<title>Slider</title>
</head>
<body>
<form action="action_page.php" method="get">
Steps:
<input type="range" name="points" min="0" max="40" step="5">
<input type="submit">
</form>
<table>
<td>
<table>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">5</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">10</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">15</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">20</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">25</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">30</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">35</div>
</td>
<td>
<div class="checkpoint">
<div class="tick"></div>
<div class="value">40</div>
</td>
</table>
</td>
</table>
</body>
</html>
Here is my .css:
/*slider.css*/
.checkpoint {
text-align: center;
float: center;
}
.tick {
border-left: 1px solid #454545;
width: 41px;
height: 5px;
display: inline-block;
}
.value {
border-left: 1px;
font-size: 12px;
width: 41px;
height: 5px;
display: below-block;
}
.checkpoint:not(:last-child) {
margin-right: 20px;
}
.style {
left: 56.5px;
position: relative;
}
My output gives me this:
what you could do is use the css property width to change the length of the slider at which point you could then use the margin on the table in order to align the two. if you don't want to have to do a lot of guessing you could use jquery to get those lengths using jquery. to make it easier ive edited your tic marks to be a horizontal line and added some other css to appropriately compensate
$(document).ready(function(){
$('.slider').css('width',$('table').css('width'));
$('.measure').css('margin-left',$('.steps').css('width'));
});
.checkpoint {
text-align: center;
float: center;
}
.tick {
text-align:right;
border:none;
width: 41px;
height: 5px;
display: inline-block;
}
.value {
text-align:center;
border-left: 1px;
font-size: 12px;
width: 41px;
height: 5px;
display: below-block;
}
.checkpoint:not(:last-child) {
margin-right: 20px;
}
.style {
left: 56.5px;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Slider</title>
</head>
<body>
<form action="action_page.php" method="get">
<span class='steps'>Steps:</span>
<input class='slider' type="range" name="points" min="0" max="40" step="5">
<input type="submit">
</form>
<table class='measure'>
<td>
<table>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">5</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">10</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">15</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">20</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">25</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">30</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">35</div>
</td>
<td>
<div class="checkpoint">
<div class="tick">|</div>
<div class="value">40</div>
</td>
</table>
</td>
</table>
</body>
</html>
I've got a webpage that validates as XHTML 1.0 Strict. I'm using YUI3 and I'm using the seed-file-based instantiation. In several places in my javascript code, I'm doing something like:
YUI().use("node", function(Y){
var node = Y.one("#my_element_id");
});
It works great, cross-platform, cross-browser, etc. in almost every case. However, I was testing yesterday, and I came across one time it didn't work. It made no sense to me, the element I was trying to grab was:
<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...
</form>
I know for sure it is well-formed markup, so that's not the issue. If I do:
YUI().use("node", function(Y){
var node1 = Y.one("#component_form");
var node2 = document.getElementById("component_form");
var node3 = Y.one(document.getElementById("component_form"));
});
node1 is null, and node2 is the element I was looking for, and so is node3.
Anyone have a similar experience, or know if this is a YUI3 bug, or what?
Here is a full markup example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
<!-- metadata -->
<title>Inventory Management System</title>
<script type="text/javascript" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script src="./util.js" type="text/javascript"></script>
<style type="text/css">
td{
vertical-align:text-top;
}
legend{
border: 2px #D4D0C8 groove;
padding: 2px;
font-weight: bolder;
}
fieldset{
border: 2px #D4D0C8 groove;
padding-bottom: 12px;
padding-left: 10px;
padding-right: 10px;
}
label{
font-weight: bold;
}
#err_container{
color: red;
display: none;
visibility: hidden;
margin: 10px;
}
#status_container{
color: green;
display: none;
visibility: hidden;
margin: 10px;
}
</style>
</head>
<body>
<div id="canvas">
<form id="st_frm" method="post" action="" style="display:none; visibility: hidden;">
<fieldset style="border:none; margin:0; padding:0;">
<input type="hidden" name="state" id="st" value=""/>
</fieldset>
</form>
<div id="navbar">
home
| components | products
</div>
<h1 id="main_h1">
Update Component
</h1>
<form id="component_form" method="post" action="/inventory/index.php">
<fieldset>
<legend id="component_form_legend">Component Information</legend>
<input type="hidden" id="component_form_id" name="id" value="8"/>
<input type="hidden" name="state" value="1"/>
<table>
<tr>
<td><label for="manufacturer_name_id">Manufacturer:</label></td>
<td><input type="text" id="manufacturer_name_id" name="manufacturer_name" value="Vishay"/></td>
</tr>
<tr>
<td><label for="manufacturer_part_number_id">Part Number:</label></td>
<td><input type="text" id="manufacturer_part_number_id" name="manufacturer_part_number" value="1123114123"/></td>
</tr>
<tr>
<td><label for="ct_id">Component Type:</label></td>
<td>
<select id="ct_id" name="component_type">
<option value="0">New Type</option>
<option value="5" >sfkd</option>
<option value="6" >qwrqew</option>
<option value="7" selected="selected" >Resistor</option>
</select>
<input id="nct_id" type="text" name="new_component_type" size="10" style="visibility:hidden; display: none;" />
</td>
</tr>
<tr>
<td><label for="description_id">Description:</label></td>
<td>
<textarea id="description_id" name="description" rows="3" cols="25">limits the flow of current...</textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input id="component_form_submit_button" type="button" value="Update Component"/>
<span id="component_form_hide_when_new" >
<input id="component_form_delete_button" type="button" value="Delete Component"/>
<input id="component_form_new_button" type="button" value="New Component"/>
</span>
<input id="component_form_delete" name="delete" type="hidden" value="0"/>
</td>
</tr>
<tr>
<td colspan="2">
<div id="error_container"> </div>
<div id="status_container"> </div>
</td>
</tr>
</table>
</fieldset>
</form>
<ul id="component_form_list">
<li>
Vishay 1123114123
</li>
</ul>
</div>
</body>
</html>
EDIT
IE 8 crashes on the var s = ... line because frm is null.
function submitForm(frmId){
YUI().use("node", function(Y){
var frm = Y.one("#" + frmId);
var s = typeof frm.submit;
if(s === 'function'){
frm.submit();
}
});
}
but....
function submitForm(frmId){
YUI().use("node", function(Y){
var frm = Y.one(document.getElementById(frmId));
var s = typeof frm.submit;
if(s === 'function'){
frm.submit();
}
});
}
works in both...
Did you miss one double quote?
<form id="component_form" method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
...