[jQuery] .length value different in IE vs FF
I have a pretty simple character counter to count the number of
character typed by a user..
broadcastSubmit = $('#broadcastSubmitButton');
broadCastMessageDiv = $('#broadcastMessage');
availableChars = 140;
charCount = $('.char_count');
boilerPlateKeyword = $('#boiler_plate_keyword');
boilerPlateKeyword.text(keyword.toUpperCase());
broadCastMessageDiv.bind('keyup', function() {
broadCastDiv = $(this).val();
previewContentWindowTextLength = broadCastDiv.length;
boilerPlateText = $('#boiler_plate').val();
boilerPlateTextLength = boilerPlateText.length;
charCount.text(availableChars - (boilerPlateTextLength +
previewContentWindowTextLength) - 0);
});
This basically has a div with some preset text. (reply stop keyword to
cancel.)
and then a textarea that a user types an SMS message into. it combines
the user input with the preset text and subtracts it from the total
character limit (140)
my problem is IE is correct in the count, but FF and Safari are equal,
but wrong. they are showing more characters than there should be.
e.g. after typing in a message IE might be 28 available chars and
Safari and FF would be 20
Why would those browsers add more to the count? any ideas.
[jQuery] Re: IE only browsers that break - need help
So after a continued search for a similar problem i finally found what
i think is the answer.
http://xqus.com/jquery-and-ie-headache
it appears the IE set a global variable for each element with the same
ID. so calling login_box = $('#login_box'); causes IE to fail.
you can either add var to the front e.g. var login_box = ... or you
can change the name of the variable itself. my_login_box etc...
from the man himself. hopefully this helps anyone who comes across the
same problem..
On May 27, 7:44 pm, Bob O wrote:
> My code runs great in every browser but IE6 IE7 and IE8. it breaks and
> causes all scripts to fail.
>
> i setup Visual Web Developer in my VM like a blog post told me, and
> when i load the page i get
>
> Microsoft JScript runtime error: Object doesn't support this property
> or method
>
> that seem to break on this line
>
> login_button = $('#login_button');
>
> its basically my setup for the jQuery UI dialog.
>
> This is the entire piece
>
> $(document).ready(function() {
>
> // buttons
> login_button = $('#login_button');
> whistle_button = $('#whistle_banner_btn');
> victim_button = $('#victim_banner_btn');
> join_button = $('#join_fight_banner_btn');
> sub_blow_button = $('#blow_the_whistle');
> sub_spread_word = $('#spread_the_word');
>
> // divs
> login_box = $('#login_box');
> whistle_box = $('#whistle_box');
> join_box = $('#join_box');
>
> login_box.hide();
> whistle_box.hide();
> join_box.hide();
>
> // div setups
> login_box.dialog({width: 400, modal: true, resizable: false,
> autoOpen: false});
> whistle_box.dialog({width: 500, modal: true, resizable: false,
> autoOpen: false});
> join_box.dialog({width: 500, modal: true, resizable: false,
> autoOpen: false});
>
> // actions
>
> login_button.click(function() {
> login_box.dialog("open");
> return false;
> });
>
> whistle_button.click(function() {
> whistle_box.dialog("open");
> return false;
> });
>
> victim_button.click(function() {
> join_box.dialog("open");
> return false;
> });
>
> join_button.click(function() {
> join_box.dialog("open");
> return false;
> });
>
> sub_blow_button.click(function() {
> whistle_box.dialog("open");
> return false;
> });
>
> sub_spread_word.click(function() {
> join_box.dialog("open");
> return false;
> });
>
> });
>
> im not a js expert, so im hoping someone can point me in the right
> direction..
[jQuery] IE only browsers that break - need help
My code runs great in every browser but IE6 IE7 and IE8. it breaks and
causes all scripts to fail.
i setup Visual Web Developer in my VM like a blog post told me, and
when i load the page i get
Microsoft JScript runtime error: Object doesn't support this property
or method
that seem to break on this line
login_button = $('#login_button');
its basically my setup for the jQuery UI dialog.
This is the entire piece
$(document).ready(function() {
// buttons
login_button = $('#login_button');
whistle_button = $('#whistle_banner_btn');
victim_button = $('#victim_banner_btn');
join_button = $('#join_fight_banner_btn');
sub_blow_button = $('#blow_the_whistle');
sub_spread_word = $('#spread_the_word');
// divs
login_box = $('#login_box');
whistle_box = $('#whistle_box');
join_box = $('#join_box');
login_box.hide();
whistle_box.hide();
join_box.hide();
// div setups
login_box.dialog({width: 400, modal: true, resizable: false,
autoOpen: false});
whistle_box.dialog({width: 500, modal: true, resizable: false,
autoOpen: false});
join_box.dialog({width: 500, modal: true, resizable: false,
autoOpen: false});
// actions
login_button.click(function() {
login_box.dialog("open");
return false;
});
whistle_button.click(function() {
whistle_box.dialog("open");
return false;
});
victim_button.click(function() {
join_box.dialog("open");
return false;
});
join_button.click(function() {
join_box.dialog("open");
return false;
});
sub_blow_button.click(function() {
whistle_box.dialog("open");
return false;
});
sub_spread_word.click(function() {
join_box.dialog("open");
return false;
});
});
im not a js expert, so im hoping someone can point me in the right
direction..
[jQuery] Re: jQuery Validation Plugin
So it seems im still having some issues..
this is my html
Title
Body
Author
Permalink
A hyphen separated title for URL's e.g. my-
title
and this is my js placed after the jQuery and jquery.validate scripts.
$(document).ready(function() {
$('#new_blog_post').validate({
rules: {
"blog_post[title]": "required",
"blog_post[body]": "required",
"blog_post[author]": "required"
},
messages: {
"blog_post[title]": "You must enter a title.",
"blog_post[body]": "You cant have a blog without a blog..?",
"blog_post[author]": "You must supplay an author name"
}
});
});
Any ideas?
On May 26, 7:48 am, Bob O wrote:
> Man i combed the docs for a day, and i missed that link everytime..
>
> Thanks Jorn.
>
> On May 23, 3:02 pm, Jörn Zaefferer
> wrote:
>
> > You need to quote the full key, eg "name['name']": "required".
> > Seehttp://docs.jquery.com/Plugins/Validation#Fields_with_complex_names_
>
> > Jörn
>
> > On Fri, May 22, 2009 at 10:15 PM, Bob O wrote:
>
> > > so as not to confuse..
>
> > > the name attribute looks like this
> > > name="name['name']" for the input field
>
> > > and the js is
>
> > > rules: {
> > > name['name']: 'required'
> > > }
>
> > > i noticed typos in the above question.
>
> > > On May 22, 12:36 pm, "bhan...@hcinsight.com"
> > > wrote:
> > >> Can anyone tell me how i can change which attribute on my form field
> > >> triggers the validation?
>
> > >> currently it appears the be the name attribute. So in my Rails app
> > >> using Rails helpers, it sets the name to somthing like formname
> > >> ['fieldname'] and the whole name.
>
> > >> in my script if i do something like
>
> > >> rules: {
> > >> formname['fieldname]: 'required'
>
> > >> }
>
> > >> etcit causes the script to break.
>
> > >> I need a workaround if anyone has ever come across this problem..
>
> > >> Thanks in Advance
>
>
[jQuery] Re: jQuery Validation Plugin
Man i combed the docs for a day, and i missed that link everytime..
Thanks Jorn.
On May 23, 3:02 pm, Jörn Zaefferer
wrote:
> You need to quote the full key, eg "name['name']": "required".
> Seehttp://docs.jquery.com/Plugins/Validation#Fields_with_complex_names_
>
> Jörn
>
> On Fri, May 22, 2009 at 10:15 PM, Bob O wrote:
>
> > so as not to confuse..
>
> > the name attribute looks like this
> > name="name['name']" for the input field
>
> > and the js is
>
> > rules: {
> > name['name']: 'required'
> > }
>
> > i noticed typos in the above question.
>
> > On May 22, 12:36 pm, "bhan...@hcinsight.com"
> > wrote:
> >> Can anyone tell me how i can change which attribute on my form field
> >> triggers the validation?
>
> >> currently it appears the be the name attribute. So in my Rails app
> >> using Rails helpers, it sets the name to somthing like formname
> >> ['fieldname'] and the whole name.
>
> >> in my script if i do something like
>
> >> rules: {
> >> formname['fieldname]: 'required'
>
> >> }
>
> >> etcit causes the script to break.
>
> >> I need a workaround if anyone has ever come across this problem..
>
> >> Thanks in Advance
>
>
[jQuery] Re: jQuery Validation Plugin
so as not to confuse..
the name attribute looks like this
name="name['name']" for the input field
and the js is
rules: {
name['name']: 'required'
}
i noticed typos in the above question.
On May 22, 12:36 pm, "bhan...@hcinsight.com"
wrote:
> Can anyone tell me how i can change which attribute on my form field
> triggers the validation?
>
> currently it appears the be the name attribute. So in my Rails app
> using Rails helpers, it sets the name to somthing like formname
> ['fieldname'] and the whole name.
>
> in my script if i do something like
>
> rules: {
> formname['fieldname]: 'required'
>
> }
>
> etcit causes the script to break.
>
> I need a workaround if anyone has ever come across this problem..
>
> Thanks in Advance
[jQuery] Re: Jquery Email validation
look at the jQuery validation plugin.. its pretty slick. On May 22, 4:06 am, gladrinkz wrote: > is ant one know how can i set email validation in jquery i am > using .net
[jQuery] Re: alert wont fire from page to page
nevermind...i found the problem.
On Apr 15, 10:46 am, Bob O wrote:
> also in my code the line is not commented out...
>
> I accidentally pasted that in there..
>
> On Apr 15, 10:45 am, Bob O wrote:
>
> > I have a very simple piece of code.
>
> > $(document).ready(function() {
> > // var url = location.pathname;
> > alert(url);
>
> > });
>
> > When im on my home page it alerts the pathname like it should. but
> > when i navigate to the next page the alert does not fire
>
> > the firebug dom shows the new pathname..but the alert does not fire.
>
> > the js files are across all of my views and the js file that contains
> > this piece of code is in the source when viewed
>
> > any guidance would be great.
>
> > thanks
[jQuery] Re: alert wont fire from page to page
also in my code the line is not commented out...
I accidentally pasted that in there..
On Apr 15, 10:45 am, Bob O wrote:
> I have a very simple piece of code.
>
> $(document).ready(function() {
> // var url = location.pathname;
> alert(url);
>
> });
>
> When im on my home page it alerts the pathname like it should. but
> when i navigate to the next page the alert does not fire
>
> the firebug dom shows the new pathname..but the alert does not fire.
>
> the js files are across all of my views and the js file that contains
> this piece of code is in the source when viewed
>
> any guidance would be great.
>
> thanks
[jQuery] alert wont fire from page to page
I have a very simple piece of code.
$(document).ready(function() {
// var url = location.pathname;
alert(url);
});
When im on my home page it alerts the pathname like it should. but
when i navigate to the next page the alert does not fire
the firebug dom shows the new pathname..but the alert does not fire.
the js files are across all of my views and the js file that contains
this piece of code is in the source when viewed
any guidance would be great.
thanks
[jQuery] table filtering
I have a YUI datatable that im live filtering from a text field. The
problem im having is when i get a lot of records, its really slow..Ive
only been using jQuery for a few months now, so im a bit of a noob.
Any help refactoring this to make it run smoother would be great.
**HTML**
**search field
Search:
i dont have the table HTML cause it could prove to be more confusing.
but basically im filtering by 2 different values set by YUI of
Phone Number and Name.
**Script**
// This is the member data table search filter
$(document).ready(function () {
var searchbox = $('.member_search_input');
var member_row = $('#members_data_table_wrap table tbody tr');
searchbox.click(function() {
$(this).val('');
});
searchbox.bind('change keyup', function() {
member_row.each(function() {
var number = $(this).find('.yui-dt0-col-PhoneNumber div').text
();
var name = $(this).find('.yui-dt0-col-Name div').text();
var search_check_value = (name + number);
var search_value = searchbox.val();
if (search_check_value.indexOf(search_value) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
[jQuery] show hide random rows
I was wondering if anyone could point me to a tutorial or blog where i can accomplish this task. Basically i have a YUI datatable and i want to use jQuery to hide all but a user generated number of rows that are random selected so if i had 50 records in the table and the user input 10 in a text field and hit a button.. 10 random records would be left displayed and the other 40 would be hidden..
[jQuery] Re: jQuery and IE
Thank you..i just figured that out..Appreciate all those that
commented..
Thanks
On Feb 24, 2:29 pm, James wrote:
> Sorry I missed a comma after startDate and before endDate:
>
> messages: {
> name: {
> required: "You must provide a Campaign Name.",
> minlength: "Your Campaign name must be at least 3
> characterss long."
> },
> startDate: {
> required: "You must provide a start date."
> },
> endDate: {
> required: "You must provide an end date."
> }
>
> }
>
> On Feb 24, 11:28 am, James wrote:
>
> > messages: {
> > name: {
> > required: "You must provide a Campaign Name.",
> > minlength: "Your Campaign name must be at least 3
> > characterss long."
> > },
> > startDate: {
> > required: "You must provide a start date."
> > }
> > endDate: {
> > required: "You must provide an end date."
> > }
>
> > }
>
> > On Feb 24, 10:59 am, Bob O wrote:
>
> > > sorry..new to the group thing here as well...
>
> > > i have narrowed it down to this piece of code.
>
> > > when i remove it all js works as written..
>
> > > $(document).ready(function() {
> > > $('#create_campaign_form').validate({
> > > rules: {
> > > name: {required: true, minlength: 3},
> > > startDate: {required: true, date: true},
> > > endDate: {required: true, date: true}
> > > },
> > > messages: {
> > > name: {required: "You must provide a Campaign Name.",
> > > minlength: "Your Campaign name must be at least 3 characterss long."},
> > > startDate: required: "You must provide a start date.",
> > > endDate: required: "You must provide an end date."
> > > }
> > > });});
>
> > > this piece of validation code causes the js to stop and nothing on the
> > > page works..But this code does work in the other browsers..ive been
> > > reading on the trailing comma, but im not seeing where that could be
> > > faulting..
>
> > > On Feb 24, 12:35 pm, Bob O wrote:
>
> > > > So im stumped..I have my jquery file in the headers, and it works in
> > > > Opera, Safari, FF on mac, and FF on Windows, but i get nothing in
> > > > IE..its there, its just broken.
>
> > > > i recently added the validation plugin?
>
> > > > could there be something im missing?
[jQuery] Re: jQuery and IE
sorry..new to the group thing here as well...
i have narrowed it down to this piece of code.
when i remove it all js works as written..
$(document).ready(function() {
$('#create_campaign_form').validate({
rules: {
name: {required: true, minlength: 3},
startDate: {required: true, date: true},
endDate: {required: true, date: true}
},
messages: {
name: {required: "You must provide a Campaign Name.",
minlength: "Your Campaign name must be at least 3 characterss long."},
startDate: required: "You must provide a start date.",
endDate: required: "You must provide an end date."
}
});
});
this piece of validation code causes the js to stop and nothing on the
page works..But this code does work in the other browsers..ive been
reading on the trailing comma, but im not seeing where that could be
faulting..
On Feb 24, 12:35 pm, Bob O wrote:
> So im stumped..I have my jquery file in the headers, and it works in
> Opera, Safari, FF on mac, and FF on Windows, but i get nothing in
> IE..its there, its just broken.
>
> i recently added the validation plugin?
>
> could there be something im missing?
[jQuery] jQuery and IE
So im stumped..I have my jquery file in the headers, and it works in Opera, Safari, FF on mac, and FF on Windows, but i get nothing in IE..its there, its just broken. i recently added the validation plugin? could there be something im missing?
[jQuery] Validation and Facebox
Hello, Ive been using the Validation plugin on my site and it works fantastic. i have run into an issue with trying to get it to perform validation on a form that resides in a facebox. I setup the validation the same as any other form in the site. what could i be missing?
[jQuery] Re: validation rules("remove") doesn't seem to work
Im a little new to the plugin myself, but do you have a wrote:
> I am trying to use the validation plugin to validate a set of
> checkboxes which are created by my CMS (drupal) so are not changeable
> - and which look like this:
>
>
>
> class="form-checkbox" /> a. Tanks (Oil, fuel chemicals)
>
>
> b. Rubbish
> ...
>
>
> I want the user to select at least one of the pollutant checkboxes.
> As you can see the name is in the format pollutants[].
>
> I don't want to have to validate each option, cause I want them only
> to have to choose one of the pollutants. I tried "pollutans[]" but
> that didn't work.
>
> So now I'm trying to do it by doing a combination of things
> 1. putting a required on the first one if count of checkboxes.size()==
> 0
> 2. looking for an onclick to remove the rule if any of the checkboxes
> are then checked.
>
> But the remove rule is not working.
>
>
> $("inp...@name^='pollutants']").change(function(){
> $("inp...@name^='pollutants']").rules("remove");
> });
>
> $("#myForm").validate({
> rules: {
> "pollutants[tanks]": "required"
> }
> });
>
>
> Any suggestions? I am rather frustrated.
[jQuery] optimizing
hello,
Im trying to figure out a better way to do this. it works but its very
sluggish, so i think theyre might be a better way to iterate?
i have an input field = .searchbox
and then i have a YUI datatable that contains about 65 rows.
when i start to type in the search field, it iterates over all the
tr's looks at 2 cell text values and then uses the indexOf method to
determine whether or not to display the
is there a way that i can iterate once and put those values into cache
or something?
here is my code.
$(document).ready(function () {
var searchbox = $('.member_search_input');
var member_row = $('#members_data_table_wrap table tbody tr');
searchbox.click(function() {
$(this).val('');
});
searchbox.bind('change keyup', function() {
member_row.each(function() {
var number = $(this).find('.yui-dt1-col-PhoneNumber div
a').text();
var name = $(this).find('.yui-dt1-col-Name div').text();
var search_check_value = (name + number);
var search_value = searchbox.val();
if (search_check_value.indexOf(search_value) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
[jQuery] Re: Dealing with Date Comparison
Thank you everyone for the responses
bjorsq your solution worked out great. Thank you for the help.
On Feb 4, 5:39 pm, bjorsq wrote:
> To do this in JavaScript, you need to extract the text representation of the
> date you have in the div, parse it, and set up a new JavaScript Date object
> to compare against the current date/time. If your dates are formatted like
> [day]/[month]/[year] (I'm in the UK), then this should work (but will need
> some error checking in it to cope with blank or malformed dates):
>
> $(document).ready(function() {
> var now = new Date();
> $('td.yui-dt0-col-LastActivity div').each(function() {
> var divdate = new Date();
> /* split the text date in the div */
> var dateparts = $(this).text().split('/');
> /* set the properties of the Date object
> *for US format dates [month]/[day]/[year] the array indexes for months
> and days need switching
> */
> divdate.setDate(parseInt(dateparts[0]));
> /* months are zero indexed! */
> divdate.setMonth((parseInt(dateparts[1])-1));
> divdate.setYear(parseInt(dateparts[2]));
> /* compare dates - 14 days = (14*24*60*60*1000) milliseconds */
> if (divdate.getTime() > (now.getTime() - (14*24*60*60*1000))) {
> $(this).addClass('highlight');
> }
> });
>
>
>
> });
> Bob O-2 wrote:
>
> > Can any one point me in the right direction for my issue.
>
> > I have a div with a text value pulled in from a database 01/01/2009
>
> > Im trying to write a javascript that can take that value and compare
> > it against new Date();
>
> > $(document).ready(function() {
> > now = new Date();
> > lastActivityDivs = $('td.yui-dt0-col-LastActivity div');
> > lastActivityDivs.each(function() {
> > if ($(this).val() == (now < 14)) {
> > $(this).addClass('.highlight');
> > }
> > });
> > });
>
> > i know this isnt correct, but it gives you an idea of what im trying
> > to accomplish..
>
> > Any help would be great.
>
> > Thank you
>
> --
> View this message in
> context:http://www.nabble.com/Dealing-with-Date-Comparison-tp21841297s27240p2...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Dealing with Date Comparison
Can any one point me in the right direction for my issue.
I have a div with a text value pulled in from a database 01/01/2009
Im trying to write a javascript that can take that value and compare
it against new Date();
$(document).ready(function() {
now = new Date();
lastActivityDivs = $('td.yui-dt0-col-LastActivity div');
lastActivityDivs.each(function() {
if ($(this).val() == (now < 14)) {
$(this).addClass('.highlight');
}
});
});
i know this isnt correct, but it gives you an idea of what im trying
to accomplish..
Any help would be great.
Thank you
[jQuery] .text()
So below i have my code example.
Basically when a user loads this page depending on the type of
"campaign" this is, I want jQuery to show the proper Sub Form Piece. I
can get the alert() outside the if else to fire, but nothing inside
the if else fires, which leads me to believe that I might have the
args set incorrectly
any help would be great
Thanks
HTML **
Coupon <--
This is the reference text that is dynamic
**Html Form Piece**
**Html Form Piece**
$(document).ready(function() {
var $coupon_div = $('#campaign_create_coupon');
var $contest_div = $('#campaign_create_contest');
var $current_campaign = $('div.detail_campaign_type');
$current_campaign.ready(function() {
alert($('div.detail_campaign_type').text
()); <-- This fires
if ($('div.detail_campaign_type').text() == 'Coupon') {
alert
('hello');
<-- Inside the If Else does not register
$coupon_div.show();
$contest_div.hide();
}
else if ($('div.detail_campaign_type').text() == 'Contest') {
alert
('hello2');
<-- Neither does this
$coupon_div.hide();
$contest_div.show();
}
});
});
[jQuery] Re: change()
Actually ive been using firebug for a while as a CSS developer tool,
and i was trying to debug the script, im just not a js guru..
Thank you for your help ;-)
On Jan 2, 4:55 pm, Ricardo Tomasi wrote:
> The "else" statement doesn't accept a condition. Change 'else' to
> 'else if' and it should be fine, and start using Firebug for Firefox
> so you can debug your scripts, or "Visual Web Developer" for IE.
>
> On Jan 2, 2:04 pm, Bob O wrote:
>
> > I must not be getting it, this is whati have now, and it is still not
> > working as needed.
>
> > $(document).ready(function() {
> > var $select = $('select#campaign_type_select');
> > var $value = $select.val();
> > var $coupon_div = $('#campaign_create_coupon');
> > var $broadcast_div = $('#campaign_create_broadcast');
> > var $contest_div = $('#campaign_create_contest');
>
> > $select.bind( 'change keydown', function() {
> > if ($(this).val() == 'contest') {
> > alert('contest');
> > $coupon_div.show();
> > $broadcast_div.hide();
> > $contest_div.hide();
> > }
> > else if ($(this).val() == 'broadcast') {
> > alert('broadcast');
> > $coupon_div.hide();
> > $broadcast_div.show();
> > $contest_div.hide();
> > }
> > else ($(this).val() == 'coupon') {
> > alert('coupon');
> > $coupon_div.hide();
> > $broadcast_div.hide();
> > $contest_div.show();
> > }
> > });
>
> > });
>
> > HTML -
> >
> > Campaign Type:
> >
> >
> > Coupon
> > Broadcast
> > Contest
> >
> >
> >
>
> > On Jan 2, 2:48 am, "Michael Geary" wrote:
>
> > > In an event callback function such as the one that's called from
> > > .change(),
> > > 'this' is not a jQuery object. It is a simple DOM element. You need to
> > > wrap
> > > it in $() to get a jQuery object if you want to use jQuery methods. Or,
> > > you
> > > can use DOM properties directly.
>
> > > I would also suggest using a $ prefix on a variable that represents a
> > > jQuery
> > > object. It's a good visual reminder that you can use jQuery methods on
> > > that
> > > variable.
>
> > > Also, when using an ID selector, it generally isn't necessary to include
> > > the
> > > tagname, and in fact the code will be faster if you omit it.
>
> > > For example:
>
> > > $(document).ready( function() {
> > > var $select = $('#campaign_type_select');
> > > alert( $select.val() );
> > > $select.change( function() {
> > > alert( $(this).val() );
> > > });
> > > });
>
> > > Of course, in this particular case, since you already have the select
> > > element wrapped in a jQuery object, $select and $(this) (inside the change
> > > function) are the same thing, so you could also do:
>
> > > $(document).ready( function() {
> > > var $select = $('#campaign_type_select');
> > > alert( $select.val() );
> > > $select.change( function() {
> > > alert( $select.val() );
> > > });
> > > });
>
> > > BTW, I highly recommend triggering on both the change event and the
> > > keydown
> > > event. This gives better usability when someone uses the keyboard:
>
> > > $(document).ready( function() {
> > > var $select = $('#campaign_type_select');
> > > alert( $select.val() );
> > > $select.bind( 'change keydown', function() {
> > > alert( $(this).val() );
> > > });
> > > });
>
> > > The only thing to watch out for there is that you want to know if the
> > > value
> > > has actually changed on the keydown or not. This would take care of that:
>
> > > $(document).ready( function() {
> > > var $select = $('#campaign_type_select');
> > > var value = $select.val();
> > > alert( value );
> > > $select.bind( 'change keydown', function() {
> > > var newvalue = $(this).val();
> > > if( newva
[jQuery] Re: change()
I must not be getting it, this is whati have now, and it is still not
working as needed.
$(document).ready(function() {
var $select = $('select#campaign_type_select');
var $value = $select.val();
var $coupon_div = $('#campaign_create_coupon');
var $broadcast_div = $('#campaign_create_broadcast');
var $contest_div = $('#campaign_create_contest');
$select.bind( 'change keydown', function() {
if ($(this).val() == 'contest') {
alert('contest');
$coupon_div.show();
$broadcast_div.hide();
$contest_div.hide();
}
else if ($(this).val() == 'broadcast') {
alert('broadcast');
$coupon_div.hide();
$broadcast_div.show();
$contest_div.hide();
}
else ($(this).val() == 'coupon') {
alert('coupon');
$coupon_div.hide();
$broadcast_div.hide();
$contest_div.show();
}
});
});
HTML -
Campaign Type:
Coupon
Broadcast
Contest
On Jan 2, 2:48 am, "Michael Geary" wrote:
> In an event callback function such as the one that's called from .change(),
> 'this' is not a jQuery object. It is a simple DOM element. You need to wrap
> it in $() to get a jQuery object if you want to use jQuery methods. Or, you
> can use DOM properties directly.
>
> I would also suggest using a $ prefix on a variable that represents a jQuery
> object. It's a good visual reminder that you can use jQuery methods on that
> variable.
>
> Also, when using an ID selector, it generally isn't necessary to include the
> tagname, and in fact the code will be faster if you omit it.
>
> For example:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> alert( $select.val() );
> $select.change( function() {
> alert( $(this).val() );
> });
> });
>
> Of course, in this particular case, since you already have the select
> element wrapped in a jQuery object, $select and $(this) (inside the change
> function) are the same thing, so you could also do:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> alert( $select.val() );
> $select.change( function() {
> alert( $select.val() );
> });
> });
>
> BTW, I highly recommend triggering on both the change event and the keydown
> event. This gives better usability when someone uses the keyboard:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> alert( $select.val() );
> $select.bind( 'change keydown', function() {
> alert( $(this).val() );
> });
> });
>
> The only thing to watch out for there is that you want to know if the value
> has actually changed on the keydown or not. This would take care of that:
>
> $(document).ready( function() {
> var $select = $('#campaign_type_select');
> var value = $select.val();
> alert( value );
> $select.bind( 'change keydown', function() {
> var newvalue = $(this).val();
> if( newvalue != value ) {
> value = newvalue;
> alert( value );
> }
> });
> });
>
> -Mike
>
> > From: Bob O
>
> > Hello all,
> > a little new the js and jquery any help would be fantastic...
>
> > I have this in my linked myFx.js file:
>
> > $(document).ready(function() {
> > var selected_type = $('select#campaign_type_select');
> > var coupon_div = $('#campaign_create_coupon');
> > var broadcast_div = $('#campaign_create_broadcast');
> > var contest_div = $('#campaign_create_contest');
>
> > // alert(selected_type.val()); << I CAN GET THIS TO FIRE
> > WHEN UNCOMMENTED, and it returns the the value coupon as i
> > would expect.
>
> > BUT THIS ISNT WORKING ive tried various renditions
> > (this.val(), selected_type, etc...) based on what i have read
> > on this site and the jQuery site with 0 success.
>
> > selected_type.change(function() {
> > if (this.val() == 'contest') {
> > alert('contest');
> > }
> > else if (this.val() == 'broadcast') {
> > alert('broadcast');
> > }
> > else (this.val() == 'coupon') {
> > alert('coupon');
> > }
> > });
> > });
>
> > This is the HTML:
> >
> > Campaign Type:
> >
> >
> > Coupon
> > Broadcast
> > Contest
> >
> >
> >
>
> > Someone point me in the right direction.\m/>.<\m/
[jQuery] change()
Hello all,
a little new the js and jquery any help would be fantastic...
I have this in my linked myFx.js file:
$(document).ready(function() {
var selected_type = $('select#campaign_type_select');
var coupon_div = $('#campaign_create_coupon');
var broadcast_div = $('#campaign_create_broadcast');
var contest_div = $('#campaign_create_contest');
// alert(selected_type.val()); << I CAN GET THIS TO FIRE WHEN
UNCOMMENTED, and it returns the the value coupon as i would expect.
BUT THIS ISNT WORKING ive tried various renditions (this.val(),
selected_type, etc...) based on what i have read on this site and the
jQuery site with 0 success.
selected_type.change(function() {
if (this.val() == 'contest') {
alert('contest');
}
else if (this.val() == 'broadcast') {
alert('broadcast');
}
else (this.val() == 'coupon') {
alert('coupon');
}
});
});
This is the HTML:
Campaign Type:
Coupon
Broadcast
Contest
Someone point me in the right direction.\m/>.<\m/
[jQuery] Re: exclude children from selected elements
Why dont you fire an event after the children have been loaded that
removes them?
On Nov 21, 3:07 am, "[EMAIL PROTECTED]"
<[EMAIL PROTECTED]> wrote:
> My mistake, it is working. The problem was my lack of understanding
> about how Dialog works. main is the div from which I create a Dialog
> and I didn't want the event listener to be added to the elements of
> main. However main is NOT the first element of the Dialog. I the
> background it is wrapped around other elements and the top one has
> class .ui-dialog . All sorted. Thanks .
>
> On 21 nov, 09:32, "[EMAIL PROTECTED]"
>
> <[EMAIL PROTECTED]> wrote:
> > It still doesn't work. I think part of the problem is because the
> > children of main are added after I create the event listener.
>
> > Second solution is to check in the event listener if the target is a
> > child of main and if so, return. I know how to get the children of
> > main , but how to I check the current tartget is one of them ?
>
> > ricardobeat> I need to select all objects of the page because I want
> > to do a DOM inspector. But yes you are right, maybe I should only
> > start from body !
>
> > Thanks
>
> > On 20 nov, 18:25, ricardobeat <[EMAIL PROTECTED]> wrote:
>
> > > Are you sure you want to apply it to *all* elements on the page? That
> > > sounds a bit awkward.
>
> > > var main = $('#main, #main *');
> > > $('body *').not(main).mouseover(function(){...});
>
> > > On Nov 20, 2:07 pm, "[EMAIL PROTECTED]"
>
> > > <[EMAIL PROTECTED]> wrote:
> > > > Hi,
>
> > > > I want to apply a mouseover event on all elements but one and its
> > > > children. I can't use class name to filter. How can I do it ? I've
> > > > tried unsuccessfully :
>
> > > > $("*:not(#main)").not($("#main").children()).mouseover(function() {
>
> > > > });
>
> > > > thanks
[jQuery] Re: jQuery and Rails Block
I ended up doing something very similar to this, and was able toget it
working..
Thank you kindly for your comments they are much appreciated. Its nice
to know there are a lot of resources in the community..
On Sep 22, 2:35 pm, Eric <[EMAIL PROTECTED]> wrote:
> If I understand your question correctly, you should be able to do it
> by Traversing the DOM.
>
> So, let's say that the HTML is like this:
>
>
> Lorem ipsum...
> Hide/Show extra info
>
>
> Show this when the link is clicked.
>
>
>
> So your CSS would probably have something like:
> .starts_hidden { display: none; }
>
> Now, this *wouldn't* work:
> $( function () {
> $('.hide_show_link').click( function () {
> $('.starts_hidden').toggle();
> });
>
> });
>
> Because clicking on a hide_show_link will toggle ALL of the things of
> class 'starts_hidden'.
>
> You probably want to do something like this:
> $( function () {
> // DOM is ready:
> $('.hide_show_link').click( function () {
> // in here, 'this' refers to the particular link we're
> inspecting.
> $(this).next().toggle(); // start at the current link, find the
> next element in the DOM, and toggle it.
> });
>
> });
>
> The reason this works is because each link hide shows the Next div in
> the DOM. If your HTML is different, then the code between $(this)
> and .toggle() will be different. See:http://docs.jquery.com/Traversing
> for the functions that will help you here.
>
> Cheers,
> -Eric
>
> On Sep 20, 10:40 am, Bob O <[EMAIL PROTECTED]> wrote:
>
> > Hello,
>
> > Im am a CSS guy moving into the world of js and RoR, so its nice to
> > find things like jQuery and supporting groups. I am a n00b, so the
> > more english the response the better
>
> > Question:
>
> > I have a rails partial that cycles a :collection. So every record in
> > the db table receives the same HTML/CSS structure. There is a hidden
> > div with extra info, that expands when the exposed div is clicked. the
> > problem is ALL of the displayed :collections reveal/hide the extra
> > content at the same time. where the HTML/CSS is dynamically generated,
> > im not sure how to have it differentiate between each item.
>
> > I have seen in the Learning jQuery book that there is a way to loop
> > and add an index, and also some kind of append feature, but Im not
> > quite versed enough to understand if this is what i need.
>
> > any help would be great..
>
> > Thank you
[jQuery] jQuery and Rails Block
Hello, Im am a CSS guy moving into the world of js and RoR, so its nice to find things like jQuery and supporting groups. I am a n00b, so the more english the response the better Question: I have a rails partial that cycles a :collection. So every record in the db table receives the same HTML/CSS structure. There is a hidden div with extra info, that expands when the exposed div is clicked. the problem is ALL of the displayed :collections reveal/hide the extra content at the same time. where the HTML/CSS is dynamically generated, im not sure how to have it differentiate between each item. I have seen in the Learning jQuery book that there is a way to loop and add an index, and also some kind of append feature, but Im not quite versed enough to understand if this is what i need. any help would be great.. Thank you
