Приветствую, с недавних пор я работаю с Salesforce и сейчас как раз разбираюсь с VF страницами. Была поставлена задача: "После ввода текста в inputField при нажатии Enter данные улетают на Custom Controller и сразу текст появляется в определенном outputFiel, все должно происходить без page reload".
Мои попытки прикрутить JavaScript функции на слушание клавиш пользователя и вызове определенной actionFunction с атрибутом reRender, блока с полем в которые нужно занести новые данные, не дали результата, а стандартный функционал, по крайней мере то что я пролопатил, дает возможность делать это только через commandButton и commandLink.
Буду благодарен если подскажите как можно реализовать такое поведение.
Вот рабочий костяк, но при нажатии Enter страница перезагружается.
Page:
<apex:page controller="NameTransferController" showHeader="true" sidebar="true">
<apex:pageBlock >
<h1 style="font-size:150%;">Transfer name on <i>client-controller</i> interaction</h1><hr/><br/><apex:form>
<apex:outputLabel value="Enter your name here: "/><apex:inputText value="{!name}">
<apex:actionSupport event="onclick" reRender="display"/>
</apex:inputText><br/><br/>
<apex:outputPanel id="display">
<apex:outputText value="The entered name is - {!name}"/>
</apex:outputPanel>
</apex:form>
</apex:pageBlock></apex:page>
Controller:
public class NameTransferController {
public String name; public String getName() {
if (name == null) return 'Ruslan';
else return name;
}
public void setName(String name) {
this.name = name;
}
}
У тебя нет сабмита формы. Используй commanButton или commandLink. Просто повесь на нажатие enter клик по сабмит кнопке. В кнопке в атрибуте rerender указывай ид элемента для рефреша.
PS
В контроллере лучше используй properties.
public String name {get; set;}
Спасибо за ответ, я уже пробовал такой подход, почему-то форма все-равно отправлялась через релоад. Я попробую еще раз реализовать такую функцию немного по другому и отпишу.
Ну и на счет перехвата Enter на input
по твоему примеру я так и не понял где ты его перехватываешь
Вот сразу из первой ссытке от google
http://stackoverflow.com/questions/7060750/detect-the-enter-key-in-an-text-input-field
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
// Do something
}
});А reRender мне как тогда реализовать с обычной кнопкой?
rerender у тебя организует apexFunction которую ты вызовешь в теле перехватчика Enter.
Спасибо большее за помощь, сейчас буду пробовать прикручивать. Как только будет результат, отпишу.
Сделал как вы говорили но страница идет в перезагрузку все-равно. Сделал и через commandButton и через обычную кнопку и actionFunction, результат одинаковый. Может у меня что-тов JS коде не так? (JQuery только начинаю работать)
<apex:page controller="NameTransferController" showHeader="true" sidebar="true" id="page">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" /><script type='text/javascript'>
j$ = jQuery.noConflict();j$(document).ready(function() {
j$("#page\\:block\\:form\\:inputField").keyup(function (e) {
console.log('log keyup');if (e.keyCode == 13) {
console.log('log key enter');j$("#page\\:block\\:form\\:submit").click();
return false;
} else {
return true;
}
});
});
</script><apex:pageBlock id="block">
<h1 style="font-size:150%;">Transfer name on <i>client-controller</i> interaction</h1><hr/><br/><apex:form id="form">
<apex:outputLabel value="Enter your name here: "/><apex:inputText value="{!name}" id="inputField"/>
<apex:actionFunction name="rerenderDisplay" reRender="display"/><input type="button" value="Submit" id="submit" onclick="rerenderDisplay();"/>
<!-- <apex:commandButton value="Submit" id="submit" reRender="display" /> --><br/><br/>
<apex:outputPanel id="display">
<apex:outputText value="The entered name is - {!name}"/>
</apex:outputPanel>
</apex:form>
</apex:pageBlock></apex:page>
Во-вторых #page\\:block\\:form\\:inputField что это? Кто так с jQuery поступает? Может оно и работает, но это жесть.
Переделал на partial, результат - работает, но страница перезагружается.
<script type='text/javascript'>
j$ = jQuery.noConflict();j$(document).ready(function() {
j$('input[id$=inputField]').keyup(function (e) {
console.log('log keyup');if (e.keyCode == 13) {
console.log('log key enter');j$('input[id$=submit]').click();
return false;
} else {
return true;
}
});});
</script>
В-третьих
зачем ты делаешь j$("#page\\:block\\:form\\:submit").click();
если можно просто вызвать rerenderDisplay
В четвертых где у тебя собственно вызов action? Оно так работает?
<apex:actionFunction name="rerenderDisplay" reRender="display"/>
Проверь консоль браузера - по ходу у тебя там все в ошибках.
При нажатии на кнопку вручную display обновляется без перезагрузки. Логи я смотрю, иначе зачем мне console.log('log keyup');. Ошибок нет.
При вызове происходит тоже самое, страница идет в релоад.
В том то и прикол что я не знаю какой action надо для actionFunction что бы она отправляла форму и потом уже по rerender перерисовывала мне display.
да хоть пустой, фейковый
public void fakeAction(){}
Именно, пустой.
<apex:actionFunction name="rerenderDisplay" action="{!fake}" reRender="display"/>public void fake() { }$('input[id$=inputField]').keyup(function (e) {
console.log('log keyup'); if (e.keyCode == 13) {
console.log('log key enter');
rerenderDisplay();
return false;
} else {
return true;
}
});
Без изменений, при нажатии на кнопку actionFunction срабатывает хорошо, display обновляется, при нажатии Enter - reload.
Как я уже говорил, я начинающий в JS и JQuery, до этого просто пробовал, ничего особенного. Вы уверены что возврат false из функции в таком виде должен остановить перезагрузку страницы?
А вообще ты явно не первый с такой проблемой, а гугл большой, надо просто поискать.
public with sharing class SampleController { public String name {get; set;}
public PageReference updateAction(){
return null;
}
}
<apex:page controller="SampleController"><apex:form id="form" onkeypress="return submitListener(event)">
<apex:actionFunction name="onFormSubmit"
action="{!updateAction}"
rerender="text" />
<apex:inputText value="{!name}"/>
<hr/>
<apex:outputText id="text" value="{!name}"/>
</apex:form>
<script>
function submitListener(e){
var keynum = 0;
if (window.event){
keynum = window.event.keyCode;
}
else if (e.which){
keynum = e.which;
}
// Here we check whether the Enter button was pressed
if (keynum == 13){
onFormSubmit();
return false;
}
}
</script></apex:page>
Все прекрасно работает, огромное вам спасибо!
Получается все завязано на возврате из actionFunction пустой PageReference? :)
Я понял, спасибо еще раз, вы мне очень помогли.