There is a table which contains an user dropdown per row. Needs to prevent of selecting duplicate users of dropdown in the table.
While selecting the duplicate user in the above table as "easy",The js code should keep the first of user dropdowm the rest of duplicate user dropdown wants to remove from table.
HTML
Javascript Code
function checkDuplicateUserId(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($('tbody#data tr select').find('option[value="' + $(this).val() + '"]').size() > 1) {
alert();
}
});
}
function checkAlreadySelected(obj){
checkDuplicateUserId(obj);
var num = parseInt($(obj).attr('num'));
var user_id=$("#"+obj.id+" option:selected").val();
var next_user_id=$("#user_id_"+eval(num+1)+" option:selected").val();
if(user_id && typeof next_user_id == 'undefined'){
var row = updateSrNo(num);
$("#data").append(row);
}
}
As i mentioned in the js code, I have written a function as called as checkDuplicateUserId() to detect the duplicate dropdown from the table, Unfortunately the alert() not prompted while select the duplicate users.
What's the issue of jquery code which i have written wrongly there?
If you have other way to accomplish this, Please say it
Thanks in advance
Try this:
function checkDuplicateUserId(obj){
var user_id=$("#" +obj.id + " option:selected").val();
if( $('tbody#data tr select option:selected').filter( function(){ if( $(this).val() == user_id ) return true; } ).length > 1) {
alert('something');
}
}
You can do something like this:
function checkAlreadySelected(obj){
var user_id=$("#"+obj.id+" option:selected").val();
$('tbody#data tr select').each(function (i, row) {
if ($(this).val()==user_id) {
return false ;
}
});
return true ;
}
Related
You can see the site I am working on here: zelda.wptoolkit.us
Basically, I have a form with checkboxes that lists a bunch of 'ingredients' which are actually WordPress post tags. Users will click the ingredients they want and then it will auto update the 'recipe' posts based on whether the recipes (posts) include these ingredient options (tags).
My question is, how do I store an array of 'checked' boxes, then use this array of post tag slugs to add a class to their corresponding link found in the recipe result card?
Here is a mock up of what I am trying to accomplish:
https://cloudup.com/cNfVNMzePpl
Try this out. I think that's what you're after. Can't really test it but it should work
$(".wpas-checkbox").change(function() {
if(this.checked) {
var val = $(this).val().toLowerCase();
var activeClass = 'active';
$('.myCard a').each(function() {
if(val == $(this).text().toLowerCase()) {
$(this).addClass(activeClass');
}
});
}
});
Problem is that checkbox val not equal a link text for example
value="any-flower" in checkbox but in link text is "Any Flower".
So must select label text of any checkbox:
var label_text = $('---checkboxSelector---').next().html();
and push to your checkedAttr variable
Then in complete function of ajax :
$('.myCard a').each(function() {
var a_text = $(this).text();
for (var i = 0; i < checkedAttr.length; i++) {
if(checkedAttr[i] == a_text ) {
$(this).addClass('activeClass');
}
}
});
Found it! Had to modify Saeeds code, but he is a gentleman and a scholar who I am indebted to now!
<script>
(function($) {
var checkedAttr = [];
$("input.wpas-checkbox[name='tax_post_tag[]']:checked").each(function(){
checkedAttr.push($(this).val().replace(/-/g, " "));
});
console.log(checkedAttr);
$('.myCard a').each(function() {
var a_text = $(this).text().toLowerCase();
for (var i = 0; i < checkedAttr.length; i++) {
if(checkedAttr[i] == a_text ) {
$(this).addClass('activeClass');
}
}
console.log('a_text: ', a_text);
});
})( jQuery );
</script>
I have a table with five input text for filters as showing in this jsfiddle
https://jsfiddle.net/607y6qdx/2/
I want to filter the information in the table whenever there is a text inside one of these filters and when the users clicks enter.
i already simulated the enter click like this:
$(document).ready(function () {
$('#transactionIDFilter, #messageTypeFilter, #timestampFilter, #messageTextFilter, #originFilter, #destinationFilter ')
.keypress(function (e) {
var key = e.which;
if (key == 13) // the enter key code
{
alert('Oh boy');
return false;
}
});
});
but i couldn't filter the rows.
could you help me please. i am new to js
So the logic you need to follow is
Fetch the value of the input field and get the index of the input
field in which user has pressed enter.
Traverse across all the
Pick td of the index fetched from the firt step.
If the typed value exists in the fetched td then show the entire row or else hide the entired row.
Here is the code which may help:
$(
'#transactionIDFilter, #messageTypeFilter, #timestampFilter, #messageTextFilter, #originFilter, #destinationFilter')
.keypress(function (e) {
var key = e.which;
if (key == 13) // the enter key code
{
$val = $(this).val();
$el = $(this).closest("td");
var index = $("td").index($el);
$("tr").not(".fixed").each(function () {
$elinner = $(this).find("td").eq(index);
if ($elinner.html().indexOf($val) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
return false;
}
});
https://jsfiddle.net/607y6qdx/7/
I have a table which has id 'myTable'. Now there is a textbox in which I write down the item name to find whether it exists in the myTable cell or not. To do this I have written the following code -
var retval=0;
var search = $("#searchitem").val().trim();
$("table#myTable tr td").filter(function() {
if($(this).text() == search){retval=1;alert('Same item found');}
else{retval=0;}
});
The problem is that, when it finds the same item in the table cell it shows the alertbox. But the value of my variable retval never changes. It always shows 0. How can I solve it?
I think what you are trying to accomplish could be done by using :contains() selector, like this:
var search = $("#searchitem").val().trim();
var retval = $("table#myTable tr td:contains('"+search+"'") ? 1 : 0;
I haven't tested it but I'm almost sure it works. It's a much more cleaner approach and surely more readable.
jQuery :contains() docs: http://api.jquery.com/contains-selector/
please try return false like this
var retval=0;
var search = $("#searchitem").val().trim();
$("table#myTable tr td").filter(function() {
if($(this).text() == search){
retval=1;
alert('Same item found');
return false;
}else{
retval=0;
}
});
change the variable value only if found , because you assign the variable to 0 at the beginning.
var retval=0;
var search = $("#searchitem").val().trim();
$("table#myTable tr td").filter(function() {
if($(this).text() == search){
retval=1;
alert('Same item found');
}
});
Try this code
var search = $("#searchitem").val().trim();
var filteredData = $("table#myTable tr td").filter(function(element, index)
{
return $(element).text() == search;
});
now this code return array of TD elements which satisfy the condition.
I have made this jsFiddle for searching/filtering the div content which I am getting from an XML response. But I have done it for one text box alone. Any one can help me in implementing for next three?
For example:
If I am typing pd001 it shows the first 2 rows and if I type paste it should reach and filter from the current visible list, not from the whole list.
Kindly help me out on this.
If I'm not wrong then you must be trying to do is that If I search 2 rows based on pd001 and put paste in the next textbox then it should filter only those 2 rows not the entire grid. And the same functionality for all the other textboxes. In fact you need dependencies b/w textboxes.
Try this:
$(".productid").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text0) != -1
}).parent().show();
$(".product:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text1) != -1;
}).parent().show();
$(".quantity:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text2) != -1;
}).parent().show();
$(".amount:visible").filter(function () {
$(this).parent().hide();
return $(this).text().toLowerCase().indexOf(text3) != -1;
}).parent().show();
Demo: http://jsfiddle.net/fbC6w/4/
You are filtering only one column to, it may help you
$("#searchone , #searchtwo ,#searchthree ,#searchfour").bind("keyup", function() {
var map = {
'.productid': $("#searchone").val().toLowerCase(),
'.product': $("#searchtwo").val().toLowerCase(),
'.quantity': $("#searchthree").val().toLowerCase(),
'.amount': $("#searchfour").val().toLowerCase()
};
$('div.new').each(function() {
$(this).hide();
});
$('div.new').each(function() {
var parent_div = this;
$.each(map, function(key, value) {
$(parent_div).find(key).filter(function() {
if ($(this).text().toLowerCase().indexOf(value.toString()) != -1 && value != '') {
$(parent_div).show();
}
});
});
});
});
I am trying to append selected checkbox values to the hidden field.
But I am only successfull in adding only one checkbox value at this time.
Is there anyway to append selected checkbox values in hidden field.
function CheckBox_Clicked(item) {
if (item.checked == true) {
$('#Chkboxvalue').val($(item).val());
}
}
I don't know if I could use jquery append function here.
Thanks
Please use below javascript
function CallOnEachCheckBoxChangeEvent(){
var selectedCheckBoxesValue = '';
$('#DIVID').find("input:checkbox.CheckBoxClassName:checked").each(function (i, selected) {
if (selectedCheckBoxesValue.length == 0) {
selectedCheckBoxesValue += $(selected).val();
}
else {
selectedCheckBoxesValue += ',' + $(selected).val();
}});
//Set the value of hiddenField selected checkboxes value
$(hiddenFieldValueId).val(selectedCheckBoxesValue);
}
$('#Chkboxvalue').val($('#Chkboxvalue').val()+' '+$(item).val());
There is an easier way to do that.
$('input[type="checkbox"]:checked').map(function() {
return $(this).val();
}).get().join();
Demo : http://jsfiddle.net/codef0rmer/EWsMX/