[jQuery] Re: Port Prototype Code to jQuery?
can you send the html too?
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
sorry .up() is prototype... should be .parent() instead. On Aug 30, 1:20 pm, Josh Powell wrote: > kali - here is a way to accomplish the same thing in less code, and > lets you call the images anything you want instead of having to use > numbers. This is untested so there may be some slight errors, but the > logic should be sound: > > $(function() { > var imageArray = ['foo', 'bar', 'baz']; > > $(imageArray).each(function (item, i) { > $('#wrapper').append(' '"> alt="thumbnail' + i + '" width="80" height="80"/>'); > }); > > $('img.thumbsBorder').hover(function () { > $(this).toggleClass('dim').up().toggleClass('roll'); > }); > > });
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
kali - here is a way to accomplish the same thing in less code, and lets you call the images anything you want instead of having to use numbers. This is untested so there may be some slight errors, but the logic should be sound: $(function() { var imageArray = ['foo', 'bar', 'baz']; $(imageArray).each(function (item, i) { $('#wrapper').append(''); }); $('img.thumbsBorder').hover(function () { $(this).toggleClass('dim').up().toggleClass('roll'); }); });
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
Even simpler: $('img.thumb').click(function () { $(this).toggleClass('dim'); });
[jQuery] Re: event-binding to dynamically created elements... (JSP vs JS problem......)
for (i = 1; i < 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } The 'i' you've called here is a global variable, in a for loop always put a var in front of it to have local scope (to the function, not block) for (var i = 1; i < 5; i++) { $('#thumb' + i).bind('mouseover',function(event) { $(this).addClass('dim'); }); } but... more importantly, reframe your thoughts on javascript/jquery programming to let the selectors do the iteration for you. $('img[class="thumb"]).mouseover(function () { $(this).addClass('dim'); }); To your second question: var elem<%=i%> = 'foo'; works because jsp is compiled server side and outputs the value of i onto the page, so that if i is 1, then what the browser sees is var elem1 = 'foo'; which is valid javascript. But javascript is all done client side so var elem + i = 'foo'; is not valid. There are several ways to do what you want, none of them good. Use implicit iteration from the jquery selectors instead. Stop using id's when you have an unknown or changing number of items you are iterating through to do things. IDs should only be used for unique items. When you have a list of similiar items doing the same thing, give them all the same class or custom attribute and let jQuery do the iterating for you. Josh Powell On Aug 30, 12:37 am, "Michael Geary" wrote: > Something I forgot to mention in my previous reply... To make sure it's > clear what code is actually being run in the browser, never rely on looking > at your JSP source to understand it. That's what threw you off here. The > browser never sees your JSP source, only the HTML/JS/CSS/whatever files that > your JSP generates. > > Do you have Fiddler? If not, go get it right now and get familiar with it: > > http://www.fiddler2.com/ > > It looks like you're using Windows 2000; Fiddler is supposed to run OK there > if you have the .NET Framework 2.0. > > Fiddler's inspectors are great for examining all of the actual data > downloaded to your browser. You can of course use other tools such as the > Web Developer Toolbar and even a View Source for the .html file. But Fiddler > is terrific. > > The main thing is that when you're debugging anything in the browser, you > have to forget about the JSP source and think only in terms of what the > browser actually receives. > > -Mike > > > From: kali > > > this works in JSP: > > > <% for (int i = 1; i < 5; i++) { %> > > $('#image<%=i%>').bind('mouseover',function(event) { > > $('#image<%=i%>').addClass('dim'); > > }); > > <% } %> > > > but the same thing, in JavaScript, doesn't work: > > > for (i = 1; i < 5; i++) { > > $('#thumb' + i).bind('mouseover',function(event) { > > $('#thumb' + i).addClass('dim'); > > }); > > }
[jQuery] Re: empty() is very slow
Change the onclick event handler into a jQuery .live() event and you'll be fine for sure. On Aug 26, 1:57 pm, oleOhle wrote: > OK, thanks everybody! I think I understand. > > Actually my second attempt could easily be rewritten to match exactly > what jQuery does. It really boils down to the remove() function, which > does some magic to remove data and events related to the contained DOM > elements. Since I only have one HTML onClick event handler defined on > one of the elements and do not use the jQuery event system, I hope > that I'm fine with using the suggestion of setting the innerHTML to ''.
[jQuery] Re: empty() is very slow
.empty and .html looks in every node that it removes/replaces and checks for and removes event bindings in order to prevent memory leaks. If you know you do not have bound events, first use plain old javascript to set element.innerHTML = ''; and then remove/replace the element using .empty()/.html() Though in the case of .empty it could be redundant. On Aug 26, 12:01 pm, James wrote: > I've found something that worked a faster to empty something when I > tested it. > > function replaceHtml(el, html) { > var oldEl = typeof el === "string" ? document.getElementById(el) : > el; > if (oldEl == null) return null; > var newEl = oldEl.cloneNode(false); > newEl.innerHTML = html; > oldEl.parentNode.replaceChild(newEl, oldEl); > return newEl; > > }; > > replaceHtml(Container_Id, ''); > > On Aug 26, 8:54 am, MorningZ wrote: > > > "What is jQuery doing to empty an element?" > > > That's so easy to see/find-out for yourself > > > open up the jquery.js file, search for "emtpy" and voila > > > empty: function() { > > // Remove element nodes and prevent memory leaks > > jQuery(this).children().remove(); > > > // Remove any remaining nodes > > while (this.firstChild) > > this.removeChild(this.firstChild); > > } > > > "2. Are there any rules when not to use jQuery for certain DOM tasks > > but better to resort to direct DOM manipulation as in the example > > above? " > > > One option that I've seen recommended a lot is to set the ".innerHTML" > > of the DOM object to empty string. i remember that it's fast, but > > I can't remember if there were downsides to using that instead > > > On Aug 26, 2:32 pm, oleOhle wrote: > > > > While writing my first jQuery application I encountered a performance > > > issue whichs casts doubts on the suitability of jQuery for my purposes > > > in general. > > > > The "issue": In my page I have a dynamically filled which in the > > > end contains about 10 elements, one of which is a table with 1000 > > > rows. Now when I try to clear that with a simple function like > > > > function clearContainer() { > > > $('#' + Container_ID).empty(); > > > > } > > > > this will take forever, i.e. one faster machine a few seconds, on my > > > netbook it even leads to javascript timeout errors. > > > > Rewriting the function to > > > > function clearContainer() { > > > var containerNode = document.getElementById(Container_ID); > > > while(containerNode.hasChildNodes()) { > > > containerNode.removeChild(containerNode.lastChild); > > > } > > > > } > > > > fixes the perfomance issue, the is cleared almost immediately. > > > > Two questions remain: > > > 1. How can the results be explained? What is jQuery doing to empty an > > > element? > > > 2. Are there any rules when not to use jQuery for certain DOM tasks > > > but better to resort to direct DOM manipulation as in the example > > > above?
[jQuery] Re: Live() event doesnot refresh the class of the event which was changed dynamically.
Also, be very, very careful with using mouseover, mouseout, or mousemove with live events. The way live events work is to put an event handler on the document and catch events as they bubble up and check them against the selector. So, when using mouseover live events, you are executing a comparison against the selector every time the mouse moves over an element on the page. This can cause some dramatic slowdowns, especially if you are using multiple live events of these types. It's often better to use regular events for mouseover, mouseout, and mousemove. Josh Powell On Jul 5, 9:21 am, Nic Hubbard wrote: > Pretty sure that you have to create a new .live() event for your > expected class. So, you would need to do: > > $(".newClass").live("mouseover", function(){ > //clickable function here.. > > }); > > On Jul 5, 12:30 am, Sanam wrote: > > > Hello, > > I got this problem with live() event.I have used it as follows. > > > $(".addressDiv span").live("mouseover", function(){ > > //clickable function here.. > > > > }); > > > I have used the live() event to trigger the function on mouseover in > > the dynamically added elements. But the problem i got is that once the > > live event is called it takes the class of the element and stores. And > > when the class of that particular element is changed dynamically the > > live() event does not detect the new classed added dynamically, > > instead it takes the former class. Live() event does not update the > > class. How can I solve this problem? > > > Sanam
[jQuery] Re: Array to JSON?
That's okay, javascript doesn't have associative arrays, only arrays with object properties. On Jun 22, 2:45 pm, Ricardo wrote: > before someone complains: that function won't handle arrays (only > objects) > > On Jun 22, 6:39 pm, Ricardo wrote: > > > Usually you'll send out parameters in query strings, only receive data > > in JSON, which is what jQuery is equipped to do. If you don't want the > > weight of a plugin you could use something like this: > > > function toJSON(obj){ > > var json = '({'; > > $.each(obj, function(k,v){ > > var q = typeof v == 'string' ? ~v.indexOf("'") ? '"' : "'" : ''; > > if (typeof v == 'object') > > v = toJSON(v).slice(0,-1).substr(1); > > json+= k + ':'+ q + v + q + ',';}); > > > return json.slice(0,-1)+'})'; > > > }; > > > On Jun 21, 11:23 pm, Nic Hubbard wrote: > > > > I have been trying to figure out how I could go from an associative > > > array to JSON. Is there a function for this?
[jQuery] Re: Using Zend IDE with jquery
zend with eclipse has some plugins. I don't use them though, so I'm not sure where to get them. On Jun 12, 2:13 pm, Arun wrote: > Hi, > Has anyone ever tried using the zend ide with jquery? Any comments on > this would be appreciated. > > Arun
[jQuery] Re: Any way to make an anonymous function die?
I think you are looking to namespace the event. $(selector).live('click.ns'); $(selector).die('click.ns'); The die() will only remove the click that occurs with that namespace and leave other click events alone. On Jun 2, 12:07 pm, Laker Netman wrote: > On Jun 2, 1:59 pm, Laker Netman wrote: > > > > > On Jun 2, 1:08 pm, Ricardo wrote: > > > > Or add another class name: > > > > > > > > > > > > > > > > > > > > > > > > $('.myselects:not(.clicked)').live('click', function(){ > > > $(this).addClass('clicked'); > > > > }); > > > > On Jun 2, 1:00 pm, Isaac Gonzalez wrote: > > > > > I'm not sure if this is the best solution but you can always change > > > > the class name of the li after it's been click. Then add a conditional > > > > statement in your anonymous function filter list with the revised > > > > class name. > > > > > On Jun 2, 2009, at 8:55 AM, Laker Netman wrote: > > > > > > I am using .live() in jQuery 1.3.2 to assign a dynamic click event to > > > > > multiple Select lists. When one of the lists is clicked on I would > > > > > like to have that particular list to no longer be "clickable". > > > > > > Here's the issue. I currently assign the click function in .live() > > > > > with an anonymous function, so the only thing I have been able to do > > > > > so far is $(this).die('click') when a Select is clicked on. This, of > > > > > course, kills the event for ALL my Selects. > > > > > > Does anyone know of a way to do this without creating a separate, > > > > > named function for the die() function to use later? > > > > > > Thanks, > > > > > Laker > > > Thanks for the suggestions Isaac. > > > Your second post got me thinking. Here's what I came up with for the > > final solution: > > $(".selectList:not(.clicked)").live("mousedown",function(){ > > $(this).addClass('clicked'); > > ... additional processing occurs here > > }); > > > This is executed within $document.ready() > > All of the Selects have the class "selectList" from the start and, > > based on your suggestion, the "clicked" class is added when a > > particular list is clicked on. The initial selector does the rest, > > eliminating already clicked selects from future consideration. Very > > nice! > > > Laker > > And Ricardo, too! Sorry didn't catch the second author! 8)
[jQuery] Re: performance of html(val)
It's generally a good idea to post example code so we can see what you are doing. That said, this article I wrote will probably help you: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly Josh Powell On May 26, 8:29 pm, jonathan wrote: > I am constructing a large table on the fly and add it to the dom using > html(val). It takes about 6 seconds. I am wondering if there's any > practice that would speed up this process? > thanks!
[jQuery] Re: What happen with jQuery? Is it slow?
Yes, I partially agree. I've been in conversation with the developer about it. Testing it this way tests the absolute speed of a method, but does not take into account the patterns that this method allows. Appending a node to the DOM 40 times is not the same as appending a string to the DOM 40 times because there is no way to skip appending the 40 nodes but the 40 strings can be appended at the same time. So, the absolute speed of the jQuery method can be drastically slower, but because it enables the pattern of appending all the strings before DOM insertion, ends up being the faster pattern. Also, what is slower in the jQuery method is unknown... is it that $ ('') is slower then document.createElement('ul') or that $ ('body').append('string') is slower then document.appendChild(node); both? which method is being benchmarked? If you are trying to test the method, then the method should be pulled out and tested individually, if you are trying to test the pattern then you should test the most efficient patterns for each method. On May 22, 10:35 pm, RobG wrote: > On May 23, 6:48 am, Josh Powell wrote: > [...] > > > Also, many of the jQuery examples are poorly constructed, > > Depending on your point of view. > > > > > take the > > 'table' instance: > > > for (var i = 0; i < 40; i++) { > > $("").appendTo("body").html > > ("first").find("tr").prepend("before");} > > > return $("tr td").length; > > > This should be: > > var theTables = ''; > > for (var i = 0; i < 40; i++) { > > theTables += 'before > td>first';} > > > $(body).append(theTables); > > return $('tr td').length; > > > and there are even quicker methods using array.join can speed it up > > for example > > The point of the tests is to test the speed *of the library*, not to > write optimised code for a particular task. Adding 40 tables one at a > time does that, adding them all in one go doesn't, it's effectively > the same as adding one table. > > -- > Rob
[jQuery] Re: What happen with jQuery? Is it slow?
One of the areas of the comparison where jQuery fares the worst is "destroy." jQuery checks every element it is removing to see if there are events bound to it and removes those events because they can cause memory leaks. None of the other libraries do this. I do wish that jQuery provided a method to not check, and just do a quick remove. This has tripped me up before and I had to use POJS (Plain Old Java Script) to change the innerHTML to an empty string before doing the .remove() when I knew there were no events on the elements. In fact, I think all of the calls to .html() are slowed down because of this event check. Also, many of the jQuery examples are poorly constructed, take the 'table' instance: for (var i = 0; i < 40; i++) { $("").appendTo("body").html ("first").find("tr").prepend("before"); } return $("tr td").length; This should be: var theTables = ''; for (var i = 0; i < 40; i++) { theTables += 'beforefirst'; } $(body).append(theTables); return $('tr td').length; and there are even quicker methods using array.join can speed it up for example the 'make' instance: for (var i = 0; i < 250; i++) { $("").append ("onetwothree").appendTo("body"); } return $("ul.fromcode").length; This is ridiculous code. It should be: var theUls = ''; for (var i = 0; i < 250; i++) { theUls = 'onetwothree'"); } $(body).append(theUls); return $("ul.fromcode").length; The 'append' instance: for (var i = 0; i < 500; i++) { $("body").append("test"); } return $("[rel^='foo']").length; again with the appending in a for loop. Slow... slow... slow. Should be: var divs = ''; for (var i = 0; i < 500; i++) { divs += 'test'; } $('body').append(divs); return $('[rel^="foo"]').length the 'bindattr' instance, I believe, is an artifiact of jQuery updating how selectors work. jQuery alone of the libraries changed it's approach to selector and so this particular selector is slow in jQuery, whereas other selectors would be slower in other libraries. Shows you need to optimize your selectors for usage. With these changes alone, you'll probably bring jQuery's time down to 1900 - 2000. Less if jQuery didn't check for events bound to elements before removing them. This is a weakness for speed, and strength for ease of use. On May 22, 8:19 am, Ricardo wrote: > jQuery has a lot of overhead because of it's event handling, cross- > browser normalization, etc, it's a good trade-off for most websites. > And you can easily reduce those numbers a lot doing simple > optimizations. > > On May 21, 11:25 pm, donb wrote: > > > It has apparently sped up 50% with the latest release. > > > The time it takes to perform any of those test cases is not important > > to me. What is important is the application's perceived speed. I > > find jQuery to perform quite satisfactorily in that context. In fact, > > the real world involves great expanses of idleness sporadically > > interrupted by meaningful work. A few milliseconds here and there > > don't really matter 99% of the time. > > > Besides, jQuery's greatest strength is the clean and elegant coding > > model. I don't think anyone will say speed was the objective of > > jQuery - other than speed of learning/designing/coding with the > > framework. > > > On May 21, 9:57 pm, Alexsandro_xpt wrote: > > > > Make this testhttp://dante.dojotoolkit.org/taskspeed/
[jQuery] Re: jQuery, MooTools, and Prototype - A Comparison
What do you want to use the library for? Selecting DOM Elements DOM Manipulation Simplifying Events Simplifying Ajax Mimicking classical inheritance Extending native objects with 'missing' capabilities Cool Widgets >From what I can tell, these are the main areas of focus of all the major javascript libraries. jQuery excels at Selecting DOM elements, DOM manipulation, Simplifying events, and simplifying ajax. It has decent classical inheritance support via plugins. It has a few javascript object/array enhancement capabilities but does not add them to the native objects. jQuery UI has many cool widgets. If you really want missing javascript object/array methods then Prototype is a good option, but jQuery is as good or better at everything else. Prototype also has Class support in its core and some neat effects in Scriptaculous. If you want a full blown classical inheritance coding strategy, mootools excels at this. It also provides a ton of missing object/ array methods, but it more wordy then jQuery and doesn't provide the shortcuts that jQuery does by default. Mootools prides itself on its extendability and can be extended to provide these shortcuts if you want. I've taken part in all of the communities surrounding these three libraries, and jQuery has by far the most friendly and helpful community. Check out the number of members on this list vs. the Prototype/Scriptaculous list. Prototype developers are a silent lot, popping up now and again to say something, but for the most part are quiet. John Resig, the creator of jQuery, is usually quite active on the boards but I suspect has gone into a bit of seclusion lately to finish up his next book. Mootools community is the least helpful, and is sometimes outright hostile. The mootools library developers are all very quiet and don't come out into the spotlight often, but Aaron Newton has taken up being the public face of mootools. He recently wrote an article on jQuery vs Mootools with a somewhat mootoolish bias, but its a great article: http://jqueryvsmootools.com/ On May 21, 12:39 pm, kiusau wrote: > On May 21, 12:23 pm, David Meiser wrote: > > > If you can't bear that thought, just *choose* one. None of my friends were > > using jQuery when I started using it (now I've converted all of them), but I > > read an article saying that it was going to be included in ASP.NET MVC and > > VS 2010. So, I gave it a shot, liked it, so I continue using it. > > I am not sure that it makes a difference, but I am a dedicated Mac > user. > > One other important issue that I forgot to mention is that for the > moment I have no server-side capability, but will eventually move away > from my client-side only constraint. > > Roddy
[jQuery] Re: Best book to learn jQuery?
The Definitive Guide is a great reference book, and a terrible book to learn javascript from. Javascript: The Good Parts is a must read to understand the prototypical nature of javascript, learn about jslint, and understand == vs === I can't speak to Learning Javascript On May 19, 6:15 pm, d3a1i0 wrote: > What is a good book for learning JavaScript then? I have heard: > > JavaScript: The Definitive Guide > by David Flanagan > > JavaScript: The Good Parts > by Douglas Crockford > > Learning JavaScript > by Shelley Powers > > I just want a basic understanding, for now, to help with the more > advanced jQuery stuff like mentioned above. > > On May 19, 6:51 am, Ethan Mateja wrote: > > > Kudos to the suggestions. I purchased both yesterday as a result. :D > > > On Mon, May 18, 2009 at 11:15 PM, Karl Swedberg > > wrote: > > > > On May 18, 2009, at 9:58 AM, Brandon Aaron wrote: > > > > On Mon, May 18, 2009 at 8:35 AM, Karl Swedberg > > > wrote: > > > > I've heard Learning jQuery 1.3 is a great read, too. ;-) > > > > HAHAHA... I think you forgot your disclaimer. :p Karl is a co-author > > > of Learning jQuery. > > > > Nonetheless, Learning jQuery 1.3 would be a great choice. :) > > > > -- > > > Brandon Aaron > > > > Busted! I figured he'd make the connection, but it's probably a good idea > > > to add a disclaimer anyway. :) > > > > Alex, for what it's worth, I've read through jQuery in Action, and I think > > > it's a terrific book, too. > > > > --Karl > > > > > > > Karl Swedberg > > >www.englishrules.com > > >www.learningjquery.com > > > -- > > Respectfully, > > > Ethan Mateja > > > +++ > > Packetforwardwww.packetforward.com
[jQuery] Re: question about getJSON, objects and/or scope - confused
Well, one thing that will cause IE to error is the extra comma in the object declaration: var obj = { 'foo': 'bar', 'baz': 'boo', <--- this comma creates an error in IE } The other problem is that you are doing the json call when the document is finished loading, at that point the document.write() will already have executed and thisStory.title won't exist yet. Josh Powell On May 19, 2:22 pm, illovich wrote: > Hi, I'm working on a page where graphics/content get loaded via server > side stuff and decided to try to use JSON to send the data. > > But I'm having trouble with converting the JSON to a javascript object > when I use an external file. > > This works:http://dev.illovich.com/storigraphi5.html > == > > script type="text/javascript"> // this tests the JSON object > > var thisStory = { > > "imgURL": "storigraphs/test1.jpg", > "title" : "I (verbed) you", > "author" : "The Author", > "imgHeight": 604, > "imgHeight": 453, > "frameTotal" : 4, > "frames": { > 'frame1' : '-0px -0px', > 'frame2' : '-225px -0px', > 'frame3' : '-0px -302px', > 'frame4' : '-225px -302px' > }, > "texts": { > 'frame1' : 'I saw you', > 'frame2' : 'I wanted you', > 'frame3' : 'I craved you', > 'frame4' : 'I knew you' > }, > > } > > > > > $(document).ready(function(){ > > $('.frame').click(function(){ > > var frameNum = $(this).attr("name"); > var frameBgPos = thisStory.frames[frameNum]; > var frameTxt = thisStory.texts[frameNum]; > > $('#story').animate({ opacity: 'hide'}, > 'fast').queue(function() > { > > > $(this).css('background-position' , frameBgPos) > > > $(this).dequeue(); > > > }).animate({ opacity: 'show'}, 'fast'); > $('#word1').animate({ opacity: 'hide'}, > 'fast').queue(function > (){ > > > $(this).text(frameTxt); > > > $(this).dequeue(); > > > }).animate({ opacity: 'show'}, 'fast'); > }); > > }); > > > > === > > But the below code doesn't - it definitely loads the external JSON > file (javascript/test.js for now - it will be server generated later) > because the alert function call in the thisStory = $.getJSON(blah > blah) section works, but the var thisStory is either not getting > filled with the data that is being loaded by the getJSON method (my > suspicion) or the $('.frame').click(function(thisStory) function > doesn't have access to the contents of the var thisStory because of > scope. > > http://dev.illovich.com/storigraphi6.html > ==JSON file= > { > "imgURL": "storigraphs/test1.jpg", >
[jQuery] Re: Best book to learn jQuery?
You can learn javascript as you learn jQuery. In fact, I would say it is much, much easier to learn jQuery then do a deep dive into learning javascript. And learning javascript extremely well isn't actually a requirement for getting started in web application development any longer because of libraries like jQuery. It makes things easier if you know javascript, helps with debugging, and if you have a more complicated app it becomes necessary. But if just starting out, learning jQuery first is a valid starting point, then in order to learn more start diving into how jQuery abstracts browser issues away and how it works to do things like selectors/inserting/events/ajax. for example, $('td .class').hide(); is much easier to learn then: var allElements = document.getElementByTagName('*'); var arr = []; for (var a = 0; a < allElements.length; a++) { if (allElements[a].className === 'class') { allElements[a].setAttribute('display', 'none'); } } Not to mention any cross browser issues that are created in rolling your own way to do this. Learning jQuery 1.3 is an excellent book for getting started in jQuery, especially since it is up to date with the latest version of jQuery. But, I might be biased since I've written a couple of articles for Karls site :) Eventually, you'l want to get Douglas Crockfords excellent book, Javascript: The Good Parts as well. It isn't really a javascript primer but there is lots of good stuff in there. You can also start readign at: http://javascript.crockford.com/ Josh Powell On May 18, 12:37 pm, alex wrote: > Ah. I'm sure this sounds dunce-y because 'jQuery does it for me', but > is a solid grounding in Javascript necessary to a solid grounding in > jQuery (or at least, being able to use jQuery), or just good > practice? > > I would guess, as a complete novice, that just using what is already > available may not require pure JS knowledge, but more advanced things > like building plugins would? I assume then that 'Learning jQuery' > would not be the first port of call for me? > > On May 18, 2:55 pm, mdk wrote: > > > Yes, but because he has no JS he will like have a tough time. I would > > read a basic JS book first, then go for Learning jQuery 1.3. > > > Mike > > > On May 18, 8:35 am, Karl Swedberg wrote: > > > > I've heard Learning jQuery 1.3 is a great read, too. ;-) > > > > --Karl > > > > > > > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > > > On May 18, 2009, at 9:07 AM, MorningZ wrote: > > > > > I always recommend "jQuery in Action" it's a great read > > > > > On May 18, 3:19 am, alex wrote: > > > >> Just wondering what your opinions are on the best book out there, for > > > >> a beginner, to learn jQuery? I know HTML and CSS well enough, but > > > >> have > > > >> no javascript knowledge. > > > > >> Thanks
[jQuery] Re: I'll Donate $20USD to Jquery if you can teach me how to do this
If you aren't forced to use XML, look at trying JSON instead. It is a MUCH friendlier format for passing information around. On May 17, 11:09 pm, KrushRadio - Doc wrote: > Paypal Transaction ID: 8PY233604R986225R :D > > Thanks for your help. > > Actually, there were 2 parts that I didn't get.. one was the CSS > selector syntax and how it needed to be formed inside of the initial > grab.. > > Thats the learning curve. the way that 'day[name=Monday]show' didn't > make any sense to me. in xpath i'd have to use the /day > [...@name='monday']/show would have made more sense... The lack of > quotes would have thrown me the most. i probably would have chained > the show at the end of it, in another each function. > > So, basically, the initial dataset definition can be in the first > part, I don't have to chain the find(day and attribute).find(show, > data).each(function(){ do stuff here} which was the original track i > was going down. > > Thanks so much again... this part has been haunting me. > > ~Doc > > On May 17, 8:20 pm, deltaf wrote: > > > And now for the "teaching" part of the request... > > > KrushRadio, the crucial part that I believe you wanted to be taught > > about is: > > $('day[name=Monday]>show', data) > > > If you're familiar with CSS selector syntax, that's a great head- > > start.The full details can be found athttp://docs.jquery.com/Selectors > > > To break it down for you, the selector includes " elements that > > are children of elements with name attributes equal to > > 'Monday'". All of the matched results are put into an array of > > elements which are iterated with .each(). > > > Hope we've helped earn jQuery that donation! > > > - jb > > > On May 17, 8:43 pm, "comslash.com" wrote: > > > > $(function(){ > > > > $.ajax({ > > > type: "GET", > > > url: "test.xml", > > > dataType: "xml", > > > success: function(data){ > > > $('day[name=Monday]>show', > > > data).each(function(){ > > > time = > > > $(this).find('time').text(); > > > dj > > > = $(this).find('dj').text(); > > > showname > > > =$(this).find('showname').text(); > > > > > > > $('body').append(time + '' + dj + '' + showname + > > > ''); > > > }); > > > } > > > }); > > > > });- Hide quoted text - > > > - Show quoted text -
[jQuery] Re: The jQuery Object, Namespaces, and Program Modules -- Connecting the Dots Between jQuery and Javascript
Try this: http://www.learningjquery.com/category/levels/beginner?order=ascending On May 5, 9:08 am, kiusau wrote: > On May 5, 8:24 am, Rey Bango wrote: > > > Great advice Matt. > > But, no source! > > Roddy
[jQuery] Re: Jquery and Other Libraries Error
are you using jQuery.noConflict(); http://docs.jquery.com/Core/jQuery.noConflict If so, put the noConflict call immediately after including the jQuery library is included. If that doesn't work come back here with more details about your issue and preferably a page where we can look at your code. Josh Powell On Apr 26, 7:42 am, Sparky12 wrote: > Problem is that I read > thehttp://docs.jquery.com/Using_jQuery_with_Other_Libraries > - and i use "jQuery" now ? So not sure why its occurring? > > P.S - About code - i dont even use my own code. I just use this plugin > and jquery - and it throws error ?
[jQuery] Re: Alternate $.load
It would be much easier to generate a json response instead of html and use .getJSON and then the DOM insertion functions to generate the html you need on the page. On Apr 23, 1:41 am, Colonel wrote: > This isn't entirely correct, and not quite what I had. For example I > have a lots of divs in temp.php (after work with DB). And in the end > of $.ajax I have msg. How I can manipulate with this and find divs and > p and so on ? > > On 23 апр, 05:08, Shane Riley wrote: > > > Typically you'd only echo the data back that you want instead of > > having to weed through a string of HTML data to extract what you need. > > From what it looks like, you're needing a specific element from > > another page while still being able to access the other page > > (temp.php) in its entirety. The easiest solution in this case would be > > to send some data to temp.php letting it know that you're initializing > > an asynchronous request, and then have the PHP return only what you're > > looking for. A quick solution in this case would be something like > > this: > > > $.ajax({url: 'temp.php', > > data: "ajax=true", > > cache: false, > > error: function(msg) {alert("Error Saved: " + msg);}, > > success: function(msg) {alert("Data Saved: " + msg);}, > > complete: function() {$.unblockUI();} > > }); > > Then in temp.php, check for this flag, and if it's true, send the > > header2 div only. > > > > $header2 = 'Some text in header2 ...'; > > if ($_GET[ajax]) > > { ?> > > > > > > > > Test file > > > > > > > > Some text in div header > > > $id = isset($_GET["ID"]) ? $_GET["ID"] : ""; > > $number = isset($_GET["NUMBER"]) ? $_GET["LOT_NUMBER"] : ""; > > echo "id =" . $id . ""; > > echo "number = " . $number . ""; > > echo $header2; > > ?> > > > > > > > > > However ideally you'd use a separate PHP function or file altogether > > to handle it. > > > On Apr 22, 8:21 pm, Colonel wrote: > > > > I know it. But how I can get content from remote file by $.ajax? > > > For example I have some file temp.php: > > > > > > > > > > > > > Test file > > > > > > > > > > > > Some text in div header > > > > > $id = isset($_GET["ID"]) ? $_GET["ID"] : ""; > > > $number = isset($_GET["NUMBER"]) ? $_GET["LOT_NUMBER"] : ""; > > > echo "id =" . $id . ""; > > > echo "number = " . $number . ""; > > > ?> > > > Some text in header2 ... > > > > > > > > > > and Am using $.ajax: > > > > $.ajax({url: 'temp.php', > > > cache: false, > > > error: function(msg) {alert("Error Saved: " + msg);}, > > > success: function(msg) {alert("Data Saved: " + msg);}, > > > complete: function() {$.unblockUI();} > > > }); > > > > how I can get for example content only from div with id=header2 ? > > > > On 23 апр, 01:55, Shane Riley wrote: > > > > > You can use a number of Ajax functions built in to JQuery depending on > > > > your specific needs. Check them out athttp://docs.jquery.com/Ajax. If > > > > all you're looking to do is insert one file into another, load is > > > > normally the way to go, unless you're looking to place the loaded file > > > > before, after, or in between elements rather than inside a placeholder > > > > element. > > > > > On Apr 22, 5:50 pm, Colonel wrote: > > > > > > Is there another way load HTML from a remote file and inject it into > > > > > the DOM (instead of $.load)?
[jQuery] Re: jQuery Ajax Error in Firefox 3.0.8
what does ajax.php return? at what stage is the error, beforesend, error, success, complete? Put in a console.log and see if it is executed in each of the states. Just a style suggest, but reverse your usage of quotes: $('#searchresult').html(' '); instead of $('#searchresult').html(" "); On Apr 22, 6:34 am, "Geo.." wrote: > Hi friends > I tried to develop an ajax request using jQuery > It works fine with IE and Even Chrome > But I always getting same error in firefox "411 Length Required" On > firebug > error shows on jquery.js line no 19 > > my code is given below > $.ajax({ > type:'POST', > url:'ajax.php', > dataType:"html", > cache:false, > timeout:1, > beforeSend:function(){ > $('#searchresult').html(" valign='middle' > style:'height:300px;position:fixed;'> /> "); > > }, > error:function(){ > $('#searchresult').text("Server Not Responding ,Try > again ").show > ().fadeOut(2000); > }, > success:function(data){ > $('#searchresult').html(data); > } > > }); > > Is there any common error with jquery + firefox + ajax > > I tried versions of jquery 1.2.6 and 1.3.2 > > expecting your help > > Geo ..
[jQuery] Re: Any benefit to using event.preventDefault() over "return false" to cancel out an href click?
It sounds like John is saying that e.preventDefault() will prevent the default event from occuring and e.stopPropogation() will prevent the event from bubbling up and return false will do both, so If you only want to stop the default but allow propogation or vice versa, then use the methods, otherwise use return false to do both. On Apr 20, 1:01 pm, kgosser wrote: > Thanks, John. > > So is it advisable to use one form or another? > > I've used return false throughout my app, and I'm trying to decide if > it's a best practice to change it to preventDefault() if it's wiser to > do so. > > On Apr 20, 2:26 pm, John Resig wrote: > > > return false does e.preventDefault() and e.stopPropagation(). > > > --John > > > On Mon, Apr 20, 2009 at 3:20 PM, kgosser wrote: > > > > Just curious if there is a best practice when choosing between > > > > $("a").click(function(){ > > > // stuff > > > return false; > > > }); > > > > and > > > > $("a").click(function(){ > > > // stuff > > > event.preventDefault(); > > > }); > > > > to cancel out the href of an anchor when clicked. > > > > Thanks in advance for the help.
[jQuery] Re: jquery-1.2.6.min.js and mootools.v1.1.js not compatable
http://docs.jquery.com/Core/jQuery.noConflict On Apr 20, 12:54 pm, amanj wrote: > Hi All, > i have a problem with web page, i have 2 js files for tow topic > jquery-1.2.6.min.js > mootools.v1.1.js > those file are not compatable togeher, please if have any thing or any > problem could you advice me how can i use it? > > Thanks
[jQuery] Re: Questions about $.live, Live Query and performance
Geoff - Selectors do make some difference, they always do, but the way I've heard that .live() works is to add an event handler on the document root and when events bubble up to it, doing some javascript mojo to detect what element that event happened on and seeing if it matches the selector. .live('click') events do not have a major impact on performance and can even speed things up as you do not need to bind a click event on every dynamically created link. .live ('mouseover') and the like, however, would get executed far more often and can easily degrade performance, so be careful with these. On Apr 19, 9:16 am, Geoffrey wrote: > $.live and Live Query are both wonderful. I am hoping to put them to > extensive use in my projects. > > I have a few questions about $.live and Live Query and their effect on > performance. > > Background: If I recall correctly, the original release of Live Query > could have some performance problems. I don't remember if things > bogged down when the DOM had a lot of elements, when you added a large > number of Live Query events, did a lot of updating or exactly what. > > Question 1: > What were the specific concerns around performance with the 1.0.x > releases of Live Query? > > Now with jquey 1.3, there is $.live. $.live does not do everything > that Live Query does, but does do some of it. > > Question 2: > Does $.live use a different technique for handling events than Live > Query? > > Question 2a: > If it is different, are there any performance concerns using $.live > like there used to be with Live Query? > > Live Query 1.1.x requires jquery 1.3. I am guessing that the new > version uses $.live internally. > > Question 3a: > Is the performance of Live Query better in the 1.1.x version? > > Question 3b: > Are there some selectors that have better performance than others? or > to say it another way, do all of the selectors perform the same or, > for example, does > $('input').livequery('click', function() { }); > perform better than > $('input').livequery('change', function() { });? > > Using $.live or Live Query. > Question 4: > Is there any difference in performce between using > $('input').livequery('click', function() { }); > vs > $("input").live("click", function(){ });? > > I am thinking of really diving in to using $.live and/or Live Query. I > am trying to get a complete understanding of all of the issues that > may arise. > > Thanks > -Geoff
[jQuery] Re: Append before closing tag
Below is the call and where the code passed into the call would place the content. $('#aP').before(); $('#aP').prepend(); lorem ipsim dolor sit amet... $('#aP').append(); $('#aP').after(); On Apr 18, 11:49 pm, MauiMan2 wrote: > Does jQuery provide a way to append an element immediately before the > closing tag of another element? For instance, say I have the following > paragraph element: > > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean > adipiscing gravida leo. In hac habitasse platea dictumst. Phasellus > auctor odio id ligula. Morbi in risus et nulla vehicula blandit. > Quisque varius, enim eget interdum cursus, risus est auctor nisi, vel > laoreet magna orci ac neque. > > But that I would like to add a link in right before the end to obtain > this: > > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean > adipiscing gravida leo. In hac habitasse platea dictumst. Phasellus > auctor odio id ligula. Morbi in risus et nulla vehicula blandit. > Quisque varius, enim eget interdum cursus, risus est auctor nisi, vel > laoreet magna orci ac neque.http://www.hotbot.com";>Remember > Me? > > Is there a way to do that? If not, is it possible to make a plugin for > that?
[jQuery] Re: Creating custom attributes in html
@all - thanks for all the comments. Love the heated discussion. @RobG - can you code up some example code as to how you would solve the same problem I presented code for? And while it is off topic...can you provide the code you used to run the benchmarking? I'm not challenging your results, just want to see and fiddle with them. For example, instead of just adding 10k span nodes, make it 400 table rows with 5 tds and 5 links. Have the table rows and tds all have a class, the links a class and an href and text and compare that against a string with the same. I bet the creation, attribute setting, and insertion will take a lot longer. As for adding 10,000 elements to a page... I am adding up to 500 rows to a table with 6 tds in each row and a link in 5 of those tds and text in the other... so that is 500 * 6 * 6, or up to 18,000 nodes. @Kean - Yes, join is faster... usually. If speed is of the utmost importance, then I test using it because I have had it end up being slower. Otherwise, I use += because it's more legible. Even with the 18,000 node case I mentioned above, += finishes up in 486ms in FF 3.0.8 which more then meets our requirements. I haven't even benchmarked it with Chrome, but I would guess significantly less. There are a lot of other things that can be done to speed up insertion first that make a much larger impact. See my aforementioned article, it's a great discussion, I've just been involved in it several times :). Thanks all, Josh On Apr 16, 12:06 pm, Kean wrote: > @Josh Powell > - string concatenation is plenty fast 99% of the time and a lot more > readable. > Yes string concatenation is more readable and 99% faster for normal > usage. But looping and concatenate a huge chunk in this particular > case is slower. Reason: every + between 2 strings returns a new string > before concatenating with other strings. Array.prototype.join does not > have that problem. You just need more than 6 string concatenation > (subject to string length and debate) and it will be a good choice for > Array.prototype.join to take over. > > - W3C DOM Node creation is much slower then inserting via innerHTML, > especially as you add more nodes. It doesn't matter how fast the > nodes are created, it will always be slower to create, adjust, and > insert 10,000 nodes then one string. > That's old school thinking. Please refer to my original post, I am > talking about Chrome's v8 engine and browser detection. You will be > pleasantly surprised. See RobG's comment too. > > @RobG > Thanks for benchmarking.
[jQuery] Re: Creating custom attributes in html
@all - So far, the only reasons I've heard not to add custom attributes are 1) Dogma, 2) May cause quirks mode. In my mind, the benefits gained by using custom attributes: less code, simplicity, and clarity, far outweigh these two reasons not to do it. @Jack K - Thanks for the links :). I will consider adding 'data-' to future custom attributes. But, I actually don't really care if my html code is a "valid" document. Being a valid document has no practical meaning, all browsers render it just fine regardless of if it is "valid" or not. @RobG - I was being careless with my use of the words 'attribute' and 'properties', but did you really need to correct me 4 times, and then correct my use of override to overload twice? I guess you did. The class attribute might not have the words 'presentation' and 'style' in the W3C definition, but if you tell me that the class attribute is not meant primarily for styling DOM elements, I'm just going to ignore everything else you say as you are just being argumentative. > So you've already got the data in an object, now you added it as > custom HTML attributes, then suck it back out again using attr(). Can > you see the silliness inherent in the system? Actually, I think it is less silly then appending an id onto the end of the attribute id and then parsing it to obtain the id of the object I'm looking for, and then creating a custom object with get/set methods to retrieve the appropriate object to get its properties. > Why not make the media object a bit smarter than just an array, say with set > and get methods? Because that is unnecessary code. It's code I do not need to write if I just add custom attributes. @Kean - http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly To sum up: - string concatenation is plenty fast 99% of the time and a lot more readable. - W3C DOM Node creation is much slower then inserting via innerHTML, especially as you add more nodes. It doesn't matter how fast the nodes are created, it will always be slower to create, adjust, and insert 10,000 nodes then one string.
[jQuery] Re: Calling a function from a non-jQuery .JS file
> ...what is wrong with just having:- > var todayEl = document.getElementById("today"); > todayEl.innerHTML = formatDate(new Date); document.ElementById has a bug in ie6 and ie7 that will return an element with a name attribute of the same value. Use $('#today') instead. todayEl.innerHTML = "something" can cause memory leaks if events are added to DOM objects inside of todayEl and then just written over instead of being removed first. Use $('#today').html(formatDate(new Date)); instead if this could be a cause for concern. On Apr 15, 5:16 pm, kiusau wrote: > > If you want to format a local date, . . . > > > > > var todayEl = document.getElementById("today"); > > todayEl.innerHTML = formatDate(new Date); // [1] > > [1]http://www.jibbering.com/faq/#formatDate > > This also worked, but produced a format very different from that > required by the context in which the date must appear. Then too, the > code of the formatDate( ) function requires more knowledge of > JavaScript than I currently possess. This said, there are certainly > other contexts where I can make good use of both the formatDate( ) > function and the innerHTML method. > > In the end, thank you for your input. Even though it did not address > my question directly, it has expanded my knowledge of JavaScript > > Roddy
[jQuery] Re: Creating custom attributes in html
@all - thank you for your comments. What I've learned is 1) custom attributes are referred to as DOM Expandos, 2) they can cause IE to go into strict mode, 3) Developers often override the class or id of an element to store data instead of using a DOM Expando, and 4) There is a bug in jQuery having to do with .live() and Expandos. Are there any other drawbacks? Anyone else think they are beneficial? I've only heard from the naysayers so far. @mkmanning - "You could also rethink your approach; there's really no reason to store the kind of data you are in the element... " You are taking the example too literally. I was illustrating how what I was talking about worked, not giving a case where you would use it. nifty time saving trick here, I'll look into it, thank you: var tds = $('td.clickme').live('click', function() { console.log('filter'+tds.index(this)); }); @JBeckton - are you saying that using custom attributes in a selector for .live would not execute the function assigned to be executed when the elements were clicked on? Can you give me the url of the bug you are talking about? @Karl Swedburg - Right, there is a name for this. DOM Expando. Sounds like some sort of nerdy javascript superhero. @RobG - I really don't like the idea of overriding 'class' to hold data, and attr has never been so slow as to need refactoring for me. Classes are meant for presentation and it blurs the lines between presentation and logic too much for me. It's also really non-obvious when a class is used to hold data and when it is used to style the element. I generally don't use custom attributes for selectors anyway, but to hold information I'll need in the live() call. Here is an actual example of where I might use DOM Expandos: var media = [{ 'name': 'The Three Musketeers', 'type': 'book', 'about': 'Swashbucklers' },{ 'name': 'Happy Feet', 'type': 'movie', 'about': 'Penguins' }]; // would actually be from a returned ajax call returning json, but here it is. var html = ''; for (var a = 0; a < media.length; a++) { html += '' + media[a].about + ''; } $(selector).append(html); $('a.foo').live('click', function () { alert('This ' + $(this).attr('type') + ' is called ' + $ (this).attr('name') + ' and is about ' + $(this).text()); });
[jQuery] Re: Creating custom attributes in html
I cannot use .data() as I do not have a node. Creating a node for every td creates impossibly excessive append time. One one page I shortened the time to append for 500 table rows from 29,000ms to 900ms. Good to know about the potential for triggering quirks mode though, thanks. Josh Powell On Apr 14, 3:34 pm, Ricardo wrote: > If you insert these attributes server-side, the page will not validate > and might trigger quirks mode in the browser. If you are adding them > after load, there's no harm in it, but I bet using data() would be > faster for lots of elements. > > On Apr 14, 2:56 pm, seasoup wrote: > > > I was wondering what jquery developers opinion of adding custom > > attributes to html tags is, and what your basis is for these > > opinions? Why is it a good idea, or why is it a bad idea? What I > > mean is this: > > > content > > > where 'myType' isn't in any specifications. I've run into developers > > who think this is a good idea, and those who think this is a bad idea > > and I'd like to get a better sense of both sides of the argument. > > Personally, I use them all of the time. They are a great way to > > preserve information for use with .live() in jQuery, among other > > things, and since I append a long string to the DOM instead of > > creating lots of little DOM nodes, I generally cannot use .data() to > > save information on the individual nodes. > > > Example of a usage: > > > click > > ... > > $('div[name=foo]').live('click', function () { > > console.log($(this).attr('myType')); > > > }); > > > Example of why I cannot use .data(): > > > var htmlString = ''; > > for (var a = 0; a < 100; a++) { > > htmlString += 'click';} > > > htmlString += ''; > > $('div[name=foo]').append(htmlString); > > $('td[name=clickme]').live('click', function() { > > console.log($(this).attr('nodeId')); > > > }); > > > To debate the merits of using this kind of append, please go > > to:http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-cor... > > > What I'm looking for instead is a discussion of using custom > > attributes in html. > > > Thanks, > > Josh Powell
[jQuery] Re: Difference between .bind() and .click()
.bind enables you to pass variables into the callback function via the e.data attribute in the event. $(document).bind('click', {'foo': 'bar'}, function(e) { console.log(e.data.foo); }); Can't do that with the .click shortcut. Josh Powell On Apr 6, 9:53 am, jQueryAddict wrote: > I want to do something based on the click event. I was looking at > examples and at the jQuery Docs. Read them but so then a .blind() is > adding an event handler where .click() is obviously an event handler > but you could I guess use either or to handle for example a click > event: > > .bind('click', function(){... > > or > > .click(function(){ > > right? either will work on whatever element you're working with > right? just 2 different ways of doing the same thing in jQuery I > assume.
[jQuery] Re: Need to get value of table cell
What unique identifier do these cells have? Do the cells have id's? $('#theid'). Do the rows have ids? $('#theid > td').get(1) will get you the second cell of the row with an id of 'theid', does the table have an id? $('#tableid > tbody > tr' > td) will return all of the tds in that table inside of trs that are inside of the tbody. Then, by saying value I think that you mean the text inside of that cell since cells do not have a 'value' attribute, and that would be obtained using $('#tableid > tbody > tr' > td).each( function () { alert($(this).text()); // to get just the text alert($(this).html()); // to get the full html inside instead } ); Find more on selectors at: http://docs.jquery.com/Selectors and more on the .text() & .html() at: http://docs.jquery.com/Manipulation and more on the .get(1) at: http://docs.jquery.com/Core Cheers, Josh Powell On Mar 25, 1:27 pm, "webspee...@gmail.com" wrote: > Hey all. > > I have a table and I need to access the value of a particular cell in > the selected row. I've seen this type of code before but can't > remember what to search on. > > Any clues?
[jQuery] Re: getJSON() response into a table
> $.getJSON("url", function(json){ > $(json).each(function(){ > row = $("#table").append(""); > $(row).append("").html(json.cell1.value); > $(row).append("").html(json.cell2.value); > }); > }); > > something like this? This is a very, very, very... very slow way to append var html = '' $(json).each(function(){ html += '' + json.cell1.value + '' + json.cell2.value + ''; }); html += ''; $('#table').append(html); Is about 20 times faster. You can bump it up another couple of times faster by sticking all of the strings in an array and using .join before inserting them in the html, but you lose so much legibility of code that I only do that when doing thousands of string concatenations on large strings. As for Maruicio's question...Looks like you solved it. The link works fine in FF. A few other tips about the code: 1) do the .append outside of the loop by using the loop to create one long string for about 10x speed increase. 2) stick the one long string into one DOM node like a tbody for about a 6x speed increase. 3) instead of obj['name'] use obj.name They both work, but the first makes it look like a hash when you are really using properties of an object. Cheers, Josh Powell
[jQuery] Re: How to call jQuery function inside a DOM
While not what you were asking, remember that you can chain. var name = $("#label"); var nameInfo = $("#nameInfo"); name.blur(validateName).keyup(validateName); ... nameInfo.text("We want names with more than 3 letters!").addClass ("error"); Then: $('#addPhoneExt').click(tb_remove); sets an onclick event handler on what the selector returns. I'm not exactly sure what you are asking... is there a function attached to the DOM node that you are trying to execute... are you trying to execute the already set click event? Are you trying to use a function created by a plugin? On Mar 21, 9:57 am, mdjamal wrote: > Hi, > > I am trying to call/execute a jQuery function inside of another jQuery > function, the scenario is after validation of a input text field to > check if its empty, if empty display a error message and if it has > value then execute another function, the code as below, adapted from > this link > > http://yensdesign.com/2009/01/how-validate-forms-both-sides-using-php... > > var name = $("#label"); > var nameInfo = $("#nameInfo"); > //On blur > name.blur(validateName); > //On key press > name.keyup(validateName); > $("#addPhoneExt").click(validateName); > //On Submitting > //$("#addPhoneExt").click(function(){ > //if(validateName()) > //return true > //else > //return false; > //}); > > function validateName(){ > //if it's NOT valid > if(name.val().length < 4){ > name.addClass("error"); > nameInfo.text("We want names with more than 3 > letters!"); > nameInfo.addClass("error"); > return false; > } > //if it's valid > else{ > $('#addPhoneExt').click(addPhoneExt); > name.removeClass("error"); > nameInfo.text("What's your name?"); > nameInfo.removeClass("error"); > //$('#addPhoneExt').click(tb_remove); > return true; > } > } > > With the above code I am able to validate the input field but what I > need is to execute or call the "addPhoneExt" "tb_remove" (function to > close thickBox) function //if its valid. > > Appreciate your help. > > Thanks!
[jQuery] Re: jQuery and Prototype conflict
In this: jQuery(document).ready(function($){ $("#example").autocomplete(options); }); this: function($) { }) is overwriting the $ for prototype. It should be: jQuery(document).ready(function(){ $("#example").autocomplete(options); }); without passing the $ in the function. On Mar 20, 3:34 pm, K3V wrote: > I am trying to use both jQuery and Prototype at the same time. > > I've spent hours and hours searching solutions to fix this problem. > The most common method I found is > thishttp://docs.jquery.com/Using_jQuery_with_Other_Libraries. > However, it didn't work no matter how I place the "jQuery.noConflict > ()" code. > > Can anyone help me with this? > > Thanks in advance > > /* Here is my code */ > > > > http://www.google-analytics.com/urchin.js"; type="text/ > javascript"> > > _uacct = "UA-2351815-2"; > urchinTracker(); > > > > > jQuery.noConflict(); > jQuery(document).ready(function($){ > $("#example").autocomplete(options); > }); > > > > > > // Event.observe(window, 'load', function() { > var recommended_items = new RecommendedItems('recommended_items', > ="$store_id, $gift_registry_id" ?>); > recommended_items.setBaseURL('=$site_server . SITE_STANDARD ?>'); > > > recommended_items.setProduct(="$product_id, $category_id" ?>); > > recommended_items.fetchItems();}); > > //]]> >
[jQuery] Re: Preventing link clicks before document.ready();
You could also put the .click events inside a document.ready(). Then they can click away, but no results until the event handler is set after document.ready. On Mar 20, 12:30 pm, James wrote: > That's the default of how web browsers. You can work around it such as > by setting the display of those to hidden in your CSS, and use > Javascript to show it upon page ready. Depending on how your website > works, this may mean your page would not work properly if users do not > have Javascript enabled. > > On Mar 20, 5:48 am, HippieX wrote: > > > I have a problem I am sure others have encountered. I have .click() > > events attached to links in my web page, but the user is clicking > > the links before the document.ready(); fires causing unexpected > > results. Is there anyway to stop this from happening? > > > Thanks, > > > Jeff
[jQuery] Re: jQuery each problem
Glad I could help. That's an interesting thing you ran into, first, i assume that instead of $(this).val() = 'yes'; you meant $(this).val() == 'yes' or $(this).val() === 'yes' because the first one meant you are trying to store 'yes' in $ (this).val()... which wouldn't work anyway. Actually before theorizing any further, did you actually test the first or second versions of that statement above? On Mar 15, 11:25 am, macgyver47 wrote: > What works is > var yes_or_no=jQuery(this).attr("value"); > if(yes_or_no=="yes"){ > do something} > > else > { > do something else} > > Thanks for helping all the way to a fine solution > > On 15 mar, 15:10, macgyver47 wrote: > > > Unfortunatly it doesn't work > > if ($(this).val() = 'yes') > > returns nothing > > $(this).val() returns "on" no matter if you click on button Yes or > > button No > > I have been ckecking jquery doc the best I could and cannot find > > answer to my question: how to I know if user clicked on button Yes or > > button No > > Any other ideas ??? > > Thanks in advance > > Jean from France > > On 14 mar, 17:54, Josh Powell wrote: > > > > $(this).is("eq[0]") > > > > will not work because, is looks at the list of jquery objects that $ > > > (this) returns. Which is just one object. > > > > try giving the input a value of yes or no and doing > > > > if ($(this).val() === 'yes') > > > > On Mar 14, 8:51 am, macgyver47 wrote: > > > > > One more question if this is not abusing your time > > > > Structure of each question: > > > > > > > onclick='q1=1'>Yes > > > > No > > > > > > > > jQuery('.choix').click(function(e) { > > > > $(this).parent().hide();}); > > > > > as expected your answer hides the content of the question as expected > > > > How can I know if first (yes) or second (no) button was clicked > > > > I tried introducing after $(this).parent().hide(); something like > > > > if (jQuery(this).is(":eq[0]")) { > > > > do something > > > > } > > > > else > > > > { > > > > do something} > > > > > but it doesn't work ! > > > > Any ideas ? > > > > Thanks for help > > > > Jean from France > > > > On Mar 14, 9:49 am, macgyver47 wrote: > > > > > > Thank you very much for a great answer which nearly solved my > > > > > question in a very elegant way, I have even discovered in studying > > > > > selectors a little more thouroughly ( jquery doc) that you can use > > > > > jQuery('.choix').click(function(e) { > > > > > $(this).parent().parent().hide(); > > > > > and it will go 2 levels up instead of one as described in you solution > > > > > Thanks to great people like you Josh I am learning ( slowly) > > > > > Many thanks > > > > > Jean from France > > > > > > On 14 mar, 08:27, Josh Powell wrote: > > > > > > > Yes, forget about using ID's in this way. That's something you had > > > > > > to > > > > > > do before using jQuery. Think about how your HTML is structured and > > > > > > things are named/classed and the order they are in. Take advantage > > > > > > of > > > > > > how easy it is to traverse the DOM with jQuery. If yo uhave > > > > > > > > > > > > > link 1 > > > > > > Description > > > > > > > > > > > > > > > > > > > link 2 > > > > > > Description > > > > > > > > > > > > > > > > > > > link 3 > > > > > > Description > > > > > > > > > > > > > and do: > > > > > > > jQuery('.choix').click(function(e) { > > > > > > $(this).parent().hide(); > > > > > > > }); > > > > > > > Then jQuery will iterate through all of the elements on the page > > > > > > with > > > > > > a class of 'choix' and attach a click event that hides that links > > > > > > parent when clicked on. This keeps your html/javascript much > > > > > > cle
[jQuery] Re: jquery each help
read up on the .animate() jQuery effect, this might be what you are looking for. http://docs.jquery.com/Effects/animate On Mar 15, 11:46 am, Tom Shafer wrote: > I have articles in a group of divs > > width="11" > height="211"/> > > POSTED: 15 MARCH > 2008 1400 HOURS > > SNEAK PREVIEW > OF NO CHILD... div> > Lorem ipsum > dolor sit am > >> href="#">DOWNLOAD 10% DISCOUNT > PASS > > > > width="11" > height="211"/> > > POSTED: 15 MARCH > 2008 1400 HOURS > > SNEAK PREVIEW > OF NO CHILD... div> > Lorem ipsum > dolor sit amet, conat > nulla facilisis. > >> href="#">DOWNLOAD 10% DISCOUNT > PASS > > > > I am trying to loop through each class and display them one at a time, > article one will display and each class inside article one will show > (using the show()) function one at a time. This will happen with each > with each article one after another for as many articles as there are. > This could be 2 this could be 10. I know this is not a convenient way > to load a page but this is what i am trying to do. I am also using a > typewriter unction to display letters one at a time. > > I have this right now > var arrayList = $.makeArray($('.art').get()); > > $.each(arrayList,function() { > $(this).show(); > > $('.postedDate').show().jTypeWriter({onComplete:function(){ > > $('.articleHeader').show().jTypeWriter({onComplete:function(){ > > $('.articleContent').show().jTypeWriter({onComplete:function() > { > }}); > }}); > }}); > }); > > it doesnt quite get it right. > > Here is the sample page > > http://pavlishgroup.com/projects/cpt-test/ > > thanks in advance
[jQuery] Re: .getJSon
What I don't like about that method is the loss of ease of updating and reuse of code later on. If you stick it in a table coming back, and need the some data somewhere else you cannot reuse it. Also, changing things on server side requires recompiling in a java environment, which is a drag for html development. In a PHP environment it wouldn't be as big of a deal though. It's also a matter of separating the data from the layout. I prefer making an ajax request to retrieve data and do all of my layout/ styling and interactivity in javascript. That way it never becomes confusing where to go to update things. If it's a data issue, you go to the server, if it's a layout/styling issue then the problem is in the javascript. When you start breaking that line by putting html in the server side code, things can get messy. That said, what you are talking about is a perfectly valid way to code. On Mar 14, 2:10 pm, donb wrote: > Then I must be missing something: > > $("#placetoinsert").load("path/to/url"); > > would do the same thing, with the tableHTML constructed on the server > side. > > On Mar 14, 5:02 pm, Josh Powell wrote: > > > Because it puts it in the javascript and lets you easily manipulate it > > with javascript. If you get html back from the server, it's more > > difficult to manipulate. > > > $.getJson('path/to/url', function(data) { > > var tableHTML = ''; > > $.each(data.aaData, function() { > > tableHTML += '' + this[0] + '' + this[1] + > > ''; > > }); > > tableHTML += ''; > > $('#placeToInsert').append(tableHtml); > > > }); > > > On Mar 14, 12:30 pm, donb wrote: > > > > If that's all your going to do with it, why not return a table from > > > the server and simply .load() it? No transformation required in that > > > case. > > > > On Mar 14, 9:23 am, finco wrote: > > > > > Sorry if this is a duplicate post - doesn't look like the last one > > > > went through. > > > > > I've seen several examples of how to process json data with .each when > > > > the field names come over with json. My data, howver, looks like the > > > > following: > > > > > {"aaData": [ > > > > ["1001-00-1535.000","Tenant Improvements"], > > > > ["1001-00-1558.000","Selling costs"], > > > > ["1001-00-1560.000","Financing Fees"], > > > > ["1001-00-1560.001","Financing Fees - Legal"], > > > > ["1001-00-1565.000","Lease Costs"], > > > > ["1001-00-1565.001","Lease Costs -Legal"], > > > > ["1001-00-1565.002","Lease Costs - Brokerage"], > > > > ["1001-00-1570.000","Legal Fees"] > > > > ]} > > > > > How would I drop this data into a table? > > > > > Thanks in advance for your help.
[jQuery] Re: Very New To JavaScript\JQuery - Mouseover and Mouseout Question
The problem is this: $(".block a").mouseover(function(){ $(".block a").animate({ $('.block a') gets every instance of an a element with class block. So when you do the .animate on it, you are animating every element. Instead, you mean. $(".block a").mouseover(function(){ $(this).animate({ On Mar 14, 11:33 am, DLee wrote: > Hi there, > > I am having trouble grasping the usage of mouseover and mouseout when > dealing with a menu. I created a list of links and in testing, I've > been able to hover over each link and they will animate, move over 10 > pixels. On mouse out, they will move back. That's great, except when I > hover over them, every link in the list moves. I want each link to > move over as I only hover over that particular link. Here's my markup: > > > > http://code.jquery.com/jquery-latest.js";> > > > $(document).ready(function(){ > > $(".block a").mouseover(function(){ > $(".block a").animate({ > marginLeft: "10px", > }, 1500 ); > }); > > $(".block a").mouseout(function(){ > $(".block a").animate({ > marginLeft: "0px", > }, 1500 ); > }); > > }); > > > div { > background-color:#bca; > width:100px; > border:1px solid green; > } > > > > > Link1 > Link2 > Link3 > Link4 > > > > > Any help would be much appreciated. Thanks in advance! > DLee
[jQuery] Re: .getJSon
Because it puts it in the javascript and lets you easily manipulate it with javascript. If you get html back from the server, it's more difficult to manipulate. $.getJson('path/to/url', function(data) { var tableHTML = ''; $.each(data.aaData, function() { tableHTML += '' + this[0] + '' + this[1] + ''; }); tableHTML += ''; $('#placeToInsert').append(tableHtml); }); On Mar 14, 12:30 pm, donb wrote: > If that's all your going to do with it, why not return a table from > the server and simply .load() it? No transformation required in that > case. > > On Mar 14, 9:23 am, finco wrote: > > > Sorry if this is a duplicate post - doesn't look like the last one > > went through. > > > I've seen several examples of how to process json data with .each when > > the field names come over with json. My data, howver, looks like the > > following: > > > {"aaData": [ > > ["1001-00-1535.000","Tenant Improvements"], > > ["1001-00-1558.000","Selling costs"], > > ["1001-00-1560.000","Financing Fees"], > > ["1001-00-1560.001","Financing Fees - Legal"], > > ["1001-00-1565.000","Lease Costs"], > > ["1001-00-1565.001","Lease Costs -Legal"], > > ["1001-00-1565.002","Lease Costs - Brokerage"], > > ["1001-00-1570.000","Legal Fees"] > > ]} > > > How would I drop this data into a table? > > > Thanks in advance for your help.
[jQuery] Re: find among same elements using name
[name=row] On Mar 14, 10:58 am, Alain Roger wrote: > Hi, > > i have a table with checkboxes which allows user to select all row/records > or none. > they have all the same name : row > i would like to know if there is an easy way to find them in my table ? > i was thinking about something like : > $("#grid").find('td:row').each(function(i) > { > ... > > }); > > when td:row would mean each having name = row. > > is there something like that ? > > thx. > > A.
[jQuery] Re: jQuery each problem
$(this).is("eq[0]") will not work because, is looks at the list of jquery objects that $ (this) returns. Which is just one object. try giving the input a value of yes or no and doing if ($(this).val() === 'yes') On Mar 14, 8:51 am, macgyver47 wrote: > One more question if this is not abusing your time > Structure of each question: > onclick='q1=1'>Yes > No > > jQuery('.choix').click(function(e) { > $(this).parent().hide();}); > > as expected your answer hides the content of the question as expected > How can I know if first (yes) or second (no) button was clicked > I tried introducing after $(this).parent().hide(); something like > if (jQuery(this).is(":eq[0]")) { > do something > } > else > { > do something} > > but it doesn't work ! > Any ideas ? > Thanks for help > Jean from France > On Mar 14, 9:49 am, macgyver47 wrote: > > > Thank you very much for a great answer which nearly solved my > > question in a very elegant way, I have even discovered in studying > > selectors a little more thouroughly ( jquery doc) that you can use > > jQuery('.choix').click(function(e) { > > $(this).parent().parent().hide(); > > and it will go 2 levels up instead of one as described in you solution > > Thanks to great people like you Josh I am learning ( slowly) > > Many thanks > > Jean from France > > > On 14 mar, 08:27, Josh Powell wrote: > > > > Yes, forget about using ID's in this way. That's something you had to > > > do before using jQuery. Think about how your HTML is structured and > > > things are named/classed and the order they are in. Take advantage of > > > how easy it is to traverse the DOM with jQuery. If yo uhave > > > > > > > link 1 > > > Description > > > > > > > > > > link 2 > > > Description > > > > > > > > > > link 3 > > > Description > > > > > > > and do: > > > > jQuery('.choix').click(function(e) { > > > $(this).parent().hide(); > > > > }); > > > > Then jQuery will iterate through all of the elements on the page with > > > a class of 'choix' and attach a click event that hides that links > > > parent when clicked on. This keeps your html/javascript much cleaner > > > as you do not even need to worry about assigning incrementing id's to > > > elements and keeping the numbers matched to another elements id to > > > link them. > > > > This is not an exact solution for you, but it should point you in the > > > right direction and way of thinking about how to use jQuery. > > > > Josh > > > > On Mar 13, 11:27 pm, macgyver47 wrote: > > > > > What it does: > > > > jQuery('.choix1').click(function(){ > > > > jQuery('#quest1').hide(); > > > > When you click on either button related to question 1 it just hides > > > > the div id="quest1" > > > > What I would like to do is something like: > > > > for (i=1; i<=6; i++){ > > > > $("choix " + i ).click function(){ > > > > $("#quest"+i).hide(); > > > > } > > > > So every time user clicks on any radio button with id="choix1" or > > > > choix2 or choix3... it will hide the related div with id="quest1" or > > > > quest 2... > > > > Any ideas > > > > Thanks for help > > > > Jean from France > > > > > On 14 mar, 00:57, Josh Powell wrote: > > > > > > What this is doing: > > > > > > jQuery('.choix1').click(function(){ > > > > > jQuery('#quest1').hide(); > > > > > > }); > > > > > > is looping through every element on the page with a class of 'choix1', > > > > > so you could either change all of the elements you want to loop though > > > > > classes to choix and then do > > > > > > jQuery('.choix').click(function(){ > > > > > jQuery(this).parent().hide(); > > > > > > }); > > > > > > Which will loop through them all and then hide them when either yes or > > > > > no is selected or find some other way of identifying every element > > > > > that you want to act on. Perhaps use the name field, or if they are > > > > > the only radio buttons on the page you can do > > > > > > jQuery(':radio') as the selector. > > > > > > On Mar 13, 2:45 pm, macgyver47 wrote: > > > > > > > Hi > > > > > > I am new to jQuery and learning slowly > > > > > > Here is the problem > > > > > > I have 6 questions each of them has 2 buttons ( yes or no radio > > > > > > buttons) > > > > > > When user clicks on 1 answer I would like to hide the entire > > > > > > question > > > > > > I have achieved to do this for 1 question but no success looping > > > > > > through all 6 questions ! > > > > > > > > > > > onclick='q1=1'>Yes > > > > > > > > > > > onclick='q1=0'>No > > > > > > > > > > > > > > > > > onclick='q1=1'>Yes > > > > > > > > > > > onclick='q1=0'>No > > > > > > > > > > > > ... > > > > > > jQuery('.choix1').click(function(){ > > > > > > jQuery('#quest1').hide(); > > > > > > }); > > > > > > This works for 1 item but how can I loop through all all of them > > > > > > Thanks for help > > > > > > Jean from France
[jQuery] Re: Please help me SPEED UP my dev. MySQL => PHP => JSON => AJAX => jQueryUI
No, JSON is the correct route. If you are using ajax to retrieve json, then you can pull the json into a javascript object immediately. If you are using PHP to generate pages, then you can print out the JSON object as a string directly into javascript and create javascript objects that way. jQuery has built in methods to .getJSON that provides the basis of all my AJAX calls in the web app I work on. Another tip, standardize all the JSON responses into a format you like, for example { 'header': { 'type': String, 'message': String }, 'payload': { 'data': [] } } That way you can create one object that calls .getJSON and use that object to do all of your ajax calls and have a standard set of responses to being timed out, 404 errors, loading alert while the ajax call is running, etc. Good luck. On Mar 14, 7:38 am, dani wrote: > Before taking on a challenging task, please give me some ideas to > speed up my development! > > Just as the topic is saying, I will primarily be doing: MySQL => PHP > => JSON => AJAX => jQueryUI > > I used to work with CakePHP but I have little experience with JSON. > Any hints on your favourite tools and helpers (MVC frameworks, MySQL > tools, JSON parsers, jQuery extensions etc.) are greatly appreciated. > > If you think I should modify my "route", for example XML instead of > JSON, please put forward the pros and cons. > > Thanks.
[jQuery] Re: Using " " (or not!)
$("#msgUnits").text( ); will definitely not work. is not the name of a javascript object. On Mar 13, 9:46 pm, Swatchdog wrote: > This does not work: > > $("#msgUnits").text( ); > > nor does this... > > $("#msgUnits").text(' '); > > I guess is html only? > > Clues, anyone?
[jQuery] Re: jQuery each problem
Yes, forget about using ID's in this way. That's something you had to do before using jQuery. Think about how your HTML is structured and things are named/classed and the order they are in. Take advantage of how easy it is to traverse the DOM with jQuery. If yo uhave link 1 Description link 2 Description link 3 Description and do: jQuery('.choix').click(function(e) { $(this).parent().hide(); }); Then jQuery will iterate through all of the elements on the page with a class of 'choix' and attach a click event that hides that links parent when clicked on. This keeps your html/javascript much cleaner as you do not even need to worry about assigning incrementing id's to elements and keeping the numbers matched to another elements id to link them. This is not an exact solution for you, but it should point you in the right direction and way of thinking about how to use jQuery. Josh On Mar 13, 11:27 pm, macgyver47 wrote: > What it does: > jQuery('.choix1').click(function(){ > jQuery('#quest1').hide(); > When you click on either button related to question 1 it just hides > the div id="quest1" > What I would like to do is something like: > for (i=1; i<=6; i++){ > $("choix " + i ).click function(){ > $("#quest"+i).hide(); > } > So every time user clicks on any radio button with id="choix1" or > choix2 or choix3... it will hide the related div with id="quest1" or > quest 2... > Any ideas > Thanks for help > Jean from France > > On 14 mar, 00:57, Josh Powell wrote: > > > What this is doing: > > > jQuery('.choix1').click(function(){ > > jQuery('#quest1').hide(); > > > }); > > > is looping through every element on the page with a class of 'choix1', > > so you could either change all of the elements you want to loop though > > classes to choix and then do > > > jQuery('.choix').click(function(){ > > jQuery(this).parent().hide(); > > > }); > > > Which will loop through them all and then hide them when either yes or > > no is selected or find some other way of identifying every element > > that you want to act on. Perhaps use the name field, or if they are > > the only radio buttons on the page you can do > > > jQuery(':radio') as the selector. > > > On Mar 13, 2:45 pm, macgyver47 wrote: > > > > Hi > > > I am new to jQuery and learning slowly > > > Here is the problem > > > I have 6 questions each of them has 2 buttons ( yes or no radio > > > buttons) > > > When user clicks on 1 answer I would like to hide the entire question > > > I have achieved to do this for 1 question but no success looping > > > through all 6 questions ! > > > > > onclick='q1=1'>Yes > > > No > > > > > > > > onclick='q1=1'>Yes > > > No > > > > > > ... > > > jQuery('.choix1').click(function(){ > > > jQuery('#quest1').hide(); > > > }); > > > This works for 1 item but how can I loop through all all of them > > > Thanks for help > > > Jean from France
[jQuery] Re: jQuery each problem
What this is doing: jQuery('.choix1').click(function(){ jQuery('#quest1').hide(); }); is looping through every element on the page with a class of 'choix1', so you could either change all of the elements you want to loop though classes to choix and then do jQuery('.choix').click(function(){ jQuery(this).parent().hide(); }); Which will loop through them all and then hide them when either yes or no is selected or find some other way of identifying every element that you want to act on. Perhaps use the name field, or if they are the only radio buttons on the page you can do jQuery(':radio') as the selector. On Mar 13, 2:45 pm, macgyver47 wrote: > Hi > I am new to jQuery and learning slowly > Here is the problem > I have 6 questions each of them has 2 buttons ( yes or no radio > buttons) > When user clicks on 1 answer I would like to hide the entire question > I have achieved to do this for 1 question but no success looping > through all 6 questions ! > onclick='q1=1'>Yes > No > > onclick='q1=1'>Yes > No > > ... > jQuery('.choix1').click(function(){ > jQuery('#quest1').hide(); > }); > This works for 1 item but how can I loop through all all of them > Thanks for help > Jean from France
[jQuery] Re: Invalid Argument in IE7/8
Where does this error come from? [cycle] terminating; zero elements found by selector You can see it when the page loads on the firebug console, but it doesn't give a file name or line number. it may be that since you aren't getting any elements back, IE is messing up because you are trying to use a method or attribute of those elements that are not defined. On Mar 13, 8:36 am, Nic Hubbard wrote: > My page is throwing an invalid argument error on line 23 of jQuery, > version 1.2.6. Is there any reason this should be happening? It > seems that because of this, the rest of my script is not running. > > I am using the cycle plugin as well as jScroll Panel. > > Example:http://67.207.148.241/home
[jQuery] Re: triggering events with selected
1 2 3 4 5 content content content content content $('.numberPages').change(function() { $('p.foo').hide().eq($(this).find(':selected').text()-1).show(); });
[jQuery] Re: $(byName) <> $(byClass) in 1.3.2
You can still use name, just change your selector to $('[name=div1]') Also, when writing out html in string, put them between single quotes and the html in double quotes so you can do this: var htmlText = 'Hola!!'; instead of var htmlText = 'Hola!!'; Josh Powell On Mar 12, 6:10 pm, Karl Rudd wrote: > Use id="whatever" rather than name="whatever". In CSS "#whatever" > refers to an element with id="whatever". > > The "name" attribute is for form elements, not for general elements. > > Karl Rudd > > On Fri, Mar 13, 2009 at 10:02 AM, radioAM wrote: > > > hello, i'm new at using jQuery and i'm trying to create dynamic > > content. > > the problem is thant i can't retrieve the > > new content by name. > > here is an example to reproduce what i'm saying. > > > (function() { > > > fn = function() { > > $('.widgetBar').append(''); > > var acc = $('.acc1'); > > > //var htmlText = 'Hola!! > a>'; > > var htmlText = 'Hola!! > a>'; > > > acc.append(htmlText); > > > alert($('#div1').size()); // Returns 0 > > alert($('.pp').size()); // Returns 1 > > }; > > > $(fn); > > > return; > > }) > > (); > > > what i'm doing wrong ? > > thanks.
[jQuery] Re: Very simple question...
@7times9 I'm not sure what eq() stands for, come to think of it, but I always read it in my heads as 'equals' as in the index equals 2. > On Thu, Mar 12, 2009 at 10:04 AM, 7times9 <7tim...@googlemail.com> wrote: > > > ...what does eq as in .eq(2) stand for? > > > It helps me to read jQuery in my head if I know what abbreviations > > really mean :-) > > > Thanks
[jQuery] Re: Order Items. Please help me. Thank You.
@mkmanning > An even more important performance gain can be had by > not doing string concatenation (I put a caveat about this in the code > comment's also), but build an array of your html and then join the > array; it's siginficantly faster. Funny that you mention this. In current browser versions it is ~2-4 times faster to do array.join instead of += and in the next gen browsers the difference is close to none until you get to extremely large loops and strings/arrays, around 100,000 or so, where is it about 1.25 times faster in Chrome, 1.6 times in IE8, and twice as fast in webkit. See my recent article and tests for a more comprehensive explanation: http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly To summarize, the most significant things you can do to impact append performance: 1) Move the append out of the for loop, and append one long string ~9x-10x faster 2) Append one DOM node instead of a collection of DOM nodes. ~6x faster appends much faster then much faster then etc... 3) create a long html string instead of smaller nodes and then appending to and adding attributes to them. ~3x faster $(selector).append('content'); instead of $(selector).append($('').append("something").addClass ('foo').attr('id','something')); Doing those three generally speeds things up enough, and using += is so much more legible then array.join that I cut my performance gains off there unless I have really long arrays and speed seems to be an actual problem instead of a hypothetical one.
[jQuery] Re: Get Textbox-value and write to table-cell ()
*shrugs* up to you, brian means to use string.splice(a); where a = number of characters before the index that is tacked on. so if the name/id is foo_1, foo_2 then you'll do: $('[id^=foo_]').change(function() { $('[name=post-amount_' + $(this).attr('id').slice(3) + ]').val($ (this).val()); }); I personally find this kind of string munging difficult to read and maintain. Could just be personal preference though. Good luck. Josh Powell On Mar 10, 10:39 pm, Eric Gun wrote: > @mkmanning: Well done!! Your script works well. Thanks, and great > job! :) > > @brian-263: Thanks for the idea. Yup, i'm using PHP as i said before. > Therefore, i need those '[]'. > Anyway, i'm still curious with what you mean by 'parse out the index > from each of the IDs ...'. I'm not really sure how to do it. If you > don't mind, can you give me an example script? > > @Josh Powell: Thanks for being the first one to reply my post :) > I'm sorry, but i'm afraid i agree with brian-263 about better not > making up new attribute instead of optimizing pre-defined ones. > > @all: Maybe i was wrong to explain my problem when i used the word > 'instantly' (as this is my first post :) In fact, the 'deal-post' > table is located in different tab panel with the 'deal-summary' one > (i'm using JQuery UI plugin for tabs). So, i will drop the 'keyup' > event and also forget about autocomplete plugins for now. I will use > the 'change' event instead, as i think it's enough for me. > > Thanks guys!!! > > On Mar 10, 4:07 pm, Eric Gun wrote: > > > Sorry guys, just had a couple days off. > > I will look forward to your answers and reply back here soon. > > > Thanks for concerning, > > > Regards, > > > On Mar 8, 8:22 am, mkmanning wrote: > > > > With the markup example in the OP, use this: > > > > var dp = $('#deal-post tbody tr'); > > > dp.find('input[name^=dealAmount]').keyup(function(){ > > > var amount = $(this); > > > $('#deal-summary tbody tr:eq('+dp.index(amount.closest('tr')) > > > +')').find('td.inc-current').text(amount.val()); > > > > }); > > > > On Mar 7, 4:10 pm, brian wrote: > > > > > On Sat, Mar 7, 2009 at 6:21 PM, Josh Powell wrote: > > > > > > 6 of one... half dozen of another... > > > > > I don't buy that. I've suggested using an attribute whose purpose is > > > > well defined. Making up attributes that aren't represented by the > > > > DOCTYPE is a bad idea. Don't get me wrong--I've done it before. Though > > > > always to store temporary info. Happily, we have data for that, now. > > > > The OP's needs, though, are to identify table cells as being connected > > > > to specific text inputs. That's what ID is for.
[jQuery] Re: Get Textbox-value and write to table-cell ()
6 of one... half dozen of another... On Mar 7, 12:04 pm, brian wrote: > On Sat, Mar 7, 2009 at 2:16 PM, Josh Powell wrote: > > > Why do you have the [] characters in the name of the elements? That > > might screw up selectors. > > PHP, likely. But there's no need to use the name in the selector. > > > Another options is to give the dealAmount inputs a new attribute with > > a value of an incrementing numbers, foo="0" say. As long as the post > > amounts are in the same order you could: > > Why create a new attribute out of thin air when an ID will work just > as well? Bad practice, IMO. Yes, the index would have to be parsed out > but how hard is that?
[jQuery] Re: Get Textbox-value and write to table-cell ()
Why do you have the [] characters in the name of the elements? That might screw up selectors. Another options is to give the dealAmount inputs a new attribute with a value of an incrementing numbers, foo="0" say. As long as the post amounts are in the same order you could: $('[name=dealAmount'].change(function() { $('[name=post-amount]:eq(' + $(this).attr('foo') + )').val($ (this).val()); }); But this will only update when the input loses focus. If you want it to work with every key press, use the keyPress or keyDown events instead of the click event. No guarantees on that one though, I haven't actually had a need for it yet. On Mar 6, 10:41 pm, Eric Gun wrote: > Hi guys, let's get straight to the problem. > > First, I have this "deal-post" table (actually content is > generated dynamically from PHP code, but I omitted it here and make it > static for simplicity sake): > > > > > Posting > Description > Amount (Rp.) > (%) > > > > > Posting 1 name="hidPostCompId[]"/> > > > name="dealDesc[]"/> > > style="padding: 0pt 3px;"> > name="dealAmount[]"/> > > > > > Posting 2 name="hidPostCompId[]"/> > > > value="" name="dealDesc > []"/> > > style="padding: 0pt 3px;"> > name="dealAmount[]"/> > > > > > Posting 3 name="hidPostCompId[]"/> > > > value="" name="dealDesc > []"/> > > style="padding: 0pt 3px;"> > name="dealAmount[]"/> > > > > > Posting 4 name="hidPostCompId[]"/> > > > value="" name="dealDesc > []"/> > > style="padding: 0pt 3px;"> > name="dealAmount[]"/> > > > > > > > > Sell Price : > > > > > > > I want to copy the textbox-value in [Amount] column (i give the > a class name="post-amount") to respective index in [Current] column (i > give the a class name="inc-current") as in "deal-summary" table > below: > > > > > Posting > Total > Current > > > > > Posting 1 > > > > > Posting 2 > > > > > Posting 3 > > > > > Posting 4 > > > > > > > Sell Price : > > > > > > > It should work like this: when I type the numeric-amount in "dealAmount > []" textbox, the value will be showing up instantly in "inc-current" > column in "deal-summary" table in the same row index with "deal-post" > table. > > I am so desperate that I have been looking around across the internet, > including this forum, but I just can't get the idea. > Any help for me will be very appreciated. > > Thanks! > > Regards,
[jQuery] Re: display children using jQuery
Long answer: Check out the section on Traversing in the jquery documentation on the site. Lots of good examples and documentation on there. Short answer: console.log($(element).children())); On Mar 7, 1:33 am, Alain Roger wrote: > Hi, > > i need to debug jQuery code and i would like to know if there is an easy way > to display (as alert or into FFconsole) the children tags of a particular > element ? > thanks > > Al.
[jQuery] Re: can't get started
Did you mean to: instead of On Mar 5, 3:37 pm, dawnerd wrote: > Can you please post the html you were using? > > On Mar 5, 2:32 pm, Dr G wrote: > > > Hello, > > > I've downloaded both the compressed & uncompressed versions and tried > > both the initial example from the jquery site (http://docs.jquery.com/ > > Tutorials:How_jQuery_Works) and the step-by-step intro from the > > tutorial videos (http://blog.themeforest.net/tutorials/jquery-for- > > absolute-beginners-video-series/). I have tried putting the jquery > > download in the same directory as my html (e.g. > src="jquery-1.2.3.js" type="text/javascript">... and I've > > tried putting it in a separate directory and put the path to it in the > > src parameter field. > > > In all cases I get the same result; nothing. If I put other > > JavaScript in my html file I can get it to do stuff (e.g. put up an > > alert box) but nothing I've done has resulted in a detectable > > invocation of jQuery functions. I'm doing this all under OS X, and > > I've also opened a terminal window and chmod'd the jquery-1.3.2.js > > file to 777, but that had no apparent effect either. > > > Would anyone be willing to let me know where I've gone wrong? It is > > frustrating not to be able to do the most basic step. > > > Thanks, > > > Michael
[jQuery] Re: How to create dom on the fly using jQuery????
Simple answer: DOM nodes are created by just writing the html in side of the jQuery $('#divName').append(''); is equivalent to divResult = document.getElementById("divName"); table = document.createElement("table"); tr = document.createElement("tr"); td = document.createElement("td"); tr.appendChild(tr); table.appendChild(tr); divResult.appendChild(table); but is also cross browser compatible, optimized for speed, and handles event registrations. On Mar 3, 9:41 pm, SeeVik wrote: > Thanks for the reply Jack. the JST Template looks cool. I will surely > look into it. > > Just for the record, if anybody can throw some light on the original > question, it would be really helpful. > I don't really want to be left clueless about this thing in jQuery. > > Thanks and Regards > Vikram > > On Mar 4, 12:04 pm, Jack Killpatrick wrote: > > > This isn't jquery-specific, but I've been using this for a couple years > > now to generate html from json data: > > >http://code.google.com/p/trimpath/wiki/JavaScriptTemplates > > > works great. > > > - Jack > > > SeeVik wrote: > > > Hello all, > > > > I am using Symfony with jQuery plugin. The thing is I am getting some > > > data from database in JSON format and I want to use jQuery to display > > > a table using that data on the fly. I was wondering is jQuery the best > > > way to do this? Or will it be an overkill? Should I use simple DOM > > > methods for this task like... > > > > divResult = document.getElementById("divName"); > > > table = document.createElement("table"); > > > tr = document.createElement("tr"); > > > td = document.createElement("td"); > > > tr.appendChild(tr); > > > table.appendChild(tr); > > > divResult.appendChild(table); > > > > If I should use jQuery, can somebody give me a hint which methods to > > > use for the above jQuery code? > > > > Thanks and Regards > > > Vikram
[jQuery] Re: Optimize large DOM inserts
Hey guys, This thread inspired me to write a blog article http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly I did some testing of the += and array.join methods of long string concatenation. Interesting stuff! It turns out that += and array.join are browser dependent in their execution time, although one method is quicker in a majority of current and next gen browsers. On Feb 8, 11:20 am, Kevin Dalman wrote: > Rick, based on what I've learned from testing, you have another option > now... > > Here is a modified version of Mike's code - without generating the > table. > > function populateDutyTable(response) { > > var currentDay = ''; > var rows = response.QGETDUTYSCHEDULE.DATA; > var out = [], o = -1; > > out[++o] = ''; // CHANGED > > for( var row, i = -1; row = rows[++i]; ) { > > var day = row[1]; > if( currentDay != day ) { > currentDay = day; > out[++o] = ''; > out[++o] = row[1]; > out[++o] = ''; > out[++o] = row[2]; > out[++o] = ' colspan="5"> '; > } > > out[++o] = ' class="cell-blank-date"> '; > out[++o] = row[3]; > out[++o] = ''; > out[++o] = row[4]; > out[++o] = 'Cell Content'; > } > > out[++o] = ''; // CHANGED > > $('#scheduleBody').append( out.join('') ); // CHANGED > } > > A container around the table is no longer required because wrapping > the rows in a tbody achieves the same performance as wrapping them in > a table. Plus, you could now add rows without regenerating the entire > table. This provides more options with no penalty. For example, now > you could hard-code the table with column headers - for example... > > > > > ID > Day > Date > Name > > > > > This is cleaner and faster than adding column headers inside your > Javascript loop. > > I suggest you try both methods, Rick. Use a timer (like MIike's sample > pages) to confirm whether both are equally fast. Based on my tests, > you may find appending to the table even faster, with cleaner markup > as a bonus. > > Ciao, > > /Kevin > > On Feb 7, 3:20 pm, "Rick Faircloth" wrote: > > > Hey, thanks Michael for taking the time to provide the > > explanation and the re-write. I'll put this into place > > and see how it performs. I'm sure it'll be *much* better! > > > Rick
[jQuery] Re: $.getJSON
Using console.log and firebug will show you what everything is. console.log(data); $.each(data.records, function(i,item){ console.log(i); console.log(item); console.log(this); }); On Mar 2, 1:54 am, Alain Roger wrote: > On Mon, Mar 2, 2009 at 10:52 AM, Matt Quackenbush wrote: > > > > > Yes. > > > On Mon, Mar 2, 2009 at 3:35 AM, Alain Roger wrote: > > >> Hi Wil, > > >> so if i understood well, having the following JSON: > > >>> {"records":[{"id":1,"abbreviation":"fre","description":"french"},{"id":2,"abbreviation":"eng","description" > >>> :"english"},{"id":3,"abbreviation":"ger","description":"german"},{"id":4,"abbreviation":"svk","description" > > >>> :"slovak"},{"id":5,"abbreviation":"spa","description":"spanish"},{"id":6,"abbreviation":"usa","description" > >>> :"american"},{"id":7,"abbreviation":"ita","description":"italian"},{"id":8,"abbreviation":"por","description" > > >>> :"portuguese"},{"id":9,"abbreviation":"cze","description":"czech"},{"id":10,"abbreviation":"rus","description" > >>> :"russian"},null,null,null]} > > >>> i should write : > >> $.each(data.records, function(i,item){...}); > > >> where "data.records" is the name of my JSON result...so records (in my > >> JSON). > >> am I right ? > > thanks Matt.
[jQuery] Re: I can't figure out how to implement JQuery into my website
It's just a javascript file, put it wherever you put your javascript files. On Mar 1, 12:20 pm, Warfang wrote: > What code do I need to put in my HTML header? I have already > downloaded the JQuery code from JQuery's homepage to my computer, but > where exactly do I put that? I'm using Webs.com to host now, so do I > upload the code to my directory there? From there, how do I add new > code from plugins? > > Sorry for all the questions, but I'm really anxious to learn how to > use this. Thanks.
[jQuery] Re: Help please with toggling a class
oh, very nice. I wasn't aware of toggleClass. On Feb 27, 6:51 pm, Karl Swedberg wrote: > Hi Zac, > > You just need to add one line -- $(this).toggleClass('yourClass'); -- > where "yourClass" is the class you want to toggle on and off. > > You should also add return false after that line so that the default > click behavior doesn't occur. > > jQuery.fn.fadeToggle = function(speed, easing, callback) { > return this.animate({opacity: 'toggle'}, speed, easing, callback); > > }; > > $(function() { > $('a.aboutlink').click(function() { > $('.aboutbox').fadeToggle(); > $(this).toggleClass('yourClass'); > return false; > }); > > }); > > --Karl > > > Karl Swedbergwww.englishrules.comwww.learningjquery.com > > On Feb 27, 2009, at 9:09 PM, zac wrote: > > > > > Hi.. I am trying to have it so my navigation toggle hidden boxes on > > the site. I want it so the link toggles the box on and off, as well > > as having the link itself have a class toggled on and off (a > > background color). > > > So far I have the toggling box... > > > jQuery.fn.fadeToggle = function(speed, easing, callback) { > > return this.animate({opacity: 'toggle'}, speed, easing, callback); > > }; > > $(function() { > > $('a.aboutlink').click(function() { > > $('.aboutbox').fadeToggle(); > > }); > > }); > > > .aboutbox { > > background: #151515; > > padding: 50px; > > border: 2px solid #000; > > display: none; > > } > > > But I am not sure how I would also have the link itself (.aboutlink) > > have a class toggled on and off. simultaneously. Can someone please > > help me write this? I am very new and just learning so would really > > appreciate some help. > > > Thanks, > > > Zac
[jQuery] Re: alternate color row starting from a point
hmmm, tough one, it was fun. $(function() { var color = ''; $('#everyother tr').each(function() { if( $(this).hasClass('className') ) { color = 'red'; } else if (color === 'red') { $(this).css({'background-color': 'red'}); color = ''; } else { color = 'red'; } }); className 1 1 className 1 1 1 className 1 1 On Feb 27, 9:03 am, Magritte wrote: > Ok, it work, but I another trouble. > > the code now become: > $('tr:not(.className):odd').css({'background':'red'}); > > because I would like to color row alternatively. > The problem is that I would like that the alternativy start alway with > red.(first '' after every '' red, > then 'white', then red,) > > With this code it doesn't happen. > > Thanks > > On 27 Feb, 13:17, Thomas Jaggi wrote: > > > This should do it: > > $('tr:not(.className)').css({'background':'red'});
[jQuery] Re: Help please with toggling a class
Without really understanding what your fadeToggle plugin is doing, this will toggle adding and removing a class: $(function() { $('a.aboutlink').toggle( function () { $(this).addClass('aboutBox'); }, function () { $(this).removeClass ('aboutBox'); } }); On Feb 27, 6:09 pm, zac wrote: > Hi.. I am trying to have it so my navigation toggle hidden boxes on > the site. I want it so the link toggles the box on and off, as well > as having the link itself have a class toggled on and off (a > background color). > > So far I have the toggling box... > > jQuery.fn.fadeToggle = function(speed, easing, callback) { > return this.animate({opacity: 'toggle'}, speed, easing, callback);}; > > $(function() { > $('a.aboutlink').click(function() { > $('.aboutbox').fadeToggle(); > }); > }); > > .aboutbox { > background: #151515; > padding: 50px; > border: 2px solid #000; > display: none; > > } > > But I am not sure how I would also have the link itself (.aboutlink) > have a class toggled on and off. simultaneously. Can someone please > help me write this? I am very new and just learning so would really > appreciate some help. > > Thanks, > > Zac
[jQuery] Re: Multiple inclusions of jquery possible?!?
http://groups.google.com/group/jquery-dev/browse_thread/thread/3efd1066b535234f On Feb 27, 3:19 pm, ml1 wrote: > Hi folks: > > We use jquery extensively in an application that suddenly needs to > make use of an online ecommerce system that also happens to use > jquery. > > This is causing things to break badly, not least because they use > 1.2.6 but we have to use 1.3.2 to take advantage of a bugfix, and also > because only some our pages will use the ecommerce includes so even if > we got them to move to 1.3.2 the coding would become a nightmare since > we can;t just assume their's will be there. > > As if that weren't bad enough we are also using a couple of jquery > plugins which might have to be modified if we end up bulk-changing the > jquery identifier. > > Is there a solution to this? > > Thanks!