I have a strange bug when I use an input field on a sweet alert I can't have the cursor inside my input field here is a jsfiddle.
https://jsfiddle.net/gvzwu5st/
If I include
showConfirmButton: false
Then it works fine here is the fiddle
https://jsfiddle.net/16L4sddt/
When you have showConfirmButton: true, the openModal() function (line 653) gives focus to the confirm button (line 662):
$okButton.focus();
When you try to click in the input field, the handleOnBlur() function (line 396) is called because the confirm button loses the focus. The functions defines the $targetElement variable which refers to the confirm button (line 397). Skipping some lines... the function will loop through each button of the modal to check if it is the element that got the focus. In your case, the target element is the input field, so it is not any of the buttons. The variable btnIndex keeps the value -1. Lines 413-416:
if (btnIndex === -1) {
// Something in the dom, but not a visible button. Focus back on the button.
$targetElement.focus();
}
So the confirm button ($targetElement) is given back the focus, which prevents the input field from ever receiving it.
Related
I have a v-combobox component in my app. I have it to where I can type something in the input then #blur a check happens to see if the typed Item exists in the list or not. If it does not exist a modal opens up asking the user if they want to add it to the list.
I have it if the user clicks yes it is added to the list the problem I am having is if they click cancel and the dialog is closed focus should go back to the combobx input
When I try and set the focus I get the blue animation bar but no input cursor in the input of the combo box
I have set up a codesandbox example of my issue
CodeSandbox Example of Issue
I was wondering If i could get some help or pointers on why Im not getting the full focus to be able to type after clicking cancel on the dialog .
You can try to use $nextTick like this:
closeConfirmationDialog() {
// const comboBox = this.$refs[this.forInput];
// comboBox.$el.querySelector("input").focus();
this.showDialog = false;
this.cancelDialog = true;
this.$nextTick(() => {
this.$refs.categories.focus();
});
}
I used map markers with parameter, First the marker and popup works fine.
And when I change the parameter, markers refreshed ok but, popup with data shows nothing.
I tried to solve, but nothing works. Kindly asking help
Marker Click function test JS:
function f(){
alert(this.dashboard.getParameterValue("status") +" you have clicked on");
//Dashboards.fireChange('status', e.vars.category.value);
}
Then you have to change the param values, check the alert box.
In the marker click function you have to write the alert function first.
i'm trying to code form where you can navigate inside with a next button ( who will hide the current fieldset and show the next one ) and a previous one ( who will hide the current fieldset and show the previous one ). Those two input have a onclick function that will change the fieldset className to active from inactive depending on which fieldset we are. I want to change the next button input type when the user reach the final fieldset so he can submit, but it seems that it automatically trigger the submit event, which means when the user get to the final fieldset, he cant fill any input because the form will submit automatically.
So here's the code :
//When the last fieldset show
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick='';
next.type="submit";
next.value="Submit";
next.id='submit';
}
Is there something that i should add to stop the submit auto-firing ?
I've tested your code in JSFiddle and it works good. It means there is something that trigger submit. May be you can post whole javascript in that page and then I can check what is the issue.
var next = document.getElementById("next");
//next.type="submit";
next.setAttribute('type', 'submit'); // I prefer using .setAttribute method
next.onclick='';
next.value="Submit";
next.id='submit';
<form>
<input name="q" value="hello">
<input type="text" id="next">
</form>
I think instead of trying to "hack" the existing button and turn it into the submit, you could just have two buttons, one "next" and another one "submit-button" (hidden initially), once the user advances to the final step, you can hide the "next" button and show the "submit-button" button.
It can be something like this:
//When the last fieldset show
if (fieldset[4].className == "active") {
// hide the next button
document.getElementById('next').style.display='none';
// show the submit button
document.getElementById('submit-button').style.display='';
}
And it would be not complex to make these buttons to appear exactly on the same place with css, so the user will not notice the replacement.
There are browsers who do not allow you to change the type for security reasons. So you will often have problems with it. Just switch between two inputs as boris mentioned (or replace it completely). But to answer your question:
You can catch the autosubmit with another on submit event. First on click mark the button with a class or data attribute like "preventSubmit". Within the submit event check if this class or data attribute exists and prevent the submit (f.ex with prevent default()) and remove the class that all wanted submits by users clicks are not stopped.
Why not just add an event to submit the form you are currently on:
if (fieldset[4].className == "active") {
var next = document.getElementById('next');
next.onclick=(function() { document.forms[0].submit(); });
//next.type="submit";
next.value="Submit";
next.className="MySubmit"; // try to style it as a button for better UX
//next.id='submit';
}
I have a grid and an editor for editing each row values. In my editor, i have a this dijit.form.DateTextBox. I also have submit and cancel button.
On Edit button click, I open the grid popup editor, which has 1 form and bunch of other dojo controls including text box. Now I want to use the cancel button to Reset the form and hide the Dojo Grid Popup Dialog. I created a function for the same. It works fine when i remove the JavaScript which runs after DateTextBox onChange event.
It gives me this below error.
Uncaught TypeError: Cannot call method 'getMonth' of null
The JavaScript I have on DateTextBox onChange event is this.
dojo.connect(dijit.byId("Edit_TrialStartDate"), "onChange", function () {
var item = dojo.date.locale.format(dijit.byId("Edit_TrialStartDate").value, { datePattern: "MM/dd/yyyy", selector: "date" });
dijit.byId("Edit_tTrialStartDate").setValue(item);
});
Because if this error, my grid popup dialog never releases the ID it is registered with. So I can only edit 1 record at a time. When I click on another row Edit button I get this below error.
Uncaught Error: Tried to register widget with id==TrialGridPopUp but that id is already registered
Does anyone have any idea how to resolve this?
Somewhere in your code you are passing an object that is not a date into a method that is expecting a date.
Uncaught TypeError: Cannot call method 'getMonth' of null
I would verify that dijit.byId("Edit_TrialStartDate").value is giving you a date object.
It's also better practice to call dijit.byId("Edit_TrialStartDate").get('value');
I have a Dojo form that does not contain a submit button. Instead, I added an onkeypress handler to calls a method when Enter is pressed. The problem I am having is that when I hit enter before blurring off the current field, the _process method thinks that field is empty.
Or in other words: type in field1. hit tab. type in field2. hit enter. field2 is blank unless i click off the field or shift-tab back.
Any ideas?
dojo.connect(dijit.byId("fkrform"),"onKeyPress",function(e) {
if (e.keyCode == dojo.keys.ENTER) {
_process();
}
and the method it calls:
function _process()
{
var field1 = dijit.byId("field1").value;
var field2 = dijit.byId("field2").value;
alert(username);
alert(password);
...do stuff...
}
The fields are of dojoType: dijit.form.TextBox, and the form is: dijit.form.Form
Use dijit.byId('field1').get('value') instead of directly try to access the property "value". In your example you saved the value in the variable field1 and field2 and in the alert you use the variable username and password could be the answer why you don't get anything. But you still should use the get method to get a property instead of directly access the property.
When you press "Enter" your form will submit. So you need to connect to the "onSubmit" event on the form, instead of onkeyPress or onKeyUp.
The first example i created prints the value of the input box on every key someone pressed in the console.
http://jsfiddle.net/a8FHg/
But what you really wanted was hooking into the submit. I modified the example. The new example connects to "onSubmit" and creates an alert box with the text of the user input.
http://jsfiddle.net/a8FHg/1/
For completness if jsfiddle doesn't work some day. You JavaScript should looks like this.
dojo.ready(function(){
var form = dijit.byId('form');
var box = dijit.byId('box');
var submit = function(event) {
dojo.stopEvent(event);
alert("User input was " + box.get('value'));
};
dojo.connect(form, 'onSubmit', submit);
});
Assuming your form in your HTML has the id form and your box have the id box.