I'd like to make a masked input field with autocompletion. In my example i have a field with article numbers _.___.___. I have also a list of often used articles. The user can select existing article numbers from the list and can add new articlenumbers.
How can i combine these two primefaces components?
Thanks for your help
Lepo
To achieve this you have two possibilities: Create a custom component or set the inputmask manually via jQuery. I implemented the second method this way:
Use the normal Autocomplete Widget
<h:form id="myPanel">
<p:autoComplete id="number" value="#{myBean.number}" completeMethod="#{myBean.complete}" />
</h:form>
Activate Inputmask via this little Javascript
<script>
//<![CDATA[
$(document).ready(function() {
$(':input[id="myPanel:number_input"]').inputmask("mask", {"mask": "(999) 999-9999"});
});
//]]>
</script>
(3. Make sure you have included the inputmask jquery library:)
<script src="jquery.inputmask.js" type="text/javascript"/>
Although this solution does what it should do, i think the custom component would be the more cleaner way.
Hope my Snippet helps you anyway.
Related
I would like a for loop in jquery using .html()
like this:
.html('<select property="doctype" name="doctype"><%for (String number : list)
{%>'<option value="'<%=number%>'>'<%out.println(number); %>'</option>'<% } %>'</select>');
In Java's for each loop list it uses an object of java.util.ArrayList<String>.
Here the .html(); function will call when we click on add button.
Here my question is it possible to write jsp scriplet code in .html() of jquery.
function will call when we click on add button.
No you can't.
Jsp is compile time.
More over java script plays on client side and jsp playes on server side.
jsp ,jsf and other kinds of java web technologies are rendered on the server side. Since jquery is a client side technology, it's not possible.
Instead, you can make ajax calls via jquery and update the html.
You cannot have the client execute Java in your scriptlet. Fortunately, what you want to do is very common.
Don't try to dynamically generate JavaScript in a scriptlet or jsp. It's very easy to make a mistake and end up with malformed JavaScript.
Instead, use a .jsp to spit out HTML. Then use static JavaScript to grab that HTML and put it where you want in the DOM.
For example, your jsp file could look something like this:
<div id="destination">The select element will be added to this div.</div>
<select id="my-select" property="doctype" name="doctype">
<c:forEach items="${list}" var="number">
<option value="${number}">${number}</option>
</c:forEach>
</select>
<script>
$('#destination').append($('#my-select'));
</script>
Hello i'm using the following javascript code which will be in a separate file so that it can be referenced globally across the site.
It allows me to have a global reference for html elements such as footers and menus and include them by id:
<body>
<div id="copyright"></div>
<script>
var copyright = document.getElementById("copyright");
copyright.innerHTML = "<p>© Some Company 2013</p>";
</script>
</body>
This works ok as long as the javascript is placed at the bottom of the page. I was wondering what i might need to modify to allow me to move the script into the header?
Many thanks.
Run the code on DOM ready. Not fun without a library like jQuery, but I have to ask why you're doing this at all.
There are far, far better ways to reuse HTML: templating.
Okay, so you're using jQuery. Then you can use the usual, pervasive document ready handling:
$(document).ready(function ()
{
$('#copyright').html('<p>© Some Company 2013</p>');
});
// or the short-hand version
$(function ()
{
$('#copyright').html('<p>© Some Company 2013</p>');
});
That said, I still recommend templating instead. You can even do it client-side, with jQuery.
I am using this incredibly awesome jquery mobile oriented datepicker that I would like to customize based on device size. I saw some suggestions pointing towards modifying the CSS but I am unable to trap the event that creates the popup dialog that comes up with the calendar.
Is there a jsfiddle that I can look and learn from?
Looking at the examples on the page you provided, it appears to be binding to the vmouseclick event. So you should be able to use click, vmousedown, vmouseup depending on your needs.
So if you had HTML like:
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>
Your JQM Would be like:
$("mydate").click(function(){
// Do something
});
I don't see any options of configs to adjust the size of the DateBox upon opening. So you would want to examine the CSS and class settings of the DIV when it is created and then add your own CSS to override the CSS they use (<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />), or download the CSS and Edit it.
There is no default jsFiddle for this, yet I moved an example into one for you to play with if you like: http://jsfiddle.net/Twisty/pNQeD/
I am trying to understand how the integration between jQueryUI and Emberjs should be done. I am new to both libs and to javascript so this might be a newbie question.
I have this jsfiddle set up: http://jsfiddle.net/pSKgV/1/ and it renders this resulting document:
<body class="ember-application">
<div id="ember129" class="ember-view">
<div id="ember163" class="ember-view ui-draggable"></div>
</div>
</body>
The code is mostly taken from this blog post: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Questions: How do I put something inside the inner div? I want to put some content that i can bind to something.
I have tried the following:
{{view App.Draggable}}Drag Me{{/view}} but that gives an error. I’ve also tried
adding this to the App.Draggable object:
didInsertElement: function() {
this.$().html(“Drag Me”)
}
but that did not give the expected results. How is the best way to use/access the jquery/jqueryui functions such as .html() in this situation?
Also, is the outer div necessary or can I make this view only render one div element?
regards
Oskar
http://jsfiddle.net/ud3323/XMgwV/
You forget the # symbol {{#view App.Draggable}}Drag me{{/view}}. You should also create namespaces in Ember using Ember.Namespace.create() instead of just using an empty {}
I've been trying to get a Dojo (1.6) dijit.Tooltip to work when defined in a wijit template.
So, if I have wijit template that includes the following:
<a data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'tooltipMe'">
Got to love hovering over links. Sometimes you a get a free tooltip
</div>
I can see the link of course, but nothing happens when I hover. Scouting round the newsgroups it seems there might be a problem with defining tooltips in wijit templates, but it's not mentioned in the Dojo docs.
Is it possible to define tooltips inline like this? Or am I just doing something wrong, it seems like the obvious place to do it.
If not, is there an accepted approach for creating and linking tooltips to DOM nodes defined in wijit templates?
Tooltips connectId property has to be the id of a DOM node. data-dojo-attach-point is not an id, it just creates a reference in the instantiated widget.
So in your case you need to assign an id to the a-node and use the same id in connectId. To avoid id clashes when creating multiple instances of your widget you can use the ${id} variable substitution to ensure that all ids are unique:
Your code should look something like this:
<a id="${id}_link" data-dojo-attach-point="tooltipMe" href="" onclick="return false;">
Show a Tooltip
</a>
<div data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:'${id}_link'">
Got to love hovering over links. Sometimes you a get a free tooltip
</div>
I've had problems doing it this way before. I used script to create them on my page after I had done some other work, maybe something like this will help you out if you use it in the template postCreate method.
var span = dojo.query('.hasEntry span').forEach(function(node, index, nodelist)
{
new dijit.Tooltip({
connectId:node,
position:"above",
label: toolTipLabel
});
});
Responding to an old thread here, but just wanted to share a solution for people looking to use tooltips without IDs on their custom widget elements. It's not as pretty as just using tooltip, but it works. It uses the "dijit/popup" and "dijit/TooltipDialog" modules.
this.editTooltipDialog = new TooltipDialog({
content: "<p>I love tooltips</p>",
onMouseLeave: function(){
popup.close(this.editTooltipDialog);
}
});
on(this.targetDiv, 'mouseover', lang.hitch(this, function(){
popup.open({
popup: this.editTooltipDialog,
around: this.targetDiv
});
}));
I tried to replicate the issue in jsFiddle: http://jsfiddle.net/phusick/EcLLb/.
I found out that dijit.Tooltip widget from the template is instantized, but it does not connect mouse events, presumably because DOM node it attempts to connect to does not exist yet (i.e. has not been added to document DOM tree).
To prove the aforementioned I tried to connect the tooltip in widget's postCreate method, when all DOM building is done and it worked:
postCreate: function() {
this.inherited(arguments);
this.tooltip1.set("connectId", this.tooltipMe); // w/o this the tooltip won't show
}
So you can instantize tooltips via a template markup and then just connect then to DOM nodes in postCreate method.