[jQuery] Lists, Filtering and Searching, Oh My!
A while back, the company I work for tasked me with coming up with a better way to move through a listing of forms on our Intranet. The way it was done before involved two identical files being maintained simultaneously, one sorted by the form ID (AA0001) and the other by name. The list of forms is nothing to sneeze at ... the first page includes a list of over 1800 forms. My first stab at a solution moved everything into a single unordered list. I was able to assign classes to each list item for the alpha character, the ID and type. Clicking on the appropriate links would show only those items which you selected. I also plugged in Rik Lomas' awesome QuickSearch plugin to quickly search the list. The only drawback was that the group responsible for maintaining the list of forms had to choose whether they wanted the list sorted by name or form ID. They chose name. Last week though, they decided that wasn't good enough and they needed to be able to sort by either name or form ID, so I've been handed this project again and told to make it work more to their liking. A table would break from the way they've organized these forms for years now, so they're really not interested in something like that, so it'd really need to be a list. The forms need to be able to be sorted alphabetically by name or form ID as well as organized by category. My first idea was to build a big (and I mean BIG) JSON file that would store all the information for these forms. I'd then be able to parse through the JSON object and build the list on the fly based on what they clicked. Of course, we're talking about a JSON file that'd probably be over 2000 lines and would have to be parsed every time they click something (I'm not sure if I could call in the JSON file and have it available instead of using $.getJSON). Then there's the issue of searching. Obviously QuickSearch works great, but how am I going to search through a static file without throwing everything on to the page? As you can see, I've begun brainstorming some ideas, but I'd really love to hear what other solutions come to mind for you guys. Any ideas you have would be awesome. Thanks! David
[jQuery] Delaying Click Event
I've been searching high and low on Google over the last hour looking for this, but can't seem to find anything. Maybe I'm using the wrong search terms, but I'd think what I'm trying to accomplish is something that's been done before. What I'm looking to do is delay the action of a click for a set period of time. I have a list of links for download zip archives and when you click on one of those links, I use the BlockUI plugin to show an overlay with a message that tells the user their download will start momentarily. The reason this is done is so that I can fire off an AJAX event that inserts a record into a database for download tracking. Ideally what I'd like to do is fire the AJAX event (which should only take about .2 seconds to run) and then wait for 2 or 3 seconds before unblocking the UI and *then* letting the default action of the click (offering up the zip archive) fire. Any ideas how I might accomplish something like this?
[jQuery] Re: Delaying Click Event
That worked like a charm! I didn't realize I could pass an anonymous
function to setTimeout like that. Thanks for the quick reply!
David
On Jan 4, 10:01 am, Michel Belleville michel.bellevi...@gmail.com
wrote:
The simplest way to do this is to use the setTimeout method (straight JS)
and give it an anonymous function as callback to trigger after given period.
Something like this should do the trick :
$('a.delayed').click(function() { // assuming these links all share the
delayed class
var clicked = $(this); // when setTimeout calls your anonymous function,
this will point to something else entirely
setTimeout(function () {
window.location.href = clicked.attr('href'); // assuming you want to go
wherever the link points to
}, 1000);
return false; // to prevent default action to be immediately triggered
});
Hope it helps.
Michel Belleville
2010/1/4 david.vansc...@gmail.com david.vansc...@gmail.com:
I've been searching high and low on Google over the last hour looking
for this, but can't seem to find anything. Maybe I'm using the wrong
search terms, but I'd think what I'm trying to accomplish is something
that's been done before.
What I'm looking to do is delay the action of a click for a set period
of time. I have a list of links for download zip archives and when
you click on one of those links, I use the BlockUI plugin to show an
overlay with a message that tells the user their download will start
momentarily. The reason this is done is so that I can fire off an
AJAX event that inserts a record into a database for download
tracking. Ideally what I'd like to do is fire the AJAX event (which
should only take about .2 seconds to run) and then wait for 2 or 3
seconds before unblocking the UI and *then* letting the default action
of the click (offering up the zip archive) fire.
Any ideas how I might accomplish something like this?
[jQuery] Re: Weird Hiding Issue
Yeah, I figured it was probably something along those lines. So what would be the best way to hide all but the first element of a DIV? David On Jan 23, 11:12 pm, Karl Swedberg k...@englishrules.com wrote: Hi David, I suspect the unordered lists aren't being hidden because the browser will not recognize that they are within the paragraph. Paragraphs are not allowed to have any block-level elements inside of them: The P element represents a paragraph. It cannot contain block-level elements (including P itself). http://www.w3.org/TR/html40/struct/text.html#h-9.3.1 When you have an invalid DOM structure, script goofiness happens. --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Jan 23, 2009, at 3:46 PM, david.vansc...@gmail.com wrote: The answer to this is probably really simple, but I'm just not finding it. I'm working on a newsletter and they want the first paragraph of each article shown, then a More link at the end. Got that working fine. I even have it working so that it automatically hides all but the first paragraph tag. Perfect. However, I have a few unordered lists inside paragraph tags and the unordered lists aren't hidden when the page loads, even if they're inside the paragraph tags. How would I get those elements to be hidden when the paragraph tag is hidden? Thanks!
[jQuery] Weird Hiding Issue
The answer to this is probably really simple, but I'm just not finding it. I'm working on a newsletter and they want the first paragraph of each article shown, then a More link at the end. Got that working fine. I even have it working so that it automatically hides all but the first paragraph tag. Perfect. However, I have a few unordered lists inside paragraph tags and the unordered lists aren't hidden when the page loads, even if they're inside the paragraph tags. How would I get those elements to be hidden when the paragraph tag is hidden? Thanks!
