DataTables search on button click instead of typing in input - javascript

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();
}
});
});

Related

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
});

How to check whether link button is disabled or not

After rendering code in browser the anchor tag is generated as
<a onclick="alert();" id="ctl00_RightContent_lnkSaveTop" title="Select Mail then Click to Send..." class="btn btn-u" data-rel="tooltip" data-container="body" data-toggle="popover" data-placement="top" data-content="Select Mail then Click to Send..." href="javascript:__doPostBack('ctl00$RightContent$lnkSaveTop','')" style="float: right" data-original-title="Send Email" disabled="disabled">
Send Mail
</a>
I have written jquery as below lines of code
$(document).ready(function () {
$('#<%= lnkSaveTop.ClientID%>').click(function () {
if ($(this).is(':disabled')) {
alert('No need to click, it\'s disabled.');
}
});
});
Basically I want that if disabled button is clicked, then the tooltip should be displayed.
Try:
if ($(this).attr('disabled') === "disabled") {
alert('No need to click, it\'s disabled.');
}
if you intend to use readonly attribute, it's the same, replace 'disabled' with 'readonly '
What you can do is have a custom data attribute on your input button which is a blank string. Then when the mouse enters the button you remove the title and place it inside of your empty data attribute and remove title, this will stop the tooltip from appearing. You then listen for the click even on the input and then move copy the text from the data attribute to the title and that should do the trick
Here is my jsFiddle : https://jsfiddle.net/44vof888/
jQuery
$(function () {
$('input').mouseenter(function () {
$(this).data('title', this.title)
this.title = '';
});
$('input').on('click', function () {
this.title = $(this).data('title');
});
});
html
<input type="button" data-title="" value="Hello" title="Half an update" readonly="readonly"></input>

Counting number of elements in Jquery

I am making some template that i will add to my page
I have some input with some number, what i need is when i click on button ADD to add new element to page, and on DELETE to remove that element, here is my code
HTML
<div class="container">
<div class="row box template">
<label class="input box" for="foldername">
<span class="icon-prepend input-index-number">1</span>
<input type="text" class="input-folder-name" placeholder="Please article" />
<button class="btn btn-no-borders button-remove" type="button">
Delete
</button>
</label>
</div>
<div class="row box">
<label class="input" for="foldername">
<span class="icon-prepend input-index-number">1</span>
<input type="text" class="input-folder-name" placeholder="Please enter article" />
</label>
</div>
<div class="row">
<button type="button" class="btn btn-primary button-add">Add article</button>
</div>
</div>
JS
$(document).on("click", ".button-add", function () {
var lastbox = $('.box').length;
var indexNumber = lastbox - 1;
$('.template label span').text(indexNumber);
$('.template').clone()
.show()
.removeClass("template")
.insertBefore('.row:last');
}).on("click", ".button-remove", function () {
$(this).closest('.row').remove();
});
Here is working fiddle
http://jsfiddle.net/52VtD/9531/
What i need is the next, on default in class input-index-number there is some number, when i add new element i want to get that number and add new counted number in that filed.Example if there is in default number 2 next added element must have 3 etc. But also, i have problem when i remove some number i must also reindex all other numbers, like is there 1, 2, 3, 4. When i remove 3, number 4 must become 3 etc. Please take a look at my fiddle what i have for now, and you will see what i need
Just write a function to update the indexes correctly, and call it after you add or delete a row.
Full code:
$(document).on("click", ".button-add", function () {
var lastbox = $('.box').length;
$('.template').clone()
.show()
.removeClass("template")
.insertBefore('.row:last');
updateIndexes();
}).on("click", ".button-remove", function () {
$(this).closest('.row').remove();
updateIndexes();
});
function updateIndexes() {
$('.input-index-number:visible').each(function (index) {
$(this).text(index + 1);
});
}
Forked jsFiddle
You could create a helper method that reindexes the boxes and then call that whenever you add or remove a box.
var reindex = function() {
$('.row.box:not(.template)').each(function(i) {
$(this).find('.input-index-number').text(i + 1);
});
}
It seems like it would be a little more work for the computer when adding a box, but it seems simpler and less error-prone.
$(document).on("click", ".button-add", function () {
var lastbox = $('.box').length;
var t = $('.template').clone()
.removeClass("template")
.insertBefore('.row:last');
$(".input-index-number",t).html($(".input-index-number").length-1);
}).on("click", ".button-remove", function () {
$(this).closest('.row').remove();
$(".input-index-number").each(function(i)
{
$(this).html(i);
});
});
Although you could do away with all those duplicate template divs
http://jsfiddle.net/52VtD/9532/

Change closest input val?

I have an instance where my datepickers won't work by button click, so I figure find the closest input and .click() or .focus() (for it's datepicker, since the same field is to be affected). For the sake of this demo, from the button/icon click - find the closest input and focus/click on it. If correct, the border will glow blue. http://jsfiddle.net/81tvr0op/
HTML
<table>
<tr>
<th>
<div class="input-group date">
<input type="text" />
<span class="input-group-btn">
<button class="btn default" type="button">
<i class="fa fa-calendar"></i>
Icon
</button>
</span>
</div>
</th>
</tr>
</table>
jQuery
...something like
$(".date > span > button").on('click', function (e) {
e.preventDefault();
$(this).closest("th").find("input:text").click();
});
...right?
If I understand correctly, you are trying to place the cursor into the input box when the user clicks the button.
To do that, you should use .focus() instead of .click().
Working example:
http://jsfiddle.net/81tvr0op/1/
From your jsfiddle, something like this should work.
$("button").on('click', function (e) {
e.preventDefault();
$(this).parent().siblings(0).focus();
});
Or, give your input an id and do something like:
$("button").on('click', function (e) {
e.preventDefault();
$("#dateInput").focus();
});

Categories

Resources