CODEWITHSUNDEEP
javascriptjqueryhtmlajaxjsp
User27854
User27854

Reputation: 884

How to perform two tasks on a single button click or event

I have a button on clicking it, it increments the count value by calling the function incrementIndex. But i would also like to add a String to the array list for the same event. A simple code snippet is provided below.

Java Script

var count=0;
function incrementIndex() {
count += 1;
}

ArrayList

<%
ArrayList arr= new ArrayList();
String ele="3,2";
%>

Button:

<button onclick="incrementIndex()">Button 1</button>

Upvotes: 1

Views: 2630

Answers (4)

Programmer
Programmer

Reputation: 325

You have to first understand how jsp is presented to the user in browser. Whatever is shown to the user in the browser is just html and javascript, having said this whatever java code you  have written in jsp is compiled and processed in JVM itself thus no java variable will be available to the end user in browser for further updation, on the contrary javascript runs in browser so you can do whatever you want with the help of javasscript in browser. 

Now coming to your problem, you have a List in java so its reference won't be available to you in browser so what you can do is you can have a javascript list and assign the java List to it. Now you will have an access to javascript list in the browser, do whatever you want to do with it as add/substract/concat etc and while submitting form, submit the value of that javascript list too in some hidden field and finally in your servlet/controller class you will have latest list using which prepare final updated java List.

Let say you java list is as below:

 <%
    List<Object> javaObjList = new ArrayList<Object>();
 %>

In your jsp assign it to java script variable as below
<script>
 var jsObjList = <%= javaObjList.toArrays()%>
</script>

Have some hidden field in you form as below:

<input type="hidden" name="finalList" id="finalListId"/>

Before form submission call a function which will do as follow:
<script>
function preSubmissionProcessing() {
   document.getElementById("finalListId").val = jsObjList; 
   // make sure jsObjList  is in scope so that accessible to this method
}
</script>

That's it

Upvotes: 0

JTG
JTG

Reputation: 8826

To have a single button click invoke two more tasks (or whatever) simply nest the other tasks into the function bound to onclick

So instead of:

<button onclick="incrementIndex()">Button 1</button>

you will have

<button onclick="increment_and_add_string()">Button 1</button>

then you need to have this code

function increment_and_add_string(){
     incrementIndex();  //this will call the increment function
     arr.add(ele);  //this will call the method add to arr passing it ele.
}

Obviously, you will have some scoping issues, and without more intimate knowledge of where you get arr and ele from, I can't help you there. But the gist is you have called a function that does several tasks, and have bound it to the button click event.

Upvotes: 3

skud
skud

Reputation: 595

You can have a handler function that runs all other functions.

<button onclick="handleButton1Click()">Button 1</button>

<script>
var count = 0,
    stringList = [];

function incrementIndex() {

  count += 1;
}

function addString(string) {

  stringList.push(string)
}

function handleButton1Click(e) {

  addString(e.someEventProperty);
  incrementIndex();
}

</script>

Upvotes: 0

Mark
Mark

Reputation: 4873

call the sring function at the end of the increment function.

$(function(){
   $(#button").click(function(){
  incrementIndex();  //this will call the increment function
 arr.add(ele);  //this will call the method add to arr passing it ele.
});
 });

or something like

$(function(){
   $(#button").click(function(){
   $("#").increment();//what ever your incrementing function is
   $.get("ServerResponce.asp"), function( data ) { // call controller or server action
   $( ".result" ).html( data );
});
});
});

Upvotes: 0

Related Questions