[jQuery] Re: Text finder in html
Hmmm ... yes, this is similar to what I need but I can't get your code
to do anything. :(
If I understand the code correctly, you capture the keyup event for a
input text field called 'filter' (which isn't included in the HTML you
posted) and then loop through each td with the 'leadName' class (in
your example there is only one) and compare its contents with that of
the 'filter' field, hiding it if it doesn't match, showing it if it
does, assigning or un-assigning the 'hiddenTR' class (also not
included but I imagine it's just a style visitbility:hidden ...)
So I am basically at the same point with your code that I am with
mine, namely, I think I am doing everything correctly but nothing
happens!
When I iterate over my 'columns' I see that each one is a jQuery
Object with addClass(), append(), and all the other functions. But
when I call them, nothing happens. Similarly with your code, I added a
'filter' input, defined a 'hiddenTR' class, type in the 'filter' text
field, and nothing happens.
I know you said it wasn't 100%, but does it at least do something for
you? If I could get to the point where it at least successfully
executed some jQuery function on each td I could probably get mine
to work.
Thanks for the post!
Bob
On 6 Nov, 22:07, Andy Matthews [EMAIL PROTECTED] wrote:
I wrote something exactly like this for a project. It's not 100% complete,
but you're welcome to it. Maybe it'll help?
// define the table
var $table = $('#leadsTable tbody tr .leadName');
// the on keyDown event handler
$('#filter').keyup(function(){
// get the current value of the text field
var string = $(this).val().toUpperCase();
// loop over each item in $table
$table.each(function(){
// set a string equal to the contents of the cell
var contents = $('a',this).html().toUpperCase();
// check the string against that cell
if ( !contents.match('^' + string) ){
// if what the user typed in doesn't match the cell
then hide that TR.
$(this).parent('tr').attr('class','hiddenTR');
} else {
// if it does match, unhide it
$(this).parent('tr').removeAttr('class','hiddenTR');
}
});
});
// here my HTML
table id=leadsTable
thead
tr
td class=leadNameCustomer Name/td
/tr
/thead
tbody
!-- start: loop --
trtd class=leadName width=100%Customer Name/td/tr
!-- end: loop --
/tbody
/table
-Original Message-
From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of syg6
Sent: Tuesday, November 06, 2007 9:02 AM
To: jQuery (English)
Subject: [jQuery] Text finder in html
I am trying to create a javascript-based text finder using jQuery. I have a
table like this:
table id=dataTable
tr
td
data 1
/td
/tr
tr
td
data 2
/td
/tr
tr
td
data 3
/td
/tr
/table
And I would like to be able to search for a text in any of the tds and
highlight it. I tried something like this:
function find()
{
text = jQuery(#findText).val();
columns = jQuery(table#dataTable td);
for (i=0; icolumns.length; i++)
{
if (columns[i].innerHTML.indexOf(text) != -1)
{
jQuery(columns[i]).addClass(test);
}
}
I have defined the test style like this:
style type=text/css
a.test { font-weight: bold; }
/style
When I run the script it does nothing. Not sure why. I've debugged it.
jQuery(columns[i]) is an [Object] that has all the normal jQuery functions
-- addClass(), append(), etc. but when I call any of them nothing happens.
Can someone tell me what I am doing wrong?
Thanks!
Bob
[jQuery] Text finder in html
I am trying to create a javascript-based text finder using jQuery. I
have a table like this:
table id=dataTable
tr
td
data 1
/td
/tr
tr
td
data 2
/td
/tr
tr
td
data 3
/td
/tr
/table
And I would like to be able to search for a text in any of the tds
and highlight it. I tried something like this:
function find()
{
text = jQuery(#findText).val();
columns = jQuery(table#dataTable td);
for (i=0; icolumns.length; i++)
{
if (columns[i].innerHTML.indexOf(text) != -1)
{
jQuery(columns[i]).addClass(test);
}
}
I have defined the test style like this:
style type=text/css
a.test { font-weight: bold; }
/style
When I run the script it does nothing. Not sure why. I've debugged it.
jQuery(columns[i]) is an [Object] that has all the normal jQuery
functions -- addClass(), append(), etc. but when I call any of them
nothing happens.
Can someone tell me what I am doing wrong?
Thanks!
Bob
[jQuery] Re: multiple selects, hiddens and text inputs with same name
Thanks a million both of you! I saw your responses over the weekend
but was unable to try them out until today, Monday.
It worked like a charm! jQuery rocks! Thanks again!
Bob
On 7 Oct, 10:16, Wizzud [EMAIL PROTECTED] wrote:
NB . to add/change an id:
$('select[name=foo]').each(function(i){
this.id = 'bar'+i;
});
On Oct 6, 2:47 am, rgrwkmn [EMAIL PROTECTED] wrote:
In addition to Wizzud's solution:
Since it seems that you want to be able to access each select with the
name foo individually and change their values individually you could
try something like this:
$('select[name=foo]').each(function(i){
$(this).addClass('foo'+i);
});
This would dynamically add classes foo0, foo1, foo2, etc. to your
selects named foo, meaning you could access each by class name if you
know what order they appear in. Also, make sure to run that script
whenever the contents of your table change so you always have an up to
date list. I assume it would be 'better' to give id's to each one
since they are unique, but unique class names work just as well and
there is no addId method in jQuery.
On Oct 5, 5:59 pm, Wizzud [EMAIL PROTECTED] wrote:
With...
select name='foo'option value='bar1'bar1/option/select
select name='foo'option value='bar2'bar2/option/select
try...
var selects = $('select[name=foo]');
See the Attribute Filters, under Selectors in the API Reference.
(If you have non-unique ids for elements on your page, do not rely on
selecting them by $('#id')!)
syg6-2 wrote:
For reasons I won't go into here I have a page which has a table with
a variable amount of rows. Each row has a hidden, text, and select.
They all have the same name. I also have other selects on the page
with different names.
What I need to do is access only the selects, to be able to add and
remove options. So I need to know how many selects with the name foo
are on the page
I have tried this:
jQuery(select#foo)
which simply returns [Object object]. If I do this:
jQuery(select#foo).length
it returns 0 which is not true. When I load the page I have 2 selects
already. So if I do this:
jQuery(select#foo).text()
it returns white space. And
jQuery(select#foo).val()
returns undefined.
I have also tried stuff like
jQuery(select#foo[0]).val()
but nothing seems to work. Since uses can dynamically add rows to the
table (and with each one a hidden, text input and select) I need to 1)
know how many selects with a given id/name there are and 2) be able to
manipulate the values in each one.
How can I do this?
Thanks!
--
View this message in
context:http://www.nabble.com/multiple-selects%2C-hiddens-and-text-inputs-wit...
Sent from the jQuery General Discussion mailing list archive at
Nabble.com.
[jQuery] multiple selects, hiddens and text inputs with same name
For reasons I won't go into here I have a page which has a table with a variable amount of rows. Each row has a hidden, text, and select. They all have the same name. I also have other selects on the page with different names. What I need to do is access only the selects, to be able to add and remove options. So I need to know how many selects with the name foo are on the page I have tried this: jQuery(select#foo) which simply returns [Object object]. If I do this: jQuery(select#foo).length it returns 0 which is not true. When I load the page I have 2 selects already. So if I do this: jQuery(select#foo).text() it returns white space. And jQuery(select#foo).val() returns undefined. I have also tried stuff like jQuery(select#foo[0]).val() but nothing seems to work. Since uses can dynamically add rows to the table (and with each one a hidden, text input and select) I need to 1) know how many selects with a given id/name there are and 2) be able to manipulate the values in each one. How can I do this? Thanks!
[jQuery] Re: val function for select with 'special character' not working
It was a jQuery version issue. Not sure how old 1.1.2 is but that's
the version I was using. Upgraded to 1.2.1 and all is well.
Thanks!
Bob
On 29 Set, 00:40, Wizzud [EMAIL PROTECTED] wrote:
I can't tell what you're doing wrong - if anything - but the following works
perfectly for me (using v1.2.1)
select id='app.id' name='fred'
option value='11'one/option
option value='22' selected='selected'two/option
/select
var t = $('#app\\.id').val(); // t is 22
syg6-2 wrote:
In the FAQ it says that if you have an element with a 'special
character' in it you must escape it. Fair enough. I have this select:
select id='app.id'
option...
/select
When I try the following:
$(select#app\\.id).val()
I get null. These don't work either:
$(#app\\.id).val()
$(#app.id).val()
$(select#app.id).val()
What am I doing wrong?
Thanks
Bob
--
View this message in
context:http://www.nabble.com/val-function-for-select-with-%27special-charact...
Sent from the JQuery mailing list archive at Nabble.com.
[jQuery] val function for select with 'special character' not working
In the FAQ it says that if you have an element with a 'special character' in it you must escape it. Fair enough. I have this select: select id='app.id' option... /select When I try the following: $(select#app\\.id).val() I get null. These don't work either: $(#app\\.id).val() $(#app.id).val() $(select#app.id).val() What am I doing wrong? Thanks Bob
[jQuery] Re: appfuse: jQuery + scriptaculous + datePicker
I think I fixed it! (With your help of course ...)
This is the way I had it previously:
jQuery.noConflict();
$(function()
{
jQuery('.date-pick').datePicker({clickInput:true});
});
And this is how it should be:
jQuery.noConflict();
jQuery(function()
{
jQuery('.date-pick').datePicker({clickInput:true});
});
In other words, I replaced the '$' before ('.date-pick') with
'jQuery', but not the '$' before 'function()'. Dumb.
Now I just have to get css to work! The calendar appears with *some*
styles it seems, but at the bottom-left-hand corner of the screen! But
I think this is because Appfuse uses SiteMesh to decorate jsps, and if
you want to use custom css you have to mess with it ...
Many thanks!
Bob
On Aug 8, 4:09 pm, Kelvin Luck [EMAIL PROTECTED] wrote:
Because you are using jQuery in noConflict mode you can no longer use $
to create jquery objects. So you need to replace:
$('.date-pick').datePicker({clickInput:true});
with:
jQuery('.date-pick').datePicker({clickInput:true});
Hope that helps,
Kelvin :)
syg6 wrote:
Thank you both, Kelvin and Klaus, for your replies.
Yes, I saw that page and after a quick read decided (incorrectly) it
was above my jQuery pay-grade and that it didn't apply to me. But as
it turns out, if I put the jQuery.noConflict(); line in my page before
calling the datePicker() function, the errors go away. Excellent!
... but my calendar doesn't appear! :( No errors, but no calendar. I
think I have everything configured correctly:
I include the jquery-1.1.2.js, date.js, date_es.js,
jquery.dimensions.js, and datePicker.js libraries
I include the datePicker.css and demo.css style files
I include the snippet of js code that defines the datePicker - $
('.date-pick').datePicker({clickInput:true});
I create an input that has the 'date-picker' style class
And the calendar doesn't appear. There's no link next to the input nor
is the input click-able. What could I be doing wrong?
Many thanks!
Bob
[jQuery] appfuse: jQuery + scriptaculous + datePicker
Hello all. I posted this over at Appfuse's Nabble list as first, but then thought this would be the better place. I have a default.jsp page that uses SiteMesh to 'decorate' all of my jsps. It contains the following js libraries: prototype.js scriptaculous.js global.js In order to use datePicker you need the following js libraries: jquery-1.x.js date.js jquery-dimensions.js jquery-datepicker.js I put those 4 js files in my test.jsp file. But when the test.jsp page is rendered, including all the stuff in default.jsp, Firefox goes berserk. I get thousands of js errors, all in effects.js: this._base has no properties, http://localhost:8080/scripts/effects.js, Line 516 This also happens if I put my jquery.js in default.jsp after scriptaculous.js. However, if I put it before scriptaculous.js I get no errors. But my calendar doesn't work! No errors, just doesn't appear! And if I comment out scriptaculous.js in default.jsp, and leave jquery.js in test.jsp, my calendar works. Oddly enough, the calendar appears in the bottom left corner of the screen and without any styles. It seems it's not grabbing either the datepicker.css or demo.css it needs, I don't know. Anyone ever used datePicker, or more generally, scriptaculous + jquery? It seems that the order you put them in your page is important. It seems like if you put jquery after scriptaculous it goes into a loop, when jquery's constructor is called, and never exits. Thanks! Bob
[jQuery] Re: appfuse: jQuery + scriptaculous + datePicker
Thank you both, Kelvin and Klaus, for your replies.
Yes, I saw that page and after a quick read decided (incorrectly) it
was above my jQuery pay-grade and that it didn't apply to me. But as
it turns out, if I put the jQuery.noConflict(); line in my page before
calling the datePicker() function, the errors go away. Excellent!
... but my calendar doesn't appear! :( No errors, but no calendar. I
think I have everything configured correctly:
I include the jquery-1.1.2.js, date.js, date_es.js,
jquery.dimensions.js, and datePicker.js libraries
I include the datePicker.css and demo.css style files
I include the snippet of js code that defines the datePicker - $
('.date-pick').datePicker({clickInput:true});
I create an input that has the 'date-picker' style class
And the calendar doesn't appear. There's no link next to the input nor
is the input click-able. What could I be doing wrong?
Many thanks!
Bob
On Aug 8, 1:13 pm, Klaus Hartl [EMAIL PROTECTED] wrote:
syg6 wrote:
Hello all.
I posted this over at Appfuse's Nabble list as first, but then thought
this would be the better place.
I have a default.jsp page that uses SiteMesh to 'decorate' all of my
jsps. It contains the following js libraries:
prototype.js
scriptaculous.js
global.js
In order to use datePicker you need the following js libraries:
jquery-1.x.js
date.js
jquery-dimensions.js
jquery-datepicker.js
I put those 4 js files in my test.jsp file. But when the test.jsp page
is rendered, including all the stuff in default.jsp, Firefox goes
berserk. I get thousands of js errors, all in effects.js:
this._base has no properties,http://localhost:8080/scripts/effects.js,
Line 516
This also happens if I put my jquery.js in default.jsp after
scriptaculous.js. However, if I put it before scriptaculous.js I get
no errors. But my calendar doesn't work! No errors, just doesn't
appear!
And if I comment out scriptaculous.js in default.jsp, and leave
jquery.js in test.jsp, my calendar works. Oddly enough, the calendar
appears in the bottom left corner of the screen and without any
styles. It seems it's not grabbing either the datepicker.css or
demo.css it needs, I don't know.
Anyone ever used datePicker, or more generally, scriptaculous +
jquery? It seems that the order you put them in your page is
important. It seems like if you put jquery after scriptaculous it goes
into a loop, when jquery's constructor is called, and never exits.
Thanks!
Bob
This should help you:http://docs.jquery.com/Using_jQuery_with_Other_Libraries
--Klaus
