jQuery Forum

We should refrain from replying to any of these spam messages that come
through. I agree with the sentiments that the spam is NOT welcome here,
but replying to the thread just adds us as a "confirmed" email address.
I honestly believe these messages are not being consciously sent by
anyone, but rather those who do appear to be sending them are likely
suffering a virus/trojan infection. Or an automated bot is signed up to
the list and harvesting emails to send out as.
I think the right approach here is to simply ignore the messages, but
let the list operators know (via a different thread/message) that these
need to be addressed.
My thoughts.
Shawn

Hi Gang.
I'm working with ClueTip and have run into some oddities.
In particular, I want to show ClueTip when a textbox receives focus.
The source shows me that I can use activation:'focus' for this and that
will result in the cluetip showing on focus and disappearing on blur.
Showing the cluetip is working fine, blurring is not.
The code I have is this:
$this.cluetip({
activation: 'focus',
local: true,
showTitle: false,
sticky: true,
mouseOutClose: true,
arrows: true,
closeText: "<strong>X</strong>",
closePosition: "title"
}).focus( function (){
$(opts.source).children().removeClass(opts.hover); });
The .focus() method that I have here is simply resetting the classes on
the items the user may interact with.
I'm using ClueTip to provide a rapid selection tool - similar to a drop
down list, but without the drop down list UI. (large number of options,
needing HTML for formatting, etc.) The idea is that when the cursor
arrives at the textbox, the cluetip shows and the user can use either
the mouse to click an item, or the up/down keys and enter to do the
same. Where I am running into problems is with the click selection. If
I add a blur handler to the above code:
.blur( function () { $(document).trigger('hideCluetip'); })
then things work well for keyboard selection and blurring, but if I
click instead, the click event never happens. Because, clicking on the
cluetip triggers the blur of the textbox which closes the cluetip before
the click can be handled. I suspect this may be partly why the onblur
isn't working within ClueTip as well - the logistics seem rather complex...
So I'm looking for suggestions on how to get this running properly. OR
for a plugin that provides similar functionality already. Thanks for
any feedback.
Shawn

Hi gang.
Linux.com did an upgrade of their website today. I didn't see any hint
of jQuery in their community section so I created a group. Feel free to
check it out - I'd be happy to pass on the admin reigns to someone a
little more active than myself. Until then though....
Linux.com
http://linux.com/index.php
Linux.com jQuery group:
http://linux.com/community/groups/viewgroup/240-jQuery
Shawn

I'm not sure if I have a server side issue or a client side issue. The
problem is that I am generating a JSON string in my plugin, and passing
it to a php page (though the back end shouldn't matter in the long run).
I can see that a parameter is infact passed, but trying to decode that
string is giving me nothing - not even errors. Sooo, I'm stuck not
knowing if the json string is invalid, or I'm doing something wrong on PHP.
I have a pastie with the code in question at http://pastie.org/338246.
Any tips are appreciated. Thanks.
Shawn

I found the jQuery Portlets at
http://sonspring.com/journal/jquery-portlets. This appears to be
outdated (makes use of the interface library for the sortables rather
than ui.jquery...). Does anyone know if there is a more current version
of this? And one that doesn't necessarily depend on tables would be
nice too...
If there isn't one, I guess I'll have to update it... A customer wants
this sort of functionality....
Thanks for any tips...
Shawn

I need to allow the user to re-order a number of DIVs on the screen,
each of which contains a title DIV that would be the drag handle. UI's
sortables seems almost perfect, but I don't see how I can apply it to
the divs in my case... Any suggestions?
A sample div might look something like:
--------------------------------
| title |
--------------------------------
| |
| content |
| |
--------------------------------
or
<div class="container">
<div class="title">My Title</div>
<div class="content">Some content here</div>
</div>
Thanks in advance.
Shawn

I have an odd situation where a DIV can be displayed in one of 3 states:
- normal (X x Y pixels in dimension),
- minimized (hidden)
- maximized - the height value removed so that the div grows/shrinks to
show the contents of the div.
The first two are done, but I'm hitting a wall on the maximized bit.
Perhaps because it's WAY past bed time for me.....
I've tried $("#myElement").css("height", ""); with no luck. I don't
want to just say "100%", because some content may only be a line or two,
while others may be XXX pages...
Thanks for any tips.
Shawn

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><style type="text/css">
p, li { white-space: pre-wrap; }
</style></head><body style=" font-family:'DejaVu Sans'; font-size:9pt; font-weight:400; font-style:normal;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">I'm not sure if I've seen a plugin for this, or even a website, but thought I'd ask here before creating custom code....

<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">

<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">We're looking to have "panels" (aka "widgets") on the page. (A dashboard perhaps?) Each panel is a given size - say 100x100, has a title bar, and minimize/maximize options, and a "Show More" link at the bottom of the panel. The web page may have many panels (scrolling the page as needed).

<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">

<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">Each of these panels would (presumably) contain the output from various "applications" within the Intranet.

<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">

<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">There is a little more logic involved - manadatory panels, etc - but this covers the core.

<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">

<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">I'm looking for any tips/suggestions on this... I can build something (ajax calls, iframes, etc... should be pretty straight forward), but would rather not have to, unless really needed. Thanks for any responses.

<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">

<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">Shawn

<p style="-qt-paragraph-type:empty; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px; -qt-user-state:0;">

</body></html>

1. Is there any difference between Jorn's autocomplete from his webpage
(http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/) and the
one included in jQuery.ui 1.6rc2 ? I can see the copyright info is the same,
but don't see a version number for the autocomplete element...
2. Using the jquery.ui version of autocomplete, what steps are needed to make
the autocomplete work properly in a modal dialog via jquery.ui's dialog? (my
initial tests show the code working, but the result area is not showing - I'm
using a theme from the themeroller if that matters). I'm using a local data
set for now.
3. It's been about a year since I last looked at autocomplete. Anything new
that I should be aware off? (I was using Jorn's plugin back then as well...)
Thanks for any info.
Shawn

I'm finding that if I use any of the themes generated by the ui themeroller, I
cannot use them with a modal dialog. The form elements cannot receive
focus.. But if I switch to a non-modal dialog everything works.
Anyone know any way around this? I really do need modal dialogs, but do not
understand the CSS well enough to role my own (at the moment..).
Thanks.
Shawn

I am seeing more and more references to using the $(function() {}); format for
the ready method. Is there a compelling reason for this? Or will
$(document).ready() perform as well?
Or perhaps I'm mis-understanding what the newer format is being used for?
Thanks for any tips.
Shawn

I just downloaded a theme from the jquery.ui themeroller
(http://ui.jquery.com/themeroller).
When I apply that theme to a dialog with form elements, the form elements
cannot be clicked on because the z-index is not quite right.
It seems that ANY theme there runs into this problem.... It looks like the
z-index is somewhat dynamic, so it's not just a quick fix in the css (that I
can see right this moment).
Is this a known issue with a known work-around? Or do I need to start hacking
away at it?
Besides this, I like the ThemeRoller very much.... though it'd be nice if the
dialog buttons were aligned to the right. Like real dialogs.. :) (I know...
I'm free to change the CSS as needed, but still.. lol)
Shawn

I've built myself a custom plugin that works nicely, but I have one
(maybe two) little sticking points....
My plugin takes the form like this:
(function ($) {
$.fn.myPlugin = function (options) {
return this.each( function () {
$(this).data("myValue", "some_value");
});
function show() {
alert($(this).data("myValue"));
}
};
$.fn.myPlugin.getValue = function () {
return $(this).data("myValue");
}
})(jQuery);
I want to the implementing user to be able to ask for the specific value
with something like $("#myObj").getValue(); - or even
$("#myObj").myPlugin.getValue(); The getValue() method shown above is
not working - the "this" object is wrong. So, I'm looking for ways to
accomplish this.
Second, I want to be able to explitly set the value via
$("#myObj").setValue("new_value");
This set method would need to change the value stored via the .data()
function, AND call an internal method to display the new value (such as
the show() method shown above)...
I'm drawing blanks and dead ends in my efforts on these two points. Any
suggestions? (other than calling the .data() function directly - I may
be changing the storage method....)
Thanks in advance.
Shawn

I'm having a problem wit the ui.datepicker. Specifically
setting/getting the default date. I have the following function:
function setDefaultDates() {
var temp = new Date();
var sd = new Date(temp.getFullYear(), temp.getMonth(), temp.getDate()
- 8);
var ed = new Date(temp.getFullYear(), temp.getMonth(), temp.getDate()
- 1);
$("#criteriaStart").datepicker("setDate", sd);
$("#criteriaEnd").datepicker("setDate", ed);
alert(sd + "\n" + $("#criteriaStart").datepicker("getDate"));
$("#criteriaStart").val($.datepicker.formatDate( "d M yy",
$("#criteriaStart").datepicker("getDate") ));
$("#criteriaEnd").val($.datepicker.formatDate( "d M yy",
$("#criteriaEnd").datepicker("getDate") ));
return;
}
The alert() is showing that sd does have a value, but the
datepicker("getDate") bit returns null.
So, the rest of the routine obviously fails because there doesn't appear
to be any value stored in the datepicker.
I've checked the docs and this code looks to be fine. Except for the
formatDate() method. I've tried commenting those lines out without any
difference. (the code was written about a 2 months ago, so may have
been using one version older of the datepicker. The site is now moving
from prototype to production...)
The question is how do I a) set the date for the date picker, then set
the text for the datepicker text box with that date (preferably formated
to the datepickers "dateFormat" option)?
My processing code later looks to the value of the datepicker - not the
text value of the textbox. So if I can't fix this, I need to rip out
the ui.datepicker and use something else. Oh, btw, this is using the
latest UI code (complete set).
Thanks for any tips.
Shawn

I'm in the middle of creating a search page for my app that resembles
something like the custom query capability of Trac. Before I go toooo
far, is anyone aware of a nice simple package/plugin for this sort of
thing? I don't recall seeing anything like this on the plugin page
recently...
The idea is that we have tooo many options on the current search form,
and they are not all used all the time. Not to mention we do not have
ALL possible options on the search form - just the most common. We want
to strip this down to the bare minimum, but allow the addition of an
arbitrary criteria when desired.
Thanks in advance.
Shawn

Think I'm out of luck here, but I'm looking for a grid system that has
bells and whistles similar to flexigrid
(http://webplicity.net/flexigrid/), but with the ability to edit the
cell contents. Some cells would be simple text, while others would need
to be look up lists (<select> tags are fine)...
Anything out there like that? Or do I need to grab jEditable and build
my own?
Thanks.
Shawn
(ps I've asked the list a few months ago, but am hoping something has
changed tween now and then.... )

(warning - long post)
I need to vent. But I don't mean to belittle any of the efforts that
have gone into the library...
I have two major complaints about the ui.datepicker. These are enough
of a pain in the rear to me that I am more likely to use alternative
options (and lets face it, there's a bunch of em out there)...
1) The function interface has changed 3 times over 3 versions of the
library. For new projects this is not an issue. But for existing
projects, it means that replacing the library with a newer version (to
get all the latest features/bug fixes) will break existing code. The
end result is you either a) don't upgrade, or b) are forced to "fix"
your code to work with the new tool. For a single page, who cares. For
complex applications with multiple pages this is VERY significant.
From the docs:
Since v3.4 - in v3.3 you would use the
$(...).datepicker.getDatepickerDate function and in earlier versions the
$.datepicker.getDateFor function.
In my case, I have a single page that has approx 10 of the datepickers
that appear at different times (modal dialogs). These have all been
tweaked to address complaint 2 below. Which means I'm looking at
between 5 and 10 hours of coding just to use a new version of the library.
solution: Step back, consider the use cases, define the interfaces to
meet those use cases. THEN WRITE THEM IN STONE. Do not change function
interfaces.
I understand WHY these changes happened (application of the plugin
"pattern", namespace issues, etc.). But really, this is just annoying.
2) The default date should be displayed in the corresponding text box
when the control is initialized. Or at the very least have an option to
indicate this. The specified dateFormat (or default format) should be used.
My apps do date sensitive things, which means I'm doing date
calculations. Simply setting the value of a text box to a known string
is not good enough. I need to be absolutely confident that the actual
date object of the datepicker is being used.
Recent versions of the datepicker have the defaultDate parameter. This
value seems to be utterly useless in determining the default date of a
datepicker from code. For example:
$("#datebox").datepicker({
defaultDate: -1,
dateFormat: "d M yy"
});
alert($("#datebox").datepicker("getDate"));
- the alert returns "null"
- or in some cases, if you delay before showing the alert you might get
the current date - not the "defaultDate" specified.
The defaultDate seems to only be used to highlight the "defaultDate"
when the dialog is displayed. Opening and closing the dialog without
selecting a date does not set a date (which stands to reason). Opening
the dialog, and selecting a date DOES set the date, and the alert would
respond properly. But that totally defeats the purpose (IMO) of a
default date.
Because the getDate fails, there is no other option but to manually set
the date value. This means the logic that should already be available
with the "defaultDate: -1" setting now has to be set manually:
var temp = new Date();
$("#mydatebox").datepicker("setDate",
new Date(temp.getFullYear(), temp.getMonth(), temp.getDate() - 1);
);
$("#mydatebox")
.val(
$.datepicker.formatDate(
"d M yy",
$("#mydatebox").datepicker("getDate")
)
);
(having to do this code just to show the current value of the datepicker
seems ridiculous...)
The obvious response is "just set the text of the text box to the
desired date". Nope, I'm doing date calculations, and need the
datepickers to be set properly. I just so happen to be displaying the
value of the datepicker to my users - but that value MUST be synched.
The user may or may not change the date, so I need the date value of the
datepicker. The one it is supposed to know about to begin with.
---------
Perhaps this default date thing will see it's way into the next version.
Hopefully the function interfaces do not change.
But these two points are enough for me to begin looking at the other
options. And checking their history to see how often the interfaces change.
</rant off>
As a developer, I fully understand why things happen the way they do,
and respect the choices the devs have had to make. Hopefully this is
taken as constructive comments - it's not meant as a bash. But, well, I
feel a little better now.. :)
- Disclaimer - If I have missed something in the docs, then I humbly
apologize and submit myself to a thousand virtual lashes. (But the docs
are lacking in details too in some places. Perhaps when I get some free
time, I'll try to add some detail.)
Shawn

I'm either making this more difficult than it is, or I'm missing
something simple...
I have a div that contains a table. Inside that table I have rows with
an arbitrary number of cells. The cells may or may not contain a div
with a "tasksummary" class. I need to find all the rows that DO NOT
have a task summary div, and toggle them.
I can easily find the tasksummaries:
$("#containerDiv > table > tbody> tr .tasksummary");
But how do I change this to give me the TR's that don't have a task
summary div? (note, some of the cells may contain sub tables, so the
explicit table>tbody>tr isolates only the main table...)
The only method I can see right now is to find the TRs then do a .each()
on them and check each row with the .hasClass(). But I'm sure there's
an easier way...
Thanks for any input.
Shawn

I'm using the cycle plugin and have set it up to automagically create
the tabs for changing to the next image.
http://www.actionhobby.ca/index.php?q=/node/524
But, this particular page has 32 images (possibly more to come). The
tabs are generated in a single row, and do not wrap at the edge of the
screen. So I'm looking for ideas how to resolve this. (works great on
a 1650x1024 page, not so great at smaller resolutions)
Can this be handled via CSS? Or am I going to be tweaking code?
Thanks.
Shawn

I apologize if this is semi OT...
I have an odd performance problem that I can't see any clear logic
around. I was wondering if jQuery might be able to help me with this.
Situation.
1. I have a table of employees. Employees in the left column (one per
row), and days in the remaining columns. Some employees are team
leaders, some are team members. Teams can change at any time, and
employees may change their role from leader to member, or vice versa.
But an employee can only be on one team at a time.
2. I have a large list of "tasks" to be match up to the employee and
day. The only match to the employee is the employee ID.
Problem.
- Because teams can change I can potentially be viewing a period of time
where one employee has been on two (or more) different teams, and so
would rightfully have multiple rows of data. Therefore, I can't simply
use the employee ID as an element ID to find the row. (potential
duplicates).
- The only unique identifier I would have for each employee is a
combination of the employee ID, team leader ID, and start date.
- The task only knows the employee ID.
So, I'm looking for a way to match the task to the correct employee row,
while still satisfying the DTD requirements of not using duplicate ID
values. Once I know the row, I can determine the rest fairly easily.
But thus far the only method I have come up with includes some nested
loops which is resulting in significant delays. And even then, I still
have potential for duplicate IDs.
One thought that has occured to me (and I'll be trying out soon) is to
create a hash object where the employee is the key which points to an
array of employee objects. The employee object would contain a hased
ID value (combine employee id, leader id, start date for instance) that
will be unique. (or at least given a good statistical probability of
being unique). Then the further processing has the unique ID to find
the corresponding row, AND the data to determine which row (if more than
one) is pertinent. But, I've never done this kind of indexing before
and am concerned I may be introducing overhead and delays. Any
thoughts/comments here?
Thanks for letting me get this down in writing. Sometimes the answer
pops out at me when I do this. But not this time. Also thanks for any
tips or suggestions.
Shawn

I have code that looks something like this:
var myTable = $("<table></table>");
//... code to populate the table ...
for (var x=0; x < someArray; x++) {
var curItem = someArray[x];
//PROBLEM LINE
var targetRow = $("#prefix" + curItem.id, myTable);
//. . . further code . . .
}
Now my array is an array of some 300+ objects. (fair size table). What
I'm noticing is that the problem line (where I'm getting the row
reference) is taking approx 1000 ms to find my targetRow. (dropped in
some console.log's dumping timestamps) With some 300+ iterations, it
should be plain this loop is damn slow. Rendering my table outright
stalls the browser - some 20 minutes and no joy.
As a test, I tried to render the table to the page before my loop and
modified my assignment line accordingly:
$("#myContainer").append(myTable);
// . . .
var targetRow = $("#prefix" + curItem.id, myTable);
with this approach the time to find the row reference is much shorter.
I can now render my table in less than 20 seconds (which is fine given
the size of the table and other processing happening).
Why such a difference between rendered code and in memory code? I would
think the in memory code would be tons faster. OR does it have
something to do with that code not being on the DOM yet, so not able to
take advantage of DOM optimizations?
As an aside, I'd appreciate any hints/tips on speeding up this routine.
Given that it's such a small snapshot of the overall routine... :)
Thanks for any tips or enlightenment.
Shawn

Yet another modal question. But this one is slightly different.. :)
I have an existing application that was built before Ajax was really an
option and using the showModalDialog() function in IE. I'm in the
process of changing the app to be cross browser. So, I'm looking for a
quick and easy modal solution to replace the showModalDialog() function
that will not involve massive code revisions.
The windows being opened are seperate pages and are fully functional
forms - with some inter-window communications (i.e
window.opener.document.reload() in most cases).
I am currently using jqModal elsewhere on the app (an enhancement
section) so am somewhat familiar with it. But I'm open to any
reasonable alternatives.
Has anyone gone through a similar exercise without rewriting the modal
pages from scratch? Thanks for any tips.
Shawn

Here's the scenario. I'm writing a routine that will take in a list of
"items". Each item will fire an Ajax request and the resulting data is
placed into a variable identified in the "items" properties.
Looping over the items to do the Ajax call results in the LAST item's
variable being updated. This makes sense in that the callback happens
after the loop has completed.
So the question is how do I have the callback set the correct variable?
Here's some sample code if it helps:
//loop over each item and set the data as needed.
for (var x = 0; x < options.items.length; x++ ) {
var i = options.items[x];
if (!i.ajaxparams) { return; };
var macb = function (data) { queueData[i.dataname] = data;
checkComplete(); }
i.ajaxparams.success = macb;
$.ajax(i.ajaxparams);
}
}
The problem is the "macb" function - specifically the use of the
i.dataname. This works great if I have ONE ajax item. But adding two
(say for "names" and "scores") only sets the last dataname seen in the loop.
doing the "var i = " *should* have prevented this, but isn't. (and my
brain is mush right now). So the next option is to pass in the dataname
value to the callback function. Except I don't see any possible way to
pass extra data to the callback.
Is there a better way to handle this? I'm afraid the "obvious" answers
probably aren't suitable in this case. Unless my brain is worse off
than I thought right now.
Thanks for any tips.
Shawn
ps. I snipped a little bit from the above code. There's logic to check
if a "success" function is specified in the ajaxparams and if so use
it's return value to set the queueData property.

I have a slight problem with one of my plugins. I'm taking a table, and
parsing it to create divs containing the header/footer and fixed
columns. These are all put into a containing DIV and then the
containing DIV "wraps" the table. (that's the end result, not the actual
process...). Now it turns out I need to do this to a second table on
the same page.
The problem is that I'm making references to the various divs by class
name. So when I create the second instance, the first gets modified. I
suspect I need to apply a context element in here
(i.e. $(".myclass", container); ). But thought I'd check here first to
see how others are handling this type of thing. Would I need to create
a "container" object in my plugin? Something like
var container = $(this).parent();
??
Are there better options?
Sorry if this is kinda vague - I don't have the code in front of me at
the moment....
Shawn