CODEWITHSUNDEEP
javascriptjquery
franco
franco

Reputation: 2047

loading jsp page into div

I want to load my jsp page in a div

I have in my main js a table which has two column the first one is for the menu the second is for the div

I try without sucess with thsi code:

<script src="/test/extjs/jquery-latest.min.js" type="text/javascript"></script>
    <script src="/test/extjs/jquery.min.js" type="text/javascript"></script>

 $(function() {


        $('a').click(function() {
            $('#divpage').load($(this).attr('href'));
            return false;
        });
    });


 <table width="100%" height="100%">
     <tr>
     <td width="10%" height="100%"><div id='cssmenu'>
    <ul id="idGmenu">
       <li style="display: none;><a href="#"><span>Home</span></a></li>
       <li><a href="#"><span><spring:message code="taifSettingUP"/></span></a>
          <ul>
             <li class="current"><a href="/test/citizen.htm"><spring:message code="taifSettingCitizenUP"/></a></li>
             <li><a href="/test/encodingType.htm"><spring:message code="taifSettingTypeUP"/></a></li>

          </ul>
       </li>

       <li><a href='#'><span><spring:message code="taifCancellationsSuspensions"/></span></a>   
       <ul>
             <li><a href="/test/cancellSuspension.htm"><spring:message code="taifCancellationsSuspensions"/></a></li>       
          </ul>
       </li>
         <li><a href='#'><span><spring:message code="taifConsultingUP"/> </span></a>  
       <ul>
             <li><a href="/test/consultingOwner.htm"><spring:message code="taifConsultingOwnerUP"/></a></li>      
              <li><a href="/test/consultingDetailsUP.htm"><spring:message code="taifConsultingUPDetails"/></a></li>       
          </ul>
       </li>
    </ul>
    </div></td>
     <td  width="90%" height="100%"> 


        <div id="divpage"></div>    



    </td>
     </tr>
     </table>

the first js jquery-latest.min.js is for the css menu

the second js jquery.min.js is for the loading jsp page into div

Upvotes: 1

Views: 9286

Answers (2)

eg_dac
eg_dac

Reputation: 701

Have you tried returning an error.

$('#divpage').load($(this).attr('href'), function( response, status, xhr ) {
  if ( status == "error" ) {
    var msg = "Sorry but there was an error: ";
    $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
  }
});

Also, there is a 
$(document).on("ajaxStop", function(){

});

this runs when all the ajax on the page is done. alternatively there is an event called ajaxComplete.

Upvotes: 0

huncyrus
huncyrus

Reputation: 658

Your jquery snippet is good. Not fail-safe but working, just use it correctly (dont forget the <script></script> tags... Try to avoid the unneccessary tags and tables.

test.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
     $(function() {
            $('a').click(function() {
                $('#divpage').load($(this).attr('href'));
                return false;
            });
        });
    </script>
</head>
<body>
    <ul>
        <li><a href="#">NO CONTENT HERE!*</a></li>
        <li><a href="a.html">Show me the SO site!</a></li>
    </ul>
    <div id="divpage">Content is coming!</div>
</body>

a.html

<html><head></head><body><h1>Hello, i'm the a.html!</h1></body></html>

Upvotes: 1

Related Questions