specific div load function using jquery/javascript

Question

<section class="s_features">
        <center>
          <h4 style="padding-top: 1%;padding-bottom: 1%;font-family:timesnewroman;">PRODUCTS</h4>
        </center>
        <div class="container hidden-xs" id="moto" style="">
          <div class="container">
            <div class="row">

                <div class="col-md-2">
                  <a id="bgc" href="/shop/category/light-bulb-4" class="btn btn-default">
                    <img class="img img-responsive padding-xl" src="/web/image/426/2543.png" alt="Odoo image and text block" data-original-title="" title="" style="">
                    <span style="font-family:timesnewroman;">BULB</span>
                  </a>
                  <br>
                </div>
                <div class="col-md-2">
                  <a id="bgc5" href="/shop/category/light-tube-light-9" class="btn btn-default">
                    <img class="img img-responsive center-block padding-large" src="/web/image/707/png.png" alt="Odoo image and text block" data-original-title="" title="" style="">
                    <span style="font-family:timesnewroman;">TUBE LIGHT</span>
                  </a>
                  <br>
                </div>

          </div>
        </div></div></section>

<div class="col-md-9" id="products_grid">
<table id="tabdiv">
    ---here the product images are displayed when I click 'a' tag 
</table>
</div>

I want to load only products_grid div id .. when I click another 'a' tag..

for example.. when I click id="bgc".. the product will be displayed in products_grid div... then I click id="bgc5" the products_grid div only will be loaded without reload the whole page... I tired jquery function..

<script type="text/javascript">
    $(function(){

         $('#bgc').on('click',function(){
         alert('clicked');
         var url='/shop/category/type-bulb-4';
           $('#products_grid').load(url+ '#tabdiv');
           });
     });
 </script>

But its not working..

Answer 1

You need to change href to href="#" or data-url like this

<section class="s_features">
    <center>
      <h4 style="padding-top: 1%;padding-bottom: 1%;font-family:timesnewroman;">PRODUCTS</h4>
    </center>
    <div class="container hidden-xs" id="moto" style="">
      <div class="container">
        <div class="row">

            <div class="col-md-2">
              <a id="bgc" data-url="/shop/category/light-bulb-4" class="btn btn-default">
                <img class="img img-responsive padding-xl" src="/web/image/426/2543.png" alt="Odoo image and text block" data-original-title="" title="" style="">
                <span style="font-family:timesnewroman;">BULB</span>
              </a>
              <br>
            </div>
            <div class="col-md-2">
              <a id="bgc5" data-url="/shop/category/light-tube-light-9" class="btn btn-default">
                <img class="img img-responsive center-block padding-large" src="/web/image/707/png.png" alt="Odoo image and text block" data-original-title="" title="" style="">
                <span style="font-family:timesnewroman;">TUBE LIGHT</span>
              </a>
              <br>
            </div>

      </div>
    </div></div></section>
<div class="col-md-9" id="products_grid">
<table id="tabdiv">
</table>
</div>

js

<script type="text/javascript">
$(function(){
     $('#bgc').on('click',function(){
     //var url = $(this).data('url');
     // if you want to display image in table 
    $('#tabdiv').html($(this).html());   
    $('#tabdiv').find('span').remove();
   });
 });
</script>