2013-02-20 13 views
6

Witam wszystkich Potrzebuję pomocy z metodą ładowania ajax. Zasadniczo muszę użyć Ajax load(), aby wyświetlić jsp na stronie głównej, gdy użytkownik zaznaczy przycisk radiowy. Ive dołączony obraz strony, na której jsp musi być wyświetlany, a także mój kod jsp .. Proszę o pomoc! web pageZaładuj stronę jsp przy użyciu metody ładowania AJAX

<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

Czym są te wszystkie "onclick ="() "'? I co próbowaliście? Czy spojrzałeś na metodę ['.load()'] (http://api.jquery.com/load/) jQuery? –

+0

Przepraszam za zamieszanie .. Próbowałem użyć programu obsługi, aby to zrobić wcześniej, ale nie mogę już pójść tą trasą, usunę ją ... jak dotąd próbowałem tego, ale to nie działa ... $ (document) .ready (function() { $ ('# verification'). Find ('# passed') { $ ("radio"). Click (function() { $ ("# showhidecomment") .load ("sample.jsp"); { } }); – Fahad

Odpowiedz

6

Spróbuj

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

i zmienić swoje html (część łącza) do

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

Od div elementy są nieprawidłowe w elementach a.


aktualizacjaza komentarz

Dodam niestandardową data-url atrybut do tych elementów (aby określić stronę, aby załadować)

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

a następnie zastosować pojedynczy obsługujący je

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

Dzięki @Gaby aka G.Petrioli, Jednak ta funkcja powinna zostać wywołana, gdy użytkownik wybierze przycisk opcji radiowej, a nie link "showhidecomment". Jak mogę zakodować moje pole wyboru, aby działało w ten sposób? – Fahad

+0

@Fahad, który przycisk radiowy? (* Masz wiele takich *) –

+0

aka G.Petrioli, przeszedł, egzekwowanie prawa i powód powrotu.Trzy trzej ładują różne strony – Fahad

2

Jeśli chcesz po prostu ajax załadować stronę można użyć obciążenia jquery: http://api.jquery.com/load/

Istnieje również get jquery: http://api.jquery.com/jQuery.get/

można znaleźć prosty przykład w dokumentacji.

Aktualizacja:

Może trzeba dodać odwołanie do biblioteki jQuery, jeśli nie masz. Proszę zapoznać się z przykładowym kodem poniżej.

Proste strona wyświetla 'Hello world': http://jsbin.com/ivinuw/1/

strona z przyciskiem. Kiedy przycisk kliknięciu używa obciążenia jquery ajax załadować stronę powyżej do pojemnika Gr: http://jsbin.com/ubitat/1/edit

Powiązane problemy