CODEWITHSUNDEEP
javascriptjquery
Haris Khan
Haris Khan

Reputation: 335

Get value of variables outside the function

I am using jquery sortable, I am getting index value of li and its attribute on change. I want to send the index value and attribute value through ajax. Here is my code:

$(function() {
  $('ul').sortable({
    start: function(event, ui) {
      var start_pos = ui.item.index();
      ui.item.data('start_pos', start_pos);
    },
    update: function(event, ui) {
      var start_pos = ui.item.data('start_pos');
      var li_id = $(li).attr('data-id'), // send this value in ajax call
        var end_pos = ui.item.index(); //send this value in ajax call
    }
  });
});

I want to send these values something like this:

$.ajax({
  type: "GET",
  dataType: "json",
  url: `${SiteConfig.staticContentBaseUrl}/sortabletable`,
  data: {
    id: li_id,
    position: end_pos,
    _token: $('meta[name=csrf-token]').attr('content')
  },

How can I get access to variable values outside the function?

Upvotes: 0

Views: 88

Answers (3)

Ramy M. Mousa
Ramy M. Mousa

Reputation: 5933

Keep both functions separate as they are two different jobs actually. 

$(function() {
  $('ul').sortable({
    start: function(event, ui) {
      var start_pos = ui.item.index();
      ui.item.data('start_pos', start_pos);
    },
    update: function(event, ui) {
      var start_pos = ui.item.data('start_pos');
      var li_id = $(li).attr('data-id'), // send this value in ajax call
        var end_pos = ui.item.index(); //send this value in ajax call
      do_ajax(li_id, end_pos); //do ajax here
    }
  });
});

function do_ajax(li_id, end_pos) {
  $.ajax({
    type: "GET",
    dataType: "json",
    async: true, //I added this for better user experience if nothing else depends on it.
    url: `${SiteConfig.staticContentBaseUrl}/sortabletable`,
    data: {
      id: li_id,
      position: end_pos,
      _token: $('meta[name=csrf-token]').attr('content')
    }
  });
}

Upvotes: 1

Rahul Raut
Rahul Raut

Reputation: 633

Without exposing any global variables. 

$(function() {
   var li_id, end_pos;
   $('ul').sortable({
    start: function(event, ui) {
  var start_pos = ui.item.index();
  ui.item.data('start_pos', start_pos);
},
update: function(event, ui) {
  var start_pos = ui.item.data('start_pos');
  li_id = $(li).attr('data-id'), // send this value in ajax call
  end_pos = ui.item.index(); //send this value in ajax call
}
 });
 $.ajax({
   type: "GET",
    dataType: "json",
   url: `${SiteConfig.staticContentBaseUrl}/sortabletable`,
   data: {
     id: li_id,
  position: end_pos,
  _token: $('meta[name=csrf-token]').attr('content')
}
 });
});

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44107

You could declare them outside the function, then assign them inside the function:

var li_id, end_pos;

$(function() {
  $('ul').sortable({
    start: function(event, ui) {
      var start_pos = ui.item.index();
      ui.item.data('start_pos', start_pos);
    },
    update: function(event, ui) {
      var start_pos = ui.item.data('start_pos');
      li_id = $(li).attr('data-id'), // send this value in ajax call
      end_pos = ui.item.index(); //send this value in ajax call
    }
  });
  $.ajax({
    type: "GET",
    dataType: "json",
    url: `${SiteConfig.staticContentBaseUrl}/sortabletable`,
    data: {
      id: li_id,
      position: end_pos,
      _token: $('meta[name=csrf-token]').attr('content')
    }
  });
});

Upvotes: 0

Related Questions