I am trying to add prime face slider horizontal bar from this link in my xhtml file of JAVA EE: https://www.primefaces.org/showcase/ui/input/slider.xhtml?jfwid=fa7b8
the code is :
<h5 class="p-mt-0">Basic</h5>
<h:panelGrid columns="1" style="margin-bottom: 10px">
<p:inputText id="txt" value="#{sliderView.number1}"/>
<p:slider for="txt" range="false"/>
</h:panelGrid>
but i am getting error like: Error Parsing /beergame_user.xhtml: Error Traced[line: 116] The prefix "p" for element "p:inputText" is not bound and same for p:slider.
my head tags are same as indicated in documentation of prime face which are:
but still the error is showing.
Related
I am seeking assistance with Quasar, I am completely new to coding and JS/Quasar framework. I was wondering if the out of box qdrawer can be tweaked so when launching the page, instead of having it opened by default, to have it closed instead and clicking the hamburger button will open it.
Mainlayout.vue:
<q-drawer v-model="leftDrawerOpen" show-if-above bordered> <---- In question
<q-list>
<q-item-label header> Essential List </q-item-label>
<EssentialLink
v-for="link in essentialLinks"
:key="link.title"
v-bind="link"
/>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
I attempted to rename to leftDrawerClosed but no success
The element q-drawer uses several mechanisms to be opened or closed. First and foremost the binding to the variable leftDrawerOpen is essential. You may consider initializing it to false in the setup section. However, as the q-drawer element also contains the show-if-above directive, you should be aware that the state of this variable is ignored for larger screens (see the API docs: https://quasar.dev/layout/drawer). If the drawer should be closed regardless of screen size you should in addition remove this directive.
I'm using Bootstrap 4.5, and have several forms all using the exact same setup to call TinyMCE 5, but one form (the most complex of course) is not showing it. I can find nothing wrong, or anything different between the way the textarea control is created. The code to load TinyMCE is being loaded in a PHP program and is therefore identical in all cases. This is the code being streamed out:
<!-- Jquery -- required for interactive parts of bootstrap and other code to function -->
<script src="../../Awards/jscode/jquery.min.js"></script>
<!-- Bootstrap core JavaScript, popper.js required for tooltips and such -->
<script src="../../Awards/jscode/popper.min.js"></script>
<script src="../../Awards/jscode/bootstrap.js"></script>
<!-- TinyMCE -->
<script src="../../Awards/jscode/tinymce/tinymce.min.js"></script>
<script language="JavaScript">
// TinyMCE, set for all textarea controls, with specific toolbar items, no menubar, etc.:
tinymce.init(
{
selector: 'textarea',
menubar: false,
branding: false,
plugins: 'code lists',
toolbar: 'undo redo | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | code',
lists_indent_on_tab: true,
content_css: '<?php echo $Award_html_RootPath; ?>css/AwardList.css'
}); // end of TinyMCE code
</script>
This works for other forms with the same code being streamed out for each. I am stumped as to why this one form doesn't display TinyMCE. The textarea control in question is:
<div class="form-group">
<textarea name="Notes" id="Notes"
class="form-control"
style="height: 250px;"></textarea>
</div> <!-- / form-group -->
Thanks in advance for any suggestions that might point me to where the problem lies. There is a lot of JavaScript for this form but it all seems to work, it's just the TinyMCE code that doesn't want to load ... it displays as a standard textarea, no overlay for TinyMCE.
Okay, so now I feel really sheepish. I was outputting at the top of the page some styles before the header information was loaded properly, so TinyMCE wasn't seeing "standards" mode, which includes the first line of the HTML file needing to be:
<!DOCTYPE HTML>
Moved the script tags to below the code that streams the header into the page so that, among other things, the doctype tag above is the first line, and all is well. Sorry for wasting anyone's time on this.
I am using gmaps4jsf jar file for getting dynamic marker on google map but once i click on submit button then getting whole data on web page, evem map also with dynamic marker but map marker is coming after refresh the page.
jsf code:
<m:map id="map" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
<p:column>
<p:commandButton value="Display" action="#{map.display}" update="form"/>
</p:column>
jsf component is refreshing fine only problem with google map..
You should use partiallyTriggered="true" for refresh the google map. as you said you are using gmaps4jsf jar so it will help and i'm updating your code so you can find here
<m:map id="map" partiallyTriggered="true" width="650px" height="450px" latitude="#{map.latitude}" longitude="#{map.longitude}" enableScrollWheelZoom="true" zoom="9">
<m:marker latitude="#{point.latitude}" longitude="#{point.longitude}" >
<m:htmlInformationWindow htmlText="Click me!" />
</m:marker>
</m:map>
In IE11 file upload button of ZK is not working.
I got few replies, It says after updating ZK it will fix the problem.
But we can't update ZK, So in this scenario is there any way to work out this problem any how.
If you can't upgrade ZK then you can try to "downgrade" the IE using "X-UA-Compatible" either as meta-tag or as a response header
here an example using the meta tag:
<?meta http-equiv="X-UA-Compatible" content="IE=10" ?>
<zk>
<fileupload label="upload" onUpload="alert(event.getMedia().getName())"/>
</zk>
and what it looks like in the browser (in the IE dev tools F12 you can check if the meta tag had an effect, you'll see that IE falls back to version 10):
http://screencast.com/t/ftheLA9Ud8
Finally I got the Solution.
AS IE 11 having problem to attach event for listening to open File chooser.
You just manually add the listener.
<button id="browsebtn" upload="true,maxsize=-1" visible="true" sclass="text">
<attribute w:name="doMouseDown_">
function (evt) {
}
</attribute>
</button>
Its simple and weird, However what I found is make the parent component as draggable="true"
<row draggable="true">
<div style="text-align : right;">
<label value="Image File:" />
</div>
<fileupload id="fileUpload" label="Upload" tooltiptext="Click to upload image file."/>
</row>
Now suddenly you will see your fileupload button in ZK started working correctly for IE11 as well.
I'm seeing a really strange behavior under DOJO 1.8.0. I'm trying to asynchronously upload a file. The file is uploading just fine and I'm getting the payload as expected, but when clicking the submit button the tags and everything in between is inexplicably deleted! It just vanishes. (NOTE: I've isolated this testing to a test page, so there's nothing else at play that would account for it. You're looking at the entirety of the code.)
require(['dojox/form/Uploader',
"dojo/request/iframe",'dojo/dom','dojo/on',
'dojox/form/uploader/plugins/IFrame', 'dojo/domReady!'],
function(Uploader,iframe,dom,on){
on(dom.byId("myButton"), "click", function(){
iframe.post("UploadFile.php",{
form: dom.byId("myForm"),
handleAs: "json"
}).then(function(data){
console.log(data);
}, function(err){}
);
});
<form method="post" id="myForm" enctype="multipart/form-data" >
<input name="uploadedfile" type="file" data-dojo-type="dojox.form.Uploader"
label="Select Some Files" id="uploader" />
<input id="myButton" type="button" value="Submit" />
</form>
Any ideas from anyone with DOJO 1.8 experience? I've been using /dojo/io/iframe just fine with versions 1.6 thru 1.7. This started happening only with 1.8 using the new /dojo/request/iframe code.
See http://jsfiddle.net/seeds/XD4Dc/1/
The form element is set to have target of dojo's injected iframe. Then form gets like, 'dijitHidden' with abs position -1000 top/left. Cant see why tbh.
There's a fix in the fiddle, add to your callback:
with(dom.byId("myForm").style) {
position = "";
left = "";
top = "";
}
I took this issue to the DOJO-Interest group and it was found to be bug with DOJO 1.8.0. It'll be fixed with the upcoming 1.8.1 release.
http://bugs.dojotoolkit.org/ticket/15939
From the bug report:
The form wasn't getting "eaten", but rather the position was getting set on it and moved out of the viewport because of some faulty logic to check if the form was in the DOM. This has been fixed and should be in 1.8.1.