I am using vue-form-wizard for a large 5 panel form and the specs are that there are no “additional submit buttons” other than the wizard’s Next button … I have 4 of the 5 panels licked but the last panel is kicking my butt.
It is a panel where 6 documents are uploaded. I wrapped just that panel in a form tag (the other panel submit via axios) like this:
<tab-content title="Documents" :before-change="docs_next">
<form id="frmDocs" #submit.prevent="documentsUpload”>
docs_next is the method that this panel runs when the wizard’s next button is clicked
docs_next() {
document.getElementById('frmDocs').submit();
return true;
},
documentsUpload() {
alert('Form Submitting');
}
This is to test the submit and the alert is not firing. Any suggestions?
Related
, I am playing with a new vuetify project. I've implemented sign in and signup using a v-dialog and I'm calling those v-dialogs from multiple components. Basically it works for me but I want the previous dialog box to be closed when I click a button to pop up the next v-dialog.
Current Working:
1)A sign in button is placed in navbar. when that button is clicked Sign in v-dialog pops up.
On sign in page there's another button which will open a v-dialog where the user can choose type of account. And on choose of a button another v-dialog opens as sign in page.
Solution I need:
A method or logic with which i can close the previous dialog box while new dialog box pops up
Kindly looking forward for some ideas
Cheers
If those dialogs are in different components, eventBus maybe the best way to communicate between non-parent-child components:
in "main.js":
new Vue({
data: {
eventHub: new Vue()
},
...
}).$mount("#app")
in your dialog component, or the component that contain the dialog:
created() {
this.$root.eventHub.$on("close-dialog", () => {
do something to close your dialog, such as this.visible = false
})
}
before open your new dialog:
this.$root.eventHub.$emit("close-dialog")
I am working with twitter bootstrap 3 and the accordion module and I want to do as follows: a button that says 'show', and when it's shown, a button saying 'collapse'.
I have tried with data attributes but it didn't work.
The accordions are inside a loop with django.
Thanks
I am using this js
$('a.accordion-toggle').click(function() {
if ( $(this).next('.accordion-body').hasClass('in') ) {
$(this).text('Close');
} else {
$(this).text('Open');
}
});
I have managed to make it work but it only switches the button once: all collapsed, button 'Open'. On shown, button 'Close'. But if I hide the accordion, the button doesn't change to 'Open' again.
You can do it using just CSS. I used the 'folder open' and 'folder closed' glyphicons. This is the Bootstrap example, I've just added the collapse class to the closed header anchors.
Here's an example:
http://jsfiddle.net/rTw7D/7/
I have a form panel and i have added a tabpanel to it. Tab Panel has 2 tabs. When the form panel is loaded the first tab's grid loads fine but when i click on the second tab i do see the grids but data is not loaded by default. But it does refresh with data When i click on the grid header.
Below is the piece of code that i use to load the grids from controllers.
var store = this.getDeficiencyDeficiencyStoreStore();
store.on('load',function() {
var accountDeliverySettingsGrid = Ext.getCmp('accountDeliverySettingsGrid');
accountDeliverySettingsGrid.reconfigure(model.allQuartesListStore);
accountDeliverySettingsGrid.getView().refresh();
})
Any help/suggestions/advice is appreciated.
I finally figured this out. I had to use event: activate to explicitly invoke refresh method to get the grids loaded. Below is the piece of code.
listeners: { activate: function(tab)
{ //alert("Put Your Logic Here");
Ext.getCmp('accountDeliverySettingsGrid').getView().refresh();
Ext.getCmp('compositeRelationship').getView().refresh();
}
I've written an application that uses keypress on a text input to trigger activating and deactivating a button. One of my users is using the handwriting function on a Windows 8 tablet to input text. He writes the text in, then hits the Insert button. The text gets inserted, but doesn't fire the keypress event. It also doesn't fire the onchange or onpaste events.
Does anyone know if there's an event that can be caught that will allow me to validate the form element? I can put an onchange event on it and then click out of the box, which will trigger the validation, but that's not intuitive.
Here's the JQuery code I tried for the change event, but I'm open to using run of the mill JS to get the job done.
var lastTerms ="";
$("input#searchbox").change(function()
{
var acTerm = $("#searchbox").val();
if (acTerm.length>2)
{
if (isDisabled($("#btnSearch")))
{
$("#btnSearch").removeClass("buttonDisabled");
$("#btnSaveSearch").removeClass("buttonDisabled");
}
}
else
{
if (!isDisabled($("#btnSearch")))
{
$("#btnSearch").addClass("buttonDisabled");
//$("#btnSaveSearch").addClass("buttonDisabled");
}
}
});
When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?