I'm developing a Chrome extension, and I want to be able to insert saved data back into forms. In certain forms, some of the input elements will have default text. The problem I'm having is when I try to insert data into the form, the text retains the same class as if it was default text, and I want the text to appear as if a user entered it themselves. I tried triggering the 'focus' event for input elements with the following code:
valueInputs = ["input[type='text']", 'select', 'textarea'];
valueInputs.forEach(function(tag) {
$('form').find(tag).each(function (index, elem) {
if(tag != 'select') {
$(this).focus()
}
$(this).val(data[$(this).attr('name')]);
});
});
The code doesn't work for my extension, but does work when I type it in the console. Any suggestions on how to get it to run?
Update: I've figured out that after clicking a button in my popup to fill in the data, the data is filled in but nothing is focused on until I click the browser. Then it will trigger 'focus' only on the last input element. I want to be triggering the event for all input elements, and to fill in data after the element is focused on.
Related
I'm building a Chrome extension that auto-fills a form. The first field on the form triggers additional fields to appear after it is filled out. I'm able to successfully field out the first field, but am struggling to fill out the sub fields.
To fill out the first field I use this code:
document.getElementById('theElementID').focus()
document.execCommand('insertText', false, 'theTextToAutoFill)
Here are a few things I've tried:
Use that same code (updated with the correct IDs) for additional form fields, but document.getElementById returns null because those fields don't exist when the page initially loads
Refresh the page after filling out the first form using reload(), but it's refreshing the entire page (not just the section after the first field). Is there a way to just reload a section of the page?
Add an event listener to the class the first field is in (which also contains the sub fields). Wait until that class has been clicked to attempt to fill the subfields. See code below.
document.getElementsByClassName('theClassContainingSubFormFields')[0].addEventListener("click", function() {
document.execCommand('insertText', false, 'theTextToAutoFill)
});
Ideally, I'm looking for a solution that uses JavaScript.
I have a form with a 'Reset' button. When i select my radio button the data from my DataTable is passed and pre-pops my fields. This working fine and does in fact pre-populate the relevant radio button
JQuery
if (modifyRecordData.startTime == 'Anytime') {
$('#anyTimeRadioButton').attr('checked', true);
$('#specificTimeRadioButton').removeAttr('checked');
$('#startEndTimeFields').hide();
} else {
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').attr('checked', true);
$('#startEndTimeFields').show();
$('#startTimeHr').val(modifyRecordData.startTimeHr);
$('#startTimeMin').val(modifyRecordData.startTimeMin);
$('#endTimeHr').val(modifyRecordData.endTimeHr);
$('#endTimeMin').val(modifyRecordData.endTimeMin);
}
Data returned
Page loaded
Now the issue, if the user, after data load goes to update the details and selects the other radio button the hidden fields are displayed (again correct)
Then user clicks the 'Reset' button and it fails in the correct function
$('#resetButton').mousedown(function (event) {
buttonclicked = "Reset";
event.stopImmediatePropagation();
modifyRadioButtonSelection(modifyRecordData);
})
and then goes back to the initial loaded data and it does drop in the IF code above
Debuging
Then it re-hides the hidden section (which is correct) but it does not re-tick the radio button as expected.
If i dont have the following code in the IF it leaves the previously selected one checked although the data falls in the IF
$('#specificTimeRadioButton').removeAttr('checked');
No idea whats going wrong at all. I even tried adding the following the 'Reset' button function but it just will not re-check the correct `radio button
$('#anyTimeRadioButton').removeAttr('checked');
$('#specificTimeRadioButton').removeAttr('checked');
Historically, there's been a lot of ambiguity and confusion between three related but different concepts:
The value of the HTML attribute in the source code.
The value of the HTML attribute in DOM tree.
The value of the JavaScript property.
To address that, jQuery/1.6.1 introduced the prop() method, which I suggest you adopt.
Trying to submit an HTML form / clicking a button from this web page: https://www.vegvesen.no/kjoretoy/Eie+og+vedlikeholde/skilt/personlig-bilskilt/sok-om-personlig-bilskilt
I've tried to use both .submit() and .click() with no success
webView.evaluateJavaScript("document.getElementById('personlig-kjennemerke').click();", completionHandler: nil)
So what I try to do is to fill in the text field with "REGNR" I then try to click the orange button to submit the form and access the information I am looking for.
I am able to fill in the textfield by using:
webView.evaluateJavaScript("document.getElementById('tegnkombinasjon').val ue='\(plateNumber)'") { (value, error) in
}
Picture of the button I want to press and the text field I try to fill in
But since I'm not able to click the button programmatically I've tried to actually click it in a subview. The page then tells me I have to fill in the text field first even though I have programmatically.
So not only am I unable to click the button, but I'm also wondering how I can make the web page understand that the text field actually already contains text.
Try this:
webView.evaluateJavaScript("document.getElementsByName(\"sjekkreg\")[0].elements[2].click()")
Why by name? Because that form doesn't have an id.
Also I see your form has custom function to send that form:
pkCtrl.submit(mineFelt,sjekkreg)
We are using the Taxonomy module for Sitecore: https://marketplace.sitecore.net/Modules/T/Taxonomy.aspx?sc_lang=en
The module works fine 90% of the time. The only catch is that when in a taxonomy field you select a value from the auto-complete options, the field doesn't seem to be marked as changed. This creates the occasional confusion with editors as when they publish the "Do you want to save?" prompt doesn't show and the content is published without tags.
If instead of selecting from the auto-complete we use the dialog box, everything works fine.
I looked at the markup, JavaScript and C# code and couldn't find a solution.
I even tried to set Sitecore.Context.ClientPage.Modified = true but it doesn't seem to do anything.
How can I force the save prompt to show?
I had a similar issue, I was updating a field using js and the experience editor wasnt detecting the change.
I got this working by doing the following using js:-
There is a save button state object saved in a view state field. You can grab by doing window.parent.document.getElementById("__SAVEBUTTONSTATE"). I then did the following:-
var saveButtonState = window.parent.document.getElementById("__SAVEBUTTONSTATE");
saveButtonState.value = 1;
saveButtonState.onchange();
This will make the save button enabled
In the experience editor, Sitecore wraps your sitecore item fields in an span element, which contain a unique id. (These are the fields you interact with in the experience editor). However, its not these values which Sitecore receives when you hit Save button. Sitecore actually stores values of your item fields in hidden inputs, so when you interact with the span element, in the background, these hidden inputs are being updated. So in order for Sitecore to receive your changes, you must update the corresponding hidden input. If you open Inspect element in the experience editor and search "scFieldValues", you will see these hidden inputs. I updated the field by using jquery:-
$('#scFieldValues').children('input').each(function () {
if (id.indexOf($(this).attr('id')) >= 0) {
$(this).val(value);
}
});
The id object is the id of the span element. The contents of that id is used in the id of the hidden input. This is why I use "id.IndexOf" to find correct input element. So when I update the span element value, I grab that value and update the corresponding input.
Hope this helps
I've been struggling with getting a field working properly. This field displays a lot of data, and the user wants to select and copy a large portion of it. The data is basically a big list and the user wants to select all entries below a certain point. The way that they achieve the selection is by highlighting a word or two in the first entry they want then pressing ctrl+shft+end to select everything to the bottom. This was working until a new feature on the page was added below the contents of the list. Now the hot key select also selects the contents of the rest of the page.
The current implementation is simply :
<div id='diff-contents'>[content here]</div>
<div id='trailing-content'>blah blah blah...</div>
I have tried a read-only input field:
<input id='diff-contents' value='[content here]' readonly/>
This works in Firefox to some extent however the contents contains HTML, and the input field show html literally, not rendered. In addition to that Chrome doesn't show a blinking caret and the hot keys do nothing, so the input field is sadly not viable for me in this situation.
How can I make a selectable field that maintains focus for the cursor and shows a blinking caret but is not editable using javascript, CSS, HTML, or JQuery?
Edit: jsfiddle example that should clarify a bit.
Look at these questions how to determine the current selection: Getting selected text in a browser, cross-platform
The next step is to create a new range which starts at the end tag of #diff-contents. With this information, you should be able to extend/modify the existing selection.
I suggest to either add a button to the UI or use JavaScript with a key-press handler to trigger this code.
With that, the correct amount of HTML should be selected. Users can then copy that into the clipboard with Ctrl+C.
#Aaron Digulla mentioned key listeners, and that got me thinking about simply stopping the events.
The diff-content element is still a div but it is set to editable. This gives both HTML rendering and a blinking caret.
$(this).keydown(function (event) {
if (document.activeElement.id == 'diff-content') {
if (!allowedKeys(event.keyCode)) {
//The only other key presses that should be processed are ctrl+c (keycode 67) and ctrl+a (65)
if (!event.ctrlKey || !(event.keyCode == 67 || event.keyCode == 65)) {
event.preventDefault();
}
}
}
});
The javascript adds a keydown event listener to the entire page. This is necessary since if you just add it to the element, the event has already propagated through the rest of the page and will still be processed, and this was causing funny issues for me. Next we check if it's the diff-content that is active since we want other input elements to still operate normally. Then we check if the key event is an allowed key (tab, home, end, arrows). And finally, check for ctrl+c and ctrl+a and allow those too. I tried event.stopPropogation() and event.stopImmediatePropogation(), and neither of those worked, but preventDefault did.
Lastly, I added style="outline-style:none" to the element so that the blue border would not appear when the element has focus.
The only issue that I have yet to resolve is that since it is editable, the browser still allows you to select and then right click to either cut or paste, which will allow you to alter the text.
Here is the final jsfiddle for what I am using: http://jsfiddle.net/wh3nzmj8/12/