how to check if partial view is loaded and then load javascript

Question

I have a query regarding an issue. As my application using Partial views and these partial views are loaded by ajax call and each partial view usage javascript and include js file, which eventually calls database to bind the data for that particular view. Now, loading the view is taking more time than expected, as it loads js file and that js file makes another call to server to pull the records. I want my view to be loaded and then js file which makes db call to bind data. something like below -

If(partialview is loaded) load js file , which will make ajax call and db eventually to bind data.

This will at least load the view and user will have something to see instead of waiting for blank background with loader. Below is the script through which i am loading PartialView.

    function loadview(action, hassubmenu, _fromtab) {
    if (hassubmenu == 'true') {
        return false;
    }
    if (!_fromtab) {
        $('.process').show();
        $('.mainbody').html('');
    }
    // call ajax to load view
    $.ajax({
        url: urlheader + "Home/LoadView/",
        type: 'POST',
        data: {
            'view': action
        },
        success: function (data) {
            // This outputs the result of the ajax request                       
            $('.process').hide();
            if (!_fromtab) {
                $('.mainbody').html('').html(data);
                // disable appfilter from start screen
                var ostype = $('select#selection').find('option:selected').data('ostype');
                var did = $('select#selection').find('option:selected').val();
                if (ostype.toLowerCase() == 'ios' && action == 'Start') {
                    $('div.appfilter').hide();
                    $('#liAppFilter').hide();
                }
                getsyncinfo(did, false);
                if (_currenttab != undefined) {
                    reloadCurrentFilterTab(_currenttab);
                }
            }
            else
                $('.chicoAppsUrlsDetails').html('').html(data);
        },
        error: function (errorThrown) {
            console.log(errorThrown);
        }
    });
}

Answer 1

If I understand correctly, js events aren't firing for html inside your partial views (those of which are ajaxed)

This is because the html being loaded onto the page is coming after the js (which is binding your events).

You need to place any events on doms inside the partial view onto the document element instead with the jquery on method to specify a selector.

eg.

$(document).on('click', '.some-class', function(){
  //do stuff
});

this way, you can add partials to the page with ajax and the doms within the partial will still fire events.