Форма действия и метод в ejs - PullRequest
Новая
       6

Форма действия и метод в ejs

0 голосов
/ 26 апреля 2018

Очень плохо знаком с node.js и использует ejs. После преобразования html-файлов в ejs для использования партиалов моя «кнопка поиска» больше не запускает js, которая связана с его идентификатором. После исследования я предполагаю, что у него есть что-то, чего нет: 

<form action="" method="">

Однако я не уверен, как это работает. Ниже приведен код ejs: 

<form class="form-inline my-2 my-lg-0">
  <input id="sbar"class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  <button id="drinkSearch"class="btn btn-outline-success my-2 my-sm-0" type="button">Search</button>
</form>

И начало js с использованием этого (имя файла: main.js): 

   $('#drinkSearch').click(function(){
console.log("this works");
//Gather searchterms
var word = document.getElementById("sbar").value;
//Show results div, hide default main page
$( "#mainPage").toggle(false);
$( "#resultsbox").toggle(true);

//Stop button from refreshing page (default function)
event.preventDefault();
console.log(word)

//Get API response using searchterms
  $.getJSON("https://www.thecocktaildb.com/api/json/v1/1/search.php?s="+ word, function(Result) {
    console.log(Result)




    Result.drinks.forEach((drink) => {
      var drinkName = drink.strDrink;
      console.log(drinkName);
const drinkEntries = Object.entries(drink),
  //Build arrays out of the two sets of keys
  [
    ingredientsArray,
    measuresArray
  ] = [
    "strIngredient",
    "strMeasure"
  ].map((keyName) => Object.assign([], ...drinkEntries
      .filter(([key, value]) => key.startsWith(keyName))
      .map(([key, value]) => ({[parseInt(key.slice(keyName.length))]: value})))),

  // Filters empty values based on the ingredients
  {
    finalIngredients,
    finalMeasures
  } = ingredientsArray.reduce((results, value, index) => {
    if(value && value.trim() || measuresArray[index] && measuresArray[index].trim()){
      results.finalIngredients.push(value);
      results.finalMeasures.push(measuresArray[index]);
    }

    return results;
  }, {
    finalIngredients: [],
    finalMeasures: []
  }),

  // zip both arrays
  ingredientsWithMeasures = finalIngredients
    .map((value, index) => [finalMeasures[index], value]);

// Output
console.log("Ingredients:", finalIngredients);
console.log("Measures:", finalMeasures);

$('#resultsTable > tbody:last').append( "<tr><td>"+ drinkName + "</td> + <td>"+ ingredientsWithMeasures + "</td></tr>" );


console.log("All ingredients and measures:\n", ingredientsWithMeasures
  .map(([measure, ingredient]) => `${(measure || "").trim()} ${(ingredient || "").trim()}`)
  .join("\n"));
});

   });

});

Любая помощь для решений по запуску метода js и понимания использования форм внутри узла и ejs будет очень полезна.

...