Метод jquery .val () внутри запроса на выборку динамически сгенерированного элемента - PullRequest
Новая
       10

Метод jquery .val () внутри запроса на выборку динамически сгенерированного элемента

0 голосов
/ 25 июня 2018

Я пытаюсь создать повторно используемую функцию, которая присоединяет обработчики кликов к серии динамически создаваемых элементов.Это не проблема (я думаю).Большинство обработчиков кликов включают запросы на выборку, полезная нагрузка которых является пользовательским вводом.Вот код, который я придумал.В настоящее время значения как для электронной почты, так и для пароля внутри объекта пользователя отправляются в запросе на выборку как неопределенные.Вот код:

Родительская функция: 

const addEventHandlerTo = (child, endpoint, headers, method, cb, data) => {
console.log('this is firing from ' + child + ' with method ' + method + ' to ' + endpoint);
$(document).on('click', child, function(event){
  console.log(console.table(headers), console.table(data))
  console.log(child + ' fired off a fetch to ' + endpoint);
  event.preventDefault();
  event.stopImmediatePropagation();

  fetch(apiBaseUrl + endpoint, {
    method: method,
    headers: headers, 
    body: JSON.stringify(data),
  })
  .then(response => {
    if (!response.ok) {
      Promise.reject(response.statusText);
    } return response.json();
  })
  .then(somethings => {
    console.log(somethings)
    cb(somethings);
  })
  .catch(err => console.error(err));
})

Вот обработчик событий для кнопки входа в систему, которая отправляет запрос на выборку: 

addEventHandlerTo(
    '#login-button',
    'signin',
    {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token()
    },
    'POST',
    setTokenAndRedirect, //TODO redirect
    {'user': {
      'email': $('#login-password').val(),
      'password': $('#login-password').val()
    }}
  )

Вот чтоЯ уже сделал:

  1. Тройной проверил, что идентификатор соответствует конечной точке

  2. Попытка передачи значения электронной почты как: getEmail (), где

    getEmail = () => {$(document).find('#login-email')

  3. Жесткое кодирование фиктивной строки в запросе (что отлично работает).

Мне бы очень хотелось, чтобы меня указывали в правильном направлении.Я чувствую, что причина в том, что я неправильно использую делегирование событий в отношении динамически добавляемого обработчика щелчков (мне, вероятно, не следует помещать туда функцию jQuery в запросе ...?).Тем не менее, мой мозг пережил эту проблему за последние несколько часов, и я не могу понять, почему я не должен делать это таким образом и каким будет решение (в идеале, которое поддерживает структуру родительской функции),

Большое спасибо заранее за вашу помощь.Дайте мне знать, если вам нужна дополнительная информация:)

1 Ответ

0 голосов
/ 25 июня 2018

Я немного подзабыл с jQuery, но я думаю, что проблема здесь больше в том, когда при исполнении каждый кусок установлен, а не что-либо с используемой библиотекой.Когда вы определяете обработчик, два значения тела не определены, вам нужно будет передать обработчик.Я хотел бы взглянуть на абстрагирование некоторых других частей метода, возможно, что-то вроде этого: 

const makeRequest = ({endpoint, method, headers, body}) => {
  const baseUrl = 'www.example.com';
  const uri = new URL(endpoint, baseUrl);
  return fetch(uri, { method, headers, body })
    .then(response => (!response.ok) ? Promise.reject(response.statusText()) : response.json());
};

const handlerFactory = (fetchParams, callback, buildBody = null) => {
  return e => {
    e.preventDefault();
    e.stopImmediatePropagation();

    if (buildBody !== null) {
      fetchParams.body = JSON.stringify(buildBody());
    }

    return makeRequest(fetchParams)
      .then(callback)
      .catch(err => console.error(/*please make your errors human detectable*/ err));
  }
};

const getUser = () => ({
  user: {
    email: $('#login-password').val(),
    password: $('#login-password').val(),
  }
});

const addEventHandler = (parent, delegate, fetchParams, callback, buildBody) => {
  const handler = handlerFactory(fetchParams, callback, buildBody);
  $(parent).on('click', delegate, handler);
});

Затем, чтобы настроить метод (ваш пример входа в систему): 

let params = {
  endpoint: 'signin',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token()
  },
  body: {},
}

addEventHandler('document', '#login-button', params, setTokenAndRedirect, getUser);

EDIT

Добавлено JSON.stringify(), которое я пропустил при первом прохождении (Кредит ниже комментатора :))

...