I've a custom dojo widget (reminder )which I want to reload on an event(on click of add button on widget a dialog will open where I'll fill reminder data and will click submit . on click of submit button widget should reload with data which I filled in dialog).
<body class="claro teller">
<form name="tellerForm">
<input type="hidden" name="expldQryStr" id="expldQryStr">
<input type="hidden" name="actionCode" id="actionCode">
</form>
<div class="row">
<div data-dojo-type="MyCashBalanceWidget.MyCashBalance" data-dojo-props="title:'Our Cash Balance Widget',data:CashBalData,data1:invtData"></div>
<div data-dojo-type="MyFrequentTasksWidget.MyFrequentTasks" data-dojo-props="pageName:'TellerLandingPage',title:'Our Some Widget',data:freqTskData"></div>
<div data-dojo-type="PendingTransactionWidget.PendingTransaction" data-dojo-props="title:'Pending Transaction Widget',data:pndTrnData,data1:pndVrfData"></div>
<div id="remWdgt" data-dojo-type="MyRemindersWidget.MyReminders" data-dojo-props="pageName:'TellerLandingPage',title:'My Reminders Widget',data:rmndrData"></div>
<div data-dojo-type="MyAppsWidget.MyApps" data-dojo-props="pageName:'TellerLandingPage',title:'My Apps Widget'"></div>
<div data-dojo-type="MyActivityWidget.MyActivity" data-dojo-props="pageName:'TellerLandingPage',title:'My Activity Widget',data:analData"></div>
</div>
<div data-dojo-type="TellerLandingPageGridWidget.TellerLandingPageGrid" data-dojo-props="title:'Teller Landing grid',data:lastTrans">
</div>
<script>
//including all the custom widgets
require(
[
"dojo/parser",
"CommonWidgets/MyFrequentTasksWidget",
"Widgets/MyCashBalanceWidget",
"Widgets/PendingTransactionWidget",
"CommonWidgets/MyRemindersWidget",
"CommonWidgets/MyAppsWidget",
"CommonWidgets/MyActivityWidget",
"Widgets/TellerLandingPageGridWidget"
],
function( parser) {
parser.parse();
});
</script>
</body>
</html>
please suggest how can I reload dojo widget .
I am not sure about your complete scenario. But in such situation, you have two ways:-
1) Add event listener to your custom widget, that will listen and modify itself
2) Recreate the widget, passing it's constructor with the new values.
Your question is quite unclear, but from the sound of it, you just want to set the innerHTML of a specific DOM node if a form within a dialog is submit. There's no reason to reload the widget for that, you could just add an event handler to the submit event of the dialog form, and use that to set the innerHTML of a specific element inside your widget.
First of all you need to add an onLoad event listener to your dialog so you know exactly when to add the event handlers to the form:
postCreate: function() {
this.myDialog = new Dialog();
this.myDialog.on("load", lang.hitch(this, this.loadDialog));
this.myDialog.set("content", "<div><form><input type='text' /><button type='submit'>Submit</button></div>");
},
This will call a function loadDialog on your widget, which could look like this:
loadDialog: function() {
var vm = this;
query("form", this.myDialog.domNode).on("submit", function(evt) {
evt.preventDefault();
vm.myLabel.innerHTML = query("input", this).val();
vm.myDialog.hide();
});
},
This function utilizes dojo/query and dojo/NodeList-manipulate to obtain the form field value when the form inside the dialog is submit. That value is then used to alter myLabel an element on the widget that I gave the attribute data-dojo-attach-point="myLabel" so that it's easily accessible from within the widget code:
templateString: "<div><label data-dojo-attach-point='myLabel'></label><button data-dojo-attach-event='onClick: openDialog'>Add</button></div>",
Related
I have been using the same file for over a year and suddenly on my local environment, my Google Maps API keeps opening up a "Keyboard Shortcuts" pop up when hitting enter. Usual when hitting enter, my cursor moves to the next required input field in the form. I have made no changes to my code but I have updated Sublime Text, my Text Editor and it seems to support .blade.php files now.
How my JavaScript looked after the update:
I ended up fixing the code and here is my code currently:
My Form:
Client Address
Search Client Address
</x-slot>
<div class="form-group row">
<div class="col-lg-12">
<label>Physical Address<span style="color: red"> *</span></label>
<input type="search" id="searchmap" class="form-control" placeholder="Search Address..." name="address">
<input hidden type="text" name="lat" id="lat" required>
<input hidden type="text" name="lng" id="lng" required>
<br>
<div class="form-group">
<div id="map-canvas"></div>
</div>
</div>
</div>
<!-- end::Row -->
<div class="form-group row">
<div class="col-md-12">
<label>Address Comments</label>
<textarea class="form-control" name="address_comments" id="address_comments" rows="3"></textarea>
</div>
</div>
</x-card>
My JavaScript:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map-canvas'),{
center:{
lat: -26.18,
lng: 28.04
},
zoom:9
});
var marker = new google.maps.Marker({
Position: {
lat: -26.18,
lng: 28.04
},
map: map,
draggable: true
});
var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));
google.maps.event.addListener(searchBox,'places_changed',function(){
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for(i=0; place=places[i];i++){
bounds.extend(place.geometry.location);
marker.setPosition(place.geometry.location); //set marker position new...
}
map.fitBounds(bounds);
map.setZoom(18);
});
google.maps.event.addListener(marker,'position_changed',function(){
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
$('#lat').val(lat);
$('#lng').val(lng);
});
</script>
The pop up window:
If you don't need actual keyboard shortcuts button to display, you could hide it by setting the control options for the google map instance by:
keyboardShortcuts: false
The documentation doesn't specifically show you this, but they do mention the control at: https://developers.google.com/maps/documentation/javascript/controls
I had a similar problem on an older project I have to fix issues on. The Google Maps container is part of a <form>. However, this <form> has no action and in JavaScript there was no listener attached to the submit event.
<form class="some-class">
...
<div id="map-canvas"></div>
...
Send
</form>
The <a> has a click event attached to it, and will gather all data from the form and send it via ajax to an endpoint. There was also a keyup listener event where the "Enter" key was used to submit the data.
So this form breaks all kinds of rules
no action, thus page refreshes if submit event is triggered and nothing will have happened
the <a>-tag should have been a submit button, and the <form> should have a listener for the submit event
keyup event should not be necessary, the form handles the enter key automatically
the form shouldn't have been part of the form in the first place
The above breaks since a recent Maps change, where keyboard features were added. The Maps takes over the "Enter" key, instead showing the kayboard shortcuts of Maps.
We fixed this legacy code by changing the tag in a and attach a event listener to the form that listens for the submit event. We also removed the map out of the form, but this is not the cause of the issue.
Anyhow, another fine example of where native HTML element and JavaScript features should be used for what they are created for.
A bit hacky but you can use:
[class*='-keyboard-shortcuts-dialog-view']{
display:none;
}
I have a form on my page which I wish to trigger the submit from another button outside of the form how can I do this?
You have to add a ref to the HTML form
<form ref="form">
<input name="field" v-model="value">
</form>
Then inside your methods you can use the reference to submit the form
methods: {
send: function(){
this.$refs.form.submit()
}
}
and you can call the send method wherever your want.
You can learn more about ref attribute here
https://v3.vuejs.org/guide/component-template-refs.html
<label class="label-set">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
How to open popup, onclick of link. simple popup should open as soon as user click on link
In html
give a id to your a tag.
<label class="label-set" id="mainId">
<input type="checkbox" class="" name="sameadr" />
I agree to all statements of
Terms of Use
</label>
In javascript
document.getElementById("newId").addEventListener("click", function(){
confirm("confirm this") // or your popop code
})
Try this for vue.js
Terms of Use
And write this inside your method
new Vue({
el: '#mainId',
methods: {
openPopup: function () {
alert('ok')
}
}
})
Try this
Make a modal component. Add a click to your a tag. When clicked show your modal component. After another action (confirm etc.) close and continue.
How to make a reusable modal component in Vue.js: How to make a Modal Component
First of all, please be kind. I'm new to VueJS coming from the Angular world where things are different ;-)
I am creating a multi-page website using VueJS for simple things like a floaty header and submission of forms etc. I'd like the markup for my contact form to be in my HTML (rendered by the CMS) and I'd like to have VueJS handle the form submission and replacing the form with a thank-you message. So, a simplified version of the form would look like this.
<contact-form>
<form class="contact-form_form">
...
<input name="emailaddress" type="text" />
...
<button></button>
</form>
<div class="contact-form_thanks">
Thanks for filling in this lovely form
</div>
</contact-form>
So, the obvious thing to do is to create a VueJS component, but I don't want it to introduce a new template, I just want it to submit the form when the button is pressed (using Axios) and hide the form and show the thank you message.
I know how to do all of this in angular using attribute directives and ng-show/hide etc. but can't really see how to do this in VueJS because all the tutorials are geared to wards SPAs and Single file components with templates.
Any kick in the right direction would be appreciated.
Seems like you just want a data item indicating whether the form has been submitted, and v-if and v-else to control what displays in either case.
new Vue({
el: 'contact-form',
components: {
contactForm: {
data() {
return { hasBeenSubmitted: false };
},
methods: {
doSubmit() {
console.log("Some behind-the-scenes submission action...");
this.hasBeenSubmitted = true;
}
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<contact-form inline-template>
<div v-if="hasBeenSubmitted" class="contact-form_thanks">
Thanks for filling in this lovely form
</div>
<form v-else class="contact-form_form">
...
<input name="emailaddress" type="text" /> ...
<button #click.prevent="doSubmit">Submit</button>
</form>
</contact-form>
i'm currently create a program that i would like to add any widget selected tab. so i must know information about the selected tab. but i don't know..
how i know selected tab the information that boolean type?
for example:
if(tabs.selected==true){...}
mycode
<div id="tabContainer" data-dojo-type="dijit/layout/TabContainer"
data-dojo-props="region: 'bottom', tabPosition: 'top'"
style="height: 700px;">
<div data-dojo-type="dijit/layout/ContentPane" title="Form" id="content" class="tab" >
<h4>Example</h4>
</div>
</div>
Well, the dijit/layout/TabContainer has a property called selectedChildWidget which holds a reference to the active tab.
So, to validate if a tab is the active tab, you can do the following:
var selectedTab = registry.byId("tabContainer").get("selectedChildWidget"),
tab1 = registry.byId("content"));
if (selectedTab === tab1) {
// "content" is the selected tab
}
A full example can be found on JSFiddle: http://jsfiddle.net/tEbs9/
Maybe this one could help you.
dijit focus
You will be able to focus or track elements.
example from the dojo docs:
Try this code, it's also from the docs.
require([ "dijit/focus" ], function(focusUtil){
focusUtil.on("widget-focus", function(widget){
console.log("Focused widget", widget);
});
focusUtil.on("widget-blur", function(widget){
console.log("Blurred widget", widget);
});
});