1

I am trying out JSOM in Sharepoint 2016. I have made a WebPart containing the following code -

<div id="user-output"></div>
Movie Title: <input type="text" id="movie-title" /><br />
Description: <input type="text" id="movie-description" /><br />
<button type="button" id="submit-button">Add Movie</button>

<div id="movies-output"></div>

<script type="text/javascript" src="/SiteAssets/jquery-3.2.1.min.js"></script>
<script type="text/ecmascript" src="../_layouts/15/SP.UserProfiles.js"></script>

<script type="text/javascript">
    $(function () {

        $('#submit-button').on('click', function () {
            var context = SP.ClientContext.get_current();
            var movies = context.get_web().get_lists().getByTitle('Movies');
            var movieCreationInfo = new SP.ListItemCreationInformation();
            var movie = movies.addItem(movieCreationInfo);
            movie.set_item("Title", $('#movie-title').val());
            movie.set_item("MovieDescription", $('#movie-description').val());
            movie.update();
            context.load(movie);

            context.executeQueryAsync(success, failure);
        });

        function success() {
            $('#movies-output').text('Created movie!');
        }

        function failure() {
            $('#movies-output').text('Something went wrong');
        }

        var upp;

        // Ensure that the SP.UserProfiles.js file is loaded before the custom code runs.
        //SP.SOD.executeOrDelayUntilScriptLoaded(getUserProperties, 'SP.UserProfiles.js');
        SP.SOD.executeFunc('userprofile', 'SP.UserProfiles.PeopleManager', getUserProperties);
        //SP.SOD.executeFunc('SP.UserProfiles.js', getUserProperties);

        function getUserProperties() {

            // Get the current client context and PeopleManager instance.
            var clientContext = new SP.ClientContext.get_current();
            var peopleManager = new SP.UserProfiles.PeopleManager(clientContext);

            upp = peopleManager.getMyProperties();
            clientContext.load(upp, 'UserProfileProperties');
            clientContext.executeQueryAsync(onRequestSuccess, onRequestFail);
        }

        // This function runs if the executeQueryAsync call succeeds.
        function onRequestSuccess() {
            $('#user-output').html('User Name: ' + upp.get_userProfileProperties()['PreferredName'] +
                '<br/>Department: ' + upp.get_userProfileProperties()['Department'] +
                '<br/>Designation: ' + upp.get_userProfileProperties()['Title'] +
                '<br/>Employee ID: ' + upp.get_userProfileProperties()['EmployeeID'] +
                '<br/>Branch Code: ' + upp.get_userProfileProperties()['branchCode']
                );
        }

        // This function runs if the executeQueryAsync call fails.
        function onRequestFail(sender, args) {
            $('#user-output').text("Error: " + args.get_message());
        }
    });

What this code does is -

  1. Show user information in user-output div at document load ready
  2. Saves a movie record when Add Movie button is clicked

However, for some reason, when Add Movie button is clicked, the code adds two movies instead of one. I think it has something to do with the ClientContext. But I am not sure why, or how to solve it. Can anyone help?

0

I am not sure how it happened, or if it's a bug, but while fiddling with the page source to find out why double posting was occurring,

I saw that my web part code was being rendered twice in the page. One part was visible, and another was under a hidden div.

However, when I went to edit page to delete the hidden web part, I couldn't. So I restored my page to the template version and re-added the web part.

After that the web part was working correctly. There were no problems with the code.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.