Take the following code
It works fine, however, this is being used with jQuery dialog, and the DOM has multiple dialogs on it.
http://jqueryui.com/dialog/
Each dialog (essentially a div presented as an overlay) is configured as it's own div and they are hidden until called. As a user moves between dialog windows, the current dialog fades out, then the new one fades in. It works really well!
However, the dialog is presented using a common css set, and the button set of each dialog (the form buttons) is contained in a named div. '.ui-dialog-buttonset'
The intentions of the code above is to insert an animated 'waiting' gif in front of the submit button, so the users sees the form is being processed. The problem is that I can only figure out how to code it so the image is inserted into the containing div of the button set '.ui-dialog-buttonset'. Since there are multiple dialogs in the DOM, this code basically inserts the waiting gif into all of the dialogs, not just the one being used. This has resulted in some hokey behavior where the waiting gif appears on both the current and new page. This is because it's been told to be shown on any div with that name.
However, each dialog is a named div, so I wondering if I can use both the id of the dialog being used along with the button class.
This code doesn't work, but my hope was that it would only append the image to the div with the class named 'ui-dialog-buttonset that is contained within the div with id 'dialog1'.
Any ideas on how to do this?
Code:
$(".ui-dialog-buttonset").append("<img class=spinner src=http://newco.com/spinner.gif>");It works fine, however, this is being used with jQuery dialog, and the DOM has multiple dialogs on it.
http://jqueryui.com/dialog/
Each dialog (essentially a div presented as an overlay) is configured as it's own div and they are hidden until called. As a user moves between dialog windows, the current dialog fades out, then the new one fades in. It works really well!
However, the dialog is presented using a common css set, and the button set of each dialog (the form buttons) is contained in a named div. '.ui-dialog-buttonset'
The intentions of the code above is to insert an animated 'waiting' gif in front of the submit button, so the users sees the form is being processed. The problem is that I can only figure out how to code it so the image is inserted into the containing div of the button set '.ui-dialog-buttonset'. Since there are multiple dialogs in the DOM, this code basically inserts the waiting gif into all of the dialogs, not just the one being used. This has resulted in some hokey behavior where the waiting gif appears on both the current and new page. This is because it's been told to be shown on any div with that name.
However, each dialog is a named div, so I wondering if I can use both the id of the dialog being used along with the button class.
Code:
$("#dialog 1 .ui-dialog-buttonset").append("<img class=spinner src=http://newco.com/spinner.gif>");This code doesn't work, but my hope was that it would only append the image to the div with the class named 'ui-dialog-buttonset that is contained within the div with id 'dialog1'.
Any ideas on how to do this?
