There's things I know about Javascript and jQuery, and things I don't. I know that this works, gets and stores what I want so that, when I need to do stuff, I don't have to wait for it. Functionally, I like this. But I'm the only Javascript guy in my shop, and so I don't see Javascript I didn't write all that often.
I've heard recently that it is considered wrong to fill up the name space, so you use objects to hold everything. I think I'm doing this right now, but I'm not sure.
And in adding stuff to the DOM, I believe I'm a bit more verbose than I need to be, but I don't really know what to change.
Any comments?
// This uses Javascript, jQuery and jQuery-UI to allow for the addition of accession analysis stubs
// to new requests and accessions
var aa_stub = {
// variables
ajax : 'MY URL HERE' ,
// data storage
data : {} ,
references : {} ,
reference_order : [] ,
analysis : {} ,
analysis_order : [] ,
// functions
// ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
// dialog popped up when "Add AA Stub' button is pressed
do_dialog : function ( sample_num ) {
$( '<div/>' )
.attr( 'id' , 'add_new_stub' )
.attr( 'title' , 'Add Stub' )
.dialog()
$('.ui-icon-closethick').text( 'X' )
$('.ui-dialog-titlebar-close')
.click( function () {
$( '#add_new_stub' ).remove()
} )
$( '<div/>' )
.appendTo( '#add_new_stub' )
.attr( 'id' , 'instructions' )
.text( 'Enter a reference, an analysis, any extra parameters, then click Go' )
$( '<fieldset/>' )
.appendTo( '#add_new_stub' )
.attr( 'id' , 'ref_box' )
$( '<legend/>' )
.appendTo( '#ref_box' )
.text( 'Reference Species' )
$( '<select/>' )
.appendTo( '#ref_box' )
.attr('id' ,'reference')
for ( i in aa_stub.reference_order ) {
var j = aa_stub.reference_order[i]
var ref = aa_stub.references[j]
$( '<option/>' )
.text( ref )
.val( j )
.appendTo( '#reference' )
}
$( '<fieldset/>' )
.appendTo( '#add_new_stub' )
.attr( 'id' , 'anal_box' )
$( '<legend/>' )
.appendTo( '#anal_box' )
.text( 'Analysis Type' )
$( '<select/>' )
.appendTo( '#anal_box' )
.attr('id' ,'analysis')
for ( i in aa_stub.analysis_order ) {
var j = aa_stub.analysis_order[i]
var analysis = aa_stub.analysis[j]
$( '<option/>' )
.text( analysis )
.val( j )
.appendTo( '#analysis' )
}
$( '<fieldset/>' )
.appendTo( '#add_new_stub' )
.attr( 'id' , 'param_box' )
$( '<legend/>' )
.appendTo( '#param_box' )
.text( 'Extra Parameters' )
$( '<input type="text"/>' )
.appendTo( '#param_box' )
.attr('id' ,'extra_parameters')
$( '<input type="hidden"/>' )
.appendTo( '#param_box' )
.attr('id' ,'sample')
.val( sample_num )
$( '<div/>' )
.attr( 'id' , 'stub_go' )
.text( 'Go' )
.appendTo( '#add_new_stub' )
.click( function () {
var reference = $( '#reference' ).val()
var analysis = $( '#analysis' ).val()
var parameters = $( '#extra_parameters' ).val()
var sample = $( '#sample' ).val()
$('.ui-icon-closethick').click( )
if ( sample === '' ) {
$( '.stub_bucket' ).each( function () {
var sample = $( this ).attr( 'sample' )
aa_stub.add_to_bucket( sample , reference , analysis , parameters )
} )
}
else {
aa_stub.add_to_bucket( sample , reference , analysis , parameters )
}
} )
} ,
// ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
// adding AA stubs to the form
add_to_bucket : function ( sample , reference , analysis , parameters ) {
var bucket = '#stub_bucket_' + sample
var ref_text = aa_stub.references[ reference ]
var a_text = aa_stub.analysis[ analysis ]
var number = 1
$( bucket ).children( 'span' ).each( function () {
var num = parseInt( $( this ).attr( 'number' ) )
if ( number <= num ) { number = 1 + num }
} )
var id = [ 'span' , sample , number ].join('_')
$( '<span/>' )
.addClass( 'stub' )
.attr( 'number' , number )
.attr( 'id' , id )
.appendTo( bucket )
.text( [ ref_text , a_text ].join( ' - ' ) )
.attr( 'title' , 'Click to delete' )
.click( function () {
$(this).remove()
} )
$( '<input type="hidden">' )
.attr( 'name' , [ 'reference' , sample , number ].join('_') )
.val( reference )
.appendTo( '#' + id )
$( '<input type="hidden">' )
.attr( 'name' , [ 'analysis' , sample , number ].join('_') )
.val( analysis )
.appendTo( '#' + id )
$( '<input type="hidden">' )
.attr( 'name' , [ 'parameters' , sample , number ].join('_') )
.val( parameters )
.appendTo( '#' + id )
} ,
// ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ---- ----
// the startup part
initialize : function ( ) {
aa_stub.data.flag = 1
// fill data
var url = aa_stub.ajax
$.post( url , function ( data ) {
for ( i in data.references ) {
var ref = data.references[ i ]
aa_stub.references[ i ] = ref
}
for ( i in data.analysis ) {
var ref = data.analysis[ i ]
aa_stub.analysis[ i ] = ref
}
for ( i in data.references_order ) {
var j = data.references_order[ i ]
aa_stub.reference_order.push( j )
}
for ( i in data.analysis_order ) {
var j = data.analysis_order[ i ]
aa_stub.analysis_order.push( j )
}
} , 'json' )
// get all
$( '#add_stubs_to_all' )
.click( function () {
aa_stub.do_dialog( '' )
} )
// get one
$( '.stub_add' )
.click( function () {
var sample = $( this ).attr('sample')
aa_stub.do_dialog( sample )
} )
}
}
$( function() {
aa_stub.initialize()
} )