Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load a jsp page using AJAX load method

Tags:

jquery

ajax

Hello everyone I need some help with ajax load method. Basically I need to use Ajax load() to display a jsp within the main page once user checks the radio button. Ive attached the image of the page where the jsp needs to be displayed and also my jsp code.. Please help!web page

   <div id="verification">
    <p align=center class="4f1_title" ><u>Verification Decision</u></p>
     <table border="0" cellpadding="0" cellspacing="0" align=center
width="100%">
<tbody>

    <tr>
        <td width="10%"></td>
        <td width="8%">Passed <input id="passed" type="radio"
            value="P" onclick="()"></td>
        <td colspan="2" width="8%">Pending <input id="pending"
            type="radio" value="H" onclick="()"></td>
        <td width="9%">True Hit <input id="failed" type="radio"
            value="F" onclick="()" disabled></td>
        <td width="13%">Parcel Returned <input id="returned"
            type="radio" value="S" onclick="()"></td>
        <td width="23%">Referred to Law Enforcement <input id="law"
            type="radio" value="L" onclick="()"></td>
        <td width="8%">Retired <input id="retired" type="radio"
            value="R" onclick="()" disabled></td>
              <td width="12%">Return Reason <input id="ac" 
              type="radio" value="C" onclick="()"></td>
         <td width="10%"></td>
    </tr>
         </tbody>
          </table>
         </div>
            <br>

                     <div align=center>
                <a href="javascript:handleClick()"><u>
              <div id='showhidecomment'>Show Comments</div></u></a>
              <div id='chkcomments'>
               </div>
    </div>
     <br>
like image 971
Fahad Avatar asked Feb 20 '13 18:02

Fahad


People also ask

How can I load a page in AJAX?

jQuery - AJAX load() Method The load() method loads data from a server and puts the returned data into the selected element. Syntax: $(selector).load(URL,data,callback); The required URL parameter specifies the URL you wish to load.

Can we use AJAX in JSP?

To create ajax example, you need to use any server-side language e.g. Servlet, JSP, PHP, ASP.Net etc.

What is the use of AJAX () method?

The ajax() method is used to perform an AJAX (asynchronous HTTP) request. All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.

How get data from AJAX call in JSP?

Here is the code: $. post("myscript. jsp", { sg: data1, st: data2 }, function(data){ alert("Data Loaded: " + data); } );


2 Answers

Try

$(function() { // when DOM is ready
    $("#showhidecomment").click(function(){ // when #showhidecomment is clicked
        $("#chkcomments").load("sample.jsp"); // load the sample.jsp page in the #chkcomments element
    }); 
});

And change your html (the link part) to

<div>
    <div id='showhidecomment'>Show Comments</div>
    <div id='chkcomments'></div>
</div>

Since div elements are invalid inside a elements.


update for comment

I would add a custom data-url attribute to those elements (to specify the page to load)

<input id="passed" type="radio" value="P" data-url="some-page.jsp" />
<input id="law" type="radio" value="L" data-url="some-other-page.jsp" />
<input id="ac" type="radio" value="C" data-url="some-third-page.jsp" />

and then apply a single handler to them

$('#verification').on('change','input[type="radio"][data-url]', function(){
    if (this.checked){
        var url = $(this).data('url');
        $("#chkcomments").load( url );
    }
});
like image 123
Gabriele Petrioli Avatar answered Oct 06 '22 21:10

Gabriele Petrioli


If you just want to ajax load a page you can use the jquery load: http://api.jquery.com/load/

There's also the jquery get: http://api.jquery.com/jQuery.get/

You can find a simple example in the documentation.

Update:

You may need to add a reference to the jquery library if you haven't already. Please refer to the sample code below.

Simple page displays 'hello world' : http://jsbin.com/ivinuw/1/

Page with button. When you click button it uses jquery load to ajax load the page above into a div container: http://jsbin.com/ubitat/1/edit

like image 38
uv_man Avatar answered Oct 06 '22 22:10

uv_man