Create a sub-site using a JavaScript Button

Question

I have been trying to create a button which will add a new sub-site to an existing site. This is the JavaScript code I have currently. I also have a button which calls the createNewSite() method.

//Global Variables
var web;
var clientContext;

function createNewSite(){
    //get the current site that the javascript is being run on
    clientContext = new SP.ClientContext.get_current();
    web = clientContext.get_web();
    //load the web object data
    clientContext.load(web);
    clientContext.executeQueryAsync(succeed, fail);
}

//Async Call succeeded
function succeed(){
    console.log("First ExecuteQuery Succeeded");
    //Create an object containing the necessary creation information
    var newWeb = new SP.WebCreationInformation();
    newWeb.set_description('New Description');
    newWeb.set_title('New Title');
    newWeb.set_url("sites/Test/JSOMTest/NewSite");

    //add the new web based on creation information
    var newPage = web.get_webs().add(newWeb);
    web.update();

    //Try to save changes
    clientContext.load(web);
    clientContext.executeQueryAsync(finished, fail); //---this call fails---//
}

//Async call to SharePoint failed
function fail( sender, args ) {
    alert("Much Fail");
    alert("Error: " + args.get_message());
}

//Completed successfully 
function finished(){
    alert("Much Success");
}

This code runs until the second execute query at which point it fails, giving the message "Error: Value cannot be null."

I have tried various methods suggested by other questions on this topic, all which give me the same problem. Which makes me think that I am doing something more fundamental wrong.

When testing to try to identify the problem adding the line console.log(web.get_title()); (shown in asterisks in the code below) creates an error, saying:

"Uncaught Error: The property or field 'Title' has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested."

It then terminates execution.

//Global Variables
var web;
var clientContext;

function createNewSite(){
    //get the current site that the javascript is being run on
    clientContext = new SP.ClientContext.get_current();
    web = clientContext.get_web();
    //load the web object data
    clientContext.load(web);
    clientContext.executeQueryAsync(succeed, fail);
}

//Async Call succeeded
function succeed(){
    console.log("First ExecuteQuery Succeeded");
    ***console.log(web.get_title());***
    //Create an object containing the necessary creation information
    var newWeb = new SP.WebCreationInformation();
    newWeb.set_description('New Description');
    newWeb.set_title('New Title');
    newWeb.set_url("sites/Test/JSOMTest/NewSite");

    //add the new web based on creation information
    var newPage = web.get_webs().add(newWeb);
    web.update();

    //Try to save changes
    clientContext.load(web);
    clientContext.executeQueryAsync(finished, fail);
}

//Async call to SharePoint failed
function fail( sender, args ) {
    alert("Much Fail");
    alert("Error: " + args.get_message());
}

//Completed successfully 
function finished(){
    alert("Much Success");
}

*asterisks are to show the additional line and are not included in the executable code

If anyone knows why this is not working, what I am doing wrong and/or how to actually do this your help would be greatly appreciated.

Answer 1

Too much code :)

Have Modified, Simplified and Tested the below working code:

function createNewSite() {

    var clientContext = new SP.ClientContext.get_current();
    var web = clientContext.get_web();

    var newWeb = new SP.WebCreationInformation();
    newWeb.set_title('New Title');
    newWeb.set_description('New Description');  
    newWeb.set_url('NewSite');

    web.get_webs().add(newWeb);
    web.update();

    clientContext.executeQueryAsync(function(data){
        console.log("success");
    },function(sender, args){
        console.log("failure" + args.get_message());
    });
}

Modified from here - Create site with jsom in sp hosted app