map is not refreshing using gmaps4jsf - gmaps4jsf

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>

Related

Quasar V2 attempting to have LeftDrawer closed on base closed, and hamburger button will open it

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.

compile dynamic vue.js content added via ajax call

I am using vue.js 2.0 and have a problem.
I have a custom component which is loaded with the page, but the element that uses the component isn't used until a button is pressed, at that point the HTML is loaded and added to the DOM in a slide panel (whose content is dynamic).
Edit: It might be usuful to know the slide panel is dynamicly created using the jquery-slidepanel plugin... meaning I can't put a a placeholer in it like this:
<div id="slidePanel">
<component v-bind:is="test-thing">
<DYNAMIC CONTENT>
</component>
</div>
My problem is the instead on the component rendering the new content correctly I just see the {{ someitem }} all over the place.
here is a jsFiddle demonstrating what I am talking about: jsfiddle example

How can I hide name of file uploaded using <p:fileUpload/>

Hello after upload an image using p:fileUpload, it shows the name of the file like this Screenshot presents.
My issue is how can I hide the name BillGates.JPG after clicking on Choose Background.
--> So, I want to have after clicking on Choose Background and before clicking on Register this NewScreenchot instead of the first one.
Below is the file upload component to choose an image:
<p:fileUpload id="bck"
value="#{connectedUserBean.file}"
allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
label="Choose Background"
mode="simple"
skinSimple="true"
auto="true"/>
The button to save it is:
<p:commandButton value="Register"
update="ee" ajax="false"
style="width: 100px;height: 30px;font-size: 13px;background-color: #ff66d9;"
actionListener="#{connectedUserBean.upload}"/>
Have you please any idea about solving this. Thanks a lot.
Just add this to your css file:
.ui-fileupload-filename {
display: none;
}

Is there an easy way to make the fileupload work with IE11 without updating zk

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.

DOJO 1.8 /dojo/request/iframe is deleting <form></form> when uploading a file

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.