CODEWITHSUNDEEP
jqueryjquery-ui
Gus D
Gus D

Reputation: 139

Calling jQuery UI constructors

I am building a survey tool that will have different layouts and 'inquisitorial' processes depending on the part and actual question that the user is responding too. I am building this in Coldfusion and I am using jQuery UI elements to present questions however this will lead to ui elements embedded in ui elements.

The order in which the UI elements are constructed or triggered is going to be the reverse order that they are presented in the html, so the innermost element has to be triggered first. There is a master page that has the logic that looks up the database for the question information and the specific page layout to use, which is then <cfinclude'd, this layout page may have say tabular UI elements

My solution to this has been to declare an array of UI html node names (DIV tags) along with the UI construction method. Each included element then "pushes" it's UI information into this array. 

var inst_triggers = new Array()
inst_triggers.push("#accordion@@accordion()")

finally when everything is assembled I need to trigger these UI elements, so in the master page I do the following.

$(function() {
    var it = inst_triggers.reverse();
    var it_len = it.length;

    for (e=0;e<it_len;e++){
        var trig_parts = it[e].split('@@');
    //do the jQuery UI element trigger here
    var eval_str = '$("'+trig_parts[0]+'").'+trig_parts[1];
    eval(eval_str);
    }

});

As we know "eval() " is evil so I need an alternative to trigger or construct these page elements Something like jQuery.uistuff.method('accordion'), but I cannot see this in the documentation (or at least I have not understood what I have read which is more likely)

Any suggestions, pointers further reading or references would be GREATLY appreciated.

Regards thanks to the collective neural network in advance !

Gus

Upvotes: 1

Views: 198

Answers (2)

William Niu
William Niu

Reputation: 15853

You can have a look at the Developer's Guide for jQuery UI, in particular the jQuery.fn section. Basically, all the jQuery widgets takes a namespace under jQuery.fn. So, that means

$('#accordion').accordion(options);

is equivalent to 

$.fn['accordion'].call($('#accordion'), options);

and 

$.fn['accordion'].apply($('#accordion'), [options]);

I am not sure my solution is any better than bstakes's, but it is an alternative. The bottom line is, avoid using the evil eval()s.

Upvotes: 0

bstakes
bstakes

Reputation: 1898

Given the approach that you have posted, I'm not sure why you are using the @@ and splitting on it in order to determine your components. You could just as easily push an object to the "inst_triggers" array: 

var inst_triggers = [];
inst_triggers.push({selector:"#accordion", method: "accordion"});

$(function() {
    var it = inst_triggers,
        it_len = it.length;

    it.reverse()

    for ( e=0; e < it_len; e++ ) {
        $(it[e].selector)[it[e].method]();
    }
});

example: http://jsfiddle.net/bstakes/uBpk5/

Upvotes: 1

Related Questions