making small changes to js functionality without a whol enew component?

Hi,

I just wanted to make a small change to the function of jquery.dialog component. There's a couple lines of jquery to tidy up the DOM and help me avoid a whole pile of code to generate unique ids only to be wasting memory with the component being in the DOM multiple times when it's modal and a sort of singleton widget.

I'd like to extend the component is some way or attach somehow to the js without cloning the whole thing. Is there perhaps a way to override the existing js or better still have my additional js somehow rendered with the component without including in the template as below which seems messy?

What would be most framework friendly? I may also want the id of the node to remove be parameterised but not a problem right now because this added feature is just needed for this component. I'm thinking I could justy include this js in an outer component and make sure it is run only at the end of the page render but I quite like the idea of attaching the code to the component concernes as far as SOC goes?

John

<t:jquery.dialog t:clientId="bookingsDiaryDialog" id="bookingsDiaryDialog" params="${diaryDlgParams}" title="${message:title.diary}">
<t:zone t:id="bookingsDiaryZone" id="bookingsDiaryZone">
<t:if t:test="showDiary">
<t:diary workIdParm="workId" venueIdParm="venueId" reservationIdParm="reservationId" reservationUuidParm="reservationUuid"/>
</t:if>
<t:if t:test="showCourtesy">
<t:bookingadvice vendorIdParm="${reservationVendorId}" bookingCompleteParm="${bookingComplete}"/>
</t:if>
<t:if t:test="dirtyDiary">
<p>${message:text.diarydirty}</p>
</t:if>
</t:zone>
<script>
$('#bookingsDiaryDialog').bind('dialogclose', function(event) {
$('#diary').remove();
});
</script>
</t:jquery.dialog>

This email is free from viruses and malware because avast! Antivirus protection is active.
http://www.avast.com