0

i have created a simple javascript with rest api call, on button click the code will show a message to the user in a div element with red background-color, and once the ajax call for the creation of the subsite completes it will show a message to the user in the green background-color,

however subsite is getting created successfully, but the issue is message in the red background on the button click is not showing as soon the button is clicked, but the message in the green background is showing up once the subsite creation is successful,

below is the code sample, anyone can please try this sample and let me know if it works as expected.

    <html>
<head>
    <style>
    #subsitediv{
        padding: 10px;
        border: 2px;
        text-align: center;
        text-decoration-line: underline;
        width: 100px;
        height: 50px;
    }
    #subsitecreate{
        width: 120px;
        height: 50px;
    }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#subsitecreate").click(function(){

    $("#message").text("The Subsite Creation is in progress please wait,dont close the window or click anywhere").css('background-color','red');**
var restAPIURL =_spPageContextInfo.webAbsoluteUrl+ "/_api/web/webinfos/add";  
var newSiteData = JSON.stringify(
{
    'parameters': {  
         '__metadata': {   
               'type': 'SP.WebInfoCreationInformation'   
         },  
         'Url': 'hellorestapi',   
         'Description': 'Subsite created from REST API',  
         'Title': 'hellorestapi',  
         'Language': 1033,  
         'WebTemplate': 'STS#0',  
          'UseUniquePermissions': false  
    }  
 });  

$.ajax  
({    
    url: restAPIURL,    
    type: "POST",    
    async: false,  
    data: newSiteData,    
    headers: {  
        "accept": "application/json;odata=verbose",  
        "content-type": "application/json;odata=verbose",  
        "X-RequestDigest": $('#__REQUESTDIGEST').val()  
    },   
    success: function(data){    
         console.log('site created');  
         $("#message").text("The Subsite Creation has completed please verify").css('background-color','green');
    },    
    error: function(data){   
        console.log('Error creating site');   
    }    
}); 

});

});



</script>
</head>

<body>
    <div id="subsitediv">
        Click on the below button to create the subsite
    </div>
    <br/>
    <br/>
    <input type="button" id="subsitecreate"  value="Create Subsite"/>
    <br/>
    <div id="message">  
    </div>
</body>
</html>

The line $("#message").text("The Subsite Creation is in progress please wait,dont close the window or click anywhere").css('background-color','red'); is not executed on the button click i am using the content editor web part

  • Try changing <input type="button"> to <button type="button"></button> – Ankit Katiyar Jul 26 '18 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.