Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Tuesday, August 22, 2017

How to re-order dives based on json value?

How to re-order dives based on json value?



I have a filtering function in my application. User can select how he wants to reorder the users based on wage or rating. I get the correct data with json but I am stuck how to re-order the elements.



div class="col-md-12 profile_thumbnail_box" data-id="1"></div>
and
<div class="col-md-12 profile_thumbnail_box" data-id="4"></div>


Now the first user_id is 4. How can I reorder the dives where the data-id=4 would 
be the first or if there are more users and data returned then how can I position 
them based on the returned user_id value?

EDIT:

Here is the jquery for changing the filters

  //when user changes the filters
  $('.order_listing').on('change', function() {
    // $(".loading-icon").show();
    var users = [];
    $(".profile_thumbnail_box").each(function() {
      var data_ids = $(this).attr("data-id");
      users.push(data_ids);
    });
    console.log(users);
    //data to send
    var filterData = {
      order_type: $(".order_listing").val(),
      lat: localStorage.getItem("latitude"),
      lng: localStorage.getItem("longitude"),
      user_ids : users
    }

    $.ajax({
      type: "POST",
      url: "/search/filters",
      data: filterData,
      dataType: "JSON",
      success: function(data) {
        console.log(data);

        $(".loading-icon").hide();
      },
      error: function(jqXhr, textStatus, errorThrown, data) {
        console.log(jqXhr, textStatus, errorThrown, data);

      }
    });
  });

Asp.net Related Post:



No comments:

Post a Comment