i use Liferay 6.1, I created a portlet with code (Link: http://www.liferay.com/community/wiki/-/wiki/Main/Using+Lifery+provided+Color+Picker+in+Own+Portlets)
<script type="text/javascript"> jQuery( function() { var colorPicker = new Liferay.ColorPicker( { hasImage: true } ); } ); </script>
<tr> <td> <input class="text-input" id="color" name="color" size="9" type="text" value="" />
<img align="absmiddle" alt="<liferay-ui:message key="color" />" border="0" class="use-color-picker" height="18" hspace="0" src="<%= themeDisplay.getPathThemeImages() %>/color.png" title="<liferay-ui:message key="color" />" vspace="0" width="18" style="cursor: pointer;" />
</input> </td> </tr>
but it doesn't work, please help me :)
You need to pass more options to new Liferay.ColorPicker . According to the guide you posted:
Options:
•context (Object): A DOM object which specifies the context in which
to search for the item
•hasImage: (Boolean) If set to true, it uses
the "item" param or whatever image has the .use-color-picker class as
the image
•item: (Object|String): A DOM object or a jQuery Selector
string that specifies which field to insert the selected value into
•onChange (Function): A function that will get called whenever the
color changes
•onClose (Function): A function that will get called
when the color picker is closed.
Related
Is there any way of putting input type='file' on svg Icon that I already have in my code example below Download.
I'm using Tailwind CSS.
<td click.delegate="getTenantAgentLicence(agent.agentId)" class="p-6 pb-10 text-left block md:table-cell">
<!-- <input type="file"/> -->
<span class="inline-block md:hidden font-bold">Download</span>
<a class="ml-2 cursor-pointer">
<img class="h-6 w-6" src="/images/download1.svg">
</a>
</td>
Put the <input> and the <img> inside a <label>. Clicking the image will be the same as clicking the input element. Then hide the <input>.
.hidden {
display: none;
}
<label>
<input type="file" class="hidden" name="file1">
<img class="h-6 w-6" alt="Image here" src="/images/download1.svg">
</label>
I had Automated Data entry in a web page using VBA but there is a field which is hidden its only pop up if you select date more than 1 month old. While i am entering the date using VBA to it its not showing hidden field but when i am manually entering the same date its showing the hidden field where i need to mentioned the some reason.
My VBA Code
IE.document.getelementbyid("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = Sheet5.Range("B13").Value
Web Page Code
<td>Invoice Date</td>
<td><input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="lostClr(this);if(this.value!=''){return
checkDt(this,'invdt');}" onchange="check_idate()" onkeypress="return
false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility:
hidden;">Delay Reason :</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<span id="ctl00_ContentPlaceHolder1_lblreason" style="color: red; visibility:
hidden;">*Min 15 chars</span>
<input name="ctl00$ContentPlaceHolder1$btndelay_attach" type="button"
id="ctl00_ContentPlaceHolder1_btndelay_attach" class="button_1" style="border-style: none;
width: 350px; visibility: hidden;" value="Attach/Upload CGM's Approval"
onclick="return openDelay_approval()">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach"
id="ctl00_ContentPlaceHolder1_hdndelay_attach">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach_id"
id="ctl00_ContentPlaceHolder1_hdndelay_attach_id">
Before Selection of Date:
After Selection of Date:
Is the showing hidden field function in the onblur event of the first input? If so, you can use fireEvent to fire the onblur event. You could refer to my sample below.
Sample VBA code:
Sub LOADIE()
Set ieA = CreateObject("InternetExplorer.Application")
ieA.Visible = True
ieA.navigate "https://www.example.html"
Do Until ieA.readyState = 4
DoEvents
Loop
Set doc = ieA.Document
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = 11
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").fireEvent ("onblur")
End Sub
Sample HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>Invoice Date</div>
<input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="check_date()" onkeypress="return false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility: hidden;">Delay Reason:</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<script>
function check_date() {
var a = document.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").value;
if (a >= 10) {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "visible";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "visible";
}
else {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "hidden";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "hidden";
}
}
</script>
</body>
</html>
Good day,
I am developing an application in java server faces 2.2.20 and mariadb 10.4 databases.
I have a problem when updating with f: ajax to another form where I have a table that lists the products with their respective images entered, but the images returned by the method from the bean to the img in html are not displayed, although the image if it has in the src its respective route; The good content as text if it is updated correctly without reloading the page this means that if ajax works in part.
This is the code where the product data is entered and the image is uploaded to the controller.
<h:form id="crearCatalogos" enctype="multipart/form-data"> <!--prependId="false" -->
<div class="container">
<div class="row">
<div class="col-lg-5">
<fieldset>
<legend> Informacion:</legend>
<h:messages style="color:red"></h:messages>
<label>Nombre de categoria: </label><br/>
<h:inputText value="#{FileUploadFormBeanRequest.nombreCatalogo}" id="primerNombre" class="inputPersonalizado" html5:placeholder="Ingrese el nombre" maxlength="20" required="true" validatorMessage="No debe superar 20 caracteres" requiredMessage="Ingrese el nombre"></h:inputText><br/><br/>
<label>Seleccionar imagen: </label><br/>
<h:inputFile id="imgInp" value="#{FileUploadFormBeanRequest.archivoCarga}" validator="#{FileUploadFormBeanRequest.validarImagenCategoria}" class="inputPersonalizadoFile"> </h:inputFile>
<br/><br/>
<h:commandButton class="btn btn-primary" value="Cargar">
<f:ajax render="#form : formVerCatalogos : table_verCatalogos" event="action" execute="#form" listener="#{FileUploadFormBeanRequest.guardarDatosCategoria()}"></f:ajax>
</h:commandButton>
</fieldset>
<br/><br/>
</div>
<div class="col-lg-5 imgCategorias">
<div class="text-center">
<img id="noImagen54" src="../TEMPLATE/img/noImagen.jpeg" class="rounded img-thumbnail" alt="..."/>
<img id="imagenCategoriaFile" src="#" class="rounded img-thumbnail imagenCategoriaFile" alt="..."/>
</div>
</div>
</div>
</div>
</h:form>
first form view
second view with data
This is the code of the controller method that is called from the commandButton of the view, which is responsible for saving the data entered of the product and the respective image.
public void guardarDatosCategoria() {
this.archivoCarga = archivoCarga;
try (InputStream input = archivoCarga.getInputStream()) {
String fileName = archivoCarga.getSubmittedFileName();
Calendar hoy = Calendar.getInstance();
DateFormat formatter = new SimpleDateFormat("yyyyMMdd-hhmmss");
String[] ext = fileName.split("\\.");
fileName = ext[0] + formatter.format(hoy.getTime()) + "." + ext[1];
File directorio = new File(folder+"/"+this.nombreCatalogo);
if(!directorio.exists()){
if(directorio.mkdir()){
directorio.mkdir();
Files.copy(input, new File(directorio, fileName).toPath());
//System.out.println(directorio.getAbsolutePath());
}else{
System.out.println("Error al crear directorio");
}
}
//String salida = FacesContext.getCurrentInstance().getExternalContext().getApplicationContextPath();
//System.out.println(salida);
Catalogo objCatalogo = new Catalogo();
objCatalogo.setNombre(this.nombreCatalogo);
catalogoFacadeLocal.create(objCatalogo);
Imagen objImagen = new Imagen();
objImagen.setRuta("../Resources/img/Categorias/"+this.nombreCatalogo+"/"+fileName);
objImagen.setEstado("Principal");
objImagen.setIdCatalogo(objCatalogo);
imagenFacadeLocal.create(objImagen);
} catch (Exception e) {
e.printStackTrace();
}
this.archivoCarga=null;
this.nombreCatalogo="";
}
This is the view code that I need to reload using f: ajax de jsf
<!--VER CATEGORIAS -->
<div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<h:form id="formVerCatalogos">
<table id="table_verCatalogos" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">CATEGORIA</th>
<th scope="col">TIPO</th>
<th scope="col">IMAGEN</th>
</tr>
</thead>
<tbody>
<c:forEach items="#{FileUploadFormBeanRequest.listarImagenes()}" var="catalogoImg" varStatus="paso" rendered="#{!empty FileUploadFormBeanRequest.listarImagenes()}" >
<tr>
<th scope="row">#{paso.index+1}</th>
<td>#{catalogoImg.idCatalogo.nombre}</td>
<td>#{catalogoImg.estado}</td>
<td><h:graphicImage id="noImagen" value="#{catalogoImg.ruta}" class="rounded img-thumbnail img_ver_categorias"></h:graphicImage> </td>
</tr>
</c:forEach>
</tbody>
</table>
</h:form>
</div>
[enter image description here][3]
This is the code of the controller that is responsible for returning the data entered, to be displayed in the table that I need to reload.
public List<Imagen> listarImagenes(){
try {
return imagenFacadeLocal.findAll();
} catch (Exception e) {
return null;
}
}
This is how you look when the data entered is saved and the jsf ajax is executed, but the image cannot be visualized even if I look at the src of the img tag, the path is found. The only way to view the page is to reload the entire page arbitrarily, but it is not the idea.
in this view the text rendering is done, but the image is not displayed
Inspecting the element with f12, we can see that the img tag, if it has the correct path, but is not displayed with the JSF f: ajax.
I am very grateful that you give me a help, I have already searched, read, documented and the truth is that I cannot solve it on my own, I do not understand what it takes. Happy day thank you very much.
INSPECTING THE VIEW WITH F12, it is shown that the src attribute has the image path
JSF 2.1
I am attempting to build some div tags conditionally.
The div tags must have the following format for their DOM id -
jquery_jplayer_# // where # is an integer
Additional requirements:
The resultant HTML should look like this -
<div id="jquery_jplayer_1" class="jp-jplayer" style="width: 0px; height: 0px;">
.
.
.
</div>
<div id="jquery_jplayer_2" class="jp-jplayer" style="width: 0px; height: 0px;">
.
.
.
</div>
Here is what my current code that is attempting to do this looks like:
<ui:repeat value="#{accessibilityTagging.previewTagsOrderByCurrentlySelectedOrderType}" var="currentTag" varStatus="loop_1">
<ui:repeat value="#{accessibilityTagging.accessibilityElements}" var="accessibilityElement" varStatus="loop_2">
<ui:repeat value="#{accessibilityElement.featureList}" var="feature" varStatus="loop_3">
<h:panelGroup rendered="#{feature.feature eq 1">
<!-- some irrelevant stuff happening here -->
</h:panelGroup>
<h:panelGroup rendered="#{feature.feature eq 2}">
<!-- relevant stuff happens here! -->
<div id="jquery_jplayer_#{loop_1.index + loop_2.index + loop_3.index + 1}" class="jp-jplayer"></div>
<div id="jp_container_#{loop_1.index + loop_2.index + loop_3.index + 1}" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li>play</li>
<li>pause</li>
<li>stop</li>
<li>mute</li>
<li>unmute</li>
<li>max volume</li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_#{loop_1.index + loop_2.index + loop_3.index + 1}").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
mp3: "#{ttsManager.serverURL}/TTSServlet?text="+encodeURI('#{feature.info}')
});
},
swfPath: "/common/js",
supplied: "mp3, m4a, oga",
wmode: "window",
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: false,
toggleDuration: false,
errorAlerts: true
});
});
//]]>
</script>
</h:panelGroup>
</ui:repeat>
</ui:repeat>
</ui:repeat>
There are two problems a with what I have:
The innermost loop resets the varStatus back to 0 after it finishes iterating.
The varStatus index value starts with 0. I need it to start at 1.
Any suggestions on how to tackle this problem?
(Is there a way that I store the current counter in a variable or hidden field?)
I do not want to use JSTL (e.g. <c:set> as this will mix JSF components with JSP).
My employer is switching their internal portal over to SharePoint. One of the highly used features of the previous portal was a 'people search' that allowed partial names. SharePoint 2007 defaults to keyword searches which only match against the exact word(s) given as search terms. It can do full-text searches but you have to provide the property name, e.g. "FirstName:tom" (without the quotes of course). That works for a programmatic solution but not for end users.
Is there a way in SharePoint 2007 to let users search for people using partial names?
I found this solution that works well enough for us.
Add a ContentEditor web part to the target page and go to the HTML editor button. Add the following HTML code. It creates two input fields (firstname/lastname) and then creates a query with the search terms included as property searches which will invoke the full-text search.
Note: you need to replace the search result page with the appropriate location for your configuration.
<script language="javascript">
//function to handle enter on keyboard
function txtWildPeopleFinder_KeyDown(e)
{
if (e.keyCode == 13 || e.keyCode==10)
{
e.returnValue=false;
DoWildPeopleSearch();
return false;
}
else
return true;
}
//escape apostrophes in search strings
function escapestr(str)
{
return str.replace("'","%22");
}
//search function
function DoWildPeopleSearch()
{
var firstname = escapestr(document.all["firstname"].value);
var lastname = escapestr(document.all["lastname"].value);
var url;
//search on last name
if(firstname == "")
{
url = "/searchcenter/Pages/peopleresults.aspx?k=LastName%3A" + lastname;
window.location=url;
return;
}
//search on first name
if(lastname == "")
{
url = "/searchcenter/Pages/peopleresults.aspx?k=FirstName%3A" + firstname;
window.location=url;
return;
}
//first and last
url = "/searchcenter/Pages/peopleresults.aspx?k=lastname%3A" + lastname + "%20FirstName%3A" + firstname;
window.location=url;
return;
}
</script>
<table cellpadding="2" cellspacing="0" border="0" width="100%" ID="Table3">
<tr>
<td width="80" nowrap>
First Name:
</td>
<td width="100%">
<input size="20" maxlength="100" id="firstname" name="firstname" type="text" onkeydown="txtWildPeopleFinder_KeyDown(event)">
</td>
</tr>
<tr>
<td width="80" nowrap>
Last Name:
</td>
<td>
<input size="20" maxlength="100" id="lastname" name="lastname" type="text" onkeydown="txtWildPeopleFinder_KeyDown(event)">
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="button" onclick="DoWildPeopleSearch()" value="Search">
</td>
</tr>
</table>