Grails formRemote tag error - ajax

I have been using grails for several weeks now, and have run into this problem when using the g:formRemote tag.
org.grails.taglib.GrailsTagException: [views/inventoryDetails/details.gsp:21] [views/inventoryDetails/details.gsp:21] Tag [formRemote] does not exist. No tag library found for namespace: g
for reference here is the .gsp page
<html>
<head>
<meta name="layout" content="bccmain" />
<title>Details - BCC Virtual Map and Inventory Tracker</title>
<g:javascript library="jquery" />
<link rel="stylesheet" href="${resource(dir: 'css', file: 'details.css')}" type="text/css">
<script>
$(document).ready(function () {
$("#database").addClass("active");
});
</script>
</head>
<body>
<div id ="content">
<g:formRemote name = "detailsUpdateForm" url = "[controller: 'InventoryDetails',action: 'ajaxUpdate']" update="updateBox">
<g:each in ="${details}" var = "d" status = "i">
<g:textField name="details" value = "${d.details}" class = "detailsblock"/>
<g:hiddenField name ="id" value = "${d.id}" />
<g:submitButton name = "submit" value = "Save" />
</g:each>
</g:formRemote>
<div id = "updateBox"></div>
</div>
</body>
</html>
I can't for the life of me figure out why the g:formRemote tag causes a problem, but other tags (run on different pages -- this one won't render) such as g:each will run without a problem. Thanks.

Most likely you are working on a Grails version that does not support "g:formRemote" any more. The formRemote tag and other Ajax related tags have been deprecated. You might want to think about a different approach.

Related

How to change the language of new Captcha-Recaptcha

Can anyone give me an example about to change to italian ReCaptcha questions and answers?
I found the following code:
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=it" />
But no idea where to put it and all attempts to place it on my contact form failed.
It always speaks english only.
Thanks in advance
Script tags usually go in the head section, between the <head> and </head> tags, or just before the body closing tag, </body>.
However, you also need to add a tag in the form for the ReCaptcha to be show.
This code will display the ReCaptcha in Italian:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js?hl=it" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
You need to replace the data-sitekey attribute with your own API sitekey.

JQuery Mobile Validate after changePage

I'm using JQuery Mobile with a form that changes server side. I need to reload the page so the most recent form is included on the page. The form also needs validation.
I'm able to get the validation to work once but once until a submit. The page successfully is refreshed and the form appears but the validation is gone and if I submit, a standard submit is done instead of a changePage.
The on pageinit seems to be firing every time. I've been pulling my hair out on this one. It seems like this should be so simple.
<?php //
session_start();
if (isset($_SESSION['mytest']))
$_SESSION['mytest']++;
else
$_SESSION['mytest'] = 1;
$s = $_SESSION['mytest'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mytestout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>
<body>
<div data-role="page" data-theme='b' id="testit" >
<div data-role="content" class="content" id="cart" style="margin-top: 25px; margin-left: 40px">
<p> counting session var = <?=$s?> </p>
<form id="myform">
<input type="text" name="myname">
<input type="submit">
</form>
</div>
</div>
<script>
function submitme(e) {
$.mobile.changePage( "#testit", { transition: "slideup", changeHash: false, reloadPage: true, allowSamePageTransition: true });
}
$(document).on('pageinit', function(){ //
$("#myform").validate( {
rules: {
myname: "required"
}
,submitHandler: function(e) { submitme(e);}
});
});
</script>
</body>
</html>
The problem here is the 'pageinit' event, which runs just once per page (its also deprecated). You'd have to use the pagecontainershow event, which runs each time the page is shown. That should initialize the form validation again, making it work for each time its rendered. Note that I haven't tested that solution, yet.

JQuery Validation plugin not working with minlength

I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?

Grails RemoteForm, Ajax doesn't work

I'm new on Grails and I have some troubles with Ajax (so I could have missed something). On my main gsp I want a select box, that, when I click on its options, makes appear another field on the same page to select other things. As the content in the second part is dynamic, I need somme Ajax. Anyway I haven't succeed yet. Here is my code :
main.gsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="layout" content="main" />
<title>Sample title</title>
<g:javascript library="jquery"/>
</head>
<body>
<h1>Selection de l'email</h1>
<div class="dialog">
<g:select name="selectTemplate"
from="${templateCategories}"
value="category"
noSelection="['':'--- choisissez un modèle ---']"
onchange="${remoteFunction(
controller:"email"
action:"printTestTemplate"
update:"listTemplates"
params:'\'category=\'+this.value'
)}"
/>
<div id="listTemplates">RRR</div>
</div>
</body>
</html>
EmailController
def printTestTemplate = {
println params.category //doesn't print anything
println "YEAAAAAAAAAH" //the same
render(view:"formSelectTemplate", model:[templates:EmailTemplate.findByCategory(params.templateCategory)])
}
formSelectTemplate.gsp
<h1>YOUHOUUU !</h1>
I've both tried to call a view or template (by renaming the gsp of course), but nothing worked. Nevertheless I don't understand, I followed the official doc. Notice that the HTML result creates no event on the select box, and that Firebug tells me there is no 404. So I must have missed something in the creation of the box.
select result in HTML :
<select id="selectTemplate" name="selectTemplate">
<option value="Refus">Refus</option>
<option value="Informations complémentaires">Informations complémentaires</option>
</select>
Did you forget comas between the arguments of your remoteFunction call ? like this:
onchange="${remoteFunction(controller:"email",
action:"printTestTemplate",
update:"listTemplates",
params:'\'category=\'+this.value' )}"

Add / Remove Elements Dynamically

Now i done the ADD /Remove Elements
How to add/remove elements dynamically, pease find the image attachment, which shows the better understand,
category which populate records from database category table, and when user select the particular category than sub category will populate from datbase sub category table,
am looking one jquery or some open which do this same work,
refer some good plugins,
How to add the element when i click the ADD Elment, please chekc my code below
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').append(app_str);
$("#add_element").click(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
hdn_add_element_cnt = hdn_add_element_cnt+1;
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').fadeIn(10000).append(app_str);
//Increment Elemenet ID Count +1
document.getElementById("hdn_add_element_cnt").value = hdn_add_element_cnt;
})
})
function delete_element(element_id_no){
var get_element_hidden_cnt = $("#hdn_add_element_cnt").val();
$("#element_"+element_id_no).fadeOut(100).remove();
}
</script>
</head>
<body>
<div style="width:500px; height:200px; background-color:#FF0000;">
<div id="add_element" style="width:400px; height:75px;">
ADD Element
</div>
<div id="element_area">
</div>
</div>
<input type="hidden" id="hdn_add_element_cnt" value="1" />
</body>
</html>
jQuery doesn't need plugins to do this. Standard functions work well:
.append() adds elements, so to add a <div> to the <body>, just do this:
$('body').append('<div id="foobar">This is my text</div>');
.remove() similarly removes elements, so to remove that <div> that you added, just do this:
$('#foobar').remove();
.html() and .text() can be used to set the contents of an element. .text() is usually for setting the displayed text, and .html() is for adding content elements:
$('#foobar').text('Hello');
$('#foobar').html('<h1 class="foo">Hello</h1>');
Your question is really vague, so I'm not sure what else to say.

Resources