Home/ Questions/Q 9199077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:26:39+00:00

I am making a tab pills for mo filter using zurb foundation. Is it

  • 0

I am making a tab pills for mo filter using zurb foundation.

Is it possible to combine this? I would like to use only 1 function because they are just almost the same just the variable is changing. Is it possible to make it more dynamic. I think .val() is not compatible with definition list.

<dl class="tabs pill">
  <dd class="active"><a class="allTab" href='#'>ALL</a></dd>
  <dd><a class="Tab1" href="#">filter1</a></dd>
  <dd><a class="Tab2" href="#">filter2</a></dd>
  <dd><a class="Tab3" href="#">filter3</a></dd> 
</dl>

JS:

$('.tab1').live('click',function(){
  var dis = $(this);
  var str= "filter1";
    $('#searchForm1').ajaxSubmit({
      type: 'get',
        url: '/sample/search?str='+str,
        beforeSend:function(){
          dis.text('Filtering...');
            dis.css({"font-size":"11px"});    
        },
        success:function(html){
          $('.sample').html(html);
              dis.text('filter1');
                dis.css({"font-size":"14px"});
        },
        error:function() {
          alert('Network Error..Please try again.');
        }
  });
});
$('.tab2').live('click',function(){
  var dis = $(this);
  var str= "filter2";
    $('#searchForm1').ajaxSubmit({
      type: 'get',
        url: '/sample/search?str='+str,
        beforeSend:function(){
          dis.text('Filtering...');
            dis.css({"font-size":"11px"});
        },
        success:function(html){
          $('.sample').html(html);
              dis.text('filter2');
                dis.css({"font-size":"14px"});
        },
        error:function() {
          alert('Network Error..Please try again.');
        }
  });
}); 
$('.tab3').live('click',function(){
  var dis = $(this);
  var str= "filter3";
    $('#searchForm1').ajaxSubmit({
      type: 'get',
        url: '/sample/search?str='+str,
        beforeSend:function(){
          dis.text('Filtering...');
            dis.css({"font-size":"11px"});
        },
        success:function(html){
          $('.sample').html(html);
              dis.text('filter3');
                dis.css({"font-size":"14px"});
        },
        error:function() {
          alert('Network Error..Please try again.');
        }
  });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try it like this:

    <dl class="tabs pill">
   <dd class="active"><a class="allTab" href='#'>ALL</a></dd>
   <dd><a class="tab" id="Tab1" href="#" data-certiria='filter1'>filter1</a></dd>
   <dd><a class="tab" id="Tab2" href="#" data-certiria='filter1'>filter2</a></dd>
   <dd><a class="tab" id="Tab3" href="#" data-certiria='filter1'>filter3</a></dd> 
</dl>

function filterTab(cretiria, clickedTab) {
    $('#searchForm1').ajaxSubmit({
        type: 'get',
        url: '/sample/search?str=' + cretiria,
        beforeSend: function () {
            clickedTab.text('Filtering...');
            clickedTab.css({
                "font-size": "11px"
            });
        },
        success: function (html) {
            $('.sample').html(html);
            clickedTab.text(cretiria);
            clickedTab.css({
                "font-size": "14px"
            });
        },
        error: function () {
            alert('Network Error..Please try again.');
        }
    });
}

$('.tab').live('click', function () {
    var dis = $(this);
    var str = $(this).data("certiria");
    filterTab(str, dis)
});

    Instead of coping the same ajax request code again create a separate function.
    Then use data elements inside that tabs to hold the required filter criteria.
    then use one generic click function that retrieves that data element and sends it to the ajax function to manage the request.

    • 0