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' )}"
Related
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.
I'm currently building a page with jQuery mobile.
I need to load some custon JavaScript on one page, so I found the pageInit function.
Here's a short example of what i'm using:
page1.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1 Title</h1>
</div>
<div data-role="content">
go to page2
<p>Page 1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 1 Footer</h4>
</div>
</div>
page2.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2 Title</h1>
</div>
<div data-role="content">
go to page1
<p id="addstuff">Page 2 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 2 Footer</h4>
</div>
</div>
js.js
$(document).delegate('#page2', 'pageinit', function() {
$('<div />', {
html: 'Some text that was added via jQuery'
}).appendTo('#addstuff');
});
So I need to execute some JavaScript on page2.html. It actually works great (the div was created and you see the text). But when I'm clicking on a link to change the page, you can see, that jQuery is calling a hashtag in the URL first. So it looks like:
example.org/page1.html#/page2.html
when I clicked on the link on page1.html (just for a few milliseconds maybe) and then it redirects to
example.org/page2.html
I guess it's because of the id .. but I need this one for the pageInit (as far as I know).
Is this behavior normal ? Or am I doing something wrong. Maybe there's even a command to not call the hash tag.
Here you go:
It's important to note that if you are linking from a mobile page that was loaded via AJAX to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the AJAX hash in the URL. This is critical because AJAX pages use the hash (#) to track the AJAX history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would
look like this:
< a href="multipage.html" rel="external">Multi-page link< /a>
Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument
I am trying to add a full html page into ckeditor for some editing via js.
Specifically, I execute the command
oEditor.insertHtml("<html><head><title>Hello</title></head><body><div>hello</div></body></html>");
But the result I get is the following:
<p>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
</p>
<p>
<title></title>
</p>
<div>
hello</div>
The mode I use is:
config.fullPage = true
I tried also with fullPage = false, but not success.
Is there any way to insert to ckeditor a full html page?
Thanks a lot in advance!!
The insert* methods append the data to the editor contents, but if you want to replace the whole content then you must use setData.
I'm trying to write a very simple Windows 7 gadget, which is easy enough. But I can't get any of the data I'm saving with System.Gadget.Settings.write/read (writeString/readString) to persist between runs of the gadget. I know it can be done, because all the other Microsoft gadgets do it. I'm obviously missing something crucial, but can't see it.
This is a very simple cut down example:
<html>
<head>
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>test</title>
<script type="text/javascript">
function save() {
var e = document.getElementById("name");
if (e && e.value) {
System.Gadget.Settings.write("name", e.value);
prompt("turnedout", System.Gadget.Settings.read("name"));
}
}
function load() {
var t = System.Gadget.Settings.read("name");
prompt("turnedout", t);
}
</script>
</head>
<body scroll="no" unselectable="on" onload='load()'>
<label for='name'>Name</label>
<input id='name'>
<input type="button" value='Save' onclick='save()' />
</body>
</html>
I've traced through the code and everything appears to go in the right places. What's missing?
Gadgets don't work like desktop applications with regard to settings. The settings are per instance of a gadget. Close the instance and you lose the settings. There are other limitations as well. There's a good explanation at: http://dotnetslackers.com/articles/net/SettingsManagerforWindowsVistaSidebarGadgets.aspx
Even I had the same issue, but when I moved the System.Gadget.Settings.write("name", e.value); to the html which is specified in the gadget.xml file, it wrote to the settings.ini file properly
I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.
I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.
So I initially start with this
<div id="change-agent-list" class="tooltip">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Into .middle I asynchronously load markup that looks like this:
<!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></title>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.
$j(document).ready(function () {
$j(".agent-name").live("click", function() {
var agentDetails = $j(".agent-details");
var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';
agentDetails.show();
agentDetails.empty().html(loadingContent);
var modalURL = $j(".agent-name").attr("href");
agentDetails.load(modalURL);*/
return false;
});
});
The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.
So in other words, no events are being bound to my .agent-name elements.
Even if I move the agent-name class to the list elements and change the jQuery to simply
$j(".agent-name").live("click", function() {
alert('1');
});
I still get nothing when I click on the elements.
Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?
I eventually solved this by using jQuery's on instead of "live".
You can only have one #agent-name because IDs are unique. You can just use $('#agents .link') since you already have a class on each anchor.
Not sure if this is helpful, but this works for me:
<!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></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".agent-name").live("click", function() {
alert("click");
return false;
});
});
</script>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>