Play framework написать Action с Ok (...), который не загружает новую страницу

Question

Play framework 2.4.x. На моей домашней странице нажата кнопка, которая выполняет некоторый код через Ajax и возвращает результаты под кнопкой без загрузки новой страницы. Результаты ожидают ввода пользователем некоторого текста в поле и нажмите «отправить». Эти результаты выглядят следующим образом:

<li class="item"> 
     <div> 
      <h3>Email: </h3> 
      <a>@email.tail.init</a> 
      <h3>Name: </h3> 
      <a>@name</a> 
     </div> 
     <div> 
      <h3>Linkedin: </h3> 
      <form class="linkedinForm" action="@routes.Application.createLinkedin" method="POST"> 
       <input type="number" class="id" name="id" value="@id" readonly> 
       <input type="text" class="email" name="email" value="@email" /> 
       <input type="text" class="emailsecondary" name="emailsecondary" value="" /> 
       <input type="text" class="name" name="email" value="@name" /> 
       <input type="text" class="linkedin" name="linkedin" value="" /> 
       <input type="submit" value="submit" class="hideme"/> 
      </form> 
     </div> 
     <div> 
      <form action="@routes.Application.delete(id)" method="POST"> 
       <input type="submit" value="delete" /> 
      </form> 
     </div> 
    </li> 

Наряду с некоторыми JQuery, который скользит вверх Ли после представления:

$(document).ready(function(){ 
     $(".hideme").click(function(){ 
       $(this).closest('li.item').slideUp(); 
       }); 
      }); 

Однако, так как форма POST проходит внутри действий, который должен возвращение ОК (. ..) или Redirect (...) Я не могу заставить страницу не перезагружать или перенаправлять. Сейчас мое действие выглядит следующим образом (который не компилируется):

newLinkedinForm.bindFromRequest.fold(
errors => { 
    Ok("didnt work" +errors) 
}, 
linkedin => { 
    addLinkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name) 
    if (checkURL(linkedin.url)) { 
     linkedinParse ! Linkedin(linkedin.id, linkedin.url, linkedin.email, linkedin.emailsecondary, linkedin.name) 
     Ok(views.html.index) 
    }else{ 
    Ok(views.html.index) 
    } 
    } 
) 

Можно ли вернуть Ok (...) без перенаправления или перезагрузки? Если нет, как бы вы делали форму POST во время пребывания на той же странице?

EDIT: Вот моя попытка при обработке данных формы с JQuery до сих пор:

$(document).ready(function(){ 
     $(".linkedinForm").submit(function(event) { 
      var formData = { 
       'id'    : $('input[name=id]').val(), 
       'name'    : $('input[name=name]').val(), 
       'email'    : $('input[name=email']).val(), 
       'emailsecondary' : $('input[name=emailsecondary]').val(), 
       'url'    : $('input[name=url]').val() 
      }; 

      jsRoutes.controllers.Application.createLinkedin.ajax({ 
       type  :'POST', 
       data  : formData 

      }) 

      .done(function(data) { 

       console.log(data); 

      }); 

      .fail(function(data) { 

       console.log(data); 
      }); 

      event.preventDefault(); 
      }; 
     }); 

Answer 1

для того, чтобы выполнить эту задачу, я должен был использовать пьеса javascriptRouting

This question's answer помогли.

У меня нет опыта работы с jquery, поэтому писать было правильно, было сложно. Для тех, кто находит это, вот мой окончательный JQuery, который работал:

$(document).ready(function(){ 
     $("div#results").on("click", ".hideme", function(event) { 
     var $form = $(this).closest("form"); 
       var id = $form.find("input[name='id']").val(); 
       var name = $form.find("input[name='name']").val(); 
       var email = $form.find("input[name='email']").val(); 
       var emailsecondary = $form.find("input[name='emailsecondary']").val(); 
       var url = $form.find("input[name='url']").val(); 


      $.ajax(jsRoutes.controllers.Application.createLinkedin(id, name, email, emailsecondary, url)) 
      .done(function(data) { 
       console.log(data); 
       $form.closest('li.item').slideUp() 
      }) 
      .fail(function(data) { 
       console.log(data); 
      }); 

      }); 

     }); 

отметить, что моя кнопка отправки был класс = «hideme», в DIV, который заполняется с результатами БД был Div результаты # и формы содержались внутри li, которые были class = "item". Так что это JQuery делает это прикрепление слушателя к статическому DIV, который всегда есть:

<div id="results"> 

Он ждет элемента с классом = «hideme», чтобы получить щелкнул. Когда его щелкают, он захватывает данные из ближайшего элемента формы, а затем передает эти данные моему контроллеру через ajax. Если передача выполнена успешно, она принимает эту форму, ищет ближайшую ли и делает.slideUp()

Надеется, что это помогает

Answer 2

Это проблема с поведением браузера по форме представления, а не какой-либо из Play делает. Вы можете обойти это, изменив поведение формы, когда пользователь нажимает кнопку submit.

Сначала вы хотите приложить слушателя к представлению формы. Вы можете use jQuery for this. Затем в этом обработчике разместите данные самостоятельно и вызовите .preventDefault() на событие. Поскольку ваш javascript теперь отвечает за POST, вы можете обрабатывать данные самостоятельно и обновлять HTML-страницу своей страницы, а не перезагружать страницу.

Answer 3

Что вам нужно использовать AJAX для отправки формы, проверьте следующее: Submitting HTML form using Jquery AJAX

В вашем случае, вы можете получить объект формы через форму вара = $ (это), а затем начать Аякс с данными форма по form.serialize()

$.ajax({ 
     type: form.attr('method'), 
     url: form.attr('action'), 
     data: form.serialize(), 
     success: function (data) { 
      alert('ok'); 
     } 
    });