Creating multiple jQuery / Javascript widgets

Question

I am creating a tool for employees to create a widget panel. This panel is fully customizable in terms of displaying widgets, their placement and size.

Each widget is a jquery self-starting function that loads everything it needs to have it created.

My concern is that some widgets may need to extract data from a database to load, such as stored links, popular phone numbers, etc. This will mean that if the user had 10 widgets on the control panel, making 10 AJAX calls (assuming that each of them is needed to access the database).

First, I doubt it is preferable, but not quite sure how to handle it otherwise?

My second problem / question is around waiting for things to load. In the function getMultipleScripts, I have a callback for done. This will tell me when all the files have been extracted, so I can run my plugin to enable grid functionality. However, this does not mean that each of the plugins has completed its AJAX call to retrieve its data. Is there a way I can approach this so that not only the files are loaded, but each of them has completed its initial AJAX call to retrieve its data?

// Load an array of file names
$.getMultiScripts(moduleIncludes, 'includes/js/modules/').done(function(){
   // I can trigger the jQuery plugin here to arrange the widgets into their grid format. However, just because those plugins have been fetched doesnt mean their individual AJAX calls have all been completed. 
});

// Given an array of file names..
$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript((path || "") + scr);
    });

    _arr.push($.Deferred(function(deferred) {
        $(deferred.resolve);
    }));

    return $.when.apply($, _arr);
}

Any feedback on suggestions is preferable. Although the above questions concern my primary concern, feedback is also accepted around the alternative setup.

, - , . - , , - .

Answer 1

, . , , javascript , , , . , ( ) , , ajax success . , -, :

DEMO ( jsFiddle): https://jsfiddle.net/cbyxp9v2/

/index.php

<script>
// I am just making a simple ajax object to use in this example
var aEngine =   function($)
    {
        var data;
        var func;
        var url =   '/tester.php';
        this.ajax   =   function(data,func)
            {
                $.ajax({
                    url: url,
                    data: data,
                    type: 'post',
                    success: function(response) {
                        try {
                            func(response);
                        }
                        catch(Exception) {
                            console.log(Exception.message);
                        }
                    }
                });
            };
    }
// On document load
$(document).ready(function() {
    // This is where you have to tell this function how many widgets there are
    var counter =   10;
    // This will tell the element to loop in my example but not
    // important in your case
    var counted =   counter;
    // Create instance
    var ajaxEngine  =   new aEngine($);
    // I am just doing a loop to simulate widgets being processed via ajax
    for(var i = 1; i < counted; i++) {
        ajaxEngine.ajax(
            {
                "test":"best",
                "num":i
            },
            function(response){
                var writeResp   =   JSON.parse(response);
                // This is just writing to page a random number from the PHP
                // not important, just required in this example
                $('#div'+writeResp.num).html(writeResp.msg);
                // This is more the important part
                // Here you decrease the counter by one when this widget
                // finishes it action
                counter--;
                // This part is important. After the counter decreases to 1
                // that means that all the ajax widgets should be loaded and
                // in this case send a "done" message to the console.
                // Yours would then run your grid application
                if(counter == 1) {
                    console.log('done');
                }
            });
    }
});
</script>

<?php
// This is just for testing to simulate loaded widgets
for($i = 1; $i < 10; $i++) {
    echo '<div id="div'.$i.'">tester</div>';
}

/tester.php

// This just sends back to ajax content simulating widget loading
if(!empty($_POST['test']))) {
    die(json_encode(array('success'=>true,'msg'=>rand(),'num'=>$_POST['num'])));
}

:

counter--;
if(counter == 1) {
    console.log('done');
}

ajax , aEngine, . , ajax 1.