[jQuery] Re: Using JQuery with PHP Frameworks
rics wrote: > I wish to start usign some PHP framework soon and was > wondering wich one works better with JQuery. I will use Zend > Framework or CakePHP. > Not decided yet. Are you looking for a framework for creating RESTful web services for use with jQuery, or something else? -Mike
[jQuery] Re: Help making my code more efficient...
Brianfidler wrote:
> Can anybody offer some advice on how to make the following
> code more efficient? I'm reusing a lot of the same code and I
> know it can be streamlined quite a bit.
>
> $(document).ready(function() {
> $('#question1').click(function() {
> $('#contentblock #answer6, #contentblock
> #answer5, #contentblock #answer4, #contentblock #answer3,
> #contentblock #answer2, #contentblock #answer1').addClass('hidden');
> $('#contentblock #answer1').removeClass('hidden');
> });
>
> $('#question2').click(function() {
> $('#contentblock #answer6, #contentblock
> #answer5, #contentblock #answer4, #contentblock #answer3,
> #contentblock #answer2, #contentblock #answer1').addClass('hidden');
> $('#contentblock #answer2').removeClass('hidden');
> });
>
> $('#question3').click(function() {
> $('#contentblock #answer6, #contentblock
> #answer5, #contentblock #answer4, #contentblock #answer3,
> #contentblock #answer2, #contentblock #answer1').addClass('hidden');
> $('#contentblock #answer3').removeClass('hidden');
> });
>
> $('#question4').click(function() {
> $('#contentblock #answer6, #contentblock
> #answer5, #contentblock #answer4, #contentblock #answer3,
> #contentblock #answer2, #contentblock #answer1').addClass('hidden');
> $('#contentblock #answer4').removeClass('hidden');
> });
>
> $('#question5').click(function() {
> $('#contentblock #answer6, #contentblock
> #answer5, #contentblock #answer4, #contentblock #answer3,
> #contentblock #answer2, #contentblock #answer1').addClass('hidden');
> $('#contentblock #answer5').removeClass('hidden');
> });
>
> $('#question6').click(function() {
> $('#contentblock #answer6, #contentblock
> #answer5, #contentblock #answer4, #contentblock #answer3,
> #contentblock #answer2, #contentblock #answer1').addClass('hidden');
> $('#contentblock #answer6').removeClass('hidden');
> });
> });
Add a "question" class to each of your clickable questions and an "answer"
class to each of your hidable answers. Then use:
$(document).ready(function() {
$('.question').click(function() {
var answerNum =
this.id.replace('question','');
$('#contentblock .answer').addClass('hidden');
$('#contentblock #answer' +
answerNum).removeClass('hidden');
});
});
This hides all answers based on class and then unhides the desired answer
based on id. I use this.id.replace('question','') instead of
this.id.substr(8,1) to make it more obvious what I'm doing. Also, I tend to
use underscores to cleanly separate naming from numbering in ids, but it's
just a style I like:
$(document).ready(function() {
$('.question').click(function() {
var answerNum =
this.id.replace('question_','');
$('#contentblock .answer').addClass('hidden');
$('#contentblock #answer_' +
answerNum).removeClass('hidden');
});
});
HTH and LMK if it gives you what you need.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
[jQuery] Resizing Input fields on Window Resize?
Hi all:
I'm struggling with this one. I need the following, which I can't get to
work because IE7 seems to have a bug where when you set the width of an
field using CSS to a percentage it calculates based on the viewport
and not the containing element. So I figured I'd add an IE fix like the
following, but I can't get it to work. FYI, there is a class of
"text-field" on the elements.
$(document).ready(function(){
window.onresize = function() {
var width = '' + (window.innerWidth - 600);
$('input.text-field').css("width",width);
}
});
I know my approach is probably all wrong anyway, so go lightly on me and
recommend a more jQueryish way to do this; this is all new to me and I'm
just trying figure things out.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
[jQuery] Collecting id attributes for checked input?
Hi all:
Is there a one-liner to collect id attributes for checked input fields?
This only gives me the first one:
$('input:checked').id()
I can't see to figure this out. Best I can do is write 6 or 7 lines of
hackish code to get them and it feels like there should be a better 'jQuery'
way.
Thanks in advance.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
Mike wrote: >> That said, jQuery makes it quite possible to reduce an entire >> application to a single line of code. Please resist this temptation, >> or if you cannot, split up the statements as Benjamin has shown :) Yeah, I've often thought writing an app as a single line of code was a rather dubious achievement. It seems so metaphorically similar to something we knew in college as the "Century Club." The idea was to down 100 shots of beer in 100 minutes. Doing so proved you were "manly" enough to do it but often resulted in upchuck and at best case gave a nasty hangover with the only possible benefit being to gratify a insecure ego! :-) -- -Mike Schinkel http://www.mikeschinkel.com/blogs/ http://www.welldesignedurls.org http://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
Danny wrote:
> For quickie debugging to FIrebug, you could define
>
> $.fn.log = function { console.log(this); return this;};
>
> and now you've got a chainable log that you can put anywhere in the
> chain:
> $('p').log().css('color', 'red').log().slideDown() etc.
>
> I haven't tested this (I'm sitting in front of IE 7) but it
> ought to work.
Nice. Anyone know if there is a way in code to trigger a Firebug breakpoint
and also add a value to the watch list if it isn't already there?
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
Jeffrey Kretz wrote: > Another option would be to use the step into and step out > debug commands. Step into (F11) the css command, and > if you don't want to follow it all the way down, step out of > it, then step in (F11 again) to the slideDown command. I hadn't considered that because I have just immediately assumed that stepping into compressed code wasn't useful but I'll try it. Thanks. -- -Mike Schinkel http://www.mikeschinkel.com/blogs/ http://www.welldesignedurls.org http://atlanta-web.org
[jQuery] Re: Chaining methods and Debugging?
>> Is there a particular problem that you are trying to debug?
No, it just seems the pattern I find for practically every debug session I
encounter, both for Javascript/jQuery and for Drupal/PHP development.
>> In the beginning, I would put console.log in the callbacks (if the method
had one) and that allowed me to see when one thing was be executed.
Sorry for being dense here, but I don't follow this? (BTW, I'm much more
comfortable developing sql-based server apps; I've just ventured into
developing browser-based apps.)
>> Another tip that should probably help, instead of doing.
>> $('p').css('color','red').slideDown().css('font-weight', 'bold');
>> do:
>> $('p')
>> .css('color','red')
>> .slideDown()
>> .css('font-weight', 'bold');
Interesting; that never would have occured to me. Thanks for suggesting it?
Will Firebug stop on every line (yes I could test, but I'm about to be off
to bed so I figured I'd just ask...)? How can I see the intermedia results?
>> This, to me, makes it a little more human readable and easier to comment
out a line.
Definitely. Thanks.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org <http://www.welldesignedurls.org/>
http://atlanta-web.org <http://atlanta-web.org/>
[jQuery] Re: check if an id exists
Josh Nathanson wrote:
> > well as many other jQuery newbies? Specifically, what signifigance
> > does jQuery's $() being like an array have, and even when
> you use an
> > ID selector?
>
> It is very significant -- in fact you could even say it is
> one of the most important code-saving aspects of the jQuery library.
>
> When you do something like $(".myclass") you will get an
> array of the DOM nodes that match class .myclass. Now apply
> a jQuery method like css:
> $(".myclass").css("color","black"). jQuery knows to loop
> over the array of DOM nodes and apply that css method to all
> the DOM nodes in the array. This saves a ton of coding where
> you would have to manually loop over the nodes to achieve the
> same thing.
>
> This shortcut is such a codesaver, in so many ways, that it
> is well worth it to always return an array-like object, and
> then have to use something like .length to determine if the
> jQuery object is empty.
Thanks for your reply.
Hmm. I already understood that pretty well. Maybe I was just expecting to
have a more profound "Aha."
BTW, I'm an old server-side web programmer but new to real-life
client-side/AJAX/browser-based programming so maybe it's just I never had to
feel the pain of the bad ole days of client-side programming that makes me
feel that explanation to be anti-climactic.
Ah well, guess I should be happy it's easier now, eh?
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
[jQuery] Collecting Form info about Article Tags for PUTing to a RESTful web service?
Hi all:
I am working on a client project and I'd like to get some input on using
JQuery with a RESTful web service I'm also building. The technical upshot is
I am adding a better UI for assigning predefined tags to for the Drupal CMS
v5.x using MySQL and PHP 4.4.7.
At an abstract level I have articles, a list of predefined tag categories,
and a list of predefined tags. Each tag has one tag category, and each
article can have one or more tags where each tag can be applied to any
number of articles.
I plan to present the user with a list of disabled HTML elements, let them select the appropriate tags, and then
use jQuery's $.ajax() to update the server via a RESTful web service because
the default Drupal UI for managing terms is highly inefficient. I plan
disabled so that the user can see the check visibly but not change it
without first going into an "Edit" mode; see below.
I can envision either issuing the INSERTs and DELETEs individually as the
user selects and deselects tags, or do it on a "batch submit" basis. I'd
prefer the batch submit basis though the former is easier to implement in
AJAX and SQL as I think that a batch submit is more consistent with the way
the web normally works, i.e. "Make all changes on a form and then click
submit to saved or just abandon to not save." My users are not techies so I
don't want to confuse them with non-standard approaches.
It appears what I need to do when the user click "SAVE" after they have
selected and deselected the tags they want to assign to a given article is
to collect us the selected tags and PUT them to a URL of the following
format:
PUT /articles/{article-id}/tags
I've already implemented other single-field RESTful services using $.ajax(),
'PUT', PHP, and MySQL so I don't need any help there but I do need a bit of
help with understanding jQuery best practices regarding how to best interact
with the form.
When the page loads I envision displaying a list of disabled
elements containing the current tags grouped by tag category to the user so
they can see the currently assigned tags, and I'll also display an edit
link. These elements will represent the assigned tags for an article
and they will all have a class of "assigned-tag".
When the user clicks the "Edit Tags" link it will set display=none on a
that will enclose the elements, and it
will also set display=block on another that will enclose enabled
elements for all predefined tags that can possibly
be set for the article (about 20 to 30 tags.)
I'm expecting that the @id attributes I'll use for the the elements
will be of the format "assigned_article_{article-id}_tag_{tag-id}" for the
assigned tags and just "article_{article-id}_tag_{tag-id}" for the s
in the list of all tags where examples might look like
"assigned_article_1152_tag_215" and "article_1152_tag_215".
In addition there will be a SAVE TAGs link that will PUT the tags to the
RESTful web service as described above will insert the new set of
assigned-tags into the element and toggle the
display for "assigned-tags/all-tags" back to show the assigned-tags.
So here are my questions:
1.) How do I collect up the list of selected (i.e. "CHECKED") checkboxes
using jQuery?
2.) After I collect up the assigned tags,
How do I:
a.) Copy the tag list and then change the copy's classes from "all-tags to
"assigned-tags,
b.) Assign "disabled" to each newly assigned field, and
c.) Change ids of elements from "assigned_article_{aid}_tag_{tid}"
to "article_{aid}_tag_{tid}"?
3.) Given I will be using $.ajax and PUT, do I even need a wrapping
element? Seems like I could just as easily use a to contain the
inputs and have the article key embedded in the @id attribute, right? I'll
probably still use a for semantic value but I ask to ensure I
actually understand the technical aspects of the problem at hand.
4.) In addition, if you think I should approach this very differently please
suggest alternatives.
Thanks in advance for your help.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
[jQuery] Chaining methods and Debugging?
Hi all: I'm relatively new to jQuery and I see chaining methods touted as one of it's best features. However, I fine it very hard to debug a chained method because of inability to see the intermedia states in Firebug. It currently seems to me to be one of those "sounded like a great idea at the time but in use not very practical." Does anyone else feel this way about chained methods and/or is there a way to step through the chain and see the intermediate states and results on the page while debugging? Thanks in advance. -- -Mike Schinkel http://www.mikeschinkel.com/blogs/ http://www.welldesignedurls.org http://atlanta-web.org P.S. Don't take this as criticism of jQuery; and am quite enjoying using it and generally quite like its architecture.
[jQuery] Re: check if an id exists
Michael Geary write:
> It's interesting that people don't immediately think of using
> $('#id').length > 0 (with or without the > 0). It tells me
> that they're not aware of a fundamental fact about jQuery:
> The $() function always returns an array-like object that has
> .length and [0..n] properties just like any Array
> - even when you use an ID selector. Once you understand that,
> a lot of things fall into place. Maybe the documentation
> should emphasize this point more.
I'm relatively new to jQuery and yes, I am still struggling with that
concept. As this point I understand the concept well enough for basic use
but not well enough for advanced use. And I've looked around on the web
quite a bit but haven't been able to find a writeup that really explains if
for me, not even one that explains as well as you just did. (I'm sure there
is a good writeup, I just haven't found it yet.)
Could I bother you to elaborate on the above in hopes to clarify for me as
well as many other jQuery newbies? Specifically, what signifigance does
jQuery's $() being like an array have, and even when you use an ID selector?
At this point I can cargo-cult jQuery(), but I don't quite grok it yet. Any
elaboration would be appreciated.
--
-Mike Schinkel
http://www.mikeschinkel.com/blogs/
http://www.welldesignedurls.org
http://atlanta-web.org
