I like mustache.js but don't know if it works with jQuery-ui

As I have mentioned, I am currently looking for a templating engine in Javascript which will allow me to create great gobs of HTML things without the bulk of assembling them in jQuery. I couldn't get pure.js to work for me, but from the first with mustache.js, it was working close to how I was thinking.

Here is the specific function I want to generalize and make smoother. It uses jQuery-UI to make a pop-up.

// ========= ========= ========= ========= ========= ========= =========
// creates popup where you enter the accessions desired
// --------- --------- --------- --------- --------- --------- ---------
apr.accession_popup = function () {
    // I do this enough that I should make a specific library to handle
    // this style of popup

    // must investigate reformatting

    $( '#paste_from_spreadsheet' ).remove() ;
    $( '<div id="paste_from_spreadsheet" />' )
        .attr( 'title' , 'Add Accessions' )
        .dialog() ;
    $('.ui-dialog-titlebar-close')
        .click( function () {
            $( '#paste_from_spreadsheet' ).remove()
            } ) ;
    $( '<div/>' )
        .text(
            'Add one or more valid Accession IDs. ' +
            'When done, click "Go" or hit "Enter". '
            )
        .appendTo( '#paste_from_spreadsheet' ) ;
    $( '<textarea/>' )
        .attr( 'id' , 'spreadsheet' )
        .attr( 'name' , 'spreadsheet' )
        .appendTo( '#paste_from_spreadsheet' )
        ;
    $( '<div/>' )
        .attr( 'id' , 'spreadsheet_go' )
        .text( 'Go' )
        .appendTo( '#paste_from_spreadsheet' ) ;
    $('.ui-icon-closethick')
        .text( 'X' ) ;
    $( '#spreadsheet_go' ).click( function () {
        apr.add_accession( $( '#spreadsheet' ).val() ) ;
        $( '#paste_from_spreadsheet' ).remove()
        } ) ;
    $( '#spreadsheet' ).focus() ;
    } ;

And here is the version using mustache.js.

function my_popup () {
    $( '#paste_from_spreadsheet' ).remove() ;

    $( '<div id="paste_from_spreadsheet" />' )
        .attr( 'title' , 'Add Accessions' )
        .dialog() ;
    $('.ui-icon-closethick')
        .text( 'X' ) ;
    $('.ui-dialog-titlebar-close')
        .click( function () {
            $( '#paste_from_spreadsheet' ).remove()
            } ) ;
    var template = '\
    <div>\
        Add one or more valid Accession IDs.\
        When done, click "Go" or hit "Enter". \
    </div>\
    <textarea id="spreadsheet" name="spreadsheet" ></textarea>\
    <div id="spreadsheet_go"> Go </div>\
    ' ;
   var html = Mustache.to_html( template,'' ) ;
    $( '#paste_from_spreadsheet' ).append( html );
    $( '#spreadsheet_go' ).click( function () {
        apr.add_accession( $( '#spreadsheet' ).val() ) ;
        $( '#paste_from_spreadsheet' ).remove()
        } ) ;
    $( '#spreadsheet' ).focus() ;
    }

Notice that there isn't a lot of filling here. I can do filling, but half the time, I'll want to replace that textarea with an input type="text", which means that, if I dive in on this one, I'll have to use the awesome power of mustache.js in some way.

Right now, though, I'm not sure there's enough win there to make it worth my while, or if I could write my jQuery stuff better and make it work like I want it to.

Thank you, Stack Overflow!

I have to thank Stack Overflow again.

I code everything from SQL to Javascript, and that means that I don't really get to become expert in everything. I do alright, but there's occasionally things I just don't get, and I don't really have a community of developers around me to ask.

My most recent problem relates to hashes in Javascript connecting to JSON. You can make arrays behave like hashes in Javascript:

var hash = new Array()

hash['foo'] = 1

alert( hash.foo )

My problem was with post, the jQuery method to do AJAX with large data sets. This didn't work.

$.post( url , hash , function() { ... } , 'json' )

Because hash is an abused array, not an object. Before I figured it out, today, thanks to SO, I make a long string that looked like { 'foo' : '1' , 'bar' : '2' } and ran eval on it. Bad bad bad bad bad. I now know that it should work like this:

var hash = {}

hash['foo'] = 1


$.post( url , hash , function() { ... } , 'json' )

Thanks again, StackOverflow!

Check My Math

There's a function. getJSON. It could be easily presumed to just get (in the colloquial sense) a JSON object. It doesn't. It uses the HTTP GET method.

As it turns out, it is just a rebadge of the more generic GET.

$.getJSON( url , query_object , function( data ) { ... } ) ; 

Is equivalent to this.

$.get( url , query_object , function( data ) { ... } , 'json'  ) ; 

And, of course, this is generic. If you want to POST and get JSON back, you do this.

$.post( url , query_object , function( data ) { ... } , 'json'  ) ; 

But they will not not not not NOT do this.

$.postJSON( url , query_object , function( data ) { ... } ) ; 

Because that function name assumes you've put together a JSON object and are posting it, not downloading it with the POST method.

Assuming that I was just getting JSON and not GETting JSON, as jQuery seems to want me to assume, has caused me several days of problems. Am I right in thinking that their rational encourages people to have problems?

Solution to the Javascript Object problem

eval()

I should've seen it a while ago.

var jsonA = new Array() ;
var sample_array = [ "foo" , "bar" , "blee" ] ;
for ( var i = 100 ; i <= 290 ; i++ ) {
    for ( j in sample_array ) {
        var k = i * i * (j+1) ;
        k = '"' + k.toString() + '"' ;
        jsonA.push( sample_array[j] + i + " : " + k ) ;
        }
    }
    var json = jsonA.join(" , ") ;
    x = eval( "( { " + json + " } )" ) ;

That is, create an array. put each name:value pair into the array in the name colon value format. Join 'em with commas. Wrap with curly braces ("This is an Object, JS") and parens ("I'm JS. I'm a language. It's my job to have crazy syntax.") Run eval(). I don't show my JSON step, but it's basically taking the params and pushing them back. The interesting thing is, with the data I made up here, the top is between 570 and 585 elements. I don't know if that's an HTTP limitation, an eval() limitation or a jQuery limitation, but I know that once I hit that, the code flakes. Which is interesting.

The Problem With Javascript Objects / Hashes

Javascript has Objects. This is a good thing, allowing you to do useful and good things.

var objFoo = {
    foo : "foobarblee" ,
    bar : "barbleequuz" ,
    blee : "bleequuzbaaz"
    }
for ( i in objFoo ) {
    var j = objFoo[i] ;
    alert( i + ":" + j ) ;
    }
    // Yes, this is a fairly annoying example.

I'm in a position where I had been sending stuff through AJAX by using GET. I blew out the top of what you can send by GET and now must learn to use POST.

GET is easy.

var query_string = new Array() ;
for ( i in objFoo ) {
    var j = objFoo[i] ;
    query_string.push( i + '=' + j ) ;
    }
var url = "http://foo.bar/?" + query_string.join('&') ;
// coded but not tested

That's fine, if you want to generate only the right side. For query strings, I can do this and it works.

var query_string = new Array() ;
for ( h = 0 ; h < 10 ; h++ ){
    for ( i in objFoo ) {
        var j = objFoo[i] ;
        query_string.push( i + h + '=' + j ) ;
        }
    }
var url = "http://foo.bar/?" + query_string.join('&') ;
// coded but not tested

And I do a LOT of this. Enough to get the rare 414 HTTP error code. But I cannot figure out how to do this for POST.

var x = { foo : "bar" , "blee" : "quuz" } ;
$.getJSON( url , x , function(response) {
    ....
    } ) ;

Notice that foo is just as acceptable for a value name as "blee". Quotes are optional, which means the name cannot be set via program by any means I can name. And I so far cannot fake it with Arrays being Associative/Hashes.

var x = new Array() ;
x["foo"] = "bar"; 
x["blee"] = "quuz" ;
$.getJSON( url , x , function(response) {
    ....
    // no love for this version
    } ) ;

There has to be a way around this. This is obvious enough that someone besides me hit it. Help me find the solution?