How to pass the formSingleSelect vale to js function
<script type="text/javascript">
function myfunction(var id){
alert("hi"+id);
}
<#spring.formSingleSelect path="LoginIDForm.ID" options=userIDs attributes='onChange="myfunction();"'/>
I believe this will work:
<#spring.bind path="LoginIDForm.ID" />
<script type="text/javascript">
function myfunction(var id){
alert("hi" + id);
}
</script>
<#spring.formSingleSelect path="LoginIDForm.ID" options=userIDs
attributes='onChange="myfunction(\'${spring.status.expression}\');"'/>
Basically <#spring.formSingleSelect path="LoginIDForm.ID" /> is the shorthand of doing:
<#spring.bind path="LoginIDForm.ID" />
<select name="${spring.status.expression}">
</select>
${spring.status.expression} holds the value you need.
Related
I have a grid(html-table) with a lot of columns and want to combine filtering and sorting on this table.
At the moment I only use filtering on one column but sorting on several columns.
I want to do this with ajax.
I read an article [http://www.craigburke.com/2011/01/23/grails-ajax-list-with-paging-sorting-and-filtering.html]
and tried to adapt it to my version of grails-3.2.6.
This has been very hard to solve and now I'm totally stuck.
If I add something in the filter nothing happens but when I click on a column, the filtering takes place and also sorting, clicking a second time, ajax is not called and the filter is overwritten with the default value. I have managed to implement it on a test project which act the same.
It is much code and maybe there is a way to include the whole project in this question in some way?
I'll try to show most of the important part here if it could help.
The index.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'person.label', default: 'Person')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
<script type="text/javascript">
$(document).ready(function() {
setupGridAjax();
setupFilterAjax();
});
</script>
<script type="text/javascript">
function setupGridAjax() {
$('#gridPersons').find('.paginateButtons a, th.sortable a').on('click', function(event) {
event.preventDefault();
var url = $(this).attr('href');
var grid = $(this).parents("table.ajax");
$(grid).html($("#spinner").html());
$.ajax({
type: 'GET',
url: url,
data: [tag],
success: function(data) {
$(grid).fadeOut('fast', function() {$(this).html(data).fadeIn('slow');});
}
})
});
}
</script>
<script type="text/javascript">
// Turn any input changes or form submission within a filter div into an ajax call
function setupFilterAjax(){
alert('FILTER--Anropat');
$('div.filters select:input').on('change',function(event) {
var filterBox = $(this).parents("div.filters");
filterGrid(filterBox);
});
$("div.filters form").submit(function() {
var filterBox = $(this).parents("div.filters");
alert('FILTERBOX - '+filterBox);
filterGrid(filterBox);
return false;
});
}
// Reload grid based on selections from the filter
function filterGrid(filterBox) {
alert('FILTER-change detected');
var grid = $(filterBox).next("div.gridPersons");
$(grid).html($("#spinner").html());
var form = $(filterBox).find("form");
var url = $(form).attr("action");
var data = $(form).serialize();
alert('FILTERGRID - '+url);
$.ajax({
type: 'POST',
url: '${g.createLink( controller:'person', action:'index' )}',
data: [tag],
success: function(data) {
$(grid).fadeOut('fast', function() {$(this).html(data).fadeIn('slow');});
}
});
}
</script>
</head>
<body>
<g:message code="default.link.skip.label" default="Skip to content…"/>
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
<li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
</ul>
</div>
<div id="list-person" class="content scaffold-list" role="main">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<div class="filters">
<g:form action="register">
<div id="selectMill">
Select tags:
<g:select class="selected" name="tag" from="${tagList}" value="${filters?.tag}" noSelection = "${['':'All']}" optionValue="" optionKey="" />
</div>
<div id="gridPersons">
<g:render template="Grid_Persons" model="personList" />
</div>
<div class="pagination">
<g:paginate total="${personCount ?: 0}" />
</div>
<fieldset class="buttons">
<input class="save" type="submit" value="${message(code: 'offer.create.from.buffer.label', default: 'Create')}" />
</fieldset>
</g:form>
</div>
</div>
</body>
The template: _Grid_Persons.gsp
<table class="ajax">
<thead>
<tr>
<g:sortableColumn property='reg' title='Register' />
<g:sortableColumn property="id" title='Id' params="${filters}"/>
<g:sortableColumn property='name' title='Name' params="${filters}"/>
<g:sortableColumn property='tag' title='Tag' params="${filters}"/>
<g:sortableColumn property='registered' title='Registered' params="${filters}"/>
</thead>
<tbody>
<g:each in="${personList}" status="i" var="ps">
<tr class="${ (i % 2) == 0 ? 'even': 'odd'}">
<td><g:checkBox name="ckb" value="${ps.id}" checked="false" /></td>
<td><g:link action="edit" id="${ps.id}">${ps.id}</g:link></td>
<td>${ps.name}</td>
<td>${ps.tag}</td>
<td>${ps.registered}</td>
<td>
</g:each>
</tbody>
The index-part of the controller:
def index(Integer max) {
params.max = Math.min(max ?: 10, 100)
def tagList = Person.withCriteria {
projections {
distinct("tag")
}
}
def List<Person> personList = getPersonList()
// Paging def prodBuffer = getPaginatedList(prodBuffer, max, params.offset?.toInteger())
def filters = [tag: params.tag, sort: params.sort, order: params.order]
def model = [personList: personList, filters:filters, tagList:tagList]
if (request.xhr) {
println("AJAX-Request!!!")
render(template:"Grid_Persons", model:model)
prodBuffer, offerDetails:offerDetails, filters:filters])
} else {
offerDetails: offerDetails, millList: millList, selectedMill:false, prodBufferCount: ProdBuffer.count()]
[personList:personList,tagList:tagList]
}
Person.count(), tagList:tagList]
}
def List<Person> getPersonList() {
println("getPersonList tag: "+params.tag)
def tag = params.tag
def c = Person.createCriteria()
def tempList = c.list {
if (tag) eq("tag", tag)
if (params.sort){
order(params.sort, params.order)
}
}
return tempList
}
From debugging:
The page is loaded:
getPersonList tag: null
Selected "Grails" in the filter:
getPersonList tag: Grails
AJAX-Request!!!
Klicked on the "Name"-column header
getPersonList tag: Grails
AJAX-Request!!!
-- Now the list is sorted(ascending) and filtered
Klicked on the column again:
getPersonList tag: Grails
-- Now the list is resorted(descending) and the filtering still ok but the SELECT TAGS now view "All"
Klicked the column for the third time:
getPersonList tag:
AJAX-Request!!!
-- Now the list show all lines and resorted(ascending)
Now solved by using the recommended plugin - datatables.
In case you are in a hurry you can inject https://datatables.net/ that adds the utilities you require among others
I have thi HTML:
<form id="form1" name="form1" method="post" action="">
<input name="PtName" type="text" id="PtName" />
<input name="Button" type="button" id="button" onclick="search_p()" value="Check" />
</form>
serach_p() is function:
<script type="text/javascript">
function search_p(){
$.ajax({
url: 'srchpt.php',
type: 'POST',
data: { PtName: $('#PtName').val()},
success: function(data){
$(".myresult").html(data);
}
})
}
</script>
I want when I press enter key in PtName text do same search_p() function
How can I do that?
Specify an onsubmit on your form:
<form ... onsubmit="search_p(); return false">
and change the type of your button to submit:
<input name="Button" type="submit" id="button" value="Check" />
you can do this by using following jquery function:
$("#PtName").keyup(function (e) {
if (e.keyCode == 13) {
// call function
}
});
Javascript :
In javascript put the following function
function enterPressed(event) {
var key;
if (window.event) {
key = window.event.keyCode; //IE
} else {
key = event.which; //firefox
}
if (key == 13) {
yourFunction();
// do whatever you want after enter pressed event. I have called a javascript function
}
}
HTML :
<input type="text" onkeypress="javascript:enterPressed(event)">
For required textfield put onkeypress event
Call your function on submit event of your form:-
<html>
<head>
<script type="text/javascript">
function search_p(){
$.ajax({
url: 'srchpt.php',
type: 'POST',
data: { PtName: $('#PtName').val()},
success: function(data){
$(".myresult").html(data);
}
})
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="" onsubmit="search_p()" >
<input name="PtName" type="text" id="PtName" />
<input name="Button" type="button" id="button" onclick="search_p()" value="Check" />
</form>
</body>
</html>
I wanted a textarea that would break-line on shift+enter, and on Enter would submit:
This seems to answer my query
The code for example document.getElementById("id").value="value"; is not working. I have assigned it on a function to replace the current value of the textbox once the page is loaded.
here is my code
<script type="text/javascript">
function rplace(){
document.getElementById('idtext').value="New Value";
}
onload=rplace
</script>
<form>
<input type="text" id="idtext" name="idtext" value="">
</form>
use jquery insteat of javascript.
$(document).ready(function(){ $("#idtext").val("New Value")});
Refer this
That's exactly what I am looking for ... I need to show a rich:modalPanel automatically when the page has ended loading.
This is my approach so far:
MAIN.XHTML
<script type="text/javascript">
function openPopUp(){
if(#{rich:element('popUpAltaTrenesEstaciones')}.value == 'true'){
#{rich:component('idAltaPlantillasTrenesEstacionesPop')}.show();
return false;
}
}
</script>
.........
<a4j:include id="popUp" viewId="AltaPlantillasTrenesEstacionesPopUp.xhtml" />
.....
<a4j:outputPanel ajaxRendered="true">
<h:inputText id="popUpAltaTrenesEstaciones"
value="#{altaPlantillasTrenesEstaciones.showPopUp}"
style="display:none;" />
</a4j:outputPanel>
BACKING BEAN. JAVA
private boolean showPopUp;
#PostConstruct
public void init() {
...
setShowPopUp(true);
}
POPUP.XHTML
<rich:modalPanel id="idAltaPlantillasTrenesEstacionesPop" height="200"
width="400" rendered="true">
<a4j:form>
........
</a4j:form>
</rich:modalPanel>
WHAT AM I DOING WRONG??? DO I NEED TO ADD ANYTHING ELSE?
THANK YOU
There is 'showWhenRendered' attribute or similar.
You might want to call the function openPopup() you have declared ...
I have many elements on page and all of which i want to translate to some language. The language is not the same for all fields, that is, for 1st field it may be fr and for third field it may be en then again for 7th field it may be pa.
Basically i wrote the code and it's working :-
<script type="text/javascript">
//<![CDATA[
google.load("language", "1");
window.onload = function(){
var elemPostTitles = document.getElementsByTagName("h4");
var flag = true;
for(var i = 0 ; i < elemPostTitles.length ; i++){
while(flag == false){
}
var postTitleElem = elemPostTitles[i];
var postContentElem = document.getElementById("postContent_" + i);
var postTitle = postTitleElem.innerHTML;
var postContent = postContentElem.innerHTML;
var languageCode = document.getElementById("languageCode_" + i).value;
google.language.detect(postTitle, function(result) {
if (!result.error && result.language) {
google.language.translate(postTitle, result.language, languageCode,
function(result) {
flag = true;
if (result.translation) {
postTitleElem.innerHTML = result.translation;
}
});
}
});
flag = false;
}
As you can see, what i am trying to do is restrict the loop from traversing until the result of previous ajax call is receieved. If i don't do this only the last field gets translated. My code works nicely, but because of the infinite loop, i keep getting errors from Mozilla to "stop executing scripts". How do i get rid of this? Also, is my approach correct? Or some inbuilt function is available which can ease my task? Thanks in advance :)
Why don't you call the function to check the next h4 recursively from within the detect/translate completed callbacks. Send the next recursion the next h4 using something like JQuery's next() function.
What you're doing is running the endless loop on the same thread as the outer loop.
I suggest you post a more complete question and code next time to prevent people who like to provide working answers from having to spend time guessing what you are trying to do.
Here is a working example using recursion. Unless you have thousands of items, the tail should be tolerable.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var elemPostTitles = document.getElementsByTagName("h4");
var index = elemPostTitles.length - 1;
foo(index);
function foo(index) {
var postTitleElem = elemPostTitles[index];
var postTitle = postTitleElem.innerHTML;
var postContentElem = document.getElementById("postContent_" + index);
var postContent = postContentElem.innerHTML;
var languageCode = document.getElementById("languageCode_" + index).value;
google.language.detect(postTitle, function(result) {
if (!result.error && result.language) {
google.language.translate(postTitle, result.language, languageCode,
function(result) {
if (result.translation) {
postTitleElem.innerHTML = result.translation;
}
if (--index > -1) {
foo(index);
}
});
}
});
};
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<h4>
this is some text</h4>
<input type="text" id="languageCode_0" value="en" />
<div id="postContent_0">
</div>
<input type="text" id="languageCode_1" value="hi" />
<div id="postContent_1">
</div>
<input type="text" id="languageCode_2" value="es" />
<div id="postContent_2">
</div>
<input type="text" id="languageCode_3" value="fr" />
<div id="postContent_3">
</div>
<input type="text" id="languageCode_4" value="ar" />
<div id="postContent_4">
</div>
</body>
</html>