Load a jsp page using AJAX load method

Question

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!

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

Answer 1

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 );
    }
});

Answer 2

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