jQuery contains from input text - javascript

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/

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 if div toggled is already visible

i have a div that i want to toggle on click.If div is already visible i dont want my toggle function be executed. Here is my code and for some reasont it's not working propper.
JsFiddle here
<script>
$( document ).ready(function() {
if ($("#toggled").is(":hidden"))
{
$(".test" ).click(function() {
$("#toggled").toggle();
});
}
else
{
}
});
</script>
A lot of work but finally
$( document ).ready(function() {
var indexs = null;
var bindIt = false;
$("ul .test" ).click(function() {
$("#toggled").show();
if($(this).index() == indexs && bindIt == true){
$("#toggled").hide();
bindIt = false;
}else if(bindIt == false){
indexs = $(this).index();
bindIt = true;
}
});
});
JSFIDDLE
You're overthinking this one. If you just want to show the div when a list item is clicked, the show function is all you need:
$(document).ready(function () {
$(".test").click(function () {
$("#toggled").show();
});
});
Here's the updated jsFiddle.
Try using jQuery's one method:
$( document ).ready(function() {
$(".test" ).one('click', function() {
$("#toggled").show();
});
});

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

Multiple check boxes will not hold the value of checked

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

How to get title attribute from link within a class with javascript

I am trying to pull the title attribute from links within a class and having a bit of trouble:
<div class="menu">
United States
Canada
</div>
And here's what I've tried:
function cselect(){
var countryID = $(this).attr("title");
location.href = location.href.split("#")[0] + "#" +countryID;
location.reload();
}
Thanks!
Pass in this to your inline handler:
function cselect(obj){
var countryID = $(obj).attr("title");
console.log(countryID);
}
United States
Canada
Demo: http://jsfiddle.net/yDW3T/
You must refer to the clicked element. One way is to pass this, as tymeJV suggested.
But I would set the event handler from a separate script block and just refer to the current element. For both of the following two solutions no additional inline onclick attribute is required.
/* using jQuery */
jQuery( '.menu a' ).on( 'click', function( event ) {
event.preventDefault();
var countryID = jQuery( this ).attr( 'title' ); // <-- !!!
location.href = location.href.split( '#' )[0] + '#' + countryID;
location.reload();
} );
or
/* using plain JS */
var countryAnchors = document.querySelectorAll( '.menu a' );
for( var anchor in countryAnchors ) {
anchor.addEventListener( 'click', function( event ) {
event.preventDefault();
var countryID = this.getAttribute( 'title' ); // <-- !!!
location.href = location.href.split( '#' )[0] + '#' + countryID;
location.reload();
}, false );
}
/* todo: cross-browser test for compatibility on querySelectorAll() and addEventListener() */
It just simple like this:
function cselect(){
var countryID = $(this).attr("title");
window.location.hash = countryID
location.reload();
}

Categories