Develop Reference

DataTables search on button click instead of typing in input

I would to know if it is possible to move the search function out of an input for a table modified by DataTables. Currently I have a custom input that executes this function:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchNameField').keyup(function () {
oTable.search($(this).val()).draw();
});
})
</script>
the input looks like so:
<label for="searchNameField" class="col col-form-label">Name:</label>
<div class="col-sm-11">
<input type="text" class="form-control ml-0 pl-2" id="searchNameField"
placeholder="Name" autofocus/>
</div>
What I would like to do is move this to a button. What I thought might be possible is the following:
<script>
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($(this).val()).draw();
});
})
</script>
with the button looking like so:
<button id="searchButton" type="button" class="btn btn-sm btn-success" style="width: 150px">
<i class="fa fa-search">
Search
</i>
</button>
however when I click on the button this does not work. In typing this question I have realised that this is probably because when I click the button, it does not know where to get the filter text from to actually filter the table.
Is there a way I can have a button click that references the input, that then goes and filters the table?

You're right, you need to redefine $(this), which now refers to the button, not the search box:
$(document).ready(function() {
var oTable = $('#staffTable').DataTable();
$('#searchButton').click(function () {
oTable.search($("#searchNameField").val()).draw();
});
// EDIT: Capture enter press as well
$("#searchNameField").keypress(function(e) {
// You can use $(this) here, since this once again refers to your text input
if(e.which === 13) {
e.preventDefault(); // Prevent form submit
oTable.search($(this).val()).draw();
}
});
});

get button id on click with fontawesome icons returns undefined

Issue when getting recently clicked button id. Form submit button decorated with fontawesome icons.
Operation:
On body click get button id
Submit form
Concept:
Mouse pointer over button click is working
Issue:
Mouse pointer exactly over button image(example:round arrow icon) click
not working.
Browser Console returning undefined
Any tweaks to make this work? Normally user will attracted by images and they will click over icons only. how fix this?
JSfiddle

Don't use body, only set it to the buttons then.
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
});
});
Working example.
I'm not sure if you want to do more work on the button click. So you could submit the form manually too in the callback. Just change the buttons to type="button" instead of submit and extend the callback:
$(function() {
$('button').on('click', function(e) {
var buttonClicked = $(this).attr('id');
console.log(buttonClicked);
// do your work
// submit the form manually
$("form").submit();
});
});
Working example.

If all you want is the ID of the button that was clicked, why attach the event to the body? I can maybe understand event delegation, but you only have two buttons here. Bind the click handler to both buttons. See http://jsfiddle.net/jvsxo8s0/4/
$(document).ready(function() {
$('button').on('click', function(e) {
target = $(e.target);
buttonclicked = target.attr('id');
console.log(buttonclicked);
e.preventDefault();
});
});

Dont know why you need the id, but you can use the submit() function from jQuery and serialize the form data.
$(function() {
$('#setpolicyform button').on('click', function(e) {
e.preventDefault();
// get button id
var buttonId = $(this).attr('id');
// form data
var formData = $('#setpolicyform').serialize();
console.log(formData);
// check the clicked id
if(buttonId === 'save') {
console.log('save');
} else {
console.log('send');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<form role="form" method="POST" action="#" name="setpolicyform" id="setpolicyform">
<div class='box-body pad'>
<div class="form-group">
<div class="lnbrd">
<textarea class="textarea form-control" placeholder="Enter text ..." name="policyta" style="width: 510px; height: 200px;"></textarea>
</div>
</div>
</div>
<div class="box-footer clearfix">
<button type="button" class="btn btn-danger pull-right" id="save"><i class="fa fa-save"></i> SAVE</button>
<button class="btn btn-success" type="button" id="send"><i class="fa fa-arrow-circle-right fa-lg fa-fw"></i>Send</button>
</div>
</form>
</div>

Use this
$(document).ready(function() {
$('body').on('click', function(e) {
target = $(e.target);
buttonclicked = target.closest("button").attr('id');
console.log(buttonclicked);
});
});
Updated Fiddle is here http://jsfiddle.net/jvsxo8s0/6/

Removing search action when clicked (without action being completed)

I created a search form, which opens a search field when clicked on search-icon.
So I've turned off the search function so the icon is clickable.
var $searchBtn = $search.find('button');
$searchBtn.on('click', function(e) {
e.preventDefault();
});
But now if I return the search function when I've clicked on the search icon
$('.icon-search'.on('click', function(e)
{
$searchBtn.unbind('click');
});
I can't click on the cross anymore to close the searchfield because it has got the search function again.
So my question is:
is it possible to put on my .icon-cross a e.preventDefault(); on click without it completing the searchfunction first?
HTML Code:
<form method="GET" action="search" class="form-inline">
<div class="input-group">
<input type="search" name="query" id="query" class="form-control" placeholder="'Uw zoekopdracht...">
{/if}">
<span class="input-group-btn">
<button class="btn btn-default icon-search" type="submit"></button>
</span>
</div>
</form>

You use the same button to do two things. You options are to use two different buttons and toggle their display. No worrying about what code is attached since they are separate.
You can add one click event that can handle both tasks
$searchBtn.on('click', function(e) {
e.preventDefault();
if ($(this).hasClass("icon-search")) {
//search logic
} else {
//cross logic
}
});
or you can use event delegation to handle the clicks (which is doing the above check under the covers);
$searchBtn.parent()
.on('click', ".icon-search", function(e) {
//search logic
})
.on('click', ".icon-cross", function(e) {
//cross logic
});

Twitter-bootstrap popover does not allow content below to function

I've got a page with 3 Twitter-bootstrap popover buttons that on click display a hidden div with HTML content. I've added an X in the top right corner to close the popover box.
My problem occurs when a popover is opened up and overlays content below it, and then is closed, the content below it i.e. a button that links to another page is no longer accessible and you cannot click it anymore.
In the inspector I can see that the hidden popover, the div with content, is there sitting on top of the button I want to click so I cannot access it.
Curious thing is that when I click the actual popover button to close the popover it is totally gone and I can click the button below but when I click the closing X I cannot.
How can I fix this?
Link to page: (http://bit.ly/1j1AW4i)
Button code:
<button id="popoverBtn1" class="popoverThis btn btn-default" data-placement='bottom'>
Learn More <span class="glyphicon glyphicon-circle-arrow-right"></span>
</button>
<div id="popoverContent1" class="hide">
<strong>Ideal for:</strong> Qualified clients who want to continue having the convenient access to funds that a home equity line of credit provides.
<br /><br />
<strong>What:</strong> Apply for a new Access 3<sup>®</sup> Equity Line and transfer your current balance to the new line. <a target="_blank" href="https://www.suntrust.com/PersonalBanking/Loans/EquityLinesOfCreditAndLoans/EquityLineOfCredit">Learn More</a> about our Access 3<sup>®</sup> Equity Line.
<br /><br />
<strong>Get started:</strong> <a target="_blank" href="https://www.suntrust.com/portal/server.pt?space=Redirect&CommunityID=1805&ui_ProdGroup=IL&ui_ProdSubGroup=EQLN&ui_Product=INETACCX&POPNAC=T">Apply Online</a>, Call <span class="blue">877-748-4059</span>, or stop by your <a target="_blank" href="https://www.suntrust.com/FindUs">local branch</a>.
</div>
Script code:
$('#popoverBtn1').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent1').html(),
});
$('#popoverBtn2').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent2').html(),
});
$('#popoverBtn3').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent3').html(),
});
$('.popoverThis').click(function (e) {
e.stopPropagation();
});
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.popoverThis').popover('hide');
}
});

Here is one option:
$('#popoverBtn1').popover({
html: true,
title: '<a class="close popoverThis">×</a>',
content: $('#popoverContent1').html(),
});
$(document).on('click','.close',function (e) {
$(this).closest('.popover').css('z-index','-1');
$(this).closest('.popover').prev('button').popover('hide');
});
$('button.popoverThis').on('show.bs.popover', function () {
$(this).next('.popover').css('z-index','100');
});
Example:
http://www.bootply.com/106588
Update
use this instead:
$(document).on('click','.close',function (e) {
$(this).closest('.popover').hide();
$(this).closest('.popover').prev('button').popover('hide');
});
http://www.bootply.com/106678

Try changing:
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.popoverThis').popover('hide');
}
});
to:
$(document).click(function (e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.popoverThis').click();
}
});

JSF button with dialog is not rendered

I created this example of JSF button with question dialog:
<!-- hidden button -->
<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountProfileTabGeneralController.saveData}" style="display:none" update="growl">
<f:ajax render="#form" execute="#form"></f:ajax>
</h:commandButton>
<!-- edit button -->
<h:button style="position:absolute; bottom:12px; right:12%;" rendered="#{AccountProfileTabGeneralController.editable}" styleClass="lbimage" value=" Save Account " onclick="editdialog(this, 'Do you want to save the changes?'); return false;" />
I use this JS to display the dialog:
function editdialog(button, a){
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
$("#form\\:deleterow").click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Save Account";
button.disabled = false;
}
}
});
}
But for some reason then I click OK button the button is disabled and it's not working maybe the id of the form is not correct. I use this <h:form id="general">
How I can fix the problem? And also how I can use the code in forms with different id's?

If you have the form's id as "general", the jQuery selector should probably be
$("#general\\:deleterow")
but as you pointed out, you may have different forms, so that selector is very specific.
I would think you'd want something like:
$(button).closest("form").find("[id$=deleterow]").click();
What this does is find the first parent form element of the button that initiated the editDialog function, then find any element inside of that form that has an id that ends with "deleterow". This should work, since the id of that element will be something like "form_id:deleterow".