JQuery: tr onblur or any event outside tr border - javascript

How to call function with tr onblur event or how to detect any click-event outside tr border?
Thanks
Html:
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>

Use jQuery.closest to see if the target element is inside a tr or a tr like this:
$(document).click(function(e) {
if($(e.target).closest("tr").length)
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
If you want to just check if the element clicked is a tr or not then use jQuery.is like this:
$(document).click(function(e) {
if($(e.target).is("tr"))
alert("tr was clicked!");
else
alert("no tr was clicked!");
});
Example of the first case:
$(document).click(function(e) {
if ($(e.target).closest("tr").length) // if the length is != 0 (a tr is found)
alert("tr was clicked!");
else // otherwise ...
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>
Example of the second case:
$(document).click(function(e) {
if ($(e.target).is("tr")) // if the target of the click is a tr
alert("tr was clicked!");
else // otherwise
alert("no tr was clicked!");
});
tr {
background: #F99;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr id="tr_0" class="table" onblur="Dict[#i].Canc(#j)">
<td id="frst_0" class="tabl">
<label id="lbl0_0" class="tdLbl0_0">Some name</label>
<input id="inpt0_0" class="tdinpt0" type="text" size="10" hidden onblur="Dict[#i].CheckInput0(#j)" />
</td>
<td id="sec_0" class="tabl" onclick="Dict[#i].EditInput1(#j)">
<label id="lbl1_0" class="tdLbl1">Value</label>
<input id="inpt1_0" class="tdinpt1" type="number" max="99" min="0" style="width: 38px" hidden onblur="Dict[#i].CheckInput1(#j)" onfocus="Dict[#i].ClearInput1(#j)" />
</td>
<td>
<button id="suc_0" class="tdbtn" hidden onclick="Dict[#i].Suc(#j)">Success</button>
<button id="edit_0" class="tdbtn" onclick="Dict[#i].Edit(#j)">Edit</button>
<button id="del_0" class="tdbtn" onclick="Dict[#i].Del(#j)">Delete</button>
<button id="canc_0" class="tdbtn" onclick="Dict[#i].Canc(#j)" hidden>Cancel</button>
</td>
</tr>
</table>

You can bind the click events on the document itself, and check the event.target object, if parents of the event.target don't contain the tr, manually trigger the blur event on tr.
$.fn.bindBlur = function(callback){
this.each(function(){
var that = this;
$(document).on("click", function(e){
if(that.is($(e.target) || that.has($(e.target))){
return callback();
}
});
});
};

Related

Hide and show "other" option with checkbox

I´m trying to make this code work but I don´t know how to do it... When I click on Outro the upper div closes, and when I click Outra in the down one the upper close.
I don´t know what I´m doing wrong because the function has different values and if it´s only one it works.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function() {
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>" /></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e) {
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>

jQuery click on anything but div AND EVERYTHING INSIDE [duplicate]

This question already has answers here:
How do I detect a click outside an element?
(91 answers)
Closed 6 years ago.
I use tis code:
$(document).bind('click', function(e) {
if(!$(e.target).is('#paybox')) {
$('#paybox').hide();
}
});
to hide #paybox when user click anywhere but #paybox.
But when I click on "radio" form:
<div id="paybox">
<table width="100%">
<tr>
<form method="post" action="">
<td>
<input type="radio" name="dauer" value="small" checked>
</td>
<td>
<input type="radio" name="dauer" value="mid">
</td>
<td>
<input type="radio" name="dauer" value="big">
</td>
</form>
</tr>
</table>
</div>
INSIDE the #payboy then #payboy get hidden!
How can I prevent this?
You should check whether or not your click is inside paybox or not. Something like this should work:
$('body').on('click', function(e) {
if($(e.target).closest('#paybox').length === 0) {
$('#paybox').hide();
}
});
So this only hides the #paybox element if the click is neither on paybox nor any node that is within the #paybox element.
You can use closest or parents to check this as below
$(document).bind('click', function(e) {
if(!$(e.target).is('#paybox') && $(e.target).closest('#paybox').length === 0) {
$('#paybox').hide();
}
});
#paybox {
background-color: gray;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="paybox">
<table width="100%">
<tr>
<form method="post" action="">
<td>
<input type="radio" name="dauer" value="small" checked>
</td>
<td>
<input type="radio" name="dauer" value="mid">
</td>
<td>
<input type="radio" name="dauer" value="big">
</td>
</form>
</tr>
</table>
</div>
You could check if the target is a child of your div
// if target is not paybox and is not child of paybox
$(document).bind('click', function(e) {
if(!$(e.target).is('#paybox') && !$(e.target).parents('#paybox').length) {
$('#paybox').hide();
}
});

jQuery display dynamic div by choosing different checkbox

I want to display contact information by choosing different checkbox, like this picture:
Here is my code:
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
$(this).closest('div').css("display", "block");
});
});
.receipt_info{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>
<input type="checkbox" name="receipt[]"/>
</td>
<td>Option1
<div class="receipt_info">
<div>
<label>name1</label>
</div>
<div>
<label>phone1</label>
</div>
<div>
<label>address1</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="receipt[]"/>
</td>
<td>Option2
<div class="receipt_info">
<div>
<label>name2</label>
</div>
<div>
<label>phone2</label>
</div>
<div>
<label>address2</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>
I think I'm selecting wrong div, but I don't know how to fix it.
Through your div and the checkbox are seperated by td you should use jQuerys parents to get the parent tr and from there start searching for the corresponding receipt_info.
Like so:
$(this).parents('tr').find('.receipt_info').show();
I edited your jsfiddle here.
Try this,
You need to first find the parent tr in which the required div is,
$(document).ready(function() {
$('input[type=checkbox]').on('change', function() {
if ($(this).is(':checked')) {
$(this).closest('tr').find('div.receipt_info').css("display", "block");
}
else
{
$(this).closest('tr').find('div.receipt_info').css("display", "none");
}
});
});
Fiddle : https://jsfiddle.net/9n9pfhe5/1/
Use $(this).closest('tr').find('div.receipt_info') selector!
this refers to element on which event is invoked.
jQuery.closest will traverse up in DOMTree and returned matched element.
jQuery.find will find all the child of he current element.
$(document).ready(function() {
$('input[type="checkbox"]').on('change', function() {
$('input[name="' + this.name + '"]').not(this).prop('checked', false);
$('.receipt_info').hide();
$(this).closest('tr').find('div.receipt_info').show();
});
});
.receipt_info {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<td>
<input type="checkbox" name="receipt[]" />
</td>
<td>Option1
<div class="receipt_info">
<div>
<label>name1</label>
</div>
<div>
<label>phone1</label>
</div>
<div>
<label>address1</label>
</div>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="receipt[]" />
</td>
<td>Option2
<div class="receipt_info">
<div>
<label>name2</label>
</div>
<div>
<label>phone2</label>
</div>
<div>
<label>address2</label>
</div>
</div>
</td>
</tr>
</tbody>
</table>

Reset the dynamic form as before

I have a html coding like this:
<form>
<table class="tabelWhiteJenisPembayaran">
<tbody>
<tr>
<td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset">Batal</button>
</form>
and I have a JavaScript coding as below:
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
If the form is clicked will display a new form, for example I click 3 times in the last form, the total form there are 4 form. I'm wondering is how when I click on the "reset" the number of forms that had been there 4 form into 1 form as before. How to reset to 1 form again. Please help.
Try This way
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
$("[type=reset]").click(function(){
$('table.tabelWhiteJenisPembayaran tr:not(:first)').remove();
});
​
Working Demo
I'm not sure if this is what you want. I guess you want to reset all the forms.
$('form').each(function(){
this.reset()
});
you could clone the initial form element and its children and replace the form with the clone when the reset button is clicked.
here is a fiddle http://jsfiddle.net/qZ6nK/
<script type="text/javascript">
var formClone = null;
$(document).ready(function() {
formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
$("table.tabelWhiteJenisPembayaran tbody tr:last").live('click', function(){
var tr = '<tr><td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" autocomplete="off" style="margin-bottom: 5px;" placeholder="Jenis Pembayaran"/></td></tr>';
$("table.tabelWhiteJenisPembayaran tbody").append(tr);
});
});
function onReset(e) {
var parent = $('table.tabelWhiteJenisPembayaran').parents('form').parent();
$('table.tabelWhiteJenisPembayaran').parents('form').remove();
parent.append(formClone);
formClone = $('table.tabelWhiteJenisPembayaran').parents('form').clone();
}
</script>
<form>
<table class="tabelWhiteJenisPembayaran">
<tbody>
<tr>
<td><input type="text" class="whiteJenisPembayaran" name="whiteJenisPembayaran[]" placeholder="Jenis Pembayaran" autocomplete="off" style="margin-bottom: 5px;"/></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit">Simpan</button>
<button class="btn" type="reset" onclick="onReset(event)">Batal</button>
</form>

Add div above textbox without changing position of textbox

I need to add some HTML content (images, labels, etc.) above a table cell that contains a text box. There are going to be at least 10 rows per page with 8 columns in each row. All 8 columns contain a text box.
I've already put together some jQuery that will show and hide this new content area above the table cell, but the CSS is not correct and the input boxes are getting pushed down... The content area that I'm referring to is the DIV being added by the jQuery plugin with the inputbanner class.
CSS
.inputbanner
{
background-color: Orange;
position: absolute;
top: -20px;
display: none;
}
HTML
<tr>
<td class="itemdescr">
SWR: 1123 My Biggest Project
</td>
<td>
<input type="text" maxlength="2" class="timebox" />
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
<td>
<input type="text" maxlength="2" class="timebox"/>
</td>
</tr>
<script language="javascript">
$().ready(function() {
$('.timebox').inputmenu();
});
</script>
jQuery Function
(function($) {
$.fn.inputmenu = function() {
function createInputMenu(node) {
$(node).bind('focus', function() {
$(this).parent().toggleClass('highlight');
$(this).prev('div.inputbanner').toggle();
});
$(node).bind('blur', function() {
$(this).parent().toggleClass('highlight');
$(this).prev('div.inputbanner').toggle();
});
$(node).parent().prepend('<div class="inputbanner"><img src="../../Content/Images/arrow_left_active.gif" />&nbsp<img src="../../Content/Images/arrow_left_inactive.gif" /></div>');
}
return this.each(function() {
createInputMenu(this);
});
}
})(jQuery);

Categories