2013-02-20 80 views
6

大家好,我需要一些关于ajax加载方法的帮助。基本上我需要使用Ajax load()在用户检查单选按钮后在主页面中显示一个jsp。我附上了需要显示jsp的页面图像以及我的jsp代码..请帮助! web page使用AJAX加载方法加载jsp页面

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

这些都是'onclick =“()”'?你有什么尝试?你看过jQuery的['.load()'方法](http://api.jquery.com/load/)吗? – 2013-02-20 18:36:13

+0

对不起,混乱..我试图使用一个处理程序来做到这一点,但我不能再去那个溃败了,我会删除它..到目前为止,我试过这个,但它不工作.. $(document).ready(function (){('#verification')。find('#passed'){ $(“radio”)。click(function(){(“#showhidecomment”)。load(“sample.jsp” ); { } }); – Fahad 2013-02-20 18:55:02

回答

6

尝试

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

,改变你的HTML(链接部分)到

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

由于div元素在a元素内无效。


更新发表评论

我想自定义data-url属性添加到这些元素(到指定页面加载

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

,然后申请一个给他们的句柄

$('#verification').on('change','input[type="radio"][data-url]', function(){ 
    if (this.checked){ 
     var url = $(this).data('url'); 
     $("#chkcomments").load(url); 
    } 
}); 
+0

Thanks @Gaby aka G.Petrioli,但是,当用户选择单选按钮而不是'showhidecomment'链接时,应该调用这个函数。 – Fahad 2013-02-26 17:21:45

+0

@法哈德,哪个单选按钮?(*你有很多*) – 2013-02-26 18:26:32

+0

aka G.Petrioli,通过,执法和退货原因。所有三个加载不同的页面 – Fahad 2013-02-26 18:31:49

2

如果你只是想AJAX加载,你可以使用jQuery的负载页:http://api.jquery.com/load/

还有jquery的得到:http://api.jquery.com/jQuery.get/

您可以找到文档中一个简单的例子。

更新:

您可能需要添加一个引用了jQuery库,如果你还没有准备好。请参阅下面的示例代码。

简单的页面显示 '世界你好':http://jsbin.com/ivinuw/1/

页与按钮。当你点击按钮,它使用jQuery的负载AJAX加载页面上方为一个div容器: http://jsbin.com/ubitat/1/edit