Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I am making an app using SharePoint 2013 in which user inputs some text in TextBox, and that text I want to display in button click but that's not happening completely the text gets displayed when the page is loading and disappears after the page is completely loaded.

Here is my code,

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>

    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>

<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

      <div>
    <p id="lblupdate">

        Paragraph
    </p>
      </div>
<asp:Label id="Label1" runat="server" ClientIDMode="Static">FirstName:</asp:Label>&nbsp&nbsp
<asp:Textbox id="Textbox1" runat="server" ClientIDMode="Static"></asp:Textbox><br/><br/>
<asp:Label id="Label2" runat="server" ClientIDMode="Static">Lastname:</asp:Label>&nbsp&nbsp
<asp:Textbox id="Textbox2" runat="server" ClientIDMode="Static"></asp:Textbox><br/><br/>
<asp:Button id="Button1" runat="server" ClientIDMode="Static"></asp:Button><br/><br/>

</asp:Content>


And Client side code,




'use strict';

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

var surname;
var nm;
(function() {

    // This code runs when the DOM is ready and creates a context object which is 
    // needed to use the SharePoint object model
    $(document).ready(function() {
        getUserName();
            $("#Button1").click(function()
            {   
                 nm = $("#Textbox1").val();         
                 surname = $("#Textbox2").val();
            //  $("#Label3").html(""+name+""+surname);
            //  $("#Label3").append(""+name+""+surname);
            //  alert(name+''+surname);
            //  $("#Label3").val(""+name+""+surname);
            //  $("#lblupdate").text(""+name+" "+surname);
                lblupd();
            });  

    });

    // This function prepares, loads, and then executes a SharePoint query to get 
    // the current users information
    function getUserName() {
        context.load(user);
        context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
    }

    function lblupd()
    {
            $("#lblupdate").text(""+nm+" "+surname);    
        //  document.getElementById("#<%lblupdate.ClientID%>").innerHTML=""+name+""+surname;
    }

    // This function is executed if the above call is successful
    // It replaces the contents of the 'message' element with the user name
    function onGetUserNameSuccess() {
        $('#message').text('Hello ' + user.get_title());
        $("#Button1").val("CLick");
    }

    // This function is executed if the above call fails
    function onGetUserNameFail(sender, args) {
        alert('Failed to get user name. Error:' + args.get_message());
    }


})();
share|improve this question

2 Answers 2

up vote 1 down vote accepted

On your success callback 'onGetUserNameSuccess', did you want to auto click the button? If so, replace

$("#Button1").val("CLick");

with

$("#Button1").click();

Since, your #lblUpdate is a paragraph, you may want to update it as:

function lblupd() {
    $("#lblupdate").html(nm + " " + surname);
}

Also, use e.preventDefault(); inside your click event of your button.

$("#Button1").on("click", function(e) {   
    nm = $("#Textbox1").val();         
    surname = $("#Textbox2").val();

    e.preventDefault();
});
share|improve this answer
    
it worked using e.preventDefault(); –  Niranjan Kulkarni Apr 1 at 6:46

The page is not fully loaded at $(document).ready, as you expected.

Try calling your function like this instead:

_spBodyOnLoadFunctionNames.push("getUserName")

See this related post for further details.

share|improve this answer
    
This is an app so spBodyOnLoadFunctionNames will not work as on a normal SharePoint page. SP.Sod.execute is more suitable –  Robert Lindgren Mar 31 at 19:11
    
it worked using e.preventDefault(); –  Niranjan Kulkarni Apr 1 at 6:47

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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