[jQuery]
[jQuery] Re: Trigger button click event when lost focus in textbox
Nevermind. I put the function click to another function and trigger the
function in textbox's blur event. Thanks.
On Tue, Nov 17, 2009 at 5:06 PM, ian ian.esca...@gmail.com wrote:
I have a textbox and button to check items in the database. The thing
is I want to trigger the button click event when textbox is lost
focus. This is my click event.
$(document).ready(function() {
$(#button_from).click(function() {
$(#waitingFrom).show();
$.ajax({
type: 'POST',
url: 'index.php?m=itema=getPartName',
dataType: 'json',
data: {
part_no: $(#from_part_no).val()
},
success: function(data) {
$(#waitingFrom).hide();
$(#tfrom_part_name).val($(#from_part_name).val
(data.DESCRIPTION).val());
$(#tfrom_status).val($(#from_status).val
(data.INVENTORY_ITEM_STATUS_CODE).val());
$(#tfrom_inventory).val($(#from_inventory).val
(data.TRANSACTION_QUANTITY).val());
$(#tfrom_usage_rate).val($(#from_usage_rate).val
(data.USAGE_RATE).val());
}
});
});
I need help to call that click event when let's say $(#from_part_no)
has lost focus. Thanks in advance.
--
Ian Escarro
[jQuery] Trigger button click event when lost focus in textbox
I have a textbox and button to check items in the database. The thing
is I want to trigger the button click event when textbox is lost
focus. This is my click event.
$(document).ready(function() {
$(#button_from).click(function() {
$(#waitingFrom).show();
$.ajax({
type: 'POST',
url: 'index.php?m=itema=getPartName',
dataType: 'json',
data: {
part_no: $(#from_part_no).val()
},
success: function(data) {
$(#waitingFrom).hide();
$(#tfrom_part_name).val($(#from_part_name).val
(data.DESCRIPTION).val());
$(#tfrom_status).val($(#from_status).val
(data.INVENTORY_ITEM_STATUS_CODE).val());
$(#tfrom_inventory).val($(#from_inventory).val
(data.TRANSACTION_QUANTITY).val());
$(#tfrom_usage_rate).val($(#from_usage_rate).val
(data.USAGE_RATE).val());
}
});
});
I need help to call that click event when let's say $(#from_part_no)
has lost focus. Thanks in advance.
[jQuery] jQuery Cycle Manual With Text?
I am trying to create something like this: http://i27.tinypic.com/29p3woi.jpg The text would be a span tag or something similar. The progress buttons don't have to be the dots I can use floated next and previous arrows. Is this doable using jQuery Slideshow or Cycle, preferably Cycle since it seems more intuitive. Thanks for your help.
[jQuery] tablesorter not sorting numbers correctly
tablesorter isn't sorting numbers correctly. I have the latest jQuery
(1.3.2) and tablesorter (2.0.3).
from http://abitibi.sbgrid.org/:
script type=text/javascript src=/js/jquery-latest.min.js/
script
script type=text/javascript src=/js/
jquery.tablesorter.min.js/script
I am turning on tablesorter on *all* tables using:
$(document).ready(function() {
$(table).tablesorter();
});
Then my tables have no other class or id attributes. I simply use
thead/tbody and th elements.
You can see an example here:
http://abitibi.sbgrid.org/cgi/du.py/opt/osg-local
Suggestions regarding how to correct this would be greatly
appreciated.
Ian
[jQuery] Smipple - Social Code Snippets
Hi all, I just wanted to let everyone know about a site I created for sharing code snippets in a social way. You can check it out at http://www.smipple.net/. Smipple allows you to save, organize, and share snippets with others easily. The best part though is that you can follow other people who have interesting snippets and see the snippets that users you are following in one place. You can also favorite any snippet that you find interesting so you can retrieve it easily later. Smipple is implemented using Google Appengine, Django, and appengine-patch but that shouldn't stop anyone from contributing any kind of snippets that they want. We'd love it if Ruby, PHP, Java, JavaScript or Perl developers would use the site as well! What kind of social sharing site would it be if there were only certain types of developers using it after all! Happy Coding, Ian
[jQuery] Browser differences in handling xml file structures?
Hi all,
This is my first posting to this group, so I hope you will treat me
gently.
I am having a problem with a script that I am writing and I believe it
is centered within a piece of jQuery code. I have some code like this
(simplified slightly):
$.get('news/testfeed.xml', function(data) {
$('record', data).each(function() {
var $link = $('a/a')
.attr('href', $('link', this).text())
.text($('name', this).text());
var $headline = $('h4/h4').append($link);
var $summary = $('div/div')
.addClass('summary')
.html($('description', this).text());
$('div/div')
.addClass('headline')
.append($headline)
.append($summary)
.appendTo($container);
});
I am using this to read the title and description elements of an
xml file which is the response from a RESTful request. I have put a
simplified version of the xml file below (just one record, and removed
the lom:classification stuff).
My problem, in a nutshell, is that the script works and displays data
when I look at it in Safari or Firefox 2.0 (Mac). However, when I look
at the same script running in Firefox 3 (Mac OS X or Windows) or IE7
then nothing seems to be returned at all. I tried replacing the
complex xml with a simple xml file like this:
simple xml
?xml version=1.0 encoding=UTF-8?
records
record
title
Title 1
/title
descriptionDescription 1/description
teaserTeaser 1/teaser
/record
/records
simple xml
and this displays fine in all browsers. So my question is, why do the
browsers have different behaviour with respect to reading complex
elements out of xml data, and how do I get the data I need out of the
complex xml data reliably in other browsers?
Thanks for any advice you may be able to offer.
Ian.
--
xml
?xml version=1.0 encoding=UTF-8?
zs:searchRetrieveResponse xmlns=http://www.mystuff.co.uk;
xmlns:zs=http://www.loc.gov/zing/srw/;
xmlns:diag=http://www.loc.gov/zing/srw/diagnostic/
xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance;
xsi:schemaLocation=http://www.mystuff.co.uk schema/
content_node.xsd
xmlns:dc=http://purl.org/dc/elements/1.1/;
xmlns:dcterms=http://purl.org/dc/terms/
xmlns:lom=http://ltsc.ieee.org/xsd/LOM;
zs:version1.1/zs:version
zs:numberOfRecords2319/zs:numberOfRecords
zs:records
zs:record
zs:recordSchemainfo:srw/schema/1/dc-v1.1/
zs:recordSchema
zs:recordPackingxml/zs:recordPacking
zs:recordData
srw_dc:dc xmlns:srw_dc=info:srw/schema/1/dc-schema
lom:metaMetadata
lom:identifier
lom:catalogNS/lom:catalog
lom:entry15296/lom:entry
/lom:identifier
/lom:metaMetadata
teaserIntroduction to the secondary Frameworks
section, including links to
background on the Frameworks as well as to
the English, mathematics, science
and ICT sections. /teaser
namexxx/name
notesupdated/notes
taggingConfidenceMedium/taggingConfidence
dc:titleSecondary - Home Page/dc:title
dc:descriptionIntroduction to the secondary
Frameworks section, including
links to background on the Frameworks as well
as to the English,
mathematics, science and ICT sections. /
dc:description
dc:identifiernsonline.org.uk~22760~15296/
dc:identifier
/srw_dc:dc
/zs:recordData
zs:recordIdentifier15296/zs:recordIdentifier
zs:recordPosition1/zs:recordPosition
/zs:record
/zs:records
/zs:searchRetrieveResponse
xml
[jQuery] Re: Cluetip not working on multiple links calling local html data
Thanks a lot Karl. I'll give this a try. In the meantime I found a
workaround by just setting display:none in the stylesheet for the
local data divs. Thanks for a great plugin!
Cheers,
Ian
On Apr 9, 7:21 pm, Karl Swedberg k...@englishrules.com wrote:
Hi there Ian,
So sorry about that problem. I believe I've fixed it in a version I've
had up on Github for a couple weeks. Just put together a new release
for it here:
http://plugins.jquery.com/node/7526
Please give that one a try and let me know if you still run into
problems
--Karl
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Apr 8, 2009, at 10:44 PM, Ian wrote:
Hi,
I'm pretty new to jquery, but I really love the cluetip plugin. I'm
having trouble, though, when I define tips for a series of a
elements which each call different local html data. When I use the
rel attribute to call distinct attribute values for the divs
holding the data (whether id or class), I only get data in the first
cluetip. For the rest I get the tip but it's empty.
Here's the script in my head:
$(document).ready(function() {
$('a.load-local').cluetip({local:true, hideLocal: true, sticky: true,
arrows: true, cursor: 'pointer'});
});
And here's the html in the body:
a class=load-local href=# rel=.loadmehover here/abr /
div id=loadme class='loadme'Here's some contentbr /here's
another line./div
a class=load-local href=# rel=.loadmeToohover here too/
abr /
div id=loadAgain class=loadmeTooHere's some different content./
div
a class=load-local href=# rel=.loadmeToo2hover here too/
abr /
div id=loadStillAgain class=loadmeToo2Here's some really
different content./div
If I use the rel attribute of all the links to call one common class
for the data divs then I get the appropriate data showing up in each
tip. But then only the first data div is hidden. All the rest in the
series are left visible in the document body (as well as being cloned
in the cluetip).
Here's the html I'm using in that case:
a class=load-local href=# rel=.loadmehover here/abr /
div id=loadme class='loadme'Here's some contentbr /here's
another line./div
a class=load-local href=# rel=.loadmehover here too/abr /
div id=loadAgain class='loadme'Here's some different content./
div
a class=load-local href=# rel=.loadmehover here too/abr /
div id=loadStillAgain class='loadme'Here's some really different
content./div
Am I doing something wrong? This is a trivial example, of course, but
the principle applies to a larger web-app I'm working on.
Thanks,
Ian
[jQuery] Cluetip not working on multiple links calling local html data
Hi,
I'm pretty new to jquery, but I really love the cluetip plugin. I'm
having trouble, though, when I define tips for a series of a
elements which each call different local html data. When I use the
rel attribute to call distinct attribute values for the divs
holding the data (whether id or class), I only get data in the first
cluetip. For the rest I get the tip but it's empty.
Here's the script in my head:
$(document).ready(function() {
$('a.load-local').cluetip({local:true, hideLocal: true, sticky: true,
arrows: true, cursor: 'pointer'});
});
And here's the html in the body:
a class=load-local href=# rel=.loadmehover here/abr /
div id=loadme class='loadme'Here's some contentbr /here's
another line./div
a class=load-local href=# rel=.loadmeToohover here too/abr /
div id=loadAgain class=loadmeTooHere's some different content./
div
a class=load-local href=# rel=.loadmeToo2hover here too/
abr /
div id=loadStillAgain class=loadmeToo2Here's some really
different content./div
If I use the rel attribute of all the links to call one common class
for the data divs then I get the appropriate data showing up in each
tip. But then only the first data div is hidden. All the rest in the
series are left visible in the document body (as well as being cloned
in the cluetip).
Here's the html I'm using in that case:
a class=load-local href=# rel=.loadmehover here/abr /
div id=loadme class='loadme'Here's some contentbr /here's
another line./div
a class=load-local href=# rel=.loadmehover here too/abr /
div id=loadAgain class='loadme'Here's some different content./
div
a class=load-local href=# rel=.loadmehover here too/abr /
div id=loadStillAgain class='loadme'Here's some really different
content./div
Am I doing something wrong? This is a trivial example, of course, but
the principle applies to a larger web-app I'm working on.
Thanks,
Ian
[jQuery] How to force jCarousel to scroll a certain amount of items at a time?
Please check the testing page: http://one.xthost.info/ian/jcarousel/test-1.html There are twelve items. And scroll: 6 was set in the configuration in order to scroll six items at a time. But it scrolls only five items and the last item ( box 12 ) is invisible. I have to scroll once again to see box 12. It is probably because the CSS declaration margin-right: -3px on each li so the three pixels left and right borders of all boxes are overlapped with each other. That means the left border of box 7 is within the visible range at first, as shown in this figure: http://one.xthost.info/ian/jcarousel/box7-border.png Is there a solution to force it to always slide six items? Ian
[jQuery] Re: required field keeps on appearing
Thanks for that analysis. I'd submitted this as a bug report at http://plugins.jquery.com/node/6925 I need to have two forms in a single table, ie. I'd like to have a bunch of rows and columns lined up but with two different submit buttons that go to completely different pages. But, like you, with the two forms inside the table definition the error labels get duplicated. Any ideas how I could work arount this? Ian 2009/3/11 exhaler fadi...@gmail.com: i fixed the issue, turns out putting a form tag inside a table tag causes this problem
[jQuery] Re: [validate] email validation doesn't work!
But there's nothing invalid about that email *syntactically*. If you want the plugin to do an MX check or SMTP validate or something then you'll probably need to write a remote hook http://docs.jquery.com/Plugins/Validation/Methods/remote Ian 2009/3/11 mcreisi roman.reisenber...@gmail.com: hi, Is there a fix for email validation? at this time also emails like a...@e.f are valid. I like that validation script, but it is not really usefull if the validation of an email doesn't work. best regards, mcreisi
[jQuery] Optimize Horizontal Scroll Interface
Hello Peoples. I have been working on an interface using the jquery plugin ScrollTo. I have large left and right buttons which scroll the page content left and right. 10 items are displayed at a time, when the visitor is on item 10 the left and right buttons load the page with next or previous ten items. Here is the testing page: http://www.kith-kin.co.uk/xmas08/studio/ I needed to find out which item was being 'viewed' so the buttons would perform correctly, even if the page was manually scrolled. I count which item was being viewed by taking the scroll offset and then looping through the width of the content. I think this could be improved, I am not that well versed in javascript / jquery. Here is the js, the calculation is in the scroll function. http://www.kith-kin.co.uk/js/09/studio/kithkin.js Can I do this calculation only on horizontal scroll, jquery's method seems to be for both vertical and horizontal. Or could i run the calculation only at the end of scrolling, not whilst scrolling? Any tips or suggestions would be ace, im still learning! Cheers. Ian.
[jQuery] Wmode Flash in an iframe
Hello. I've got an annoying problem with flash widget embeds always being on top of absolute positioned divs. The problem comes that one widget is an iframe, and within that iframe is the flash without wmode set. I can't seem to access the flash properties with jquery, I think due to cross domain security? To see the issue, scroll right. http://www.kith-kin.co.uk/xmas08/search/?find=bleep The embed are from user generated content, and I can't really get users change the code at embed point. I had the a similar problem with youtube embeds, but I set the wmode with jquery, and show and hid the element. Is there any way to hide an element once it is in a certain area of the screen? Cheers. Ian.
[jQuery] Re: $.data
The jQuery docs weren't good enough? http://docs.jquery.com/Internals/jQuery.data You should probably be using the data() function from core though. http://docs.jquery.com/Core/data Ian On Fri, Feb 6, 2009 at 4:51 PM, Chris J. Lee chri...@gmail.com wrote: I haven't been able to find good documentation on the use of $.data. Does anyone have any good links to use of this function? -- === 株式会社ビープラウド イアン・ルイス 〒150-0012 東京都渋谷区広尾1-11-2アイオス広尾ビル604 email: ianmle...@beproud.jp TEL：03-5795-2707 FAX：03-5795-2708 http://www.beproud.jp/ ===
[jQuery] jQuery Jitter in Firefox Problem (Please Help!)
I have created a website for a friend of mine that is a musician. The website is not live yet, it is on a hidden portion of the server. Anyways, the website is using jQuery to handle the pages. All of the code is actually on the index page and the jQuery tells what div on the page to show when a link on the navigation is clicked... If you look at the site in Firefox, and you let the page load... once you click on a link, you will notice the edges of the website will jump a lot... all of the pages do this, and I am not sure what is causing it. It looks fine in IE, but does it in Firefox and Safari... Any suggestions are greatly appreciated! Site Address: http://www.stephenhunley.com/web Something else to add... this problem does not show up on the following browsers... Mac Firefox 3.0.5 Mac Safari 3.2.1 PC IE 7.0 PC Safari 3.2.1 The site even plays nice with IE 6.0 (on my Mac through Parallels running Windows XP)... The only browser that I have noticed the issue on is the PC version of Firefox 3.0.5
[jQuery] Page Over Preview Navigation.
Hello All, First off thanks to the jquery team, they've made a great little library which has made me get my hand dirty, and understand a little bit of javascript, thanks. Im hoping someone can help me out with the following... Im trying to make a preview window, that lets you scroll over a page by moving a control. In the page below the page is set to 1,1 pixels. The black box is 100/100. When someone moves the white box (control) the page is scrolled to the relative position. See below for an example: http://www.kith-kin.co.uk/tests/scroller_kinda.asp It works ok when someone moves the white box to navigate, but when they scroll using the scrollbars or mousewheel I need to get the control box to update its location. I have had attempt at making this work, but am getting strange results. See below. http://www.kith-kin.co.uk/tests/scroller.asp When you load the page the box doesn't update its relative location. But when you move the white box it jumps to the original location, then slowly creaps back to the new location. Its a cool thing, but not what im after! I think my problem / complication lies with using $(window).scroll beacuse when someone scrolls using scrollbars this works (as intended), but the call also works when you move the box, and hence scroll the page. Is there anyway to work out that somehas scrolled the page by using a mouse wheel, or the scrollbars? Or am I approching this wrong? Any help much appriciated, hope this wasn't too ramblling. Cheers Ian.
[jQuery] Postal Code Validation
I've noticed a lot of requests for Postal Code validation. I don't
know if anyone posted one, but here is an addon method I wrote for
Canadian postal codes.
$.validator.addMethod(postalCode, function(value) { // Addon method
for validating postal codes. Valid formats are (X1X 1X1) or (X1X1X1)
or (X1X-1X1).
return value.match(/^[a-zA-Z][0-9][a-zA-Z](-| )?[0-9][a-zA-Z]
[0-9]$/);
}, 'Please enter a valid postal code');
You can then use the rule postalCode:true to validate.
[jQuery] Waiting for a click event...
Hi,
I'm puzzling over something and would be grateful for some help...
I've got four divs on the screen that I have hidden and wish to step through
with each user click. So, the first div is shown... A user then clicks...
The first div is then hidden and the second revealed... A user then
clicks... The second div is then hidden and the third revealed... And so
on...
I thought I could achieve this using the following markup:
div id=no-1Content 4/div
div id=no-2Content 4/div
div id=no-3Content 4/div
div id=no-4Content 4/div
for (var i = 1; i 5; i++) {
$('#no-'+i).show().click(function() {
$(this).hide(1000);
});
};
}
...but this results in all divs being shown immediately - presumably the
loop is being executed without a click being required?
Is there a simple way around this?
All the best,
--
Ian
[jQuery] Re: tr not applying CSS
Does the class that you are applying to your tr set the background-
color on the tr itself? If so, you might want to try modifying your
CSS a bit to apply the background-color to the td elements in your
tr like:
tr.newClass td {
background:#ff;
}
Hope this helps.
On Dec 20, 4:31 am, JQueryProgrammer [EMAIL PROTECTED] wrote:
I have a table that displays n rows based on the records from the
database. For a particular row that gets displayed n times, I have
assigned a name to the row. The row already has some CSS applied to
it. But I want that whenever I take the mouse over the row, the new CC
should get applied and the on mouse out the old CSS should reapply.
I tried the code as:
$(tr[name='myRowName').hover(
function() {
$(this).addClass(newClass);
}, function() {
$(this).removeClass(newClass);
}
);
But it does not work. Can anyone let me know.
[jQuery] Re: What does === equate to?
!== and === are identity operators. It is a good idea to use them instead of the equality operators (!= and ==) unless you know why you would want to use equality (and the possible type coercion) over identity. Probably the biggest gotcha with equality is with falsy values (false, 0, undefined, /empty string, null and NaN). The truthy / falsy issue is probably what bit you Rob. It may be worth reading a bit of Douglas Crockford's ideas about javascript if you are trying to figure out identity and equality operators: http://javascript.crockford.com/code.html And here is something about truthy and falsy: http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript#Other_types Ian On 8/2/07, Rob Desbois [EMAIL PROTECTED] wrote: I had a discussion on the use of the === and !== operators recently on this list, my opinion was, and still is, that unless you explicitly WANT to allow type conversion, you should be using these. Only use == and != if you really want type conversion. It's bitten me once, although I can't for the life of me remember how, but it involved lots of in-depth debugging and head-scratching to find the problem. I'm more wary now and think that these operators are the way to go. --rob On 8/2/07, Sam Collett [EMAIL PROTECTED] wrote: I don't think many actually use !== (and when you would want to use it) and many sites that show usage of operators don't cover !== (but do have ===). 3 != '3' false 3 !== '3'true 3 == '3' true 3 === '3'false On Aug 1, 9:33 pm, Michael Geary [EMAIL PROTECTED] wrote: I...cannot figure how what the heck === is. I see that Jake answered your question, but just for next time... You may have tried a Google search for javascript === and been disappointed to find it returned no useful results (because Google seems to ignore the === in the search). The key thing to know is that ===, like most special symbols in JavaScript such as + and -, is an operator. Now you can do a more productive Google search: http://www.google.com/search?q=javascript+operators This will help when you run into !== and wonder what the heck *that* one is. :-) -Mike -- Rob Desbois Eml: [EMAIL PROTECTED] Tel: 01452 760631 Mob: 07946 705987 There's a whale there's a whale there's a whale fish he cried, and the whale was in full view. ...Then ooh welcome. Ahhh. Ooh mug welcome.
[jQuery] Re: Need to attach .click() event to HTML anchor link but it won't stop bubbling...
You can also try to attach a single event handler to the root node of
your tree and then only process the clicks on A-tags.
function iEatEventsForBreakfast(event) {
var target = $(target.event);
if (target.is(a)) {
// search for and open/close the folder associated with target
// something like this maybe?
target.siblings().filter(ul)
.filter(:visible).hide().end()
.filter(:hidden).show().end();
return false;
}
}
$(#root).click( iEatEventsForBreakfast );
This works because the click event will bubble all the way up from the
event.target up to the top of the body unless it is stopped.
On 5/5/07, Yansky [EMAIL PROTECTED] wrote:
I was doing something similar recently. I'm not sure if this is the
best/right way to do it, but I just added an unbind at the start of
the function (before the click event handler is applied) to prevent
bubling.
e.g.
function foo(){
$('a').unbind( click );
$('a').click(function(){
$.get(test.html, function(data){
$('#divId').append(data);
foo();
});
});
}
On May 5, 4:13 am, summea [EMAIL PROTECTED] wrote:
I've been asking about the same problem (and still searching (in
vain?) for an answer to the question here on the jQuery group...).
I have a click function that I bind to each folder link in an
imaginary file manager script. The problem is still, when I click on
one folder and it displays its contents, the click function keeps
going and opens and closed the folder when it should STOP after being
clicked once. And it should attach its click function (in an
UNCLICKED state,) to the just-clicked folder's children folders...
I've been reading up on events bubbling and stopping propagation,
returning false, etc. But nothing seems to be working. I've tried
adding a parameter even to the bindFolderAction function to check if
it's been clicked or not. But when I tried that, the children
folder's wouldn't have bindFolderAction binded to them, and that's
what I need to do as well.
Here is the function I have so far, I've tried it another way since I
last posted... and still have had no suggestions... or replies on the
other post. Any help?
bindFolderAction = function(){
$('.myTree').find('a').bind('click', function(evt){
evt.stopPropagation();
evt.preventDefault();
alert('this is not stopping...');
var linkval = $(this).attr('href');
subbranch = $('ul', this.parentNode).eq(0);
$.log(subbranch.css('display'));
$.log(this.firstChild);
if (subbranch.css('display') == 'none') {
//$.log('OPENED');
subbranch.show();
this.firstChild.src = '../img/open.gif';
$
(this.parentNode.getElementsByTagName('ul')).load(linkval, function()
{
bindFolderAction();
return false;
});
} else {
//$.log('CLOSED');
subbranch.hide();
this.firstChild.src = '../img/closed.gif';
}
return false;
});
}
[jQuery] Widget Framework
Hey all, I'm working on a simplistic widget framework to better standardize how widgets work (if only for those that I'm writing) - I'd like to share it to hopefully generate some ideas with it before I get too involved The goals behind it (thus far) are to: * wrap widgets in such a way that you can treat them more or less as a single DOM Node via jQuery * as part of the above point, widgets should be able to semantically redefine various jQuery methods - for example, if you have a dropdown menu widget, and call show() on it, it will hide any currently displayed dropdown widgets in the same call * have a simple interface to do all this with, and easily package widgets I have a working example of this (tested only in Safari at the moment), in very early stages: http://safis-project.net/Designer/tests/canvas.html Code of note: http://safis-project.net/Designer/javascripts/canvas.js (canvas widget) http://safis-project.net/Designer/javascripts/table.js (table widget) http://safis-project.net/Contrib/jQuery/jquery.widget.js (the actual code that drives this) How it works: you register a widget type with the widget framework; currently, each widget can define the following: type: this is the unique name of the widget (required) detector: given a DOM node, this determines whether the node is an instance of that widget type. By default it looks for a class name that is the same as the widget type name. This allows for a seamless use of find() and jQuery(). For example, if I define a dropdown type widget, where each widget is defined as div class=dropdown... any jQuery that returns that top level div of the widget would treat it as a widget (e.g. $(div.dropdown) would return a jQuery.Widget rather than a normal jQuery object) methods: each method defined here can be called on any instance of the widget. For example: $(div.dropdown).addEntry(A New Entry) find: this function will search the entire document for all instances of the widget, primarily used by: initialize: this is called every time an instance of the widget is created (or at page load for in-html widgets) - for registering events, etc. One major change that this brings about is the concept of conditional methods for jQuery objects. Using the dropdown example - if I run the query $(div) and it returns both widgets and non- widgets - any jquery function you run should still work as semantics would dictate. For example, $(div).text(new text) would rename every div as expected - but, any widget that defines its own version of text() would use the custom version instead Also, one strange result of this (for performance reasons) is that if you select a set of all non-widget nodes, a normal jQuery object will be returned, and any widget-related functions will /not/ be avaliable to the object. For example, the dropdown widget defines addEntry() - calling $(h1).addEntry() would result in a runtime (Type) error, as the function would not be defined on a non-widget result. Still in the works: I would like to extend the jQuery find syntax to allow for treating widgets as nodes. perhaps something like $(~dropdown) I also need to work an easy method for calling super versions of any function (inside the overridden method)
[jQuery] Re: Handle cross-site JSON in Form Plugin malsup
Unfortunately that's a limitation of XMLHttpRequest - for primarily security reasons, all browsers disable cross-domain ajax (in general) There are a couple solutions, one of which is to proxy the request through the local server (have it contact your other domain, rather than the browser) Google around for cross site scripting (sometimes referred to as XSS) On May 5, 11:30 am, JoelSun [EMAIL PROTECTED] wrote: hi, I have a question about handle cross-domain JSON data in Form Plugin. I use the sample of JSON athttp://www.malsup.com/jquery/form/#code-samples When I place the client Form and Server side code in different domain, it just show the raw JSON data. form id=jsonForm action=http:www.my-site.com/json-echo.php method=post Message: input type=text name=message value=Hello JSON / input type=submit value=Echo as JSON / /form How can I handle the JSON data when it respond from different domain? Thanks Joel Sun
[jQuery] Re: HTML Node
The XHTML 1.0 strict DTD defines id as an attribute on the html node (I haven't looked at transitional or 1.1 strict) !ELEMENT html (head, body) !ATTLIST html %i18n; id ID #IMPLIED xmlns %URI; #FIXED 'http://www.w3.org/1999/xhtml' On May 5, 1:15 pm, Klaus Hartl [EMAIL PROTECTED] wrote: Su wrote: On 5/3/07, Glen Lipka [EMAIL PROTECTED] wrote: Can jQuery access the HTML node and add a class to it? Is this invalid XHTML? Class is invalid on the HTML element, but you /can/ assign an ID. Given that there should never be more than one HTML element in a doc, this is less a restriction than just proper behavior, if you really think about it. Unfortunately it seems that id is invalid as well:http://www.w3.org/TR/html401/struct/global.html#h-7.3 -- Klaus
[jQuery] Re: click event and z-order
The event is not passed down to the underlying event but rather it
bubbles up through the dom tree from the event where the event was
triggered.
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-bubbling
An example is probably easier to digest. This code has click handlers
at body, td and div elements. Some the .stopTheEventBubbling elements
will stop the event.
Ian
html
head
script src=http://code.jquery.com/jquery-latest.pack.js;/script
script
$(document).ready(function(){
function setupHandler() {
var tag = this.toString();
$(tag).click(function(event) {
$('#log').append('event for ' + event.target.tagName + ' caught
@ ' + this.tagName + ' - ' + event.timeStamp + 'br/');
if ($(this).is(.stopTheEventBubbling)) {
$(this).css(background, #c44); var that = this;
setTimeout(function() { $(that).css(background, #fff); }, 2000);
//return false;
// or
event.stopPropagation();
}
});
}
$(['body','td','div']).each( setupHandler );
});
/script
/head
body
table border=1
tr
td
divI bubble all the way./div
div class=stopTheEventBubblingOnly the div catches me./div
/td
td class=stopTheEventBubbling
divThe TD stops my bubbling./div
/td
/tr
/table
div id=log/div
/body
/html
On 4/26/07, Stefan Kilp [sk-software] [EMAIL PROTECTED] wrote:
or event.stopPropagation()
is there a way to make this the default behavior.
at the moment i don't see any example where is would make sence that the click
event is
passed to the underliing element. i think it is a commen behavior in most gui's
(win, mac, ...)
the only the first element in the z-order receives the event (if it has been
registered).
the problem is that i have data in rows and at the and of each row there are
some 'action
icons' (edit, delete, ...) now to select a datarow i bind click event to the
surounding row
element (div or tr). when i now click on one of the action icons, my select
event is triggered,
which in this case is not intended.
any idea to solve this problem?
thanks
stefan
- Original Message
From: (J)(a)(k)(e) [EMAIL PROTECTED]
To: jquery-en@googlegroups.com
Sent: Wednesday, April 25, 2007 2:00:50 PM
Subject: [jQuery] Re: click event and z-order
I believe your answer is false.
if you return false at the end of the click code, no other element will be
bothered with the click event.
On 4/25/07,
Stefan Kilp [sk-software] [EMAIL PROTECTED] wrote:
hi,
if have two elements (a image in a table) which have a click event registered (on
img and
tr element). if i click on the img in the table both click events are
executed. i would expect
that only the first element in the z-order gets the click event.
it there something i missed, how can i change the behavior?
thanks
stefan
--
Stefan Kilp
SK-Software, Entwicklung Beratung
email: [EMAIL PROTECTED]
fon : +49 6151 93344-0
fax : +49 6151 93344-20
Herta-Mansbacher-Str. 98
64289 Darmstadt, Germany.
-
--
(J)(a)(k)(e) -
--
Stefan Kilp
SK-Software, Entwicklung Beratung
email: [EMAIL PROTECTED]
fon : +49 6151 93344-0
fax : +49 6151 93344-20
Herta-Mansbacher-Str. 98
64289 Darmstadt, Germany.
-
[jQuery] Re: Interacting with TR an TD
[...] isn't there a big performance impact using this piece of code?
That's why I said play around a bit ;^) I threw that idea out there
mostly because it is sort of inside-out from style that I would
probably have tried first and it was just building off the previous
example. That sort of thing helps me get out of a rut sometimes. My
first stab at it would have normally been closer to Mike's #2
suggestion; a nested for loop for the td's.
Just out of curiosity is there a way to break out while iterating with
.each()? Again building on the previous example (Mike's #2 this time):
$(function() {
$('tr').each( function() {
var allEmpty = true;
$('td', this).each(funcion() {
if(this.innerHTML !== 'nbsp;' ) {
allEmpty = false;
// Is it possible to break out of the td.each() here?
}
});
allEmpty $(this).addClass( 'allEmptyTds' );
});
});
Mike - Thanks but I can't take credit for mark and sweep. I think I
got it while working on garbage collection in an OS class years ago.
On 4/27/07, Feed [EMAIL PROTECTED] wrote:
Thanks Ian, it seem to be working perfectly. I just have one more
question: isn't there a big performance impact using this piece of
code? It looks like the page it taking a while do load, but I guess
you have to choose between the time the page takes to load and the
time you take to do everything manually.. am I right?
On Apr 28, 1:20 am, Ian Struble [EMAIL PROTECTED] wrote:
Building on Karl's example and your new all-td's-must-be-empty
requirement; mark all the TR's with a target class then sweep through
the TD's and get rid of the target class if you find a td that is not
empty. Play around a bit and see what else you can come up with.
Ian
$(document).ready(function() {
$('tr').addClass('allEmptyTds');// mark
$('td').each(function() {
var $this = $(this);
if ($this.html() !== 'nbsp;') {
$this.parent().removeClass('allEmptyTds'); // and sweep
}
});
});
On 4/27/07, Feed [EMAIL PROTECTED] wrote:
Feed wrote:
Hello all, I'm getting used to the excellent jQuery library and I need
some help of more experienced programmers. I have this simple table:
table class=table
tr
tdcontent/td
tdcontent/td
tdcontent/td
/tr
tr
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
/tr
tr
tdcontent/td
tdcontent/td
tdcontent/td
/tr
/table
What I need is to add a class to the TRs that have children TDs that
have nbsp; inside (and ONLY nbsp;)... I'm having problems because
nbps; is not text, it's html code...
Thanks in advance!
Thanks guys, that really helped, specially Karl Swedberg's piece of
code. The problem is: the class must only be applied to the TR only if
ALL children TDs have nbsp; inside... I'm having a hard time making
it work, I'm still learning how to use jQuery properly.
[jQuery] Re: Interacting with TR an TD
On 4/28/07, Michael Geary [EMAIL PROTECTED] wrote: Indeed there is, return false. See my #1 example which is similar to yours... I should have used my eyes before I started typing. My question's code is almost exactly what you wrote, just cosmetic differences. I missed the assignment + return (return empty = false) on my first read. Glad I asked it though, it is definitely in my quiver now. Thanks, Ian
[jQuery] Re: Interacting with TR an TD
Building on Karl's example and your new all-td's-must-be-empty
requirement; mark all the TR's with a target class then sweep through
the TD's and get rid of the target class if you find a td that is not
empty. Play around a bit and see what else you can come up with.
Ian
$(document).ready(function() {
$('tr').addClass('allEmptyTds');// mark
$('td').each(function() {
var $this = $(this);
if ($this.html() !== 'nbsp;') {
$this.parent().removeClass('allEmptyTds'); // and sweep
}
});
});
On 4/27/07, Feed [EMAIL PROTECTED] wrote:
Feed wrote:
Hello all, I'm getting used to the excellent jQuery library and I need
some help of more experienced programmers. I have this simple table:
table class=table
tr
tdcontent/td
tdcontent/td
tdcontent/td
/tr
tr
tdnbsp;/td
tdnbsp;/td
tdnbsp;/td
/tr
tr
tdcontent/td
tdcontent/td
tdcontent/td
/tr
/table
What I need is to add a class to the TRs that have children TDs that
have nbsp; inside (and ONLY nbsp;)... I'm having problems because
nbps; is not text, it's html code...
Thanks in advance!
Thanks guys, that really helped, specially Karl Swedberg's piece of
code. The problem is: the class must only be applied to the TR only if
ALL children TDs have nbsp; inside... I'm having a hard time making
it work, I'm still learning how to use jQuery properly.
[jQuery] Re: What does this do - transport.setRequestHeader(connection, close)
At the risk of beating a dead horse; a few links to related (and fixed) bugs in other projects (including firefox). The root cause of the hack (Dan just touched on it): https://bugzilla.mozilla.org/show_bug.cgi?id=246651 Message reporting that the above bug was fixed in the 11 Sep 2004 build : http://forums.mozillazine.org/viewtopic.php?p=788974 Two bugs from prototype (the second is marked duplicate): http://dev.rubyonrails.org/ticket/5606 http://dev.rubyonrails.org/ticket/5809 With this info, the discussion we have already had in this thread, Jake's beforeSend tip and a bit of luck, we might be able to get away with one more message on the subject. One saying that the close code/work around has gone away. Ian On 4/18/07, Dan G. Switzer, II [EMAIL PROTECTED] wrote: Jörn, if ( xml.overrideMimeType ) xml.setRequestHeader(Connection, close); I'm still not sure when that is really necessary to set. Could someone summarize the conclusion from this thread? In older Gecko builds v1.0.x, the content length was incorrect unless you passed in the connection close instruction. This meant that your AJAX packets would get corrupted. -Dan
[jQuery] Crashing IE 6, help
I have a script that's crashing IE 6, hard. I'm not sure what's going on, and I don't know where to start debugging. I should mention that I'm not exactly inexperienced with debugging IE's oddities. But I don't usually encounter cases where IE simply crashes, so I'm not sure where to start. Does anyone have guidance? Are there any third-party tools like Firebug, but for IE?
[jQuery] Re: What does this do - transport.setRequestHeader(connection, close)
Correct, this was a work around for a pre-1.5 FF issue. My notes on it say see mozilla bug #246651 but I remember thinking that jQuery was using the same work around as another js library (prototype?) and that that project had its own bug to get rid of the work around. I thought I saw that the work around had finally been removed in more recent versions of jQuery. I last patched a 1.0.4 version for local use at work but I think it was there until 1.1. There was also another reason for explicitly closing the connection that Jake Cigar(?) asked for when overriding the mime type of the request. I forget his reasons for that right now. Ian On 4/10/07, Aaron Heimlich [EMAIL PROTECTED] wrote: I vaguely remember there being some issue with older versions of Firefox that this solved, but don't quote me on that. On 4/10/07, Priest, James (NIH/NIEHS) [C] [EMAIL PROTECTED] wrote: I've been implementing Dan Switzer's autocomplete plugin on my site and I have everything sort of working (thanks Dan!) but ran into an issue with authentication. My site uses Windows Integrated Authentication (on IIS) and every Ajax request kicks off a login prompt... Dan found this: http://anotherdan.com/2006/6/8/ajax-and-integrated-windows-authenticatio n I replaced my compressed jQuery script with the source and commented out that line: // transport.setRequestHeader(connection, close); Which seems to have solved this issue. But I want to make sure this doesn't screw up anything else?? Also - how can I re-compress my source with this modification included? Thanks, Jim -- Aaron Heimlich Web Developer [EMAIL PROTECTED] http://aheimlich.freepgs.com
[jQuery] Re: What does this do - transport.setRequestHeader(connection, close)
Ditto :)
On 4/10/07, Ⓙⓐⓚⓔ [EMAIL PROTECTED] wrote:
thank you John, it always bothered me!
On 4/10/07, John Resig [EMAIL PROTECTED] wrote:
Personally, I think this fix should just be removed - especially
considering that we don't even support versions of Firefox, that old,
any more.
--John
On 4/10/07, Dan G. Switzer, II [EMAIL PROTECTED] wrote:
I vaguely remember there being some issue with older versions of
Firefox
that this solved, but don't quote me on that.
Oddly enough, Ajaxian just had reference to a blog entry that talks
about
Prototype's fix for this:
/* Force Connection: close for older Mozilla browsers to work
* around a bug where XMLHttpRequest sends an incorrect
* Content-length header. See Mozilla Bugzilla #246651.
*/
if (this.transport.overrideMimeType
(navigator.userAgent.match(/Gecko/(d{4})/) ||
[0,2005])[1] 2005)
headers['Connection'] = 'close';
As you can see, they only do the Connection: close header if you're
running a Gecko version in a certain year. I'd imagine they're doing
this to
fix other issues--such as the issue Jim is pointing out.
While I know that generally Browser sniffing is frowned upon, I can see
why
they're doing it in this case--because there doesn't appear to be any
kind
of DOM sniffing trick you can use. We could do:
// Make sure the browser sends the right content length
if ( xml.overrideMimeType !document.all )
xml.setRequestHeader(Connection, close);
That might fix the problem, but I wonder if sending the Connection:
close
string causes issues in other browsers outside of IE.
-Dan
--
Ⓙⓐⓚⓔ - יעקב ʝǡǩȩ ᎫᎪᏦᎬ
