I'm trying to pass values from a table to a modal window, but I'm not getting it
I tried something from jQuery, but I do not know what I might be doing wrong. I'll post the code, which is working, but no changes I made In the attempts.
When you click change, I would like to take the values and move to the dialog.
<c:if test="${fn:length(lista) > 0 }">
<table class="table table-hover">
<tr>
<th >Código</th>
<th>Nome</th>
<th>Descrição</th>
<th>Medida</th>
<th>Fornecedor</th>
<th>Quantidade Mínima</th>
<th>Quantidade Máxima</th>
<th>Estoque</th>
<th>Categoria</th>
<th>Preço</th>
<th></th>
</tr>
<c:forEach items="${lista }" var="mat">
<tr>
<td>${mat.codigo }</td>
<td>${mat.nome }</td>
<td>${mat.descricao }</td>
<td>${mat.medida }</td>
<td>${mat.fornecedor }</td>
<td>${mat.qtd_Min }</td>
<td>${mat.qtd_Max }</td>
<td>${mat.estoque }</td>
<td>${mat.categoria.categoria }</td>
<td>${mat.preco }</td>
<td>Alterar
<a href="remover.html?id_material=${mat.id_material }"class="btn btn-xs btn-danger" >Remover</a>
</td>
</tr>
</c:forEach>
</table>
</c:if>
Panel to change
<div id="DialogAlterarMaterial" class="modal fade"
aria-hidden="true" aria-labelledby="myModalLabel" role="dialog"
tabindex="-1" style="display: none;">
<div class="modal-dialog" style="width: 800px;">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" data-dismiss="modal"
type="button">×</button>
<h4 class="modal-title">Cadastro de Materiais</h4>
</div>
<div class="modal-body" style="min-height: 500px;">
<form action="alterar.html" method="post">
<div class="form-group" style="width: 80px; float: left;margin-top: 0%">
<label for="codigo">Código</label> <input name="codigo"
class="form-control" type="text" value="${mat.codigo }">
</div>
<div class="form-group"
style="width: 300px; float: left; margin-top: 9%; margin-left: -10.5%">
<label for="nome">Nome</label> <input name="nome"
class="form-control" type="text">
</div>
<div class="form-group"
style="width: 430px; float: left; margin-left: 2%; margin-top: 9%;">
<label for="descricao">Descrição</label> <input
name="descricao" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: 0%; margin-top: 0%">
<label for="unimed">Unidade de Medida</label> <input
name="unimed" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 155px; float: left; margin-left: 2%;margin-top: 0%">
<label for="preco">Preço</label> <input name="preco"
class="form-control" type="text">
</div>
<div class="form-group"
style="width: 430px; float: left; margin-left: 2%;margin-top: 0%">
<label for="fornecedor">Fornecedor</label> <input
name="fornecedor" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 0%;">
<label for="qtdMin">Qtd. Mínima</label> <input
name="qtd_Min" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 2%;">
<label for="qtdMax">Qtd. Máxima</label> <input
name="qtd_Max" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 85px; float: left; margin-left: 2%;">
<label for="estoque">Estoque</label> <input
name="estoque" class="form-control" type="text">
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: -38%;margin-top: 10%;">
<label for="categoria">Categoria</label> <select
name="categoria" class="form-control" type="text" onchange='CheckCat(this.value);'>
<option selected disabled hidden>Categoria</option>
<c:forEach items="${cBean.listarCategoria}" var="cat">
<option value="${cat.categoria }">${cat.categoria }</option>
</c:forEach>
</select>
</div>
<div class="form-group"
style="width: 130px; float: left; margin-left: -19%;display: none; margin-top: 10%" id="Outros">
<label for="catOutros">Outros</label> <input name="catOutros"
class="form-control" type="text" >
</div>
<div style="width: 30px; margin-top: 25%;float: right;margin-right: 8%">
<button class="btn btn-primary" type="submit">Cadastar</button>
</div>
</form>
</div>
</div>
</div>
</div>
You can add a click event handler on Alterar.
When click "Alterar" button, use jquery to find data in tds, then set data to modal dialog.
snippet for reference:
var $tds = $(this).parent().siblings();
var codigo = $tds.eq(0).html();
...
Related
I'm creating an application that takes elements from a web page and exports json data.
I'm selecting all parent elements with jQuery and iterating over them. But I need to sort the collection before iterating so that the json exporter has the objects in a specific order and I need to do it based on nested child's input value.
I don't want to change the actual DOM, so my attempt so far has been to convert the jQuery collection to an actual array using toArray() but I'm not sure if that makes any sense. I'm stuck trying to sort the parent elements based on a value from the nested input in this array.
Here is my failed attempt at sorting:
//select all blockWraps
let blockWraps = $('.blockWrap');
beforeSort = blockWraps;
jqueryArray = blockWraps.toArray();
//lets try to sort to storyId order
function getSorted(arrayToSort) {
return arrayToSort.sort(function (a, b) {
console.log();
var aVal = parseInt(a.children[1].children[1].children[0].children[1]),
bVal = parseInt(b.children[1].children[1].children[0].children[1]);
return aVal - bVal;
});
}
afterSort = getSorted(jqueryArray);
My current attempt is pretty terrible, since it's very prone to failure should some elements have a different amount of children.
Next I will paste in a sample element from a single parent element from the jQuery array. Let's say I have six of these kinds of elements in my array. How can I sort the six ".blockWrap" elements in memory (but not in DOM) based on the value of the input of class ".blockid"?
So here's how an entire parent element from the array looks like (there are several of these blockWrap parents in the array, but I didn't want to repeat the code unnecessarily):
<div class="blockWrap characterRoot ui-draggable ui-draggable-handle" style="left: 0px; top: 2px;"><div class="line" data-block1="id0" data-block2="id1" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(54.0234deg); width: 123.068px; top: 210.906px; left: 196.297px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id0" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="1">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" value="FIRST NODE" style="box-sizing: border-box;"></textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div><!-- end contentwrap -->
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 294.969px; left: 145.297px;"><div class="line" data-block1="id1" data-block2="id2" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 218.969px; left: 125.282px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id1" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="2">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: -120.703px;"><div class="line" data-block1="id2" data-block2="id5" data-buttonindextoconnectto="2" style="position: absolute; transform: rotate(4.05637deg); width: 276.991px; top: 223.956px; left: 216px;"></div><div class="line" data-block1="id2" data-block2="id4" data-buttonindextoconnectto="1" style="position: absolute; transform: rotate(14.4028deg); width: 78.7726px; top: 223.812px; left: 184px;"></div><div class="line" data-block1="id2" data-block2="id3" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 218.969px; left: 151.985px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id2" class="block selected">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the question" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1">
Answers: <input class="answerNumber" type="number" min="2" max="9" value="3">
</div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
<div class="blockPlusButton disabled" data-buttonindex="1" data-acceptclicks="false">-</div><div class="blockPlusButton disabled" data-buttonindex="2" data-acceptclicks="false">-</div></div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: -94px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id3" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer0">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div><div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: 138px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id4" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer1">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div><div class="blockWrap ui-draggable ui-draggable-handle" style="top: 225.969px; left: 371px;"><div class="line" data-block1="id5" data-block2="id6" data-buttonindextoconnectto="0" style="position: absolute; transform: rotate(166.449deg); width: 83.6247px; top: 212.969px; left: 122.282px;"></div>
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id5" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="3">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="answer2">answer</option>
</select>
<textarea class="dialogue" placeholder="Type the answer option here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton disabled" data-buttonindex="0" data-acceptclicks="false">-</div>
</div>
</div>
<div class="blockWrap ui-draggable ui-draggable-handle" style="top: 219.969px; left: -123.703px;">
<div class="contentWrap">
<div style="display: flex; align-items:center; justify-content: center;">
<div class="topConnectionSocket">o</div>
</div>
<div id="id6" class="block">
<div style="text-align: left;">
<span style="width: 15%; display:inline-block; text-align: right;">ID:</span><input class="blockid" style="width: 15%; display:inline-block;" readonly="" type="number" value="4">
</div>
<input type="text" class="characterName elementInfoField" placeholder="character name" value="MIKE">
<select name="blockType" class="selectBlockType">
<option value="line">Line</option>
<option value="question">Question</option>
<option value="fight">Fight</option>
</select>
<textarea class="dialogue" placeholder="Type the dialogue here" style="box-sizing: border-box;">CHILD NODE FOR TESTING</textarea>
<div>
<div class="optionsUnderDialogue" style="text-align: right;">
<div class="option1"></div>
<div class="option2"></div>
<div class="option3">
<span style=" text-align: right;">Next:</span><input class="next" style="display:inline-block;" type="number">
</div>
</div>
</div>
</div>
<div class="plusButtonContainer" style="display: flex; align-items: end; justify-content: center;">
<div class="blockPlusButton" data-buttonindex="0" data-acceptclicks="true">+</div>
</div>
</div>
</div></div></div></div></div>
Let me finish by saying that my whole approach to this might be unnecessarily complicated and might very well be missing something obvious.
Since the a and b passed to your sort callback function are DOM elements, you can call methods like querySelector on them.
So instead of trying to find your input by its specific "position" within the descendant structure, you can select it via its class, and then get its value:
a.querySelector('.blockid').value
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'm trying to build a simple inline form using bootstrap 3 and with typeahead functionalities. I'm having 2 issues, and I'm not sure if they are related somehow or not. The issues are as follows:
-- The first issue I'm having is with the size of #orig and #dest fields (1st and 2nd input fields) not fitting automatically to 100% of their grid container parent. It's as if they don't increase in size past 200px. See image: form. I really don't understand what is causing this, as nowhere in my stylesheet file do I mention 200px or any other limiting setting.
-- My second issue is also related to same aforementioned form fields, but the problem now is that when I try to resize the window, the field's ghost background remains with the same 200px in size and makes the forms appear very clumsy and stacked on each other. See image: form. I'm pretty sure this issue is related to typeahead, as when I don't include the link to my javascript file (which contains the typeahead functionality), this issue doesn't happen anymore.
See code below:
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
Any help would be much appreciated :)
Thanks in advance
As I running your code in bootstrap 3 with latest version. It is working fine. Check below snippet:(see in full page preview)
.jumbotron {
color: #ffffff;
padding: 80px 25px 200px;
margin-top: 0px;
}
.form-inline > * {
display: inline-block;
justify-content: center;
}
#date_out, #date_in{
background-color: #ffffff !important;
width:100%;
}
#orig, #dest {
background-color: #ffffff !important;
max-width: 400px;
width: 100%;
}
#field1, #field3, #field2, #field4, #field5, #field6{
padding: 1px;
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="jumbotron text-center" id="main">
<div class="container-fluid">
<div class="row">
<div class="cl-md-12" id="box">
<div class="well well-lg" id="well-form">
<form role="form" class="form-inline" >
<div class="container">
<div class="row">
<div class="col-sm-3" id="field1">
<div class="form-group">
<label class="sr-only" for="orig">Origin city or airport</label>
<input type="text" class="form-control input-lg" placeholder="From" id="orig" name="origin" value="">
</div>
</div>
<div class="col-sm-1" id="field2">
<span class="glyphicon glyphicon-resize-horizontal" id="interchange"> </span>
</div>
<div class="col-sm-3" id="field3">
<div class="form-group">
<label class="sr-only" for="dest">Destination city or airport</label>
<input type="text" class="form-control input-lg" placeholder="To" id="dest" name="destination">
</div>
</div>
<div class="col-sm-2" id="field4">
<div class="form-group">
<label class="sr-only" for="date_out">Date out</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_out" name="departing">
</div>
</div>
<div class="col-sm-2" id="field5">
<div class="form-group">
<label class="sr-only" for="date_in">Date in</label>
<input type="text" class="form-control input-lg" placeholder="--" id="date_in" name="returning">
</div>
</div>
<div class="col-sm-1" id="field6">
<button type="submit" class="btn btn-danger btn-md" id="submit">Search</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
I need to slide down bootstrap glyph icon plus symbol to the bottom of the last child of each parent. How can I do this. Click here JS Fiddle
eg:
Parent has Item 1 and child has item 1.1, item 1.2, item 1.3. When we click on the parent. I need to show glyph icon on the bottom of each child.
HTML
<span id="slidedown">Slide down</span>
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>Nombre</th>
<th>Continente</th>
<th>Capital</th>
<th>Lengua</th>
<th>Habitantes</th>
<th>Moneda</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr><td colspan="0">
<div style="" class="row">
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="name" class="control-label">Nombre</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Nombre del país" id="update-name" name="name" value="France" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="continent" class="control-label">Continente</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Continente donde se encuentra" id="update-continent" name="continent" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="capital" class="control-label">Capital</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Ciudad capital" id="update-capital" name="capital" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="language" class="control-label">Lengua</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Lengua oficial" id="update-language" name="language" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="population" class="control-label">Habitantes</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Número total de habitantes" id="update-population" name="population" value="0" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<div style="" class="col-md-2">
<label for="currency" class="control-label">Moneda</label>
</div>
<div style="" class="col-md-10">
<input class="form-control" autocomplete="off" placeholder="Moneda que se usa" id="update-currency" name="currency" value="" type="text">
</div>
</div>
<div style="" class="form-group col-md-12">
<span class="glyphicon glyphicon-floppy-disk btn btn-success"></span>
<span class="glyphicon glyphicon-ban-circle btn btn-primary"></span>
<input name="update-id" value="1" type="hidden">
</div>
</div>
</td></tr>
</tbody>
</table>
JS
$(document).on('click', '#slidedown', function(event) {
var row = $('.table > tbody').find('tr');
row.find('div.row').hide().slideDown('400');
});
CSS
.just-padding {
padding: 15px;
}
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}
You could do it by adding specific class to your first submenu links, loop through all main menus/links and then add icon to last link in submenu that contains specific class.
Something like this:
$(function() {
$('div[id^="item-"]').each(function() {
$(this).find('.submenu2').last().append('<span id="slidedown" class="glyphicon glyphicon-plus pull-right"></span>');
});
$('.list-group-item').on('click', function() {
$('.glyphicon-chevron-right', this).toggleClass('glyphicon-chevron-down');
});
});
Full code here https://jsfiddle.net/ann7tctp/95/
Try this.. I have changed css for fun..
$(function() {
$('.list-group-item').on('click', function() {
$('.glyphiconRight', this)
.toggleClass('glyphicon-chevron-right')
.toggleClass('glyphicon-chevron-down');
});
$( ".list-group-item:last-child" )
.css({ color:"red", fontSize:"80%" })
.append('<span id="slidedown" class="glyphicon glyphicon-plus pull-right"></span>');
});
I have two modal menus on the same page: for registration and for login. When appears first, second should be disappeared from the page and not overlap the first one. How could I do this using bootstrap or bootstrap & jQuery?
The first menu:
<div id="dialog-sign-in" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Login</h1>
<ul id="socail-media-sign-in" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="https://site.ru/wp-login.php" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkAjaxLogin" id="form_login" autocomplete="off" novalidate="novalidate">
<input type="hidden" id="sign-in-return" name="sign-in-return" value="%2F">
<div class="form-group">
<input class="form-control needed" type="email" name="log" id="login_user_email" placeholder="E-mail" data-rule-required="true" data-rule-email="true" aria-required="true">
</div>
<div class="form-group">
<input class="form-control needed" type="password" name="pwd" id="login_user_password" placeholder="Password" data-rule-required="true" aria-required="true">
</div>
<div class="form-group">
<input type="submit" value="Войти" name="dd" class="btn btn-primary btn-block">
</div>
</form>
<p class="text-center"><a rel="nofollow" href="#dialog-password-reset-toggler" id="dialog-password-reset-toggler" class="text-muted" title="Сбросить забытый пароль"><small>Забыли пароль?</small></a></p>
<p class="text-center"><a rel="nofollow" href="#dialog-sign-up" class="underline" id="dialog-sign-up-toggler">Зарегистрироваться</a></p>
<p class="text-muted text-center" style="margin-bottom: 0;">Говорят, Усейн Болт регистрируется <br>за 4,5 секунды</p>
</div>
</div>
</div>
</div>
The second one:
<div id="dialog-sign-up" class="modal" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width: 320px;">
<div class="modal-content">
<div class="modal-body">
<h1 class="text-center" style="margin-bottom: 25px;">Sign up</h1>
<ul id="socail-media-sign-up" class="social-media social-media-lg social-media-horizontal social-media-save-positions text-center">
<li class="fb">
Facebook
</li>
<li class="vk">
Vkontakte
</li>
<li class="ok last">
Odnoklassniki
</li>
</ul>
<p class="line">or</p>
<form action="/registration" method="post" data-validate="true" data-ajax="true" data-ajax-callback="checkRegistration" id="form_register" novalidate="novalidate">
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-email="true" type="email" name="user_login" id="user_email" placeholder="E-mail" aria-required="true">
</div>
<div class="form-group">
<input class="form-control" data-rule-required="true" data-rule-minlength="6" type="password" name="user_password" id="pass1" placeholder="Password" aria-required="true">
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_firstname" id="first_name" placeholder="First name" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<input class="form-control" data-rule-required="true" type="text" name="user_lastname" id="last_name" placeholder="Last name" aria-required="true">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6" style="padding-right: 5px;">
<div class="form-group">
<input readonly="readonly" class="form-control datetime" data-rule-required="true" data-view-mode="2" type="text" name="user_birthday" id="user_birthday" placeholder="Год рождения" aria-required="true">
</div>
</div>
<div class="col-xs-6" style="padding-left: 5px;">
<div class="form-group">
<div class="select2-container form-control select2" id="s2id_user_sex"> <span class="select2-chosen" id="select2-chosen-1">Sex</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span><label for="s2id_autogen1" class="select2-offscreen"></label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1"><div class="select2-drop select2-display-none"> <div class="select2-search select2-search-hidden select2-offscreen"> <label for="s2id_autogen1_search" class="select2-offscreen"></label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-1" id="s2id_autogen1_search" placeholder=""> </div> <ul class="select2-results" role="listbox" id="select2-results-1"> </ul></div></div><select class="form-control select2 select2-offscreen" data-rule-required="true" data-rule-min="1" data-placeholder="Пол" name="user_sex" id="user_sex" data-minimum-results-for-search="-1" tabindex="-1" title="" aria-required="true">
<option></option>
<option value="1">Male</option>
<option value="2">Female</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="wp-submit" value="Sign up" class="btn btn-primary btn-block" disabled="">
</div>
<p class="text-center" style="margin-bottom: 0;"><a rel="nofollow" href="#dialog-sign-in" class="underline" id="dialog-sign-in-toggler">Login</a></p>
<div style="color: #ccc; padding-top: 10px;" class="text-center">
By signing up you agree with our Terms&Conditions
</div>
</form>
</div>
</div>
</div>
</div>
Update:
I wrote a jQuery snippet for this but it stopped working correctly (has no reaction on clicking).
URL links:
<div onclick="location.href='#dialog-sign-in';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_login.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 15px; padding-top: 12px;">
Login
</div>
</div>
<div onclick="location.href='#dialog-sign-up';" style="background:url('http://example.com/bitrix/templates/main/assets/images/icons/proj_icon_reg.png'); cursor: pointer; margin-top: -8px; float: right; padding-bottom: 10px; border-bottom: 0px solid #b2d109; line-height: 26px; background-position: left; margin-right: 20px; background-repeat: no-repeat; display: inline-block;">
<div style="margin-left: 25px; padding-top: 12px;">
Sign up
</div>
</div>
jQuery code:
<script>
jQuery(function( $ ) {
var $dialogSignIn = jQuery('#dialog-sign-in'),
$dialogSignUp = jQuery('#dialog-sign-up'),
$dialogPasswordReset = jQuery('#dialog-password-reset'),
$dialogSignUpToggler = jQuery('#dialog-sign-up-toggler'),
$dialogSignInToggler = jQuery('#dialog-sign-in-toggler'),
$dialogPasswordResetToggler = jQuery('#dialog-password-reset-toggler');
$dialogSignUpToggler.click(function( event ) {
event.preventDefault();
$dialogSignIn.modal('hide');
$dialogSignUp.modal('show');
});
$dialogSignInToggler.click(function( event ) {
event.preventDefault();
$dialogSignUp.modal('hide');
$dialogSignIn.modal('show');
});
});
</script>
Seems that the code is correct. Why it doesn't work?
$('#dialog-sign-in').modal('hide');
$('#dialog-sign-up').modal('show');
However you need to write a bit o javascript for it to work properly but it basically goes down to this methods.