Get Subsite context from Root Site SharePoint Hosted App

Question

I'm creating SharePoint Hosted App to create sub-sites for users. After creation I've to modify the user permissions on newly created Subsite. I'm trying following code.

function createSite()
    {
        var context = new SP.ClientContext.get_current();
        hostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
        appWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
        var hostcontext = new SP.AppContextSite(context, hostUrl);
        var web = hostcontext.get_web();
        context.load(web);
        var webTemplates = web.getAvailableWebTemplates(1033, false);
        context.load(webTemplates);
        context.executeQueryAsync(function () {
            var enumerator = webTemplates.getEnumerator();
            var customTemplate;
            while (enumerator.moveNext()) {
                var webTemplate = enumerator.get_current();
                var webTitle = webTemplate.get_title();
                if (webTitle == templateTitle) 
                {
                    customTemplate = webTemplate.get_name();
                    break;
                }
            }
            //Sub-site creation code
            context.executeQueryAsync(function () {
                alert("Site Created Successfully. Granting Permission started");
                var title = $("#txtSiteTitle").val();
                var eidNumber = $('#txtEID').val();
                var templateTitle = $('#siteType :selected').text()
                var clientUrl = title + eidNumber + templateTitle;
                clientSiteURL = hostUrl + "/" + clientUrl;
                BreakLibraryPermission(clientSiteURL)
            },
            function (sender, args)
            {
                alert("Site Creation Error:"+args.get_message());
            }
                );
        },
            function (sender, args) {
                alert("Get Template Error:"+args.get_message())
            }
        );

    }
    function BreakLibraryPermission(clientSiteURL)
    {
        var context = new SP.ClientContext(appWebUrl);
        var factory = new SP.ProxyWebRequestExecutorFactory(appWebUrl);
        context.set_webRequestExecutorFactory(factory);
        var appContextSite = new SP.AppContextSite(context, clientSiteURL);
        var web = appContextSite.get_web();
        context.load(web);
        context.executeQueryAsync(Function.createDelegate(this, successHandler), Function.createDelegate(this, errorHandler));
        function successHandler() {
        alert("success" + web.get_title());
        }
        function errorHandler() {
            alert("Request failed: message = " + arguments[1].get_message());
        }

    }

Here in BreakLibraryPermission() function, inside successhandler, I'm not getting subsite context, In console I'm getting Uncaught ReferenceError: web is not defined error.

Answer 1

The problem is with executeQueryAsync function in your GetSubSitePermission().

executeQueryAsync function does not behave in sequential manner. So, you have to do some work around to force this function to behave as synchronously.

Please refer Calling asynchronous JavaScript functions in a sequential manner. Here you will come to know what is your problem and how to get rid of this issue.

Other references are:

1. how to call executeQueryAsync() to behave synchronously?
2. executeQueryAsync synchronously in each loop for sharepoint javascript model

Update:

Just try replacing following line from your BreakLibraryPermission function:

var web = appContextSite.get_web();

to

web = appContextSite.get_web();