Multiple check boxes will not hold the value of checked - javascript

I am populating values into a data table by using a check box group. You check the box and a value shows up in the table. However, I cannot get multiple check boxes to hold their value of 'checked' and not get multiple values to display in the table. Below is my code for the check box. Thanks for the help
<script type="text/javascript">
// - jQuery SHOW/HIDE functions
$(document).ready(function() {
$('#showJobtitles :checkbox').live('click', function() {
var checkboxVal = $('#showJobtitles :checkbox:checked').val();
$('.jobTitleCol_' + checkboxVal).toggle();
$('.jobTitleTD_' + checkboxVal).toggle();
//$( "p" ).toggle( "slow" );
//alert(checkboxVal);
//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
//$('#showJobtitles :checkbox:checked',true).val();
//$('.jobTitleTD').toggle();
return false;
});
});
</script>

first use on
$(document).ready(function() {
$('#showJobtitles').on('click',':checkbox', function() {
// see from here---------------------------------------------------
var chkval=[];
var checkboxVal = $('#showJobtitles :checkbox:checked').find(
function(){
chkval.push($(this).val());
});
alert(chkval.join(","));
//------------------------------------------------
$('.jobTitleCol_' + checkboxVal).toggle();
$('.jobTitleTD_' + checkboxVal).toggle();
//$( "p" ).toggle( "slow" );
//alert(checkboxVal);
//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
//$('#showJobtitles :checkbox:checked',true).val();
//$('.jobTitleTD').toggle();
return false;
});
});

Related

My function is not keeping its variable

I'm trying to keep var values and add several more to it each time I pick a li but the var values resets itself each time.
I'm pretty sure I'm doing something wrong but I can't figure it out.
$( '#drop-down > ul > li' ).on( "click", function() {
if (values === undefined)
{
var values = $( this ).text();
}
else
{
values = values + $( this ).text();
console.log(values);
}
console.log('test' + values);
});
if you define the values var in the function itself, it is only present in the scope of the function. Try to init the "var values" beforehand.

jQuery contains from input text

I have simple jQuery function:
$(document).ready(function() {
$( "#faqsearch" ).keyup(function() {
var xyz = $( '#faqsearch' ).val();
$(".faqtitle:contains(xyz)").css("background","yellow");
});
});
Why I cannot get variable (in contains) from xyz?
you are passing the literal string of "xyz" instead of the variable xyz...
try changing it to:
$(document).ready(function() {
$( "#faqsearch" ).keyup(function() {
var xyz = $( '#faqsearch' ).val();
$(".faqtitle:contains(" + xyz + ")").css("background","yellow");
});
});
You can take advantage of the .filter() function:
$(document).ready(function() {
$( "#faqsearch" ).keyup(function() {
// If empty, clear backgrounds and stop
if(!$(this).val()) {
$(".faqtitle").css("background","none");
return false;
}
// Get string
var xyz = $(this).val();
$(".faqtitle")
.css("background","none") // Clear backgrounds
.filter(function() { // Filter for elements that contain xyz
return $(this).text().toLowerCase().indexOf(xyz) >= 0
}).css("background","yellow"); // Set background
});
});
See fiddle here: http://jsfiddle.net/teddyrised/9v8y7nvf/1/

How to load a url and check the event of clicking of link?

I am trying to load a url then check for a particular text of anchor and now I want to set an event of clicking of that anchar tag.How can I do it?So far my code:
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{
alert($(this).text());}
});
P.S: I am trying to do this in a chrome Extension.
UPDATED CODE:
chrome.tabs.onActivated.addListener( function(activeInfo){
chrome.tabs.get(activeInfo.tabId, function(tab){
y = tab.url;
$.get(y, function(data) {
console.log(data);
$(data).find('a').each(function() {
console.log($(this).text());
if($(this).text().indexOf("Full Text as PDF")>=0)
{ alert($(this).text());
$(this).on("click", function()
{ console.log("link clicked");
alert("link clicked");
});
}
});
});
});
});
a small implementation is:
$.get(y, function(data) {
$("#mydiv").html(data);
$("#mydiv").find('a').each(function(){
$(this).on("click",function(e){
e.preventDefault();
alert($(this).html());
});
});
});
http://jsfiddle.net/vzg6q/
Assuming that I am understanding correctly what you are asking, you want to bind a click event to all anchor tags with a certain text. If so, then something along these lines should work:
Tested and working. http://jsfiddle.net/rvrF8/8/
$.get( y, function( data )
{
$( data ).find('a').each(function ()
{
var theText = $( this ).text( );
var desiredText = 'abc';
if ( theText == desiredText )
{
$( this ).on('click', function ( )
{
event.preventDefault( );
alert( $( this ).text() );
});
}
});
});
$(this).live('click', function(event){
// do something
});

Variable does not work with alsoResize: for colSelect

I got this code, which works fine, until I change '.1' too colselect. I guess its because it gets the value too late and when I want to use colselect it haven't registered. Does anyone have any ideas on how to solve this?
$(document).ready(function() {
var colSelect;
$('.test2').mousedown( function(){
colSelect = '.' + $(this).attr('id');
});
$( '#1' ).resizable(
{handles:'e'},
{alsoResize: '.1'} // <- here I would like too change '.1' to colselect
);
});
Updated:
$(document).ready(function() {
var colSelect;
$('#one').on('mouseover' ,mousedwn);
function mousedwn(){
colSelect = '.' + $(this).attr('id');
resize(colSelect);
}
$('#one').on('mouseout' ,function(){
$('#one').off('mouseover' ,mousedwn); //prevent memory leaks
});
});
function resize(para){
$( '#1' ).resizable(
{handles:'e'},
{alsoResize: para}
);
}
Working Fiddle

Setting variable on Click and pass it to another function

I am getting a variable of the id of a div like this:
var value = $(this).attr('id').replace("-", "");
My html looks like this:
<li id="item-1">1</li>
<li id="item-2">2</li>
<li id="item-3">3</li>
So I get item1, item2 and item3 accordingly.
Now when I press the click and set the value to the ID, a dialog opens. Inside the dialog theres an input and an okay button. When the okay is pressed I want to get that variable again.
So how can I pass the variable OR how can I let know the dialog that I'm talking for that id.
Here is an example:
$("#bxs li").click(function() {
var value = $(this).attr('id').replace("-", "");
$( "#dialog" ).dialog( "open" );
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function() {
// value is the variable from the previous function
localStorage.setItem( value , "test");
$( "#dialog" ).dialog( "close" );return false;
});
jQuery data:
$("#bxs li").click(function () {
var value = $(this).attr('id').replace("-", "");
$("#dialog").data("clickedfrom", value ).dialog("open");
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function () {
var $dialog = $("#dialog");
// value is the variable from the previous function
localStorage.setItem( $dialog.data( "clickedfrom" ), "test");
$dialog.dialog("close");
return false;
});
Scoped variable:
(function(){
var value;
$("#bxs li").click(function () {
value = $(this).attr('id').replace("-", "");
$("#dialog").dialog("open");
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function () {
// value is the variable from the previous function
localStorage.setItem( value, "test");
$("#dialog").dialog("close");
return false;
});
})()
Declare value outside the scope of the click handler so that you can access it from other code blocks.
var value;
$("#bxs li").click(function() {
value = $(this).attr('id').replace("-", "");
$( "#dialog" ).dialog( "open" );
return false;
});
$(".okaybtn").click(function() {
// value is the variable from the previous function
localStorage.setItem( value , "test");
$( "#dialog" ).dialog( "close" );
return false;
});
1.You can store it as global variable - not recommended
2.You can store chosen variable value in hidden input
3.You can sent id value as argument to dialog function.
I'm not exactly sure what you're after, but it should work if you declare value outside of the two functions as it will give the variable a global scope that is accessible to both functions.
var value;
$("#bxs li").click(function() {
value = $(this).attr('id').replace("-", "");
$( "#dialog" ).dialog( "open" );
return false;
});
// Okay button from the dialog.
$(".okaybtn").click(function() {
// value is the variable from the previous function
localStorage.setItem( value , "test");
$( "#dialog" ).dialog( "close" );return false;
});
For handling the form input in jQuery UI dialog, you can use the buttons option.
$( "#dialog" ).dialog({
buttons: {
"Ok": function() {
value = $('#dialoginputfield').val();
$(this).dialog("close");
}
}
});

Categories