0

how can i keep save data in a text box even after i reload the page. i have made a text box and save button. when we click save button it save data in the list. but the data in the text box should not be deleted even after reloading the page, just like as sticky note. how can i perform this functionality?

error: and an error in this code is, that the data i am saving in list also appearing under the text box in the web part.

JS:

$("#btnSubmit").click(function(){
    alert("The paragraph was clicked.");
    var new_task = $('#StickyText').val();
    $('#list').append('<li>'+new_task+'</li>');
    AddData()
});
function myFunction() {
    alert("I am an alert box!");

}
function AddData() {
    var listName = "StickyNotes";
    var newItemTitle = $("#StickyText").val();
    var url = "https://instantdk.sharepoint.com/teamsite";
    addListItem(url, listName , newItemTitle)
}

// CREATE Operation
// listName: The name of the list you want to get items from
// weburl: The url of the web that the list is in. 
// newItemTitle: New Item title.
// success: The function to execute if the call is sucesfull
// failure: The function to execute if the call fails
function addListItem(url, listname, metadataName) {
    var itemType = GetItemTypeForListName(listname);
    var taskProperties = {
        '__metadata': { 'type': itemType },
        'Title': metadataName
    };

    createListItem(_spPageContextInfo.webAbsoluteUrl, listname, taskProperties)
    .done(function (data) {
        console.log('Task has been created successfully');
    })
    .fail(function (error) {
        console.log(JSON.stringify(error));
    });
}
function createListItem(webUrl, listName, itemProperties) {
    return getFormDigest(webUrl).then(function (data) {

        return $.ajax({
            url: webUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
            type: "POST",
            processData: false,
            contentType: "application/json;odata=verbose",
            data: JSON.stringify(itemProperties),
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": data.d.GetContextWebInformation.FormDigestValue
            }
        });
    });
}

function getFormDigest(webUrl) {
    return $.ajax({
        url: webUrl + "/_api/contextinfo",
        method: "POST",
        headers: { "Accept": "application/json; odata=verbose" }
    });
}
// Get List Item Type metadata
function GetItemTypeForListName(name) {
    return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}

HTML:

<link rel="stylesheet" type="text/css" href="https://instantdk.sharepoint.com/SiteAssets/sticky_note.css">
<h2> Sticky Notes </h2>
<br />




<textarea rows="7" cols="50" id="StickyText" >

</textarea>

<input id="btnSubmit" type="button" value="Save"  />
<ul id="list">

</ul>

 <script src='https://instantdk.sharepoint.com/Style Library/Scripts/jquery-2.1.4.js'></script>
<script src='https://instantdk.sharepoint.com/SiteAssets/sticky_note.js'></script>
  • to save data can i call onFocusOut function? if yes, how? – Fazeel Bin Nadeem Oct 13 '16 at 13:39
  • Please tell me if i need to save and update data only in one item of the list, i dont want to increase list items, what changes are required in my code? and now i will use the same function in focus out, i will not use local storage, so please guide me on it – Fazeel Bin Nadeem Oct 14 '16 at 9:52
0

two methods. either use hidden field.

or Jquery way:

to save:

  $( "#StickyText" ).focusout(function() {
     var stickTextToSave = $('#StickyText').val();
     localStorage.setItem("saveText", stickTextToSave);
  })

to load on page load:

  $(document).ready(function() {
     $( "#StickyText" ).val(localStorage.getItem("saveText"));
  });
  • thank you so much, but please tell me if i need to save and update data only in one item of the list, i dont want to increase list items, what changes are required in my code? and now i will use the same function in focus out, i will not use local storage, so please guide me on it – Fazeel Bin Nadeem Oct 14 '16 at 9:51

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.