Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

remember order selected using ajax

Hi,

I´m using something like this: http://isotope.metafizzy.co/demos/sorting.html

but I need to execute one ajax function when order is changed (when click another order button)

(once ajax function is executed, I can put on php session wich order is selected)

any Idea how can I do it?

Thanks for your time

User Gravatar

caracol

Posted Dec 9 2013 7:26 UTC

$50


  • Assigned To caracol
  • Solved
  • isotope
    ajax
  • 1017 Views

3 Replies


Hi caracol,

You need to pass the order to the php, and then on page load to insert it as data attribute on body (or other element).

Something like that

<body data-initial-order="name">

Then just check if body have data-initial-order attribute and pass it to the sorting function, after isotope initialisation:

if($('body').attr('data-initial-order')){
    sortIsotopeBy($('body').attr('data-initial-order'));
};

I assume that you have some sorting function (sortIsotopeBy).

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 9 2013 9:18 UTC

Hi Nikola,

thanks for your answer, but that´s not what I need.

I can choose the initial order. The problem is when the order is modified.

when someone clicks the button to change order, I need to call one javascript function. that function will make one ajax request and then php will save in session the order chosen.

now, I have something like this:

      $('#options a.programmatic').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.programmatic, .item' });
      return false;
      });
  $('#options a.location').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.location, .item' });
      return false;
      });
  $('#options a.chronological').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.chronological, .item' });
      return false;
      });      
  $('#options a.scale').click(function(){
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.scale, .item' });
      return false;
      });      

And what I need is something like this:

      $('#options a.programmatic').click(function(){
      ajaxfunction('programmatic');
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.programmatic, .item' });
      return false;
      });
  $('#options a.location').click(function(){
      ajaxfunction('location');
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.location, .item' });
      return false;
      });
  $('#options a.chronological').click(function(){
      ajaxfunction('chronological');
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.chronological, .item' });
      return false;
      });      
  $('#options a.scale').click(function(){
      ajaxfunction('scale');
      var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.scale, .item' });
      return false;
      });      

Thanks for your time

User Gravatar

caracol

Posted Dec 9 2013 10:18 UTC

I´ve found it

just only needed this:

      $('#options a.location').click(function(){
      $.ajax({
          url: "ajaxProjects-list.php?filtro=location",
          context: document.body
        }).done(function() {
        });
  var selector = $(this).attr('data-filter');
      $container.isotope({ filter: '.location, .item' });
      return false;
      });

Thanks very much for your help

User Gravatar

caracol

Posted Dec 9 2013 11:36 UTC

Solution

This didn't solve your task? Get your own custom solution.

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions