[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
[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] Re: appfuse: jQuery + scriptaculous + datePicker
Thanks for putting up with an obvious noob. Of course, Programming 101
- once you execute jQuery.noConflict() you can no longer use '$' as
stated in the docs.
But I tried 2 of the 3 techniques in the above referenced page:
1. executing jQuery.noConflict()
2. executing jQuery.noConflict() and changing my short name to '$j'
then calling $j('.date-pick').datePicker();
And my calendar / datePicker doesn't appear. If I comment out the
jQuey.noConflict() line, it works. With or without commenting out the
scriptaculous library. But if I don't comment it out I get 4 million
js errors, which is the reason I need to use noConflict to begin
with ...
So it seems as though the noConflict() function is preventing the
datePicker from working ... Is this possible?
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] 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:
...
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: 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)
>
>
> one
> two
>
>
> 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:
>
> >
> > ...
> >
>
> > 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] 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: 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...
> > > bar1
> > > bar2
>
> > > ....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] Text finder in html
I am trying to create a javascript-based text finder using jQuery. I
have a table like this:
data 1
data 2
data 3
And I would like to be able to search for a text in any of the s
and highlight it. I tried something like this:
function find()
{
text = jQuery("#findText").val();
columns = jQuery("table#dataTable td");
for (i=0; i
a.test { font-weight: bold; }
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: 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 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 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
>
>
>
> Customer Name
>
>
>
>
> Customer Name
>
>
>
>
> -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:
>
>
>
>
>data 1
>
>
>
>
>data 2
>
>
>
>
>data 3
>
>
>
>
> And I would like to be able to search for a text in any of the s and
> highlight it. I tried something like this:
>
> function find()
> {
> text = jQuery("#findText").val();
> columns = jQuery("table#dataTable td");
>
> for (i=0; i {
> if (columns[i].innerHTML.indexOf(text) != -1)
> {
>jQuery(columns[i]).addClass("test");
> }
> }
>
> I have defined the test style like this:
>
>
> a.test { font-weight: bold; }
>
>
> 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
