[jQuery] looping through form elements.
Hello all, I'm relatively new to JavaScript. I would like to loop
through all the elements within a form and grab their values and what
type of input they are. So far I came up with:
$(':input').each(function(idx, item) {
alert(idx);
});
The alert is placed there to see if it loops and it works as
expected. I'm not sure how to alert the input's value and what type
it is. Any help is greatly appreciated.
-Thanks,
Rich
[jQuery] Re: looping through form elements.
Rick,
Thank you for your response. I was able to figure out $
(this).val() grabbed the value and you explained $(this).attr should
do the trick with grabbing what type the input element is. I
appreciate your help. I had to change .input to :input since I'm
filtering out by the element not by a class named input.
-Thanks,
Rich
On Jan 8, 7:11 am, Rick van Hoeij rickvho...@gmail.com wrote:
Hey,
Maby this will help:
$('.input').each(function(){
alert('Value: ' + $(this).val() + ' - Type: ' + $(this).attr
('type'));
});
That should do the trick. Just let me know.
Greetz,
Rick
On Jan 7, 11:33 pm, rich dottedq...@gmail.com wrote:
Hello all, I'm relatively new to JavaScript. I would like to loop
through all the elements within a form and grab their values and what
type of input they are. So far I came up with:
$(':input').each(function(idx, item) {
alert(idx);
});
The alert is placed there to see if it loops and it works as
expected. I'm not sure how to alert the input's value and what type
it is. Any help is greatly appreciated.
-Thanks,
Rich
[jQuery] Re: Stop a button within an li taking the li event?
Thanks Rob I'll have a look into bubbling - do I cancel bubbling on the li click event or button click event? Some of the validation errors are because I simplified the html code for the purpose of this discussion but missed some tags. I wasn't aware of a form not being valid in a span so thanks for that, not sure what you mean by an input not allowed to be a child of a form though?? Thanks again. Rich On Dec 2, 11:23 pm, RobG rg...@iinet.net.au wrote: On Dec 2, 8:33 pm, Rich reholme...@googlemail.com wrote: I have an unordered list which slidesdown to reveal a sub list on click event. In the first li there is also a button that takes you to another page. When this button is pressed I don't want the slide down to start, which it currently does as the button is within the li. Click events bubble. If you don't want them to, cancel bubbling. Your markup is invalid, it has several serious errors. In particular, a form can't be a child of a span element, nor can an input be a child of a form element. Use a validator: URL:http://validator.w3.org/#validate-by-input [...] -- Rob
[jQuery] Stop a button within an li taking the li event?
I have an unordered list which slidesdown to reveal a sub list on
click event. In the first li there is also a button that takes you to
another page. When this button is pressed I don't want the slide down
to start, which it currently does as the button is within the li.
[code]
$(#vml_top_ul li).click(function() {
$(this).css({'background-color':''});
if ($(this).children(ul.vml_second_ul).is
(:hidden)) {
$(this).children(ul.vml_second_ul).slideDown(1000,
function() {
$(this).parent(li).addClass(vml_top_li_open);
});
} else {
$(this).children(ul.vml_second_ul).slideUp(1000, function() {
$(this).parent(li).removeClass(vml_top_li_open);
});
}
});
HTML
ul id=vml_top_ul
li class=vml_top_li_closedh3Images/h3span class=right
form name=form_add method=post action=edit_vml.asp
enctype=multipart/form-data
input type=submit name=add value=ADD NEW
class=link_button /
/form/spanbr /
ul class=vml_second_ul
li class=topnbsp;/li
linbsp;/li
/ul
/li
li class=vml_top_li_closedh3Videos/h3span class=right
form name=form_add method=post action=edit_vml.asp
enctype=multipart/form-data
input type=submit name=add value=ADD NEW
class=link_button /
/form/spanbr /
ul class=vml_second_ul
linbsp;/li
linbsp;/li
/ul
/li/li
/ul
[/code]
I have tried various uses of .not() and :not() to try and stop the
action taking place but I'm getting know where with it. Any help would
be very much appreciated?
Thanks
Richard
[jQuery] .dialog() only works once?
I am using the jQuery .dialog UI as a confirm pop up when someone
tries to delete an item from a website. The dialog has 2 buttons, one
to confirm the delete, which then carries out an ajax request, and
another to cancel the delete request which closes the dialog window.
Both buttons work as expected but if you choose to cancel the
operation which calls $('#dialog').dialog('close'); the dialog
disappears but I can then no longer use the delete button again,
either it loses the click function or the dialog function no longer
works. I have tried adding $('#dialog').dialog('enable'); after the
close but this didn't make any difference either?
Thanks
Richard
[jQuery] Re: .dialog() only works once?
Problem solved! I needed to use $('#dialog').dialog('destroy') rather
than .dialog('close')
On Dec 2, 10:39 am, Rich reholme...@googlemail.com wrote:
I am using the jQuery .dialog UI as a confirm pop up when someone
tries to delete an item from a website. The dialog has 2 buttons, one
to confirm the delete, which then carries out an ajax request, and
another to cancel the delete request which closes the dialog window.
Both buttons work as expected but if you choose to cancel the
operation which calls $('#dialog').dialog('close'); the dialog
disappears but I can then no longer use the delete button again,
either it loses the click function or the dialog function no longer
works. I have tried adding $('#dialog').dialog('enable'); after the
close but this didn't make any difference either?
Thanks
Richard
[jQuery] Re: jQuery Validate using input type=image
Thanks that does pass the required value but I'll need to play around
with styling the button as I don't want the image to appear as an icon
and not as a button.
Thanks
On Nov 27, 5:20 pm, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
The plugin handles that case, though only for type=submit. You could try
using a button instead:
button type=submitimg ... //button
JörnOn Fri, Nov 27, 2009 at 12:52 PM, Rich reholme...@googlemail.com wrote:
I am validating a form that is submitted by an image input (input
type=image), there are 3 of these inputs which either publish, save or
delete the form details. If I turn javascript off and submit the form
I can pick up the value of the input button used. i.e. request.form
(publish.x) = ?, if I turn javascript on and use the jQuery validate
plugin it does everything excpet pass the value of the button pressed
so I can't detect which button has been pressed. Any help appreciated.
[code]
$(function() {
$(#vml_library).validate({
ignore: input[type=hidden],
rules: {
mName: {
required: true
},
mSummary: {
maxlength: 200
},
mDescription: {
required: true
},
mFile: {
required: true,
accept:
+$(input[name=typeList]).val().replace(/\'/g,
'').replace(/\./g, '').replace(/,/g, '|') +
},
tFile: {
required: function(element) {
return $(input[name=vType]).val()
1;
},
accept: true
}
},
messages: {
mName: {
required: Required
},
mFile: {
required: Required,
accept: Invalid File, must be +
$(input[name=typeList]).val()
},
mSummary: {
maxlength: You may not use anymore than 200
characters
},
mDescription: {
required: Required
},
tFile: {
required: Required,
accept: Invalid File, must be '.jpg',
'.jpeg', '.gif' or '.png'
}
},
success: function(label) {
label.addClass(valid).text(OK!);
},
highlight: function(element, errorClass) {
$(element).addClass(errorInput);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorInput);
},
submitHandler: function(form) {
ShowProgress();
form.submit();
}
});
});
[/code]
[jQuery] Re: jQuery Validate using input type=image
yep, all done thanks - setting background-color: transparent; was the
key to getting it look perfect!
Thanks for your help.
Richard
On Nov 30, 11:57 am, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
Styling buttons is quite flexible. Start with border:none, the rest should
be easy.
JörnOn Mon, Nov 30, 2009 at 12:51 PM, Rich reholme...@googlemail.com wrote:
Thanks that does pass the required value but I'll need to play around
with styling the button as I don't want the image to appear as an icon
and not as a button.
Thanks
On Nov 27, 5:20 pm, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
The plugin handles that case, though only for type=submit. You could
try
using a button instead:
button type=submitimg ... //button
JörnOn Fri, Nov 27, 2009 at 12:52 PM, Rich reholme...@googlemail.com
wrote:
I am validating a form that is submitted by an image input (input
type=image), there are 3 of these inputs which either publish, save or
delete the form details. If I turn javascript off and submit the form
I can pick up the value of the input button used. i.e. request.form
(publish.x) = ?, if I turn javascript on and use the jQuery validate
plugin it does everything excpet pass the value of the button pressed
so I can't detect which button has been pressed. Any help appreciated.
[code]
$(function() {
$(#vml_library).validate({
ignore: input[type=hidden],
rules: {
mName: {
required: true
},
mSummary: {
maxlength: 200
},
mDescription: {
required: true
},
mFile: {
required: true,
accept:
+$(input[name=typeList]).val().replace(/\'/g,
'').replace(/\./g, '').replace(/,/g, '|') +
},
tFile: {
required: function(element) {
return
$(input[name=vType]).val()
1;
},
accept: true
}
},
messages: {
mName: {
required: Required
},
mFile: {
required: Required,
accept: Invalid File, must be +
$(input[name=typeList]).val()
},
mSummary: {
maxlength: You may not use anymore than
200
characters
},
mDescription: {
required: Required
},
tFile: {
required: Required,
accept: Invalid File, must be '.jpg',
'.jpeg', '.gif' or '.png'
}
},
success: function(label) {
label.addClass(valid).text(OK!);
},
highlight: function(element, errorClass) {
$(element).addClass(errorInput);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorInput);
},
submitHandler: function(form) {
ShowProgress();
form.submit();
}
});
});
[/code]
[jQuery] jQuery Validate using input type=image
I am validating a form that is submitted by an image input (input
type=image), there are 3 of these inputs which either publish, save or
delete the form details. If I turn javascript off and submit the form
I can pick up the value of the input button used. i.e. request.form
(publish.x) = ?, if I turn javascript on and use the jQuery validate
plugin it does everything excpet pass the value of the button pressed
so I can't detect which button has been pressed. Any help appreciated.
[code]
$(function() {
$(#vml_library).validate({
ignore: input[type=hidden],
rules: {
mName: {
required: true
},
mSummary: {
maxlength: 200
},
mDescription: {
required: true
},
mFile: {
required: true,
accept:
+$(input[name=typeList]).val().replace(/\'/g,
'').replace(/\./g, '').replace(/,/g, '|') +
},
tFile: {
required: function(element) {
return $(input[name=vType]).val() 1;
},
accept: true
}
},
messages: {
mName: {
required: Required
},
mFile: {
required: Required,
accept: Invalid File, must be +
$(input[name=typeList]).val()
},
mSummary: {
maxlength: You may not use anymore than 200
characters
},
mDescription: {
required: Required
},
tFile: {
required: Required,
accept: Invalid File, must be '.jpg', '.jpeg',
'.gif' or '.png'
}
},
success: function(label) {
label.addClass(valid).text(OK!);
},
highlight: function(element, errorClass) {
$(element).addClass(errorInput);
},
unhighlight: function(element, errorClass) {
$(element).removeClass(errorInput);
},
submitHandler: function(form) {
ShowProgress();
form.submit();
}
});
});
[/code]
[jQuery] backgroundPosition plugin
Hey all, I was faced with a challenge of displaying, within a main container, 10 panels 147px sq that have background images positioned the opposite of the panel position within the container. When a user was to click one of these it grows over time so each edge of the panel reaches the relative edge of the container at the same time. Not difficult I thought, bit of jQuery animation - easy :) But unfortunately the animation function doesn't support the repositioning of background images because it has 2 values to deal with so I then stumbled accross the backgroundPosition plugin - fantastic! However this didn't work either as the background image 'shook' as the div grew and repositioned itself so I tackled the problem head on and wrote my own functions called at a certain interval based on the time/iteration variables and this is what I came up with: http://uts1.core.je/default.html. Exactly what I was after and I thought I'd share the wealth for you all as jQuery is an outstanding framework!! Feel free to use it should you find a use and if you have any time to dissect my code you'll see a lot of the calculations are using ternary operators to get the right value - there may be a easier/better mathematical solution and I'd love to see any ideas/solutions to this problem. Hope you like it! Cheers Rich
Re: [jQuery] Re: Block UI question
Here's what I have so far. I'm kind of stuck. I just started creating a
simple test page with one input field and a submit button. I want to pass
the input value to a file called submit.html. This file will accept the
argument and doing the heavy lifting with the server. When the response is
returned, I want it to redirect to review.html.
The below doesn't work at all. I'm confused where to go from here. Any
help would be greatly appreciated. If I get this working, I would like to
post the example somewhere for someone else trying to achieve the same
thing.
script type=text/javascript src=jquery-1.3.2.min.js/script
script type=text/javascript src=jquery.blockUI.js/script
script type=text/javascript
$(document).ready( function() {
$('#submit').click(function() {
$.blockUI({ message: $('#processing') });
$.ajax({
type: 'POST',
url: 'submit.html',
data: page,
success: function(content) {
window.location.replace(review.html);
}
});
return false;
});
// unblock UI when ajax request completes
$().ajaxStop($.unblockUI);
});
/script
body
form
input type=text id=txtbr
input id=submit src=calculate.gif type=image name=Submit
value=Calculate /
/form
div id=processing style=display:none;
div style=text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px
div class=BoxTitle style=text-align:center;Calculation in
Progress./div
img src=ajaxloader.gif style=margin-top:10px
pPlease Stand By../p
/div
/div
/body
On Mon, Nov 2, 2009 at 10:56 PM, jmatthews jmatth...@xexam.net wrote:
Once you re-direct by submit, your current page loses control. That's
the problem with the submit button. When user presses, your page is
immediately gone.
You need to manually do this by making your own, fake submit. Stick
a .gif submit look-alike in your html.
img id=submit src=submit.gif
Now, in your jquery function(ready)...
$(#submit).onclick() bla bla
{
1. load or form your waiting message
2. use AJAX to send your data out.
}
If you need help with AJAX, see the AJAX tutorial at w3schools.com
http://www.w3schools.com/ajax/default.asp
On Nov 2, 2:48 pm, Rich rich...@gmail.com wrote:
I'm trying to implement a processing message and I think Block UI
might work however I can't seem to get it to redirect after my
processing is complete.
Basically, I have a form and a submit button which does a post to a
server and passes in several parameters for calculation. The server
can take anywhere from 15-45 seconds to return with the results.
I would like to trigger the modal Block UI div on Submit. The UI
would be blocked or grayed out underneath and the modal box would
appear prominently in the middle of the page and would say something
like Calculation in Progressplease stand by. Also, I will add a
nice little ajax loader gif to go with the processing message.
I want to keep this message visible until the server is finished with
the processing. When I get the response back, (this is the trick), I
want to redirect to a completely new page with the results.
Can this be done with the BlockUI plugin or does anyone have an
example on how to do this.
Re: [jQuery] Re: Block UI question
Don't know how but I got it to work. Still scratching my head. This is my
code. Anything look funny?
$(document).ready( function() {
$('#submit').click(function() {
/* Block the UI and display the processing message... */
$.blockUI({ message: $('#processing') });
/* do the AJAX call... */
var txtval = $(#txt).val();
$.post(submit.html, { txt: txtval },
function(data){
if(data.length 0) {
window.location.href(review.html);
}
});
});
// global hook - unblock UI when ajax request completes
$().ajaxStop($.unblockUI);
});
form
input type=text id=txt name=txtbr
br
input id=submit src=calculate.gif type=image name=Submit
value=Calculate /
/form
div id=processing style=display:none;
div style=text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px
div class=BoxTitle style=text-align:center;Calculation in
Progress./div
img src=ajaxloader.gif style=margin-top:10px
PPlease Stand By../P
/div
/div
On Tue, Nov 3, 2009 at 1:23 PM, Rich Elston rich...@gmail.com wrote:
Here's what I have so far. I'm kind of stuck. I just started creating a
simple test page with one input field and a submit button. I want to pass
the input value to a file called submit.html. This file will accept the
argument and doing the heavy lifting with the server. When the response is
returned, I want it to redirect to review.html.
The below doesn't work at all. I'm confused where to go from here. Any
help would be greatly appreciated. If I get this working, I would like to
post the example somewhere for someone else trying to achieve the same
thing.
script type=text/javascript src=jquery-1.3.2.min.js/script
script type=text/javascript src=jquery.blockUI.js/script
script type=text/javascript
$(document).ready( function() {
$('#submit').click(function() {
$.blockUI({ message: $('#processing') });
$.ajax({
type: 'POST',
url: 'submit.html',
data: page,
success: function(content) {
window.location.replace(review.html);
}
});
return false;
});
// unblock UI when ajax request completes
$().ajaxStop($.unblockUI);
});
/script
body
form
input type=text id=txtbr
input id=submit src=calculate.gif type=image name=Submit
value=Calculate /
/form
div id=processing style=display:none;
div style=text-align:center;padding:15px;font: normal 13px Arial,
Helvetica, sans-serif;color:#cc6633;font-weight:bold;width:350px
div class=BoxTitle style=text-align:center;Calculation in
Progress./div
img src=ajaxloader.gif style=margin-top:10px
pPlease Stand By../p
/div
/div
/body
On Mon, Nov 2, 2009 at 10:56 PM, jmatthews jmatth...@xexam.net wrote:
Once you re-direct by submit, your current page loses control. That's
the problem with the submit button. When user presses, your page is
immediately gone.
You need to manually do this by making your own, fake submit. Stick
a .gif submit look-alike in your html.
img id=submit src=submit.gif
Now, in your jquery function(ready)...
$(#submit).onclick() bla bla
{
1. load or form your waiting message
2. use AJAX to send your data out.
}
If you need help with AJAX, see the AJAX tutorial at w3schools.com
http://www.w3schools.com/ajax/default.asp
On Nov 2, 2:48 pm, Rich rich...@gmail.com wrote:
I'm trying to implement a processing message and I think Block UI
might work however I can't seem to get it to redirect after my
processing is complete.
Basically, I have a form and a submit button which does a post to a
server and passes in several parameters for calculation. The server
can take anywhere from 15-45 seconds to return with the results.
I would like to trigger the modal Block UI div on Submit. The UI
would be blocked or grayed out underneath and the modal box would
appear prominently in the middle of the page and would say something
like Calculation in Progressplease stand by. Also, I will add a
nice little ajax loader gif to go with the processing message.
I want to keep this message visible until the server is finished with
the processing. When I get the response back, (this is the trick), I
want to redirect to a completely new page with the results.
Can this be done with the BlockUI plugin or does anyone have an
example on how to do this.
[jQuery] Block UI question
I'm trying to implement a processing message and I think Block UI might work however I can't seem to get it to redirect after my processing is complete. Basically, I have a form and a submit button which does a post to a server and passes in several parameters for calculation. The server can take anywhere from 15-45 seconds to return with the results. I would like to trigger the modal Block UI div on Submit. The UI would be blocked or grayed out underneath and the modal box would appear prominently in the middle of the page and would say something like Calculation in Progressplease stand by. Also, I will add a nice little ajax loader gif to go with the processing message. I want to keep this message visible until the server is finished with the processing. When I get the response back, (this is the trick), I want to redirect to a completely new page with the results. Can this be done with the BlockUI plugin or does anyone have an example on how to do this.
[jQuery] Re: rounded corner recommendations
ravi -- thanks so much for the feedback, I really appreciate your investigative work. cheers, Rich On Aug 31, 11:18 am, [ ravi ] ravi-li...@g8o.net wrote: On Aug 31, 2009, at 10:31 AM, [ ravi ] wrote: On Aug 31, 2009, at 10:13 AM, Rich Sturim wrote: That looks like a great choice -- thanks for the tip. On Aug 28, 3:19 pm, Jack Killpatrick j...@ihwy.com wrote: I've had good luck with this one after testing many of them in multiple browsers: http://www.parkerfox.co.uk/labs/cornerz A word of warning: the download link for Cornerz does not work (at least for me!). This looks like an alternate source: http://github.com/cgriego/cornerz/tree/master --ravi
[jQuery] Re: rounded corner recommendations
Jack, That looks like a great choice -- thanks for the tip. -Rich On Aug 28, 3:19 pm, Jack Killpatrick j...@ihwy.com wrote: I've had good luck with this one after testing many of them in multiple browsers: http://www.parkerfox.co.uk/labs/cornerz - Jack Rich Sturim wrote: Greetings, Can people recommend aroundedcorners plugin that is stable on a wide array of browsers? I've been hunting around -- and found a few some, some better than others. But, I was wondering if there are any elite ones that are truly excellent -- and I should consider? Cheers, Rich
[jQuery] rounded corner recommendations
Greetings, Can people recommend a rounded corners plugin that is stable on a wide array of browsers? I've been hunting around -- and found a few some, some better than others. But, I was wondering if there are any elite ones that are truly excellent -- and I should consider? Cheers, Rich
[jQuery] how do I hide an element after my function completes
I have a hidden spinner div.
When my jquery function is called -- I show the spinner. But, how do
hide I the spinner div after the ajax request has completed?
$(function() {
$(.pagination a).live(click, function() {
var loader = $('#loader')
loader.show() // -- hidden loader div
$.get(this.href, null, null, script);
return false;
})
});
[jQuery] Re: Disable submit button with Validation plugin
thank you Jörn -- that works
On Aug 10, 9:01 am, Jörn Zaefferer joern.zaeffe...@googlemail.com
wrote:
Try this:
$(document).ready(function() {
$(#myForm).validate({
submitHandler: function(form) {
$(form).find(:submit).attr(disabled, true).attr(value,
Submitting...);
form.submit();
}
})
});
Jörn
On Mon, Aug 10, 2009 at 9:40 AM, Rich Sturimcosmos99...@gmail.com wrote:
$(document).ready(function() {
$(#myForm).validate()
});
[jQuery] Disable submit button with Validation plugin
I need help with the Validation plugin. I have a form with a required
field. When the form is valid I want the form to submit and I also
want to disable the submit button. I have a function that does the
disabling, but I'm not sure how to call this function within the
validate method.
Here is my simple call the the validate method.
$(document).ready(function() {
$(#myForm).validate()
});
and here is my disable function --
jQuery.fn.diableOnSubmit = function() {
var input=this.find(input.submit)
input.click(function () {
$(this).attr(disabled, true);
$(this).attr(value, Submitting...);
$(this).submit();
});
};
How do I combine the two together?
-Cheers,
Rich
[jQuery] Re: Can't change padding using animate() in IE
buy cheap designer bags here http://www.px78.com/Handbags/
On Jul 20, 6:38 am, djeyewater showerhead...@hotmail.com wrote:
I have a function that resizes an image (imgCur) and changes its
padding when a new image (img) is loaded like so:
img.onload = function(){
var t = this;
//Animate current image to new image size
imgCur.animate({
width: t.width,
height: t.height,
padding: 20px 25px
}, 750).attr(src, img.src);
}
Which works fine in FF, Opera and Chrome. But in IE6, 7 8 it doesn't
like changing the padding, and I get an error at line 835 in
jquery-1.3.2.js, which is:
style.left = ret || 0;
If I check in the IE Script debugger, ret has the value 40px 50px,
which obviously isn't a valid value for style.left. 40px 50px is the
padding of imgCur that is set in the CSS file.
But why is jQuery trying to set the CSS left property of imgCur to its
current padding?
[jQuery] Tablesorter advice required - row level filtering based on inputs?
Hello. I'm here for advice on which approach to take with this problem. I am using the wonderful tablesorter 2 plugin (http:// tablesorter.com/). I have a table that contains data. I'd like to provide an input field above the table so that a user can filter rows based on a string matched from one particular column. Is this something I could implement as an add-on to tablesorter or am I better off keeping this functionality altogether separate. Hope that makes sense. Thanks for reading Richard
[jQuery] Re: Valid jQuery on Development fails on Production
Sorry, I saw those... That was just a copy paste error. The tags are
all closed.
On Oct 6, 6:38 pm, Ryura [EMAIL PROTECTED] wrote:
You have some unclosed tags (the last tr and td). Try closing those.
On Oct 6, 6:06 pm, rich [EMAIL PROTECTED] wrote:
I am writing a fairly basic script using jQuery. However, the script
behaves differently depending on whether I am running it on my local
Web server (localhost) or on a production server.
On development, the following code returns the HTML I'm expecting:
$('#objID').siblings('.mAddress').html();
On production, the same statement returns undefined.
The document structures are the same on both machines. The only
difference I can find is when I use Firebug to step through the
script. On the development machine, putting a watch on $
('#objID').siblings('.mAddress') results in [ span#object ] while on
production the same watch results in [ [ span#object ] ]
(Notice the double sets of square brackets).
I've verified that the two libraries are identical.
I've done some more experimenting using Firebug. Another part of the
script grabs a set of elements using the statement:
$('.ParentColumn2').each(function(i) { ... })
Within the body of that function, if I set a watch on this, on
development the value of this is what I expect: div.ParentColumn2 ,
but on production the value of this returns what looks like an array:
[ div.ParentColumn2, div.ParentColumn2, div.ParentColumn2, .]
The HTML involved looks like (I've stripped out all but the most
important parts.. and the rows repeat):
table
tr
td
div class=ItemTemplate
div class=ParentColumn2
divspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Address
class=lbl_Address mAddress111 W Wacker Dr, /spanspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_City
class=lbl_Address mCityChicago/spannbsp;span
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_PostalCode
class=lbl_Address mPostalCode60601/spannbsp;a
href=javascript:MapMe(this);
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_hypMap
class=hypMapMap/anbsp;nbsp;span
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Area
class=mAreaLoop/spanspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lt
class=mLt41.8868010285473/spanspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lg
class=mLg-87.6312860701286/span
/div
/div
/div
/td
/tr
tr
td
div class=ItemTemplate
div class=ParentColumn2
divspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Address
class=lbl_Address mAddress
/div
/div
/div
/table
Any ideas?
[jQuery] Valid jQuery on Development fails on Production
I am writing a fairly basic script using jQuery. However, the script
behaves differently depending on whether I am running it on my local
Web server (localhost) or on a production server.
On development, the following code returns the HTML I'm expecting:
$('#objID').siblings('.mAddress').html();
On production, the same statement returns undefined.
The document structures are the same on both machines. The only
difference I can find is when I use Firebug to step through the
script. On the development machine, putting a watch on $
('#objID').siblings('.mAddress') results in [ span#object ] while on
production the same watch results in [ [ span#object ] ]
(Notice the double sets of square brackets).
I've verified that the two libraries are identical.
I've done some more experimenting using Firebug. Another part of the
script grabs a set of elements using the statement:
$('.ParentColumn2').each(function(i) { ... })
Within the body of that function, if I set a watch on this, on
development the value of this is what I expect: div.ParentColumn2 ,
but on production the value of this returns what looks like an array:
[ div.ParentColumn2, div.ParentColumn2, div.ParentColumn2, .]
The HTML involved looks like (I've stripped out all but the most
important parts.. and the rows repeat):
table
tr
td
div class=ItemTemplate
div class=ParentColumn2
divspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Address
class=lbl_Address mAddress111 W Wacker Dr, /spanspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_City
class=lbl_Address mCityChicago/spannbsp;span
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_PostalCode
class=lbl_Address mPostalCode60601/spannbsp;a
href=javascript:MapMe(this);
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_hypMap
class=hypMapMap/anbsp;nbsp;span
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Area
class=mAreaLoop/spanspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lt
class=mLt41.8868010285473/spanspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lg
class=mLg-87.6312860701286/span
/div
/div
/div
/td
/tr
tr
td
div class=ItemTemplate
div class=ParentColumn2
divspan
id=dnn_ctr45874_ViewProjectGrid_GridView1_ctl02_lbl_Address
class=lbl_Address mAddress
/div
/div
/div
/table
Any ideas?
[jQuery] Re: Problems with $(document).height() and jQuery 1.2.2
Perfect. That fixes it. Thanks Scott On Feb 5, 9:03 am, Scott González [EMAIL PROTECTED] wrote: Have you checked $(document.body).height()? On Feb 4, 10:21 am, rich [EMAIL PROTECTED] wrote: On most of my projects I have some js to push the footer to the bottom on pages with little/no content (compares document height and viewport height). When I upgraded to jQuery 1.2.2 it stopped working. It seems like I'm getting unexpected results from $(document).height(). Am I missing something (newer syntax perhaps?), or is this a bug of some sort? Testing on the same page: jQuery 1.2.1 (packed) -- This is how it should be: IE (v6.0.2900.2180.xpsp_sp2_gdr.070227-2254) $(document).height(): 423 $(window).height(): 613 Firefox (2.0.0.11) $(document).height(): 405 $(window).height(): 609 jQuery 1.2.2 (packed): IE $(document).height(): 617 $(window).height(): 613 Firefox $(document).height(): 609 $(window).height(): 609 Thanks guys, -rich
[jQuery] Problems with $(document).height() and jQuery 1.2.2
On most of my projects I have some js to push the footer to the bottom on pages with little/no content (compares document height and viewport height). When I upgraded to jQuery 1.2.2 it stopped working. It seems like I'm getting unexpected results from $(document).height(). Am I missing something (newer syntax perhaps?), or is this a bug of some sort? Testing on the same page: jQuery 1.2.1 (packed) -- This is how it should be: IE (v6.0.2900.2180.xpsp_sp2_gdr.070227-2254) $(document).height(): 423 $(window).height(): 613 Firefox (2.0.0.11) $(document).height(): 405 $(window).height(): 609 jQuery 1.2.2 (packed): IE $(document).height(): 617 $(window).height(): 613 Firefox $(document).height(): 609 $(window).height(): 609 Thanks guys, -rich
[jQuery] Re: jCarousel - How do I hide the list before display
I had this problem once before. I ended setting a fixed height on the parent div and setting overflow:hidden. -rich On Feb 4, 8:03 am, caroig [EMAIL PROTECTED] wrote: Hi, Is there a way of hiding the list before the carousel is fully generated. I often get to see the list of images before the carousel effect is produced. I've tried setting display to none in my css and then executing jQuery .show after the carousel, but seems doesn't work well. many thanks --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups jQuery (English) group. To post to this group, send email to jquery-en@googlegroups.com To unsubscribe from this group, send email to [EMAIL PROTECTED] For more options, visit this group at http://groups.google.com/group/jquery-en?hl=en -~--~~~~--~~--~--~---
[jQuery] Re: jCarousel - How do I hide the list before display
Ah, ok. I thought you were looking to hide that quick flash of the image list before they 'stack' up. On Feb 4, 3:01 pm, caroig [EMAIL PROTECTED] wrote: Ok thank Rich - I'll give that a try - I'd hoped I could hide it all until it's built. On Feb 4, 4:23 pm, rich [EMAIL PROTECTED] wrote: I had this problem once before. I ended setting a fixed height on the parent div and setting overflow:hidden. -rich On Feb 4, 8:03 am, caroig [EMAIL PROTECTED] wrote: Hi, Is there a way of hiding the list before the carousel is fully generated. I often get to see the list of images before the carousel effect is produced. I've tried setting display to none in my css and then executing jQuery .show after the carousel, but seems doesn't work well. many thanks
[jQuery] Cycling images based on background-image
I have a container div with a few things inside such as navigation, a logo, and a few other bits. I'd like to continuously cycle through different background-images of container div. I have to keep images applied as a background-image; any suggestions? Fading and other effects are nice, but I can certainly do without them. Does something like this already exist that I've just overlooked? Thanks.
[jQuery] Re: continuously search for elements in a document
I was forgetting that you can add a function to basically any event.
Here is what I ended up with and it's working just fine. Any
suggestions to streamline it is appreciated.
$(document).ready(function() {
//hide empty error li -- initialize
$('ul.errors li:has(span:hidden)').hide();
//show li when their child error span is visibile
$('fieldset ol li input').blur(function() {
//show any new errors
$('ul.errors li:has(span:visible)').show();
//hide any old errors that no longer apply.
$('ul.errors li:has(span:hidden)').hide();
});
});
Thanks for all the help. -rich
On Oct 17, 6:36 pm, Wizzud [EMAIL PROTECTED] wrote:
Ummm . no.
This onBlur stuff that's in .NET somewhere - what is it triggering on?
If it is triggering on known elements (known to you that is), and it
is actually a blur event, can you not add your own blur event handler
to the same elements and hide/show the LIs that way?
On Oct 17, 1:11 pm, rich [EMAIL PROTECTED] wrote:
4 lines down to 1! Works perfectly; I didn't know you could do some of
those things. I've only been working with javascript/jQuery for a few
days.
- Errors are the only things in the ul.errors list
- .NET handles the hiding/showing of the span's. It does it in a way
that I'm not really sure if I can augment (yet. still working on it)
Hiding is working fine. You're right, since my code hides LI's on
pageLoad (via my js) and span's are being hidden/shown continuously
(via .NET's 'magic' on onBlur) -- my error's are not showing due to
LI's being hidden.
Any idea how I can loop through the page to continuously monitor spans
and detect if they've been shown/hidden, then show/hide my LI's in
response?
On Oct 17, 5:20 am, Wizzud [EMAIL PROTECTED] wrote:
I'm not sure how much this is going to help, given that my knowledge
of ASP.NET is zilch but...
As an aside, from jQuery v1.2, your initial page load code could be
simplified to ...
$('ul.errors li:has(span:hidden)').hide();
But ... I get the impression that the errors are the only things in
the ul.errors li structure?
If so, why hide the errors (the spans) themselves?
Why not just hide/show the relevant li, leaving the span visible?
Or is this governed by ASP?
If you are hiding the li parents of hidden spans at page load, then
the onblur activation of the hidden error message must be making the
parent li visible as well, otherwise you wouldn't be able to see the
error. Equally obviously, something must be hiding the error messages
when not needed or you wouldn't be asking the question in the first
place. So if the 'show'er is capable of showing the parent li, why
can't the 'hide'r be capable of hiding the parent li?
Whatever is doing the show/hide of the errors themselves (the spans)
also needs to do the show/hide of the list item parents.
Or it needs to be able to kick off a function that does it (same as
your initial page load code).
Or maybe trigger a custom event that will do it.
Just thinking out loud.
On Oct 16, 8:29 pm, rich [EMAIL PROTECTED] wrote:
(Using jQuery w/ ASP.NET 2.0)
I have a few error prompts that are in hidden spans inside li's. I
need to hide the LI's when the error prompt is hidden.
Example:
$(document).ready(function() {
//hide empty error spans
$('ul.errors li span').each(function(i){
if($(this).css(display) == none) {
$(this).parent().hide();
};
});
});
This works, but only on page load. These error prompts display as
needed on onBlur (via .NET default methods).
How can I continuously scan the document for these error prompts and
show/hide the parent LI's when the prompts show/hide?
Thanks,
-rich
[jQuery] Re: continuously search for elements in a document
4 lines down to 1! Works perfectly; I didn't know you could do some of
those things. I've only been working with javascript/jQuery for a few
days.
- Errors are the only things in the ul.errors list
- .NET handles the hiding/showing of the span's. It does it in a way
that I'm not really sure if I can augment (yet. still working on it)
Hiding is working fine. You're right, since my code hides LI's on
pageLoad (via my js) and span's are being hidden/shown continuously
(via .NET's 'magic' on onBlur) -- my error's are not showing due to
LI's being hidden.
Any idea how I can loop through the page to continuously monitor spans
and detect if they've been shown/hidden, then show/hide my LI's in
response?
On Oct 17, 5:20 am, Wizzud [EMAIL PROTECTED] wrote:
I'm not sure how much this is going to help, given that my knowledge
of ASP.NET is zilch but...
As an aside, from jQuery v1.2, your initial page load code could be
simplified to ...
$('ul.errors li:has(span:hidden)').hide();
But ... I get the impression that the errors are the only things in
the ul.errors li structure?
If so, why hide the errors (the spans) themselves?
Why not just hide/show the relevant li, leaving the span visible?
Or is this governed by ASP?
If you are hiding the li parents of hidden spans at page load, then
the onblur activation of the hidden error message must be making the
parent li visible as well, otherwise you wouldn't be able to see the
error. Equally obviously, something must be hiding the error messages
when not needed or you wouldn't be asking the question in the first
place. So if the 'show'er is capable of showing the parent li, why
can't the 'hide'r be capable of hiding the parent li?
Whatever is doing the show/hide of the errors themselves (the spans)
also needs to do the show/hide of the list item parents.
Or it needs to be able to kick off a function that does it (same as
your initial page load code).
Or maybe trigger a custom event that will do it.
Just thinking out loud.
On Oct 16, 8:29 pm, rich [EMAIL PROTECTED] wrote:
(Using jQuery w/ ASP.NET 2.0)
I have a few error prompts that are in hidden spans inside li's. I
need to hide the LI's when the error prompt is hidden.
Example:
$(document).ready(function() {
//hide empty error spans
$('ul.errors li span').each(function(i){
if($(this).css(display) == none) {
$(this).parent().hide();
};
});
});
This works, but only on page load. These error prompts display as
needed on onBlur (via .NET default methods).
How can I continuously scan the document for these error prompts and
show/hide the parent LI's when the prompts show/hide?
Thanks,
-rich
[jQuery] continuously search for elements in a document
(Using jQuery w/ ASP.NET 2.0)
I have a few error prompts that are in hidden spans inside li's. I
need to hide the LI's when the error prompt is hidden.
Example:
$(document).ready(function() {
//hide empty error spans
$('ul.errors li span').each(function(i){
if($(this).css(display) == none) {
$(this).parent().hide();
};
});
});
This works, but only on page load. These error prompts display as
needed on onBlur (via .NET default methods).
How can I continuously scan the document for these error prompts and
show/hide the parent LI's when the prompts show/hide?
Thanks,
-rich
[jQuery] Re: Fastest method to create table rows
Hi Josh, Not answering the question, but does your app really require 1000+ table rows to be displayed at once? Would some pagination not be more appropriate? This wouldn't just help the speed of the build, but it'd also really help the poor person that otherwise has to scroll through 1000 rows. yours unhelpfully, Rich Wild. On Aug 8, 11:52 am, Josh Bush [EMAIL PROTECTED] wrote: Oh, it's fine. I wasn't expecting someone to write the code for me. I'm just working on a plugin and hitting a roadblock with IE here. I'm going to try and whip up an example of what I'm seeing that illustrates this outside of my project. It seems like the string operations aren't the bottleneck. The bottleneck happens when I pass a really large piece of HTML to $() to create that object in the DOM (however jQuery handles that). Once again, I'll throw together a demo that has this narrowed down to see if I get any takers. It's worth noting that this works fine in FF2,Opera, and Safari 3 Beta. It's just IE that is giving me fits. Josh On Aug 7, 10:09 pm, RobG [EMAIL PROTECTED] wrote: On Aug 8, 11:56 am, Josh Bush [EMAIL PROTECTED] wrote: Well, I feel stupid. it's not the join that's taking so long, it's the $( really big DOM string with 1,000 rows and 3 columns) that takes so dang long on IE7. IE is notoriously slow if you are concatenating using the compound += operator. After all of this rambling, does anyone have any options for me to try? You might consider returning HTML from the server rather than trying stuff on the client. Sorry, for the self-dialog here. If you care to show your code that does the iteration and the data structure you are working with, you might get some takers. It seems no one is keen to write the code for you. Some questions that come to mind: - Are you trying to use innerHTML or DOM methods? - Is your data returned as a delimited string or JSON? - Are you trying to build the entire table or just add some rows? - Are there hanlders, classes, attributes or whatever that need to be added? -- Rob
