[jQuery] How to address elements (id? name? class?)
Hi, I am wondering how one should mark elements to find them later, for example to attach event handlers to them. It is clear, that id certainly IS a way to do it, but having to use unique ids is quite uncomfortable, because it requires setting up some kind of id namespace plan. As a common example, imagine there is a global search functionality in the header of every page. If I call it #search I get a problem when I later add a local search form on one of the pages. So how do you handle this? Just go ahead and set up an id plan? Using class, so both search fields have the class search and I address them using $(#header input.search) and $(#content input.search)? Or, because the aforementioned method mixes CSS-required classes with JS-required classes, use another attribute, possibly name? Regards, André
[jQuery] Which event to use with form elements
Hi, is there any event that I can use to trigger an action immediately when a form element is changed? (And similarily when it is changed and then looses the focus.) I think JS does not provide such an event but maybe jQuery provides some kind of virtual event for this case? Regards, André
[jQuery] Expression vs. selector
Hi, in the docs there are methods accepting arguments of type Expression (filter,...) and methods accepting Selector (appendTo,...) To me it looks as if they were used interchangeable. So what is an Expression in contrast to a Selector? Regards, André
[jQuery] How to bind event handlers to elements
Hi list, which is the recommended way to bind event handlers to elements. Preferably without giving each of them an id. As far as I know, the classic way (input onchange=...) is considered deprecated and evil. So what is the jQuery way of doing this? Regards, André
[jQuery] Menu autoheight on click event
Hello all, I posted a question on this board earlier, regarding a menu with a variable height. I got help from someone named Charlie (thanks again), who helped me a lot, but unfortunately he also got stuck. V.1: http://www.opee.nl/jquery/index.html (what it should look like - static) http://www.opee.nl/jquery/index1.html (how far I got - a try to make it dynamic) V.2: http://www.getnoticedinternet.com/test/variable_menu_height.html (how far Charlie got - dynamic height, but only works with one child open) The problem is this: “Using click event on a tag the click creates the next visible UL, that allow to count how many visible. Works fine when go from fresh page, to next level, to 3rd level. I based my method on comparing 3 open UL's. Unfortunately when 3 levels are already open and try to click to change a level , the already open UL still gets counted so now have 4 UL's in my count. Method falls apart here.” Any help is greatly appreciated. Greetings, Andre The Netherlands P.s. The original question can be found here: http://groups.google.com/group/jquery-en/browse_thread/thread/a9229283606f31b2?pli=1
[jQuery] Re: Menu autoheight on click event
Hello Waseem, I'm really thankful you're willing to help me out! Would you please place it on this message board? Other users might also find it helpful. Awaiting your response. Greetings, Andre On 13 mei, 14:43, waseem sabjee waseemsab...@gmail.com wrote: Hi Andre, to be honest i found quite a few bugs in the how it should be. In about 4 hours from now ( after my full time job ) I could write you a menu plugin that will work similar to that. with an auto height feature. and a parent child child-to-child support On Wed, May 13, 2009 at 2:15 PM, André andrejilde...@gmail.com wrote: Hello all, I posted a question on this board earlier, regarding a menu with a variable height. I got help from someone named Charlie (thanks again), who helped me a lot, but unfortunately he also got stuck. V.1: http://www.opee.nl/jquery/index.html(what it should look like - static) http://www.opee.nl/jquery/index1.html(how far I got - a try to make it dynamic) V.2: http://www.getnoticedinternet.com/test/variable_menu_height.html(how far Charlie got - dynamic height, but only works with one child open) The problem is this: “Using click event on a tag the click creates the next visible UL, that allow to count how many visible. Works fine when go from fresh page, to next level, to 3rd level. I based my method on comparing 3 open UL's. Unfortunately when 3 levels are already open and try to click to change a level , the already open UL still gets counted so now have 4 UL's in my count. Method falls apart here.” Any help is greatly appreciated. Greetings, Andre The Netherlands P.s. The original question can be found here: http://groups.google.com/group/jquery-en/browse_thread/thread/a922928...
[jQuery] Re: Variable div #menu height - Jquery
Hey jd,
Thanks for your reply. I understand what you are trying to achieve,
but it does not work with my example, since the child ul was
absolutely positioned (to get 'em next to each other). That is why
this is such a problem.
Thanks anyway ;).
Greetings,
Andre
On 13 mei, 17:25, ehime dodom...@gmail.com wrote:
use this
div#menu {height:100%; min-height: 150px; background:#??? url(images/
backgroundyoureusing.png) 0 0 repeat-x;}
or this
div#menu {
background-color:#???;
margin-left:1px;
padding-bottom:10px;
position:relative;
}
http://omnisistem.com/was what I did, the menu is dynamic with an end
cap at the base.
No extra JQuery needed.
; )
-jd
[jQuery] Re: refresh image?
you can, replace your querystring...
$(#captcha).attr(src).replaceWith(inc/captcha/captcha.php?test=123);
in the next reload
$(#captcha).attr(src).replaceWith(inc/captcha/captcha.php?test=231);
it isn't the best practice...
2009/5/6 Eric Garside gars...@gmail.com
For reference, this php should properly force no-cache:
Just be sure to replace $mime with the correct type for the image
(jpg, gif, whatever you're sending)
header('Content-Type: ' . $mime);
header('Cache-Control: no-cache');
header('Pragma: no-cache');
On May 6, 2:30 pm, Ricardo ricardob...@gmail.com wrote:
On May 6, 6:46 am, heohni heidi.anselstet...@consultingteam.de
wrote:
Hi, after sending a form, I would like to reload the form in order to
send a new message.
Therefore I was resetting the old form, but I need to call a new
captch image.
It's currently like this:
img src=inc/captcha/captcha.php id=captcha alt= border=0
style=float:left; /
I thought I coud re-load it with:
$(#captcha).attr(src).replaceWith(inc/captcha/captcha.php);
But this way I don't get a new call... to generate a new image and
with it connected a new session entry for the captcha code.
What can I do to create a real call to the file? Any ideas?
.replaceWith() replaces one element with another. Use this:
$(#captcha).attr(src, inc/captcha/captcha.php);
This will reload the image assuming captcha.php is correctly sending a
no-cache header.
[jQuery] Re: Variable div #menu height - Jquery
This is a shameless bump... Can someone please help me out? On 22 apr, 14:27, André andrejilde...@gmail.com wrote: Whoops, The Javascript file can be found here:http://www.opee.nl/jquery/js/init.jshttp://www.opee.nl/jquery/js/init1.js Greetings, Andre On 22 apr, 14:15, André andrejilde...@gmail.com wrote: Hello all, I've been struggling with implementing Jquery into my navigation menu. The menu itself is an unordered list with subitems. The subitems appear next to the main menuitems (for showing, hiding and append classes to these items I use the 'collapsor'-plugin). So far so good... What is bugging me is the height of the menu, which is static. I want the div #menu to ‘grow’ along when one of the menu-items gets clicked and the subitems pop-out. This is how I want it to look like (uses a predefined height):http://www.opee.nl/jquery/index.htmlhttp://www.opee.nl/jquery/init.js I want to calculate the height ul to use as the height of the div #menu. Since I couldn’t grab the .height() of a hidden element, I tried to count the children of the next element within the navigation by multiplying the height of the li (which is 24px) with the number of children + 8px for the padding-top. Maybe it’s more clear when you just look at the source. This is what I have so far (yup, I miserably failed :) ):http://www.opee.nl/jquery/index1.htmlhttp://www.opee.nl/jquery/init1.js I hope you can help me tackle this problem. Any help is appreciated! Greetings, Andre
[jQuery] Variable div #menu height - Jquery
Hello all, I've been struggling with implementing Jquery into my navigation menu. The menu itself is an unordered list with subitems. The subitems appear next to the main menuitems (for showing, hiding and append classes to these items I use the 'collapsor'-plugin). So far so good... What is bugging me is the height of the menu, which is static. I want the div #menu to ‘grow’ along when one of the menu-items gets clicked and the subitems pop-out. This is how I want it to look like (uses a predefined height): http://www.opee.nl/jquery/index.html http://www.opee.nl/jquery/init.js I want to calculate the height ul to use as the height of the div #menu. Since I couldn’t grab the .height() of a hidden element, I tried to count the children of the next element within the navigation by multiplying the height of the li (which is 24px) with the number of children + 8px for the padding-top. Maybe it’s more clear when you just look at the source. This is what I have so far (yup, I miserably failed :) ): http://www.opee.nl/jquery/index1.html http://www.opee.nl/jquery/init1.js I hope you can help me tackle this problem. Any help is appreciated! Greetings, Andre
[jQuery] Re: Variable div #menu height - Jquery
Whoops, The Javascript file can be found here: http://www.opee.nl/jquery/js/init.js http://www.opee.nl/jquery/js/init1.js Greetings, Andre On 22 apr, 14:15, André andrejilde...@gmail.com wrote: Hello all, I've been struggling with implementing Jquery into my navigation menu. The menu itself is an unordered list with subitems. The subitems appear next to the main menuitems (for showing, hiding and append classes to these items I use the 'collapsor'-plugin). So far so good... What is bugging me is the height of the menu, which is static. I want the div #menu to ‘grow’ along when one of the menu-items gets clicked and the subitems pop-out. This is how I want it to look like (uses a predefined height):http://www.opee.nl/jquery/index.htmlhttp://www.opee.nl/jquery/init.js I want to calculate the height ul to use as the height of the div #menu. Since I couldn’t grab the .height() of a hidden element, I tried to count the children of the next element within the navigation by multiplying the height of the li (which is 24px) with the number of children + 8px for the padding-top. Maybe it’s more clear when you just look at the source. This is what I have so far (yup, I miserably failed :) ):http://www.opee.nl/jquery/index1.htmlhttp://www.opee.nl/jquery/init1.js I hope you can help me tackle this problem. Any help is appreciated! Greetings, Andre
[jQuery] Re: validation with jquery 1.3
thanks i use an old version thanks for your help.
On 30 jan, 19:24, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
Have you updated to
1.5.1?http://bassistance.de/2009/01/14/releases-jquery-13-and-validation-pl...
Jörn
On Fri, Jan 30, 2009 at 5:17 PM, andré l...@chrom.fr wrote:
Hello,
Thanks for your fabulousvalidationform.
But I 've a problem.When I usejquery1.2.6, my form works well on IE,
firefox and safari. But When I usejquery1.3 in IE the error message
doesn't work Can you help me ?
my script :
$().ready(function() {
// validate signup form on keyup and submit
$(#InfoClient).validate({
rules: {
Nom : required,
Prenom : required,
DateNaissance : {
date: true
},
Adresse : required,
CodePostal : required,
Ville :required,
Pays : {
digits: true
},
TelFixe: {
digits:true,
required: function(element) {
return $(#TelPort).val()
01;
}
},
TelPort: {
digits:true,
required: function(element) {
return $(#TelFixe).val()
01;
}
}
},
messages: {
Nom :Veuillez entrer un nom !,
Prenom :Veuillez entrer un prénom !,
DateNaissance :Veuillez entrer une date de
naissance sous la forme
JJ/MM/ !,
Adresse :Veuillez une adresse !,
CodePostal :Veuillez un code postal !,
Ville :Veuillez entrer une ville !,
Pays :Veuillez entrer un pays !,
TelPort :Veuillez entrer un numéro de fixe ou de
portable à 10
chiffres!,
TelFixe :Veuillez entrer un numéro de fixe ou de
portable à 10
chiffres !
}
});
});
[jQuery] validation with jquery 1.3
Hello,
Thanks for your fabulous validation form.
But I 've a problem.When I use jquery 1.2.6, my form works well on IE,
firefox and safari. But When I use jquery 1.3 in IE the error message
doesn't work Can you help me ?
my script :
$().ready(function() {
// validate signup form on keyup and submit
$(#InfoClient).validate({
rules: {
Nom : required,
Prenom : required,
DateNaissance : {
date: true
},
Adresse : required,
CodePostal : required,
Ville :required,
Pays : {
digits: true
},
TelFixe: {
digits:true,
required: function(element) {
return $(#TelPort).val() 01;
}
},
TelPort: {
digits:true,
required: function(element) {
return $(#TelFixe).val() 01;
}
}
},
messages: {
Nom :Veuillez entrer un nom !,
Prenom :Veuillez entrer un prénom !,
DateNaissance :Veuillez entrer une date de naissance
sous la forme
JJ/MM/ !,
Adresse :Veuillez une adresse !,
CodePostal :Veuillez un code postal !,
Ville :Veuillez entrer une ville !,
Pays :Veuillez entrer un pays !,
TelPort :Veuillez entrer un numéro de fixe ou de
portable à 10
chiffres!,
TelFixe :Veuillez entrer un numéro de fixe ou de
portable à 10
chiffres !
}
});
});
[jQuery] Re: Select an element in an ancestor selector
Thanks a lot for the answer, Tim, but it did no work either. It's 5
levels up and there are different tags on the way... I think that's
the reason it's getting that hard. Maybe I'm to focused in the li
and the solution is in a different path...
André
On 28 out, 18:59, tpb976 [EMAIL PROTECTED] wrote:
Try removing the :first like this:
$(a.confirmar).click(function(){
$
(this).parents(li).next().find(a.apImg).addClass(apImgOn).removeClass(apImg);
});
Also, since the methods are chainable, you do not need to traverse to
the item again. You can just call .removeClass() right after adding
the class.
-Tim
On Oct 28, 1:47 pm, André [EMAIL PROTECTED] wrote:
Hello guys,
I'm in a big trouble trying to create a simple jQuery function, and my
boss is on my neck asking when I'll be done with this work... I need
help!!!
My HTML is:
lia class=apImg/a
div
form
ul
li ... /li
li... /li
lia class=confirmarCONFIRMAR/a/li
/ul
/form
/div
/li
When I click a class=confirmar/a it should add and remove a
class to the a class=apImg, which is located right next to the
ancestorli on the code above. This piece of code will repeat
troughout the HTML that will be generated dynamicaly, and I must ONLY
selectthe a class=apImg above each link and NOT ALLa tags
inside the code that will carry the same class=apImg.
I'm trying this:
$(a.confirmar).click(function(){
$
(this).parents(li:first).next().find(a.apImg).addClass(apImgOn);
$
(this).parents(li:first).next().find(a.apImgOn).removeClass(apImg);
});
But it doesn't work!!
Is there anyone to help me, please?
André
[jQuery] Re: Select an element in an ancestor selector
I got it!!! You helped me to get closer to the solution, Tim. The only
one thing that was missing in your code was to erase the li from the
parentheses.
For the guys who may face the same problem as I did, this is the path
that worked (for the HTML I placed in my first post):
$(a.confirmar).click(function(){
$
(this).parents().find(a.apImg).addClass(apImgOn).removeClass(apImg);
});
Thanks a lot for the help!
André
On 29 out, 07:28, André [EMAIL PROTECTED] wrote:
Thanks a lot for the answer, Tim, but it did no work either. It's 5
levels up and there are different tags on the way... I think that's
the reason it's getting that hard. Maybe I'm to focused in the li
and the solution is in a different path...
André
On 28 out, 18:59, tpb976 [EMAIL PROTECTED] wrote:
Try removing the :first like this:
$(a.confirmar).click(function(){
$
(this).parents(li).next().find(a.apImg).addClass(apImgOn).removeClass(apImg);
});
Also, since the methods are chainable, you do not need to traverse to
the item again. You can just call .removeClass() right after adding
the class.
-Tim
On Oct 28, 1:47 pm, André [EMAIL PROTECTED] wrote:
Hello guys,
I'm in a big trouble trying to create a simple jQuery function, and my
boss is on my neck asking when I'll be done with this work... I need
help!!!
My HTML is:
lia class=apImg/a
div
form
ul
li ... /li
li... /li
lia class=confirmarCONFIRMAR/a/li
/ul
/form
/div
/li
When I click a class=confirmar/a it should add and remove a
class to the a class=apImg, which is located right next to the
ancestorli on the code above. This piece of code will repeat
troughout the HTML that will be generated dynamicaly, and I must ONLY
selectthe a class=apImg above each link and NOT ALLa tags
inside the code that will carry the same class=apImg.
I'm trying this:
$(a.confirmar).click(function(){
$
(this).parents(li:first).next().find(a.apImg).addClass(apImgOn);
$
(this).parents(li:first).next().find(a.apImgOn).removeClass(apImg);
});
But it doesn't work!!
Is there anyone to help me, please?
André
[jQuery] Select an element in an ancestor selector
Hello guys,
I'm in a big trouble trying to create a simple jQuery function, and my
boss is on my neck asking when I'll be done with this work... I need
help!!!
My HTML is:
lia class=apImg/a
div
form
ul
li ... /li
li... /li
lia class=confirmarCONFIRMAR/a/li
/ul
/form
/div
/li
When I click a class=confirmar/a it should add and remove a
class to the a class=apImg, which is located right next to the
ancestor li on the code above. This piece of code will repeat
troughout the HTML that will be generated dynamicaly, and I must ONLY
select the a class=apImg above each link and NOT ALLa tags
inside the code that will carry the same class=apImg.
I'm trying this:
$(a.confirmar).click(function(){
$
(this).parents(li:first).next().find(a.apImg).addClass(apImgOn);
$
(this).parents(li:first).next().find(a.apImgOn).removeClass(apImg);
});
But it doesn't work!!
Is there anyone to help me, please?
André
[jQuery] Re: Adding select option values to hidden field
Hey Jamie... I'm using this one http://docs.jquery.com/Ajax/serializeArray It's working for me... On Aug 8, 7:06 am, Jamie Pittock [EMAIL PROTECTED] wrote: Anyone able to offer any ideas? On Aug 7, 3:25 pm, Jamie Pittock [EMAIL PROTECTED] wrote: Sorry, the value would be a comma-delimited list... input type=hidden name=all-select-values id=all-select-values value=10,11,11 / On Aug 7, 2:30 pm, MorningZ [EMAIL PROTECTED] wrote: Using that HTML above what do you want the end result of the value of all-select-values to be? That's not very clear
[jQuery] jQuery Form Plugin
Hey Folks, Can I cancel a connection during an upload? I'm using this form plugin http://www.malsup.com/jquery/form/ and a dialog showing the process, but the dialog needs to have a cancel button to trigger a client-side cancel. As this plugin uses an iframe to target a form, I need just change the iframe src to 'about:blank'. But it seems not to have an open way to control the iframe. any thoughts?
[jQuery] Re: jQuery Form Plugin
Hey Mike, thanks, it works.
Don't you think we can have this feature built-in ?
Something like $('form').ajaxForm('cancel')
I don't know exactly where I can post this request
Best,
André
On Oct 2, 10:20 am, Mike Alsup [EMAIL PROTECTED] wrote:
Hmm, haven't tried it but I suppose you could do this:
$('iframe[id^=jqFormIO']).attr('src','about:blank');
Mike
On Oct 2, 8:56 am, André Cassal [EMAIL PROTECTED] wrote:
Hey Folks,
Can I cancel a connection during an upload?
I'm using this form pluginhttp://www.malsup.com/jquery/form/anda
dialog showing the process, but the dialog needs to have a cancel
button to trigger a client-side cancel.
As this plugin uses an iframe to target a form, I need just change the
iframe src to 'about:blank'. But it seems not to have an open way to
control the iframe.
any thoughts?
[jQuery] Re: Using jQuery Form Plugin - submitting special characters
All strings are in the form, to submit this form I'm using the jquery.form
plugin as the function below:
function foo(){
var options = {
url: 'model/serviceRelease.asp?id=5',
target: '#divMessage',
type: 'get',
success: messageSuccess};
$('#myForm').ajaxForm(options);
$('#myForm').submit();
}
I'm using ISO-8859-1 and all the labels (with special characters) in the
form appears correctly even when i write into the fields, but when
submitted, the data is saved in a different encode.
So, a tried to change the charset/encode to UTF-8 and the opposite happen,
the labels in the form come wrong and the data saved correct.
Any tip how to unify both?
On Thu, Sep 18, 2008 at 5:46 PM, ricardobeat [EMAIL PROTECTED] wrote:
XHR requests are known to have issues with special characters.
Try using the funcion encodeURIComponent() around each string you send
with Ajax.
On Sep 18, 3:11 pm, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote:
Hi all, same to me!!
Please someone let me know about the solution!
[]'s
Casé
On 6 ago, 08:57, Eita [EMAIL PROTECTED] wrote:
I know this is an old topic, but I'm dealing with the same problem as
Pablo and I didn't find a solution for that.
If anyone has a clue to solve this behavior...
Thanks,
Fabiano.
On 18 jul, 22:43, Pablo Santiago [EMAIL PROTECTED] wrote:
hubbs,
Smart quotes from MS Word are a different charset (windows-1252). To
have them correctly displayed you'll need to set your page to this
charset and also check that your server accepts it (Firebug can tell
you that).
However, I'm dealing with a similiar problem... I'm using ISO-8859-1
both in mi pages and my server. Special characters (á, ñ) are
display correctly but when I try to send them through $.ajax they are
displayed as strange symbols as if the charset is UTF-8.
I'm clueless if anyone has any idea, please let me know.
Thanks,
Pablo
On 11 jul, 15:11, hubbs [EMAIL PROTECTED] wrote:
I am trying to send special characters through my form, using the
form
plugin, but they keep on getting converted to strange characters.
e.g. Smart quotes from MS Word, etc.
So, what I am wondering is, what do I need to do to fix this? I
thought that submitting the form into an iframe with the form
plugin
would fix this problem, but it doesn't seem to, still the same
issue.
Do I need to tell the form plugin to use the same charset that I
use
on my site?
script type=text/javascript charset=iso-8859-1 ?- Ocultar
texto entre aspas -
- Mostrar texto entre aspas -- Ocultar texto entre aspas -
- Mostrar texto entre aspas -
[jQuery] inserting file in file using cluetips
Hi everyone, I've just started using jquery and a few plugins including cluetips: they are wonderful! :-) Now, my question. I am using cluetips to display the content of a short help file on some elements. Many elements are such that their help file differ only slightly. What I would like to is create a file (common.html) containing elements that are common, and even shorter files for each element (let's call them elem1.html, elem2.html, etc.). Then, I'd be happy if I could do either of the following: 1. when displaying a cluetip, appending common.html to elem1.html automatically, and displaying the result. 2. having an active element within elem1.html (let's call it more) and using more as the source of a new cluetip, used to pull common.html. (I don't want to have it displayed as a separate web page, losing focus; a popup might be acceptable). Thanks for any help, André
[jQuery] Re: inserting file in file using cluetips
On Aug 27, 5:23 pm, Karl Swedberg [EMAIL PROTECTED] wrote: Hi André, There are a couple ways I can think of to do #1. I've whipped up a couple demos to show you: http://plugins.learningjquery.com/cluetip/demo/multi-ajax.htmlhttp://plugins.learningjquery.com/cluetip/demo/multi-ajax2.html Just view source to see how they're done. This is perfect! Thank you very much! André The second one is simpler, but it appends the second file's contents after the cluetip is shown, at which point the drop-shadow divs have already been drawn, so I had to resize them too or else they wouldn't really be drop shadows. The quick resize shouldn't be too noticeable, but thought you should know. --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Aug 27, 2008, at 9:24 AM, André wrote: Hi everyone, I've just started using jquery and a few plugins including cluetips: they are wonderful! :-) Now, my question. I am using cluetips to display the content of a short help file on some elements. Many elements are such that their help file differ only slightly. What I would like to is create a file (common.html) containing elements that are common, and even shorter files for each element (let's call them elem1.html, elem2.html, etc.). Then, I'd be happy if I could do either of the following: 1. when displaying a cluetip, appending common.html to elem1.html automatically, and displaying the result. 2. having an active element within elem1.html (let's call it more) and using more as the source of a new cluetip, used to pull common.html. (I don't want to have it displayed as a separate web page, losing focus; a popup might be acceptable). Thanks for any help, André
