Creating Multiple jQuery/Javascript widgets

Question

I am creating a tool for employees to create a dashboard of "widgets". This dashboard is fully customize-able in terms of what widgets are shown, their placement and size.

Each widget is a jquery self executing function that loads whatever it needs to in order for it to be created.

My concern is that some of the widgets may need to fetch data from the database in order to load such as saved links, popular phone numbers etc. That would mean that if a user had 10 widgets on their dashboard, it would be doing 10 AJAX calls (assuming each one needed to access the database).

First, I doubt this is preferred but not entirely sure how to handle it otherwise?

My second concern/question is around waiting for things to load. In the getMultipleScripts function I have a callback for done. This will tell me when all of the files have been fetched so I can run my plugin to enable the grid functionality. However, this doesn't mean that each of the plugins have completed their AJAX call to fetch their data. Is there a way I can approach this so that not only are the files loaded but each of them have completed their initial AJAX call to fetch their 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 of suggestions are preferred. While the above questions are of my main concern, feedback around an alternate setup is also accepted.

Imagine each block below is a widget that a user has on their dashboard. One is a simple calculator that doesn't need to interact with a database at all where as another is a list of links for their department.

Rasclatt · Accepted Answer · 2016-07-03 04:25:23Z

This is a basic example of what I have done in the past. I don't know what the standard is, javascript is not my forté, but this seems to work for me. You would have to know how many (numeric count) widgets the user has when the page loads so you can feed that into a counter which your ajax success function decreases as they complete their process. See if it's something that would work in your situation:

DEMO (Slightly altered to work for 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's 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'])));
}

If adding:

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

into each separate ajax call is cumbersome, I would work it into my aEngine so it's happening in the background automatically. The idea is basically that after running the ajax, the counter would be decreased by 1.

Collectives™ on Stack Overflow

Creating Multiple jQuery/Javascript widgets

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related