I recently discovered that when preloading images, if you first bind the load event to the image and then change the src attribute, the load event will always be triggered in all browsers regardless of whether or not the image is cached. Can this be clarified in the documentation somewhere? It may prevent headache and wasted time.

The current documentation is:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser

It doesn't fire correctly in WebKit if the image src is set to the same src as before

It doesn't correctly bubble up the DOM tree

Can cease to fire for images that already live in the browser's cache

If the load event is bound to the image BEFORE the src is changed, the load event will be triggered in all browsers regardless of the image being cached. If i knew this 6 months ago it would have saved me time trying to overcome that problem.

I'm not sure how that could be worked in or if it even belongs on that page.

There's a difference in transition effects between versions 1.0 and 1.1.0rc1 that's pretty much a gamebreaker for me. If i can't make the slide transitions work like 1.0 in 1.1.0 i'm going to have to scrap my app and go with jqtouch. I would just use 1.0, but 1.0 doesn't preserve the scroll position (it scrolls to top before the transition, another gamebreaker because that doesn't happen in jqtouch). I did try using 1.0 with iscroll, but then my slide transitions had the same white space that i get in 1.1.0rc which isn't going to work.

What was the reasoning behind changing the transition behavior? Is it a side effect of preventing the jump to top?

A co-worker of mine is working on a jquery mobile application. It is basically complete, however there's one bug left in it that we can't figure out. We're almost to the point of scrapping it and using JQTouch since the new version of JQTouch doesn't have this problem.

Any time you navigate from one page to the next, it jumps to the top of the page before it transitions to the next page.

We've both done plenty of research on the problem but haven't been able to find a solution that works.

I'm not sure what parts of the application need to be posted, we're handling changing pages manually by listening in on the pagebeforechange event and preventing it's default action, initializing a page, and changing to it with $.mobile.changePage. Everything else about the app works fine, it's just that every time you change pages, the current page jumps to the top before it changes to the next.

What happened to the notification area that used to be at the top of the left menu? Without that notification area it is very tough for me to notice when I get a new private message. Sure, i get an email, but when i'm getting 50+ emails from jQuery forums every day, it is easy to miss a private message.

I decided to get started with qunit today. It was pretty straight forward and easy to learn.

The application i'm testing is a simple data storage system that displays, creates, modifies, and removes records from a database. The usual process flow is:

Adding a record:

List page >

Add Record > on success change hash to #EditRecord-<id> where <id> is the id of the newly added record

> Edit Record

Deleting a record:

List page > Delete Record > Record gets removed from table and database.

I tried to test the add record and delete record methods. The plan was to have two separate tests, one for adding the record, and one for deleting it. To keep things simple, I used $.ajaxSetup to default async to false so that i wouldn't have to do any stopping and starting of tests since i don't have direct access to the ajax requests themselves( they are being fired from within click and submit handlers defined in an external javascript file used on the live page. )

To test adding a record, I simulated adding the record by filling in the new record name and submitting the form. To verify that it was added successfully, i verified that the value of location.hash changed to reflect getting redirected to the edit record page. Next, i added a new test so that the setup method would get ran again, thus getting me a new dump of data which should contain the new record. However, the new artist doesn't show up in the table on the second test. any ideas? Here's the test code i am using. in the code, i refer to a record as "artist". Also, I was very specific with the testing just to make sure that I understood how to use qunit, i'm not sure how specific people usually get with these, however I saw no harm in it:

module('Artist List Tests',{

setup:function() {

$.ajaxSetup({"async":false});

$("#qunit-fixture").load("artistList.html");

$.getScript("../assets/js/artistList.js");

},

teardown:function(){

$("#qunit-fixture").empty();

$.ajaxSetup({"async":true});

}

});

test('Test the structure of artist list page, then add an artist', function() {

I can confirm that the test artist is added by going to the actual application, however the second test never finds the test artist to delete; both assertions within the second test fail. Does the 2nd test delay until after the first test is 100% complete? the last assertion in the first test confirms that the record was properly added, however the second test doesn't see the record that was added.

I can easily perform the ajax tests using an asyncTest, however i wanted to actually test the event handlers of the add and delete buttons to ensure that they were being fired properly and were able to read the right data from the DOM to send with the each ajax request.

This really isn't a big problem or anything, but sometimes when i'm navigating around, my focus ends up on the jQuery logo on the top left, and i accidentally press enter at some point for some random reason, and i end up on an error page in a new tab. It seems to only happen when you aren't inside of a particular forum, such as when viewing recent posts.

You can recreate it by going to recent posts, tabbing to the logo, and pressing enter.

I don't think i'm alone in not understanding what this change does and how it is going to affect my code. I've implemented 1.6 in some of my newer applications without any issues, however, for all i know something might not be working quite right and it will end up showing itself later down the road after i move this to a production environment.

Several user images aren't loading for me. the page just sits here spinning till it gets timeout trying to load them. I have tried it from several different external godaddy servers and get the same result, so i dont think it is a network problem on my end.

I'm trying to use the demo at http://jqueryui.com/demos/slider/side-scroll.html but it does not work very well in IE7 and IE8 compat. It's just completely "jacked up" as far as the handle position relative to the amount of scrolling done. Any idea how to fix this? I'm trying to use it on a production site to display a side-scrolling list of product boxes. Here's the code used:

I rarely visit the jquery.com site or the blog simply because I only need to download jquery once, after that there's no need to go there. However, this results in me missing important blog posts, such as the release of 1.4.4. I completely missed that release and didn't know it was out till someone asked a question about it on the forums.

I think it would be beneficial to include recent blog posts on the left column of the forums if possible, or maybe posting announcements in the forums for important blog posts such as new jquery releases.

I'm trying to setup a system where on load, i take the first row of the table and use it as a template. i then i have a click event that clones that template and adds it as a new row to the table. each row has a button withthe button widget applied to it that removes the row. Initially, i can add all the rows i want and they get the button styling, however, if i remove all of the rows after i've added one, adding more adds them without the button widget styling, but it still has the click event.

can anyone help me explain why this is happening? I haven't been able to figure much out about it yet. here is a jsbin showing the issue:

click add row several times, click the buttons that were added and the rows will be removed, then click on add row again once all of the rows are removed and the bug will occur. I've tested it in both chrome and IE7/8, so this appears to be a clone() .remove() and possibly .button() bug. I can't think of any reason why this would be happening. i'm not modifying the detached table row, it should change from removing all of the existing rows. it even loses the button text.

i'm currently developing a plugin with jquery 1.4.2 and the console.log() in google chrome gives different results in 1.4.3 versus 1.3.2. in 1.3.2 i get an object with properties, such as the selector, methods currently attached to the jquery object, etc.... while in 1.4.3 i get an array of elements.. how would i output that object with properties in jquery 1.4.3 instead of the array of elements?

for testing, try this line with jquery 1.3.2 and 1.4.3: in google chrome

console.log($('body'));

Edit: Ideally i would like to be able to see what methods are currently attached to that object.

Is there a way to have the current jquery ui accordion allow multiple sections to be open at once without extending the widget? Looking at the source the only way i can see it being possible is overriding the _clickHandler method so that it doesn't de-activate the current one. However, i need to use this special click handler on only one of my accordions in a special case, while not modifying the other accordions.

Edit:

Solution:

This is actually something that the accordion is not built for. It is not intended for the accordion to have more than one panel open at a time. For the kind of functionality that i needed, i ended up using the plugin on the following fiddle, originally built by rdworth: http://jsfiddle.net/DkHyd/

I have a project where i need to be able to drag an image around within a div, however the image needs to be constrained in such a way that it never gets dragged completely out of the div. the catch is that the image gets zoomed in and out, so after zooming i have to reset the constraints. fine.

However, my constraints seem to be getting based on the document, is there a way to constrain based on the position of the image inside it's parent, while still allowing the image to be dragged, say, 90% outside of its parent? the parent already has a position: relative;

it would also be great if i could setup my constraints with a % value so that i don't have to re-calculate it every time i resize the image, however i can get by without that.

I was working on an app today, and decided to look at HTML5 for ideas of how to make form validation simple yet powerful. The application is almost entirely ajax powered with several different forms that need different validation for each form. Looking at HTML 5, input elements of type text can have a pattern attribute that contains a regexp, and a title attribute that will be used to notify the user of what is wrong with the input. they can also have a required attribute, but i have't messed with that yet. It was very easy for me to implement a solution using jquery for it, however, how will this interact with browsers as they begin to support html 5 validation?

so far i've only tested in Chrome 6 IE 7/8 and FF 3.6.8, and none of them give me any issues. chrome 6 does support the html 5 pattern validation, however, all it does is restrict the submit event if the field doesn't pass the pattern, however, my submit event handler still happens.

for validation, i use this:

$( 'input[pattern][title]' ).live( 'blur', function(){

var re = new RegExp( "^" + this.getAttribute("pattern") + "$", "" );

var value = $( this ).val();

if ( !re.test( value ) ) {

$( this ).addClass( 'error' );

alert( this.getAttribute( "title" ) || 'Field failed validation.' );

} else {

$( this ).filter( '.error' ).removeClass( 'error' );

}

});

and each time I load in a new form, I bind handlers to the submit and reset handlers:

this results in if the form is submitted, it fires the blur event on all inputs, text areas, and select elements, thus causing the validation to take place. if the validation fails for any of the elements, their individual alerts happen in order and the inputs get the error class. after the blur has been triggered, i check to see if any inputs have the error class and continue accordingly. the reset button just removes the error class from the inputs.

I didn't use the live method for the form submit and reset events because I have seen several posts lately of a bug in IE7 with .live and the submit event, so I just kept it separate.

After building this simple validation setup, it seems like if it weren't for the submit issue, i could build a script that i include on all of my pages that handles all form validation. all i would have to do is include a pattern and title on the inputs that i want to validate. the pattern can even force the field to be required, so the required attribute isn't needed. (i could get around the submit issue using the click event of the submit button if i had to, $('form input[type=submit],form button[type=submit]).live(... )

IE will give me "http://mydomain/index.cfm#523" while all other browsers give me "#523".

I tried to recreate this using a small test case, but i can't do it. IE always returns the "#523" just like all the other browsers. here's a jsbin of it working http://jsbin.com/unowe3/13

any ideas why .attr('href') would be different in IE vs Other browsers on my page but not jsbin? i'm using the same doctype and version of jquery, and identical code. i can't think of any code that i could have written that would affect how .attr('href') works.

Edit: i did build a "hacky" solution for it by using $.browser.msie and an if statement, but it doesn't make any sense to me why it would be different in my situation vs any other.(not to mention, if it for some reason starts working properly, the "hacky" solution will cause it to not work)

I've used jQuery ajax and .post a lot, and several times within the very application that i'm having issues with, but I've never run into this issue before.

I've got a table of items and categories, sorted by a sort number. in the same cell that the sortnum input is in, there is a span with a status id that differentiates between items and categories so i can modify the correct records in the correct database table.

First, i select all of the inputs and then sort them by the value of the input. next, i loop through the inputs, creating two arrays: one array contains the type of entry, and the other contains the id of the entry.

After the loop, i join each array into its own variable, sortlist and typelist. Next, i perform a .post passing the two lists to my server.

The problem is, on the server side, those two variables are getting a "[]" appended to the end of them, and since i'm working in coldfusion, the only way to get data from them is with evaluate. I can get by using evaluate(), but i'd rather not have to. So far i haven't found a way to get the value of this variable. has anyone else ran into this issue and found a solution?

<table>

<tbody>

<tr>

<td><span>1</span><input id="1" type="text" class="sortnum" /></td>

</tr>

<tr>

<td><span>1</span><input id="2" type="text" class="sortnum" /></td>

</tr>

<tr>

<td><span>7</span><input id="3" type="text" class="sortnum" /></td>

</tr>

<tr>

<td><span>7</span><input id="4" type="text" class="sortnum" /></td>

</tr>

<tr>

<td><span>6</span><input id="5" type="text" class="sortnum" /></td>

</tr>

</tbody>

</table>

$('.updateSort').bind('click',function(e){

// select inputs and sort them

var $inpArr = $('input.sortnum').sort(function(a,b){

var keyA = parseInt(a.value);

var keyB = parseInt(b.value);

return keyA < keyB ? -1 : keyB < keyA ? 1 : 0;

}),

// declare arrays

sortlist = [],

typelist = [];

// loop through inputs

$inpArr.each(function(){

// add id of this input to sortlist

sortlist.push(this.id.split('-')[1]);

// get status id

var status_id = parseInt($(this).prev().text());

// if status_id is less than 5, this is a category, else, this is an item

I'm having issues with jquery ui tabs and i can't recreate the problem. does anyone know why this would happen?

$('#tabs').tabs({

select: function(event,ui) {

if (ui.panel.id == 'submit_error_list') {

$('#error_list_submit').click();

return false;

}

}

});

i have 2 tabs. one tab has information, and the other tab is empty. the idea here is that the number of tabs is dynamic, and the last tab is always a submit button. when the user clicks on the last tab, i call the click event on a submit button and and return false. i've placed break points on each line, and it appears to be going through everything properly, including the return false, however, it moves away from the selected tab to the empty submit tab.

any ideas?

the only difference between the jsbin below and my code is that the inputs have .button() applied to them and the tab select function triggers a click event rather than alerting text. Also, the jsbin version uses a different version of jquery ui because the 1.8.4 isn't available on google api yet.

I would try to roll back, however, i've done a small test case of my own proving that it does work with 1.8.4 on a simplified page on my internal network using all of the same files that my primary app uses.

the jsbin contains the exact dom for the tab area as well as the exact same code, with the trigger click commented out. it does validate w3c for html5(other than a missing <title></title> in the header, which obviously exists on my page)

Edit: Hmmm... actually i think i know whats goin on now that i posted this. the .button() is the only difference, and it does sortof look like its gettign applied to the anchor tags in the tab area. i'll post an update ina min.

I have a somewhat strange dilemma. In my application, I need to have groups of parts. Each part, has between four and ten different checkboxes. This application is going to exist on a touch-screen monitor, so I want to use jQuery UI Button to turn the checkboxes into buttons since buttons would be easier to read and press than a checkbox. The problem is, i want each checkbox to have the same name so that when i pass the data as POST to my ajax handler, I can easily loop through them for their values which consist of partid-reasonid.

Since they all have the same name, jQuery UI seems to try to put them all into the same fieldset no matter how i try to call .button() on the fields. Here is a jsbin demonstrating the problem: http://jsbin.com/ihavo3

I have tried both

$('.errorbox').each(function(){

$(this).button();

});

and

$('.errorbox').button();

both of which have the same results.

Any suggestions?

Edit: If i have to change the names and values of the checkboxes to get this to work, that's fine. at this point the entire app is in development an can be modified in any way, including the code to parse the data and insert into database. All i'm interested in atm is getting to display the toggle buttons per part on the page within the scrollable box

I just went into my profile and noticed the new Activity Trend area. the activity in the past 30 days looks good, however, the all time selection shows results from 1970-2002. Shouldn't it instead show all time from my first post to my last post? There were also no controls to change the date range of all-time.