I having problems putting a buttonset with Primefaces.
I saw some other posts
How to use jQuery and jQuery plugins with PrimeFaces
with similiar issues and didn´t get any result.
heres the a code sample:
<?xml version="1.0" encoding="UTF-8" ?>
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<f:view locale="#{templateManager.userLocale}">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>#{msgs['report.title']}</title>
<h:outputStylesheet name="ssl-common.css" library="css"/>
<h:outputStylesheet name="final.css" library="css"/>
<link href="#{resource['img:favicon.ico']}" rel="icon"/>
<h:outputScript library="primefaces" name="jquery/jquery.js" />
</h:head>
<body id="reportList">
<ui:include src="../WEB-INF/header.xhtml" />
<section>
<h:form prependId="false">
<nav>
<div id="actionBar">
<div class="wraper">
<hgroup>
<h1>#{msgs['report.title']}</h1>
</hgroup>
<div id="subMenu" style="padding: 10px">
<script>
$(function() {
$("#radio").buttonset();
});
</script>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</div>
</div>
</div>
</nav>
(...)
<h:outputScript library="js" name="common.js"/>
<h:outputScript library="js" name="script.js"/>
<h:outputScript library="js" name="primefacesLocalePT-PT.js" />
<!--<h:outputScript library="js" name="jquery-ui-1.8.2.js" />-->
<script src="http://maps.google.com/maps/api/js?sensor=true&language=#{templateManager.userLocale}" type="text/javascript"/>
</body>
</f:view>
</html>
With this code I receive the error:
TypeError: $(...).buttonset is not a function
[Break On This Error]
$("#radio").buttonset();
does anybody had a similar problem?
You need to include jQuery UI, too. Right now the script tag for that is commented out.
Related
I want to develop Login Form Header(header.cshtml) that is avialble in Layout.cshtml(shared),
My Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="~/Content/style.css" rel="stylesheet" />
<script src="~/Scripts/boxOver.js"></script>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div id="main_container">
#Html.Partial("_Header")
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
#Html.Partial("_Footer")
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
and the _Header.cshtml like this
#{
Layout = null;
}
<div id="header">
<input name="login_username" class="textbox" placeholder="Username" type="text">
<input name="login_password" class="textbox" placeholder="Pasword" type="text">
<input name="login" class="button" value="login" type="submit">
<input name="login" class="button" value="Register" type="submit">
<div id="logo"> <img src="images/logo.png" alt="" border="0" width="182" height="85" /> </div>
</div>
Here _Header.cshtml is a shared partial view. I want to develop this view with model and controller with database connection in master(Layout.cshtml) as partial view Using MVC 4 in .net.
The Header is like the below image,Header Html Layout Image
I am facing very strange issue using JSF2 (apache MyFaces 2 and Rich Faces 4.3)
Below is the xhtml code.
<?xml version="1.0" encoding="UTF-8"?>
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:head>
</h:head>
<h:body>
<h:form id="form">
<a4j:commandButton immediate="true" value="Check" action="#{bean.someAction}"/>
</h:form>
</h:body>
</html>
When xhtml code is debugged using firebug and any of the rich faces tag is used , i am getting below error in debugger as :
SyntaxError: syntax error # http://localhost:8480/webAppName/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development:1
When <a4j:commandButton> tag is removed and plain jsf tag <h:commandButton> is used error is not thrown.
Also when <a4j:commandButton> is clicked , ReferenceError: RichFaces is not defined error is thrown.
Attaching the generated html code :
1)h:commandButton with f:ajax inside - (it gives ReferenceError: jsf is not defined error when button is clicked)
<?xml version="1.0" encoding="UTF-8"?>
<!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><link rel="stylesheet" media="screen" type="text/css" href="/contextRoot/rfRes/skinning.ecss.faces" />
<script type="text/javascript" src="/contextRoot/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development"><!--
//--></script>
</head>
<body>
<form id="testForm" name="testForm" method="post" action="/contextRoot/pages/testPage.faces" enctype="application/x-www-form-urlencoded">
<input id="testForm:j_id_6" name="testForm:j_id_6" type="submit" value="Test" onclick="jsf.util.chain(document.getElementById('testForm:j_id_6'), event,'jsf.ajax.request(\'testForm:j_id_6\',event,{execute:\'testForm \',render:\'testForm \',\'javax.faces.behavior.event\':\'action\'})'); return false;"/>
<input type="hidden" name="testForm_SUBMIT" value="1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="/6XulvXlIjDBkLb43C7I4+TCqUyuTMbk4Xz6pE7XonVsuqaL" />
</form>
<div id="javax_faces_developmentstage_messages"></div>
</body>
</html>
2) a4j:commandButton - (it gives ReferenceError: RichFaces is not defined error when button is clicked)
<?xml version="1.0" encoding="UTF-8"?>
<!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><link rel="stylesheet" media="screen" type="text/css" href="/contextRoot/rfRes/skinning.ecss.faces" />
<script type="text/javascript" src="/contextRoot/javax.faces.resource/jsf.js.faces?ln=javax.faces&stage=Development"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/jquery.js.faces"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/richfaces.js.faces"><!--
//--></script><script type="text/javascript" src="/contextRoot/javax.faces.resource/richfaces-queue.js.faces"><!--
//--></script></head>
<body><form id="testForm" name="testForm" method="post" action="/contextRoot/pages/testPage.faces" enctype="application/x-www-form-urlencoded">
<input id="testForm:j_id_6" name="testForm:j_id_6" onclick="RichFaces.ajax("testForm:j_id_6",event,{"incId":"1"} );return false;" value="Test" type="submit" />
<input type="hidden" name="testForm_SUBMIT" value="1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="DiY2dVKs1zXBkLb43C7I439MwZ/wfbTcBNpwPlLjsh6prC/c" />
</form>
<div id="javax_faces_developmentstage_messages"></div></body>
</html>
I am using PrimeFaces's color picker (the popup version). However, when I click on the icon to bring up the color picker, it shows up below all my other content (below the submit button and not below the icon like it's supposed to do). I have tried removing my css and moving everything around to no avail. The color picker is in a <h:form>, a <div>, and a <h:panelGrid>.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Index</title>
<h:outputStylesheet name="css/styles.css" />
</h:head>
<h:body>
<div class="title"> <h1> Testing </h1> </div>
<br />
<h:form>
<div class="forms">
<h:messages />
<h:panelGrid columns="2" columnClasses="column1Class column2Class" cellpadding="10">
<h:outputText value="Test1 " />
<h:inputText value="#{userConfig.test1}" />
<h:outputText value="ColorInline1 " />
<p:colorPicker value="#{userConfig.colorInline1}" mode="inline"/>
<h:outputText value="ColorInline2: " />
<p:colorPicker value="#{userConfig.colorInline2}" mode="inline"/>
<h:outputText value="ColorPopup " />
<p:colorPicker value="#{userConfig.colorPopup}" />
<h:outputText value="Test2" />
<h:inputText value="#{userConfig.test2}" />
</h:panelGrid>
<br />
<p:commandButton action="newValsIndex" value="Submit" ajax="false"> </p:commandButton>
</div>
</h:form>
</h:body>
</html>
I was able to reproduce your problem easily, actually, in the showcase, it is working properly. The major difference is that you have less components. Testing their code alone in an empty page generate theses css/javascript includes :
<link href="/javax.faces.resource/theme.css.jspx?ln=primefaces-aristo" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/primefaces.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<link href="/javax.faces.resource/colorpicker/colorpicker.css.jspx?ln=primefaces" rel="stylesheet" type="text/css">
<script src="/javax.faces.resource/jquery/jquery.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/primefaces.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/colorpicker/colorpicker.js.jspx?ln=primefaces" type="text/javascript">
<script src="/javax.faces.resource/jquery/jquery-plugins.js.jspx?ln=primefaces" type="text/javascript">
As soon as you cleanup the example and keep only the p:colorPicker, the last one is missing. This looks like a PrimeFaces bug, you can work arround by adding this line in your h:head :
<h:outputScript name="jquery/jquery-plugins.js" library="primefaces" />
I'm working with JSF2 and I want to display a map with the object gmap. As I saw, gmap object doesn't exist anymore with richfaces 4.x, so I tried to import the gmap4jsf.jar to render my map...
To have an exemple I took a part of my code from the Richfaces demo here : Richfaces live demo
The map is displayed well, but if I want to control it (change the type, zoom,...) with the jsf elements from the rich:panel, I get an error in Firebug : "map is undefined"...
Can somebody help me to find out the problem please because I didn't find the answer in other thread...
Here is my code:
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich"
xmlns:m="http://code.google.com/p/gmaps4jsf/"><h:head><title>JSF 2.0: Ajax Support</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=myPersonnalKeyIsWrittenHere"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style>.optionList {height: 30px;}</style></h:head><h:body>
<div id="container">
<ui:include src="tpl/menu.xhtml" />
<h1>Gmap4Jsf</h1>
<div align="center">
<f:view contentType="text/html">
<h:panelGrid columns="2">
<h:form id="mapform" prependId="false">
<m:map var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
</h:form>
<h:panelGroup>
<h:form>
<rich:tabPanel switchType="ajax" width="350" height="400">
<rich:tab label="Using Google Map API">
<h:panelGrid columns="2" columnClasses="optionList">
<h:outputText value="Controls:" />
<h:panelGroup>
Hide
Show
<br />
</h:panelGroup>
<h:outputText value="Zoom:" />
<rich:inputNumberSlider id="zoom" showInput="false"
minValue="1" maxValue="18" value="#{gmapBean.zoom}"
onchange="map.setZoom(this.value)" />
<h:outputText value="Map Type:" />
<h:panelGroup>
<a href="javascript: void 0"
onclick="map.setMapType(G_NORMAL_MAP)">Normal</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_SATELLITE_MAP)">Satellite</a>
<a href="javascript: void 0"
onclick="map.setMapType(G_HYBRID_MAP)">Hybrid</a>
<br />
</h:panelGroup>
</h:panelGrid>
</rich:tab>
<rich:tab label="Using Ajax with JSON">
<rich:dataGrid var="place" value="#{gmapBean.point}"
columns="2">
<h:graphicImage onclick="showPlace('#{place.id}')"
style="cursor:pointer" value="resource://#{place.pic}" />
</rich:dataGrid>
</rich:tab>
</rich:tabPanel>
</h:form>
</h:panelGroup>
</h:panelGrid>
</f:view>
</div>
</div>
Ok I found it out...
I had to define the name of the Javascript variable generated by JSF.
So, I just added the attribut "jsVariable" to my gmap element.
<m:map jsVariable="map" var="map" mapVar="map" gmapKey="#{gmapBean.gmapkey}" id="map" />
Bye
I want to POST data from my FORM to an IFRAME which is found on another domain. Is there any easy way to do this?
<iframe name="iframe" width="100" height="100" src="www.otherdomain.com" />
<form action="www.mydomain.com" method="post" target="iframe">
<input type="text" name="text1" value="123" />
<input type="text" name="text2" value="456" />
<input type="submit" value="submit"/>
</form>
I think your example should work. I've set two virtual hosts pastefrom.com pasteto.com
on my localhost.
http://pastefrom.com/index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<iframe name="iframe" id="iframe" src="http://pasteto.com/index.php" width="500" height="500"></iframe>
<form action="http://pasteto.com/index.php" method="post" target="iframe">
<input type="text" name="search" value="google" />
<input type="submit" value="submit"/>
</form>
</body>
</html>
http://pasteto.com/index.php:
<pre><?php var_dump($_POST);?></pre>
And on submit it shows post data on pasteto.com
array(1) {
["search"]=>
string(6) "google"
}