How can we store the data without going to next transition in a webapp | Community
Skip to main content
R
ratika
Level 3
August 26, 2021
Solved

How can we store the data without going to next transition in a webapp

  • August 26, 2021
  • 2 replies
  • 1874 views

Hi,

I am creating a webapp where in there is an option to store mobilenumber on click of button. And once button is clicked the hidden text appears on same html page below the submit button which says thanks for sharing your number.
How can we store the mobile number without going to next transition(storage activity or script) as I do not have html for next page.

 

Thanks

 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Manoj_Kumar

    Hello @ratika 

     

    There are two ways to do it

    1. Via Ajax like @malarrajan_sundar mentioned. In this case you will have to make sure that the jssp page accepts the requests coming from your webapp only. Else anyone with the endpoint can create new records.

    2. Via doing a page refresh -  On clicking on submit button, save the mobile number in ctx variable. andreload the page with window.reload function. On the page reload check if the ctx variable is not blank then do a session write and update the required schema. Once updated then again update the ctx variable value to blank.

     

    Thanks,

    Manoj

     

    2 replies

    M
    Adobe Employee
    Malarrajan_SundarAdobe Employee
    Adobe Employee
    August 26, 2021

    Hi Ratika,

     

    You can achive this using jquery AJAX without going to next transistion.

    1.create JSSP page to handle the storage.

    2.Call the JSSP page as an endpoint in the AJAX post request with parameters.

    3.On success response show the thank you message in the same html page.

     

    - Malarrajan Sundarraj

     

      Manoj_Kumar
      Community Advisor
      Manoj_KumarCommunity AdvisorAccepted solution
      Community Advisor
      August 26, 2021

      Hello @ratika 

       

      There are two ways to do it

      1. Via Ajax like @malarrajan_sundar mentioned. In this case you will have to make sure that the jssp page accepts the requests coming from your webapp only. Else anyone with the endpoint can create new records.

      2. Via doing a page refresh -  On clicking on submit button, save the mobile number in ctx variable. andreload the page with window.reload function. On the page reload check if the ctx variable is not blank then do a session write and update the required schema. Once updated then again update the ctx variable value to blank.

       

      Thanks,

      Manoj

       

      Manoj  | https://themartech.pro
        david--garcia
        david--garcia
        Level 10
        August 26, 2021

        It would be nice if you guys could provide a working sample code, at least for the ajax solution, I am interested also to know a working solution.

        Manoj_Kumar
        Community Advisor
        Manoj_KumarCommunity Advisor
        Community Advisor
        August 26, 2021

        Here is the code for Ajax solution

         

        HTML Code for WebApp 

        <html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
function submitData(){

  var mobile=$('#mobileNumber').val();

  if(mobile=='' || mobile.length != 10){
    $('#formMessage').html("Invalid Mobile number Passed");
    return false;
  }
  
     var form = $('#form');
   $.ajax({
           type: "POST",
           url: "http://localhost:8080/cus/save.jssp",
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
             $('#formMessage').html("Mobile Number saved successfully");
           },
        error: function (data) {
               $('#formMessage').html("Unable to save mobile number");
            },
         });

}
</script>
</head>

<body style="" class="">
<form id="form">
<div id="formMessage"></div>
<input name="mobileNumber" id="mobileNumber" type="text" /> <button id="input16300022829215" onclick="submitData()" type="button">Save</button></form>
</body>
</html>

        JSSP page code 

        <%
logonEscalation('webapp'); 

if(request['method'] != 'POST'){
  return document.write(JSON.stringify({status:'error',error:'Invalid Error'}));
}

var mobileNumber = request.getParameter('mobileNumber');

if(mobileNumber=='' || mobileNumber.length != 10){
return document.write(JSON.stringify({status:'error',error:'Invalid Mobile Number passed'}));
}

xtk.session.Write(<customSchema _operation="insert" mobileNumber={mobileNumber} xtkschema="cus:customSchema"/>);

 
%>

        Note: This is a very lean code to get you started.

        Manoj  | https://themartech.pro
          Terms & ConditionsAccessibility statement

          Loading footer...