How to run a jsp page in a variable of a javascript function

Question

Can I run a jsp page in variable of a javascript function?

My web page looks like this:

I will fill the data in the text boxes but when I click on "Add row" button then a javascript function will be triggered and rows are added dynamically which is as follows.

And the javascript function:

function addRow() {    
    var table = document.getElementById('my_table'); //html table
    var rowCount = table.rows.length; //no. of rows in table
    var columnCount =  table.rows[0].cells.length; //no. of columns in table          
    var row = table.insertRow(rowCount); //insert a row            

    var cell1 = row.insertCell(0); //create a new cell           
    var element1 = document.createElement("input"); //create a new element           
    element1.type = "checkbox"; //set the element type 
    element1.setAttribute('id', 'newCheckbox'); //set the id attribute   
    element1.setAttribute('checked',true); //set checkbox by default checked  
    cell1.appendChild(element1); //append element to cell

    var cell2 = row.insertCell(1);            
    var element2 = document.createElement("input");            
    element2.type = "text"; 
    element2.setAttribute('id', 'newInput'); //set the id attribute
    element2.setAttribute('name', 'sl'+rowCount);
    element2.setAttribute('style', 'width: 50px');
    cell2.appendChild(element2);      

    var cell3 = row.insertCell(2);            
    var element3 = document.createElement("input");            
    element3.type = "textarea"; 
    element3.setAttribute('rows', '4');
    element3.setAttribute('cols','40');
    element3.setAttribute('id', 'newInput'); //set the id attribute
    element3.setAttribute('name', 'discription'+rowCount);
    cell3.appendChild(element3);         

    var cell4 = row.insertCell(3);            
    var element4 = document.createElement("input");            
    element4.type = "text"; 
    element4.setAttribute('id', 'newInput'); //set the id attribute
    element4.setAttribute('name', 'quantity'+rowCount);
    cell4.appendChild(element4);


    var cell5 = row.insertCell(4);            
    var element5 = document.createElement("input");            
    element5.type = "text"; 
    element5.setAttribute('id', 'newInput'); //set the id attribute
    element5.setAttribute('name', 'price'+rowCount);
    cell5.appendChild(element5);



    var cell6 = row.insertCell(5);            
    var element6 = document.createElement("input");            
    element6.type = "text"; 
    element6.setAttribute('id', 'newInput'); //set the id attribute
    element6.setAttribute('name', 'CST'+rowCount);
    element6.setAttribute('style', 'width: 50px');
    cell6.appendChild(element6);


    var cell7 = row.insertCell(6);
    var element7 =  window.href("www.google.co.in");
    element7.setAttribute('id', 'vat5'); //set the id attribute 
   element7.setAttribute('name','tax'+rowCount);
   element7.setAttribute('value','vat5');

   cell7.appendChild(element7);
}

Whenever I click on "Addrow" function then at the last cell which is "Vat5.5", a jsp page should run and the data present in jsp page should be displayed in the cell which is "Vat5.5". I tried using window.href and window.location but they are navigating to the jsp page and displaying the data. But my requirement is to display the data of jsp page in the cell itself. I dont know whether this will be possible or not.

Edit: I tried using ajax but it's not working properly

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
    var cell7 = row.insertCell(6);
    var element7 = $.ajax({
        url: "/SalesPropeller/Admin/Sales/goal.jsp",
        success: function() {
            alert("success");
        },
        error: function() {
            alert("Your error");
        },

    });


   element7.setAttribute('id', 'vat5'); //set the id attribute 
   element7.setAttribute('name','tax'+rowCount);
   element7.setAttribute('value','vat5');

   cell7.appendChild(element7);
    }

goal.jsp

<body>
 <div id="welcomeDiv"  style="display:none;" class="answer_list">WELCOME</div>
</body>

Seems like you could use ajax. Are you using any specific javascript framework? — Niks
– Niks, Commented Jun 16, 2016 at 7:03
@Nikhil No i am not using any framework.I am just using that function only — FIFA oneterahertz
– FIFA oneterahertz, Commented Jun 16, 2016 at 7:05
Ok. So the idea is, on click of your button, you make an ajax GET request to fetch data from jsp, on receiving response, you call your original addRow(response) function which will render this data. You can use pure javascript for ajax requests, but would be easier to use a library like jQuery — Niks
– Niks, Commented Jun 16, 2016 at 7:13
@Nikhil Can you give an example code or a website because i dont anything about ajax and jquery — FIFA oneterahertz
– FIFA oneterahertz, Commented Jun 16, 2016 at 7:18
Use your google skills :) w3schools can be a good place to start with. For an ajax demo, refer this fiddle jsfiddle.net/GRMule/WQXXT — Niks
– Niks, Commented Jun 16, 2016 at 7:22

Xavier Lambros · Accepted Answer · 2016-06-17 10:58:57Z

1

Javascript is client side whereas JSP is server side. So you don't have choice to ask server datas. Two possibilities depending what you need are ajax or websocket.

Like in the comment ajax can be called with pure javascript or easily with jquery like this :

$.ajax({
        url: url + "/yourjsp.jsp",
        data: "parameter=" + yourOptionelParameter,
        async: false,
        success: function(data) {
            addRow(data);
        },
        error: function() {
            alert("Your error");
        },
        contentType: 'charset=utf-8'
    });

To use jquery, you have to donwload jquery library and put it in your resources : https://code.jquery.com/jquery-3.0.0.min.js

And insert it with :

<script src="jquery-3.0.0.min.js"></script>

Now you can reach the JSP, you have to present your datas using for exemple JSON (encoding serverside) : https://javaee-spec.java.net/nonav/javadocs/javax/json/JsonObjectBuilder.html

edited Jun 17, 2016 at 10:58

answered Jun 16, 2016 at 8:46

Xavier Lambros

87612 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

FIFA oneterahertz Over a year ago

Parameter?? I dont have any parameter

Niks Over a year ago

Please remove the jsf part. It's rather confusing in this context

Niks Over a year ago

@FIFAoneterahertz parameter is optional. you can skip the data part completely.

FIFA oneterahertz Over a year ago

@Nikhil you can see in the question in which i edited and wrote the code of what i did.But its still not working.So if you check that and can tell whether i have to make any changes.

Niks Over a year ago

you need to understand how ajax works. It's async, your code has flaws - one of which is your assumption that ajax works in sync. Follow @Xavier's approach, it's on the right path.

|

Collectives™ on Stack Overflow

How to run a jsp page in a variable of a javascript function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related