Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

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

ratika
Level 2
Level 2

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

 

1 Accepted Solution
Manoj_Kumar_
Correct answer by
Community Advisor
Community Advisor

Hello @ratika 

 

There are two ways to do it

1. Via Ajax like @Malarrajan_Sundarraj 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

 

View solution in original post

6 Replies
Malarrajan_Sundarraj
Level 2
Level 2

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_
Correct answer by
Community Advisor
Community Advisor

Hello @ratika 

 

There are two ways to do it

1. Via Ajax like @Malarrajan_Sundarraj 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

 

View solution in original post

David__Garcia
Level 8
Level 8

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
Community Advisor

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.