i have a problem with jquery mobile.
here is teh jsfiddle: http://jsfiddle.net/Gc7mR/3/
First i have a Panel with some Buttons, The importan Button is the button with id=define)!
<div data-role=header data-position=fixed>
<div data-role=navbar>
<ul>
<li><a href=#define data-role=button data-icon=edit
data-inline="true" data-rel="popup" id="define"
data-position-to="#map_canvas">Define</a></li>
<li><a href=#compose data-role=button data-icon=gear
data-inline="true" data-rel="popup" data-transition="slidedown"
data-position-to="#map_canvas">Compose</a></li>
<li><a href=#search data-role=button data-icon=search
data-inline="true" id="search">Search</a></li>
</ul>
</div>
</div>
Now i created 3 Popups(one of them is shown below). Further i have a variable called scenario, which can change the states between restaurants,landmarks, and movies. My goal is if the Button with the id 'define' is clicked, the corresponding popup to the actual state of teh scenario variable should be opened(e.g. if scenario="landmarks" the popup with the id landmarks should open).
<div data-role="popup" id="defineLandmarks"
style="width: 600px; height: 750px;">
<div style="padding: 20px;">
<div align="center">
<b>please define options for the landmark scenario</b>
</div>
<div data-role="controlgroup" data-type="horizontal">
<table>
<tr>
<td style="width: 20%;">wiki abstract</td>
<td style="width: 450px;; float: right"><input type="text"
name="wiki_abstract" id="wiki_abstract" value=""
data-clear-btn="false"></td>
</tr>
<tr>
<td style="width: 20%;">wiki text</td>
<td style="width: 450px; float: right"><input type="text"
name="wiki_text" id="wiki_text" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 1</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords1" id="keywords1" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 2</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords2" id="keywords2" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 3</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords3" id="keywords3" value="" data-clear-btn="false">
</td>
</tr>
<tr>
<td style="width: 20%;">keywords 4</td>
<td style="width: 450px; float: right"><input type="text"
name="keywords4" id="keywords4" value="" data-clear-btn="false">
</td>
</tr>
</table>
<form>
<div data-role="controlgroup" data-type="horizontal"
align="center">
Reset Apply
</div>
</form>
</div>
</div>
</div>
I try to open the poup like this but it does not work:
$("#define").click(function() {
var s= getScenario();
if(s=='restaurant'){
$('#defineRestaurants').popup('open');
}
else if(s=='movies'){
$('#defineMovies').popup('open');
}
else if(s=='landmarks'){
$('#defineLandmarks').popup('open');
}else{
alert("Please choose a scenario");
}
});
Look at something like
$(createToggleHandler("#check", "#most", "#most"));
function createToggleHandler(id, target, scroll){
return function(){
$(id).click(createToggleClickHandler(target, scroll));
}
}
function createToggleClickHandler(target, scroll){
return function(){
var x = $(target);
x.toggle(500);
$("html, body").animate({ scrollTop: $(scroll).offset().top }, 1000);
}
}
Related
I have 3 input boxes that trigger the same div that is collapsible
<td>
<input
type="text" name="tbtext1" style="width: 90%;
"data-toggle="collapse" data-target="#exampleModal"
aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style=" width: 85%; position: relative; right: 0.9rem; "
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" />
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 78%; position: relative; right: 2.3rem;"
data-toggle="collapse" data-target="#exampleModal" aria-expanded="false" aria-controls="exampleModal" /><span style="position: relative; right: 1.2rem; ">= $</span>
</td>
<td style="width:20%">
<input type="text" name="tbtext1" style="width: 99%; position: relative; right: 0.8rem; " />
</td>
<div class="collapse" id="exampleModal">
<div class="collapse" id="exampleModal">
<div class="row" style="margin-top:1rem">
<div class="col-md-12">
<h5 class="modal-title" id="exampleModalLabel">Calc phys% using effective age of
<input type="text" id="phys" style="width:3rem" />/Lifespan of <input type="text" id="phys" style="width:3rem" />
</h5>
</div>
</div>
<div class="modal-body">
<table class="innerModalTable" style="width: 100%; text-align: center; border-top: none; margin-left: -1.7rem;">
<tr>
<th class="borderTd " style="text-align:center;border-top:none;border-left:none"> </th>
<th class="borderTd " style="text-align: left; width: 9.3rem; border-top: none; position: relative; left: 2rem;">Physical</th>
<th class="borderTd " style="text-align: center; border-top: none; width: 9rem;">External</th>
<th class="borderTd " style="text-align: center; border-top: none; border-right: none; width: 8rem;">Functional</th>
<th> </th>
</tr>
<tr>
<td class="borderTd ">% of Cost New</td>
<td class="borderTd "><input type="text" style="width:100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
<tr>
<td class="borderTd " style="width: 10.3rem; text-align: left;">Lump Sum</td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td class="borderTd "><input type="text" style="width: 100%" class="noBorderInputFocusOutline" /></td>
<td> </td>
</tr>
</table>
</div>
</div>
currently its working like this when I click into any into any of the input feild the div toggles (collapses)
I want it to work such that when I focus on any of the input fields the div is opened and when I focus out of it the div is closed
Well I found a solution to it using JQuery to achieve this task
$(function () {
console.log('ready')
$('.toggleDepDiv').on('focus', function () {
var x = document.activeElement.classList;
if (x.contains("toggleDepDiv")) {
$('#exampleModal').collapse('show');
}
});
$('.toggleDepDiv').focusout(function (e) {
if (!e.relatedTarget.classList.contains('toggleDepDiv')) {
$('#exampleModal').collapse('hide');
}
});
});
Basically, I collapsed and uncollapse it using focus and focusout event
I wasn't able to catch the active class using
var x = document.activeElement.classList;
So I used relatedTarget
if (!e.relatedTarget.classList.contains('toggleDepDiv'))
on focus out event
I want to search images from the table using its alt attribute and display the whole row using javascript or jquery.
<div class="input-group">
<span class="input-group-addon">Filter</span>
<input id="filter" type="text" class="form-control" placeholder="Search Airline here">
</div>
<table class="customTable">
<thead>
<tr>
<th>Airline</th>
<th>Authorized Laboratories</th>
<th>Duration for PCR before flight</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.timestravel.com/images/airlines/EY.png" alt="etihad" width="174" border="0" style="display:block; margin-left: auto; margin-right: auto; width: 70%;" /></td>
<td>
<ul>
<li>Chughtai Lab</li>
<li>Agha Khan Laboratory</li>
<li>Shaukat Khanum</li>
<li>Dr Essa Labroratory</li>
<li>Islamabad Diagnostic Center</li>
<li>Excel Lab</li>
</ul>
</td>
<td>96 Hours</td>
</tr>
what might be its javascript or jquery?
Try below code.
$("#filter").on("keyup", function() {
var q = $(this).val();
if(q == '') {
$(".customTable").find("tbody tr").removeClass("hidden");
} else {
$(".customTable").find("tbody tr img").each(function() {
if($(this).attr("alt").indexOf(q) == -1) {
$(this).closest('tr').addClass("hidden");
}
});
}
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group"> <span class="input-group-addon">Filter</span>
<input id="filter" type="text" class="form-control" placeholder="Search Airline here">
</div>
<table class="customTable" border="1">
<thead>
<tr>
<th>Airline</th>
<th>Authorized Laboratories</th>
<th>Duration for PCR before flight</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="http://www.timestravel.com/images/airlines/EY.png" alt="etihad" width="174" border="0" style="display:block; margin-left: auto; margin-right: auto; width: 70%;" /></td>
<td>
<ul>
<li>Chughtai Lab</li>
<li>Agha Khan Laboratory</li>
<li>Shaukat Khanum</li>
<li>Dr Essa Labroratory</li>
<li>Islamabad Diagnostic Center</li>
<li>Excel Lab</li>
</ul>
</td>
<td>96 Hours</td>
</tr>
<tr>
<td><img src="http://www.timestravel.com/images/airlines/EY.png" alt="Emirates" width="174" border="0" style="display:block; margin-left: auto; margin-right: auto; width: 70%;" /></td>
<td>
<ul>
<li>Chughtai Lab</li>
<li>Agha Khan Laboratory</li>
<li>Shaukat Khanum</li>
<li>Dr Essa Labroratory</li>
<li>Islamabad Diagnostic Center</li>
<li>Excel Lab</li>
</ul>
</td>
<td>96 Hours</td>
</tr>
</tbody>
</table>
how to make current table row as highlighted if I change any input text or image of that particular table row using Jquery. As code given below which contains two rows, so out of which how to make any of the row as highlighted if I modify input text or change image by keypress event or any other solutions please let me know
<table>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<textarea class="form-control"></textarea>
</td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>
Try this,
$(document).ready(function() {
$('td').on('keydown', function(ev) {
$('tr').css('background-color','');
$(this).closest('tr').css('background-color','red');
});
});
jsFiddle for the same
https://jsfiddle.net/0k8Lu50v/
Try giving styles to tr,
<style>
tr:focus { background: yellow; }
</style>
<table>
<tbody>
<tr>
<td>1</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
<tr>
<td>2</td>
<td><input type="text" class="form-control" ></td>
<td><textarea class="form-control"></textarea></td>
<td>
<div class="browse-chg-img">
<img style="width: 100px; height: 75px;" src="../fileuploads/BulkImgUpload/abc.jpg" />
<div class="overlay">
<div class="text" style="font-size: 10px;">Change Image</div>
</div>
</div>
</td>
<td>
<button type="button" class="btn btn-primary">Save</button>
</td>
</tr>
</tbody>
</table>
I am trying to get the mortgage calculator on the right side of the website to fit in the box (div) that is supposed to be around it. You can see that it is overlapping.
Webpage: http://www.yourwhiteknight.com/properties/
As you can see from the code below, the width of the table is set in the table attribute (width="") and in CSS code but it is not obeying these rules. How can I force this table to be smaller?
Code:
<div class="textwidget">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js" type="text/javascript"></script>
<!-- Javascript function is here but no reference to width -->
<form id="mortgageCalculator">
<table border="0" cellpadding="1" style="background-color: #f4f5ed; width:248px" width="248">
<tbody><tr style="background-color: #496b1f; font-size:11px;">
<td colspan="2" align="CENTER">
<b><font color="white">Mortgage Calculator</font></b>
</td>
</tr>
<tr>
<td colspan="2">
<table border="0" cellpadding="1">
<tbody><tr>
<td colspan="2"><b>Mortgage Data:</b>
</td>
</tr><tr>
<td align="RIGHT">House Price ($):
</td>
<td>
<input type="TEXT" name="price" value="50000" size="8" onchange="UpdatePrincipal(this.form)" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQV
Q4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
</td>
</tr>
<tr>
<td align="RIGHT">Down Pymt ($):</td>
<td>
<input type="TEXT" name="down" value="0" size="8" onchange="UpdatePrincipal(this.form)">
</td>
</tr>
<tr>
<td align="right">Principal ($):</td>
<td>
<input type="text" name="principal" value="50000" size="8" readonly="true" style="background-color: #aaaaaa;">
</td>
</tr>
<tr>
<td align="RIGHT">Annual Int. Rate (%):</td>
<td>
<input type="TEXT" name="interest" value="8.5" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Term (Months):</td>
<td>
<input type="TEXT" name="term" value="120" size="5">
</td>
</tr>
<tr>
<td align="RIGHT">Monthly Pymt:</td>
<td>
<input type="TEXT" name="monthlyPayment" size="5">
</td>
</tr><tr>
<td align="RIGHT">Balloon Pymt:</td>
<td>
<input type="TEXT" name="balloon" size="5">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="CENTER" colspan="2">
<input type="BUTTON" name="cmdCalc" value="Calculate" onclick="calculate(this.form)">
</td>
</tr>
</tbody></table>
</form></div>
The table will only get as small as the content within it. Your text inputs in the calculator are large enough that they're limiting how small the table is. Set a smaller width on those inputs, and it should be all good!
the problem is within the table, with the inputs there. You can add a " width: 100%;" to the inputs and the problem is solved.
You can add the css like this:
#mortgageCalculator input {
width: 100%;
}
This is a part of my JSP code:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;"><%=i++%></td>
<td id="leaveID" class="leavehistory" style="width: 9%;"><%=rs.getString(7)%></td>
<td class="leavehistory" style="width: 12%;"><%=rs.getTimestamp(1)%></td>
<td class="leavehistory" style="width: 10%;"><%=rs.getInt(2)%> days</td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(3)%> - <%=rs.getString(4)%></td>
<td class="leavehistory" style="width: 15%;"><%=rs.getString(5)%></td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<% } %>
This is how 2 rows of the generated HTML output look like:
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">1</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000002</td>
<td class="leavehistory" style="width: 12%;">2012-01-17 19:31:18.0</td>
<td class="leavehistory" style="width: 10%;">2 days</td>
<td class="leavehistory" style="width: 15%;">18/01/2012 - 19/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
<tr style="background-color: #F0F0F0; ">
<td class="leavehistory" style="width: 6%; padding: 7px;">2</td>
<td id="leaveID" class="leavehistory" style="width: 9%;">LE000003</td>
<td class="leavehistory" style="width: 12%;">2012-01-18 03:04:15.0</td>
<td class="leavehistory" style="width: 10%;">1 days</td>
<td class="leavehistory" style="width: 15%;">19/01/2012 - 20/01/2012</td>
<td class="leavehistory" style="width: 15%;">Sick</td>
<td style="width: 30%;"><select>
<option value="0">Pending</option>
<option value="1">Cancel</option>
</select> <input class="button" type="button" name="bttn" onClick="cancelSub();"value="View"/><input class="button" type="button" name="bttnDelete" onClick="cancelSub();"value="Change"/></td>
</tr>
These 2 rows of data are retrieved from database. For each row there is one View and Change button. If I click on the Change button for the LE000001's row, then I will get the value - "LE000001". Then I can use the value to update the status of leave record.
If I click on the Change button for the LE000002's row, then I will get the value - "LE000002". Since there are only 2 rows shown.
It can be as many as possible if the database has more records. Is there any way to get the value?
First of all, your HTML is invalid, because you have several elements with the same leaveID ID.
Now to answer your question, why don't you simply make your JS functions take the ID of the row as argument:
onClick="cancelSub('LE000001');"
and thus to generate it:
onClick="cancelSub('<%= rs.getString(7) %>');"
That said, using scriptlets and accessing JDBC resultsets from a JSP shows a lack of proper MVC architecture. Read How to avoid Java code in JSP files?