is there a way to render only the <%-body%> in ejs? I have a sidebar(with animation) in my layout and when i click every link in the sidebar it refresh the whole page and the animation of the sidebar.
can you only change the body without refreshing the page?
Below is an example of what you'd have to do to switch the current page in HTML.
<!doctype html>
<html lang="en">
<body>
<div class="sidebar">
...
</div>
<div class="wrapper-1">
<!-- First page -->
</div>
<div class="wrapper-2">
<!-- Second page -->
</div>
</body>
<script>
let wrapper1 = document.getElementsByClassName("wrapper-1");
let wrapper2 = document.getElementsByClassName("wrapper-2");
function linkClicked(event) {
// Check which link was clicked
// Hide wrapper1 and show wrapper2
wrapper1.style.display = 'none';
wrapper2.style.display = 'unset';
}
document.querySelector('HTML class/ID of a button').addEventListener('click', linkClicked, false);
<script>
</html>
After calling the javascript function by clicking on logout p:remotecommand is not executing.
This is my XHTML code:
<script type="text/javascript">
function logoutAccount() {
debugger;
var txt = "eeeeeeeeeeeeeee";
command([{name:'param',value:txt}]); //This is important
}
</script>
<i class="fa fa-sign-out fa-fw"></i> Logout
<p:remoteCommand name="command" action="#{MyiaTaskBean.method}" />
This is my code in Java bean:
public void method() {
String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");
System.out.print("value is::::::::::::::::::::::"+value);
}
I tried to change action by action listener but it didn't work.
p:remoteCommand needs to be inside form.
Below code works in my environmet (you haven't said what JSF/PF version you're using):
<script>
function logoutAccount() {
console.log('logoutAccount fired!');
var txt = 'some text';
command([{name:'param',value:txt}]);
}
</script>
<i class="fa fa-sign-out fa-fw"></i> Logout
<h:form>
<p:remoteCommand name="command" action="#{testBean.method}" />
</h:form>
With your java code the result is:
value is::::::::::::::::::::::some text
I currently have two form:
The first for my Favorite Menu
The second for my Standard Menu.
Look like this :
<ui:define name="favoris">
<h:form id="favForm">
<script type="text/javascript">
function initDND() {
$(".draggable_item").draggable({ revert: true, helper: "clone" });
}
$(function(){
initDND();
});
</script>
<p:remoteCommand name="activeDraggableFavoris" actionListener="favorisBean.menuModel" oncomplete="initDND()" />
<p:tieredMenu model="#{favorisBean.menuModel}" id="panelMenu"
style="width:198px" />
</h:form>
</ui:define>
Standard Menu code look similar than Favoris Menu.
I want to drag my Item of my Standard Menu to my Favorite Menu to set it.
Is this possible for a draggable Item to through over a form?
I'm unable to get a dojo example listed under dojo's official documentation to work.
When I run Dojo's demo from their web page, it works fine. But when I copy and paste the code (which appears below) and try to run it in ay web browser, I get an error. For multiple different web browsers, I get an error in my console log that says:
Error: Tried to register widget with id==borderContainerThree but that
id is already registered
This is frustrating because I can't figure out the difference that is causing my code to fail, but their code to work.
I've copied their code verbatim from the web page.
The example is given on the page:
http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html
and is titled:
"BorderContainer Inside A Dijit Template"
A similar question here (dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered) and here (Dojo - "Tried to register widget with id==centerPane but that id is already registered") said this might be because I'm calling parser.parse twice, but if I uncomment the parser.parse line,
the error disappears, but there is no content displayed on the web page.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dijit/layout/BorderContainer — The Dojo Toolkit - Reference Guide</title>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
<script type="text/javascript">
dojoConfig = {
async: true
};
</script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>
</head>
<body class="claro" >
My Test
<script type="text/javascript">
require([
"dojo/parser",
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"
], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
declare("MyDijit",
[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// Note: string would come from dojo/text! plugin in a 'proper' dijit
templateString: '<div style="width: 100%; height: 100%;">' +
'<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
' style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
'<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
'<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
' <div data-dojo-type="dijit/form/Button">A Button</div>' +
'</div>' +
'</div></div>'
});
parser.parse();
});
</script>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
<script type="dojo/on" data-dojo-event="click">
require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
// Create a new instance
var newdijit = new MyDijit({}, domConstruct.create('div'));
newdijit.placeAt(dom.byId('mydijitDestination'));
newdijit.startup();
});
</script>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
OUTER LEFT<br />
This is my content.<br />
There is much like it,<br />
but this is mine.<br />
My content is my best friend.<br />
It is my life.<br />
I must master it,<br />
as I must master my life.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
<div id="mydijitDestination" style="width: 100%; height: 100%"></div>
</div>
</div>
</body>
</html>
Any suggestions given as to what I'm doing wrong would be greatly appreciated.
The error indeed indicates that you're trying to create a widget with the same ID twice, either because you have two elements with the same ID, or because you are parsing the same markup twice.
I suggest commenting the line parser.parse() and by adding parseOnLoad: true to dojoConfig, for example:
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
The reason you won't see a thing when you comment the parsing line, is another issue. Most layout widgets in Dojo are generating their layout according to the space of the parent DOM node. This means you have to set the space of the widget by using CSS first, for example:
#borderContainerThree {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
If you do that, then everything should work fine, just as in this fiddle: http://jsfiddle.net/92NT4/
<script type="text/javascript">
function goBack(){
setTimeout(function previous()
{ location.href="/dataprod/application/myprofile/profile_contactus.faces";
}, 3000);
}
</script>
<html>
<h:commandButton value="Send Mail to dataprod.com"
action="#{ContactUs.sendMail}" styleClass="button" onClick="goBack()"/>
<h:commandButton value="Send Mail to dataprod.com"
action="#{ContactUs.sendMail}" styleClass="button"
onclick="setTimeout('history.go(-1)', 3000);"/>
Put a meta refresh header in the HTML head of the result page.
<meta http-equiv="refresh" content="3;url=profile_contactus.faces" />
It will go to profile_contactus.faces after 3 seconds.