Question

I am having a php template where i have a leftmenu as accordin jquery menu. In this menu i had menu items .When i click the menu item, page related to this menu item to be loaded into the div in the right side of the page without refresh.I am giving you the screenshot of the page.

Can anyone help me in this regard,

Thank you in advance
Ramsai

here is the code of left menu.php

<div  id="leftmenu">
  <div class="urbangreymenu">
    <h3 class="headerbar"><a href="#">BREAST</a></h3>
     <ul class="submenu">
      **<li><a href="breast.php">Breast/a></li>**
      </ul>
    <h3 class="headerbar"><a href="#">CVS</a></h3>

    <ul class="submenu">
      <li><a href="#">CHEST PAIN</a></li>
      <li><a href="#">CHEST PAIN MASTER</a></li>
      <li><a href="#">DIZZINESS-VERTIGO-LOC</a></li>
      <li><a href="#">LOCAL-LEG-GENERALISED SWELLING</a></li>
      <li><a href="#">SHORT OF BREATH(+PND)</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">ENT</a></h3>
    <ul class="submenu">
      <li><a href="#">EAR</a></li>
      <li><a href="#">NOSE</a></li>
      <li><a href="#">THROAT</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">GENERAL</a></h3>
    <ul class="submenu">
      <li><a href="#">FATIGUE-MALAISE</a></li>
      <li><a href="#">FEVER</a></li>
      <li><a href="#">SKIN RASH & PRURITIS</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">GIT</a></h3>
    <ul class="submenu">
      <li><a href="#">ABDOMINAL DISTENTION</a></li>
      <li><a href="#">ABDOMINAL PAIN</a></li>
      <li><a href="#">BLACK STOOLS</a></li>
      <li><a href="#">CONSTIPATION</a></li>
      <li><a href="#">DIARRHEA</a></li>
      <li><a href="#">NAUSEA-VOMITING</a></li>
    </ul>

    <h3 class="headerbar"><a href="#">NEUROLOGY</a></h3>
    <ul class="submenu">
      <li><a href="#">APHASIA & SLURRED SPEECH</a></li>
      <li><a href="#">BALANCE-TREMORS-PARALYSIS</a></li>
      <li><a href="#">HEADACHE</a></li>
      <li><a href="#">SEIZURES-MEMORY LOSS-CONFUSION</a></li>
      <li><a href="#">TINGLING-NUMBNESS</a></li>
    </ul>

     <h3 class="headerbar"><a href="#">PULMONARY</a></h3>
     <ul class="submenu">
      <li><a href="#">COUGH</a></li>
     </ul>
  </div>
</div>

And here is my loading code:

<div id ="content">
<script>
$.get('breast.php', function(data) {
$('.content').html(data);
});
</script>

</div>

When i click the menu item then the related page should come in that div

Thank you in advance,
Ramsai

Answer 1

                    $(document).ready(function () {
                        $('#leftmenu').find('a[href*=".php"]').live('click', function (e) {
                            e.preventDefault();

                            $.get($(this).attr('href'), function (data) {
                                $('.content').html(data);
                            });
                        });
        //Or

                    $('#leftmenu').find('a[href*=".php"][class*="MyWebLink"]').live('click', function (e) {
                        e.preventDefault();
if(!$(this).hasClass('Alreadyloaded')){

                        var Url = $(this).attr('href');

                        $.ajax({
                            url: Url, type: 'Get', dataType: 'json',
                            //data: { value: $(this).data('value') },
                            success: function (data) {
                                $('.content').append(data);
    //Or
                                $('.content').prepend(data);

                                $(this).addClass('Alreadyloaded');
                            }
                        });
}
                    });
                    });