jquery.md

JQuery разбор кода

../maintenance_controller.rb
class Admin::MaintenanceController < Admin::MyAdminBaseController
  def rake_docs_rebuild
    ...some code here...
    respond_to do |format|
      format.html {
      }
      format.json{
        render :json=>{:res=> 1, :output => a}
      }
    end
  end
end  

../view/maintenance/index.html
...some code here...
%h2 Commands

%ul.list-inline#commands
  %li=link_to 'rebuild docs', '#', :class=>'btn btn-primary btn-sm', :"data-name"=>'command', :"data-cmd"=>'rake_docs_rebuild'
  %li=link_to 'pull ansible', '#', :class=>'btn btn-primary btn-sm', :"data-name"=>'command', :"data-cmd"=>'pull_ansible'

#status_commands.bg-info.well

:javascript
  // commands
  $( '#commands a[data-name="command"]' ).click(function() {
    //$('#status_commands').html("Handler for .click() called." );
    send_command($(this).data('cmd'));
  });

  function send_command(cmd){
    $('#status_commands').html("Sending...");

    $.ajax({
      url: "/cmsadmin/maintenance/" + cmd,
      data: {},
      type: "GET",
      dataType: "json",
      contentType: "application/json",
      beforeSend: function(){
        // Handle the beforeSend event
      },
      success: function(res_data){
        $('#status_commands').html("Result: "+ res_data.output );
      },
      complete: function (res_data) {
      }
    });
  }

$( '#commands a[data-name="command"]' ) - это jquery селектор, возвращает массив линков, которые лежат внутри слоя #commands и сам линк с атрибутом data-name="command"

.click(function() { - это привязывает обработчик события к событию "нажмите кнопку" событие JavaScript, или вызывает данное событие на элемент. (function(){ - Функция для выполнения каждый раз, когда вызывается событие.

send_command($(this).data('cmd')); }); - это вызов своего метода с параметром $(this) (это конкретный линк из возвращаемого массива линков) к которому применяем метод .data('cmd') (который возвращает значение по ключу data-cmd для линка)

function send_command(cmd){ - это объявление своей функции, которую мы вызываем выше с уже найденым нами параметром ($(this).data('cmd') в коде выше, вернул нам значение, которое мы и подставили при объявлении своей функции в cmd)

$('#status_commands').html("Sending..."); - это изменение содержимого HTML-элемента

$.ajax({ - это вызов Ajax запроса, который принимает на вход параметры хеша ключ-значение. Все элементы, которые находятся ниже, являются его параметрами. Подробнее о параметрах см. здесь http://api.jquery.com/jQuery.ajax/

url: "/cmsadmin/maintenance/" + cmd, - это Строка, содержащая URL, к которому направляется запрос.

data: {}, - это данные, которые будут отправлены на сервер. Они преобразуется в строку запроса, если еще не строка. Они добавляются к URL для GET-запросов. Принимает ключ-значение, например data: { "name": "Dan" }

type: "GET", - это, как и method:, метод HTTP, используемый для запроса ("POST", "GET", "PUT").

dataType: "json", - это тип данных, которые вы ожидаете от сервера.

contentType: "application/json", - это при передаче данных на сервер, использовать этот тип контента - спросить у макса конкретнее

beforeSend: function(){// Handle the beforeSend event}, - это обработчик, который может изменять объект перед его отправкой на сервер.

success: function(res_data){
  if(cmd == 'import_index') {
    $('#status_commands').html("Result: "+"everything is indexed");
    }
  else if (cmd == 'pull_ansible') {
    $('#status_commands').html("Result: "+res_data.output);
    }
},

success: - это обработчик, который вызывается, если запрос выполнен успешно. res_data в function(res_data){ - это захэшированные данные, которые возвращаются из контроллера render :json=>{:res=> 1, :output => a}, добраться до которых можно так res_data.output

complete: function (res_data) { } - это обработчик - вызывается при любом ответе от сервера - успешном или нет