Question

I have a button, on clicking that button I need to:

• Execute a method
• Need to show a popup.

The code is:

$('.dwnSingleImageLink').live('click', function(event){
    $('html, body').animate({scrollTop : 0}, 'slow');
    singleFileDownload = true;

    var renditions = getRenditionResultset($(this).attr('data-id'), $(this).attr('data-docname'));

    for(var i = 0; i < renditions.length; i++){
        var name = renditions[i].name;
        if(name == 'Web' || name == 'Thumbnail' || name == 'Preview' || name == 'Native File'){
            var info = {
                name: renditions[i].name,
                fileSize: renditions[i].fileSize,
                width: renditions[i].width,
                height: renditions[i].height,
                label: ''
            };
            renditionInfos.push(info);
        }
    }

    $('#downloadModal').find('input:hidden').attr({
            'data-id': $(this).attr('data-id'), 
            'data-docname': $(this).attr('data-docname'),
            'data-title': $(this).attr('data-title')
    }).after(function(){            
        $('#downloadModal').modal('show').css({
            width: '380px',
            'margin-left': function () {
                return - ($(this).width() / 2);
            }
        });
    });
});

var getRenditionResultset = function(dID, dDocName){
    var submitData = { 
        IdcService: 'RENDITION_INFO',
        dID: dID,
        dDocName: dDocName
    }; 

    var renditions = new Array();
    var fields = new Array();

    $.ucm.executeServiceIsJson(submitData, function(ucmResponse) {
        var resultSet = ucmResponse.ResultSets['manifest'];
        alert('jym');                                   

        for (var fieldIndex = 0; fieldIndex < resultSet.fields.length; fieldIndex++) {
            var field = new RenditionField();
            field.name = resultSet.fields[fieldIndex].name;
            field.index = fieldIndex;

            fields.push(field);
        }

        for(var rowIndex = 0; rowIndex < resultSet.rows.length; rowIndex++) {
            var rendition = new Rendition();

            for(var i = 0; i < fields.length; i++){
                var value = resultSet.rows[rowIndex][fields[i].index];                  

                switch(fields[i].name){
                    case 'extRenditionName' : 
                        rendition.name = value;
                        break;
                    case 'extRenditionDescription' :
                        rendition.description = value;
                        break;
                    case 'extRenditionPath' :
                        rendition.path = value;
                        break;
                    case 'extRenditionOriginalName' :
                        rendition.originalName = value;
                        break;
                    case 'extRenditionParams' :
                        rendition.params = value;
                        break;
                    case 'extRenditionType' :
                        rendition.type = value;
                        break;
                    case 'extRenditionFileSize' :
                        rendition.fileSize = value;
                        break;
                    case 'extRenditionWidth' :
                        rendition.width = value;
                        break;
                    case 'extRenditionHeight' :
                        rendition.height = value;
                        break;
                    case 'extRenditionFileType' :
                        rendition.fileType = value;
                        break;
                    case 'extRenditionPixelsPerInchVertical' :
                        rendition.pixelsPerInchVertical = value;
                        break;
                    case 'extRenditionPixelsPerInchHorizontal' :
                        rendition.pixelsPerInchHorizontal = value;
                        break;
                    case 'extRenditionColours' :
                        rendition.colours = value;
                        break;          

                }                   
            }

            renditions.push(rendition);
        }
    });

    return renditions;
}

function RenditionField() {
    this.name = '';
    this.index = -1;
}

function Rendition() {
    this.name = '';
    this.description = '';
    this.path = '';
    this.originalName = '';
    this.params = '';
    this.type = '';
    this.fileSize = '';
    this.width = '';
    this.height = '';
    this.fileType = '';
    this.pixelsPerInchVertical = '';
    this.pixelsPerInchHorizontal = '';
    this.colours = '';
}

Rendition.prototype.toString = function() {
    return '[object Rendition: name=' + this.name + ';description=' + this.description + ';path=' + this.path + ';originalName=' + this.originalName +
    ';params=' + this.params + ';type=' + this.type + ';fileSize=' + this.fileSize + ';width=' + this.width + ';height=' + this.height + ';fileType=' + 
    this.fileType + ';pixelsPerInchVertical=' + this.pixelsPerInchVertical + ';pixelsPerInchHorizontal=' + this.pixelsPerInchHorizontal + ';colours=' +
    this.colours + ']';
}

It is a big code. What it does is, send an ajax request and receive the response. Then it process the response and create an array. These are the job of the method getRenditionResultset(). But in my application before the generation of the array the for loop below the invocation of this method get executed also the show modal block. How can I wait for the end of the getRenditionResultset() method and then execute the for and the rest of the code of the click handler? Is there any way to use $.when() in this case?
Regards.

Answer 1

Accept one more callback as parameter to your getRenditionResultset method.

var getRenditionResultset = function(dID, dDocName, onComplete){ 

  $.ucm.executeServiceIsJson(submitData, function(ucmResponse) {
    //after creating the array with the reponse

    if(typeof onComplete === function){
       onComplete()
    }


  }
}

At the point of invocation, do

$('.dwnSingleImageLink').on('click', function(event){
 .
 .
     var renditions = getRenditionResultset(blah, blah, function(){
        //code to execute after request has completed.
     }
 .
 .
}