I am trying to set values on an angular page through a chrome extension I create so I can easily complete some repetitive angular forms I have to fill it up many times a day. (Change the angular page's code is not an option, the new values have to be injected or "typed" somehow)
On my tests, I can see the values been updated on the DOM and displaying on the page, however when I press the submit button the bound angular variables have no values.
Bellow is the code inject on the DOM by the extension, It has a little added complexity as it has everything I tried many different things such as to simulate typing using a timer, setting focus, selecting the field using select, etc.
// listen for checkForWord request, call getTags which includes callback to sendResponse
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action === "checkForWord") {
TypeIntoInput("inputFieldPasswordRegister", "Password123!")
TypeIntoInput("inputFieldConfirm", "Password123!")
var inputs = document.getElementsByTagName('input');
for(var i=0; i<inputs.length; i++){
if(inputs[i].getAttribute('type')=='button'){
inputs[i].disabled = false
}
}
return true;
}
}
);
function TypeIntoInput(inputBox, valueText) {
var input = document.getElementById(inputBox);
input.select();
input.focus();
input.value="";
var text = valueText;
var l=text.length;
var current = 0;
var time = 100;
var write_text = function() {
input.value+=text[current];
if(current < l-1) {
current++;
setTimeout(function(){write_text()},time);
} else {
input.setAttribute('value',input.value);
var e = document.createEvent('KeyboardEvent');
e.initKeyEvent('ENTER', true, true, window, false, false, false, false, 13, 0);
// Dispatch event into document
document.body.dispatchEvent(e);
}
}
setTimeout(function(){write_text()},time);
}
Related
I am trying to capture Google client id from the cookie to hidden field of my form. I have been trying several solutions but none of them is working for me. Here is my landing page https://explore.labelbox.com/training-data-platforms-101
Solution 1:
<script>
function getClientId (uaid) {
try {
var trackers = ga.getAll();
var i, len;
for (i = 0, len = trackers.length; i < len; i += 1) {
if (trackers[i].get('trackingId') === uaid) {
return trackers[i].get('clientId');
}
}
} catch (e) {}
return 'false';
}
// By waiting for "onload", we give GA enough time to load up before trying to get the Client ID.
window.onload = function () {
// Once the page has completely loaded, this next line finds the hidden field <input id="cid"> and sets its value to the CID.
document.getElementById("cid").value = getClientId('UA-XXXXX-X');
}
</script>
Solution 2:
<script>
function getClientId (uaid) {
try {
var trackers = ga.getAll();
var i, len;
for (i = 0, len = trackers.length; i < len; i += 1) {
if (trackers[i].get('trackingId') === uaid) {
return trackers[i].get('clientId');
}
}
} catch (e) {}
return 'false';
}
// By waiting for "onload", we give GA enough time to load up before trying to get the Client ID.
window.onload = function () {
// Once the page has completely loaded, this next line finds the hidden field <input id="cid"> and sets its value to the CID.
document.getElementById("field-bfbc358e48e39a641df949bd3532ac90-8").value = getClientId('UA-XXXX-X');
}
</script>
Neither case is populating the value to the hidden field. Any thoughts?
I take a quick look at your website, the reason you not getting anything is because ga object is undefined
So it never go to your for loop and it will return false. I think you didn't load the google analytics properly, you can follow the official instruction how to load it, your script should run only after ga is loaded.
For selectize.js with ajax search inserting text by mouse not cause search
It's can be simle reproduced on http://brianreavis.github.io/selectize.js page.
On Remote Source — Github example:
focus on field
delete selected
insert text any text by mouse (not
by ctrl+v)
no result
How to fix it?
Update
For catching event by jquery bind method. Selectize on method can't catch it (bug?).
$('.selectize').bind('input', function(){
// force selectize to make ajax call and show result
});
// following code catch nothing
$('.selectize')[0].selectize.on('input', function(){
// force selectize to make ajax call
});
But can't find solution for forcing selectize ajax call
You can find fix on the issue page https://github.com/selectize/selectize.js/issues/882
the code
onPaste: function(e) {
var self = this;
if (self.isFull() || self.isInputHidden || self.isLocked) {
e.preventDefault();
} else {
// If a regex or string is included, this will split the pasted
// input and create Items for each separate value
setTimeout(function() {
if (self.settings.splitOn) {
var splitInput = $.trim(self.$control_input.val() || '').split(self.settings.splitOn);
for (var i = 0, n = splitInput.length; i < n; i++) {
self.createItem(splitInput[i]);
}
}
self.onKeyUp(e);
}, 0);
}
},
I'm calling the following method to set and then remove an input event listener on a DOM element from my Google Chrome extension's content script:
//From the global scope
gl = {
setEventIfNotDoneAlready: function(elmt)
{
if(elmt.doneAlready)
return true;
if(!elmt.myEventSet)
{
elmt.addEventListener('input', gl.onMyInputEvent, true);
elmt.myEventSet = true;
}
return false;
},
onMyInputEvent: function(elmt)
{
elmt.target.doneAlready = true;
elmt.target.removeEventListener('input', gl.onMyInputEvent, true);
console.log(">>Input fired!");
}
};
and then the method above is called as such:
var objAll = document.getElementsByTagName("*");
for(var i = 0; i < objAll.length; i++)
{
if(objAll[i].isContentEditable)
{
if(gl.setEventIfNotDoneAlready(objAll[i]))
{
//And so on...
}
}
}
I need to point out that the code above is injected into arbitrary pages that the Chrome browser user navigates to. (This is done from a Chrome Extension.)
This approach seems to work fine on most pages, except in some cases the removeEventListener doesn't do anything and my onMyInputEvent continues to be called like if nothing was done.
Any idea why?
Following js code is for html5 multiple files selected [duplicate] that doesn't work for chrome browser, after selecting a file homonymous several times.
For EX: selecting file admin.png for 2 or up times tandem. It only alert for first times.
DEMO (This doesn't work only in chrome browser ): http://jsfiddle.net/s9mt4/
function doClick() {
var el = document.getElementById("fileElem");
if (el) {
el.click();
}
}
function handleFiles(files) {
var d = document.getElementById("fileList");
var elementArray = document.getElementsByClassName("ImgNameUp");
var ReValue = true;
for (var i = 0; i < elementArray.length; ++i){
if(elementArray[i].innerHTML == files[0].name){
ReValue = false;
}
}
$('.ImgNameUp2').append('<div class="ImgNameUp">'+files[0].name+'</div>')
if (ReValue) {
alert('true');
} else {
alert('false');
}
}
what do i do,change in code that it working right?
Your input fields are listening to the onchange event to fire the javascript.
According to W3C's document:
onchange event occurs when a control loses the input focus and its
value has been modified since gaining focus
if you try to upload the same file, the value of file input does not change so does not fire the function. I think Chrome is the only browser to implement this "correctly".
If you want to upload twice, clear file input value:
function doClick() {
var el = document.getElementById("fileElem");
$(el).val(null); // <-- this line
if (el) {
el.click();
}
}
http://jsfiddle.net/s9mt4/2/
Please go here to see an iframe based web app.
Click on the map of Australia, choose a city, then buy some tickets.
Now you will see the cart form located on the lower right corner.
The problem is in IE8, I cannot delete checked rows from the table;
whereas in other browsers such as FireFox3.6, Opera10, Safari4 and Chrome4, this
action is all right.
Below is the related javascript. It doesn't use jQuery, as part of the requirement
is no framework allowed! And iframes are the my best bet, ajax will simply kill me under this restriction.
/* cartForm.js */
function toDeleteRoutes() //this function is executed before form is to be submitted.
{
if(document.getElementsByClassName('delete_box').length > 0) //there're rows to delete
{
document.getElementById('cartForm').action ="./deleteRoutes.php";
document.getElementById('cartForm').target ="section4";
return true; //this enables the form to be submitted as usual.
}
else return false; //there is no more row in table to delete!
}
function toSendEmail() //this function is executed before form is to be submitted.
{
document.getElementById('cartForm').action ="./sendEmail.php";
document.getElementById('cartForm').target ="section3";
document.getElementById('delete_btn').disabled = true; //disable delete button now
return true; //this enables the form to be submitted as usual.
}
function toCancelPurchase()
{
document.getElementById('cartForm').action ="./cancelPurchase.php";
document.getElementById('cartForm').target ="section4";
return true; //this enables the form to be submitted as usual.
}
I don't know which part is wrong, or this is just because IE8 screws all?
You are using the document.getElementsByClassName method, and it is not available on IE.
You should include a custom function to have this functionality.
Personally I like a slightly modified version of the Dustin Diaz implementation:
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) { // use native implementation if available!
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if (pattern.test(els[i].className)) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
Check the following article, there are plenty implementations that you can use:
getElementsByClassName Speed Comparison