getUserMedia Not working when inside a function - javascript

Why is this code not working:
videoCallButton.onclick = function()
{navigator.getUserMedia(mediaConstraints, handleUserMedia, handleUserMediaError);
};
but this one It is:
videoCallButton.onclick = navigator.getUserMedia(
mediaConstraints, handleUserMedia, handleUserMediaError
);
and the event onclick works everytime page is loaded, without clicking
videoCallButton.onclick = alert("yes");

Related

preventDefault to stop refresh on anchor tag click

I have below line of code which simply places a link on the parent page:
<caps:msg textId="createNews"/>
Onclick of the above link 2 functions are getting called:
###func1():
var timestamp;
function func1() {
timestamp = +new Date();
return false;
}
###func2():
function func2(param1,param2,param3,param4){
var win;
var location = window.location.href; // location A
var encodeStringVar = encodeString(param3);
win = window.open(param1+'/struts1.action?param2='+param2+'&param3='+ escape(encodeStringVar) +'#'+param4,target='t1','toolbar=no,scrollbars=yes,menubar=no,location=no,width=990,height=630, top=100, left=100');
window.location.href = location; // location A
return win;
}
On click of link on parent page, a popup opens by calling struts action, and it works just fine. Only problem is when the link on parent page is clicked, it refreshes the parent page. I don't want it to refresh and I tried adding return false in the link and Javascript void() function, Also I tried by adding an event listener for click event on this link as below:
$(document).ready(function() {
$("#createNewsLink").click(function(event) {
//return false;
event.preventDefault();
})
})
and below:
$(document).ready(function() {
document.getElementById("createNewsLink").addEventListener("click", function(event) {
event.preventDefault();
});
})
But none of these did the trick, can someone please point out the mistake in my code?
Could you consider to try :
(function(){
var linkElement = document.querySelector('#createNewsLink');
linkElement.addEventListener('click',function(e) {
var param1 = e.target.getAttribute('attr-param1');
var param2 = e.target.getAttribute('attr-param2');
console.log(param1,param2);
// Do what ever you want here.
e.preventDefault();
});
})();
Click me
Here i avoid any Event binding from html, and centralize all traitment / binding in one place. Then i point one way to find back mandatory params for your traitment.

Chrome Extension - Trigger not Work

i try create simple Chrome Extension, after click button in pop-up, i need send function setInput() to page, function change value and i need use trigger('keyup'), if i try use this function in Chrome Console - trigger work. But if i send this function after click in pop-up - trigger not work(
Chrome Extension - Trigger not Work
Console - Trigger Work
popup.html
<head>
<script src="popup.js"></script>
</head>
<body>
<div class="btn">Click</div>
</body>
popup.js
function sendMessage() {
chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
var activeTab = tabs[0];
chrome.tabs.sendMessage(activeTab.id, {"message": "start"});
});
}
function onWindowLoad() {
chrome.tabs.executeScript(null, { file: "PageReader.js" });
}
document.addEventListener("DOMContentLoaded", function() {
var btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
sendMessage();
});
});
window.onload = onWindowLoad;
PageReader.js
- in file top i include Jquery
function setInput() {
var input = $('.text input');
input.val('1111').trigger('keyup');
}
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if( request.message === "start" ) {
setInput();
}
}
);
thanks all for help, i find answer, i delete jQuery, and create event "keyup"
Old:
var input = $('.text input');
input.val('1111').trigger('keyup');
New:
var evt = document.createEvent('KeyboardEvent');
evt.initEvent('keyup', true, true);
var input = document.querySelector('.text input');
input.value = '1111';
input.dispatchEvent(evt);
Please add debugger after btn.addEventListener('click', function() { too see what is going on. if this event handler is attached.
Second thing - you may want to wrap you initialisation code into setTimeout call with let's say 100ms of delay, to check if this page you are dealing with is not only working with some framework that generates this HTML and this is done after DOMContentLoaded. This means basically wrap everything inside
document.addEventListener("DOMContentLoaded", function() {
with setTimeout(function() {/*everything inside goes here*/}, 100)

browser close event not working in chrome

The below code works in FF but in chrome, browser_close_event() is not working. The browser_close_cancel_event() is working though.
The both browser_close_event() and browser_close_cancel_event() functions will fetch ajax call when called.
How can i call a function when user click the 'leave' button in browser close alert.
$( document ).ready(function() {
var oldMousemove = document.body.onmousemove,
onCancel = function () {
// Do something if the user stays.
browser_close_cancel_event();
document.body.onmousemove = oldMousemove;
};
window.onbeforeunload = function() {
// if user click leave
browser_close_event();
document.body.onmousemove = onCancel;
return 'Do you really want to leave?';
};
});

Pagedown editor attach handler to image dialog

I've made my own upload library dialog with Semantic UI's modal. I'm trying to integrate this dialog within the Pagedown editor.
var converter = Markdown.getSanitizingConverter();
var editor = new Markdown.Editor(converter);
editor.hooks.set("insertImageDialog", function(callback) {
uploadModal.load(); // The dialog HTML gets loaded asynchronously
$('body').on('selection', '.upload-modal', function(e, src) {
console.log(src);
callback(src);
});
return true; // tell the editor that we'll take care of getting the image url
});
Everything works fine the first time selecting an image from the dialog, but after that it breaks:
Uncaught TypeError: Cannot call method 'removeChild' of null Markdown.Editor.js
According to this SO question it has something to do with defining the event handler multiple times, but I can't wrap my head around it.
Some more info:
The HTML for initializing the modal is loaded asynchronously, here is the JS code:
var uploadModal = (function() {
/**
* Load the upload modal.
*/
this.load = function() {
var $modal = $('.upload-modal');
if ($modal.length) {
// Show the already existing modal.
$modal.modal('show');
} else {
// Get the HTML
var request = $.get(appUrl('admin/upload/modal'));
request.done(function(html) {
// Make the modal.
var $modal = $(html);
$modal.modal({
observeChanges: true,
onApprove: function () {
var upload = $modal.find('.selected.upload'),
src = upload.find('.image > img').attr('src');
// Bind the event listener which will return the upload's source URL
$modal.trigger('selection', src);
return true;
}
}).modal('show');
// Some event handlers here
});
}
};
})();
I load the modal by calling uploadModal.load() and watch whenever an image is selected by attaching the 'selection' event handler.

How to set value of child pop op elements from parent window using Javascript?

I am calling a pop up window from a parent page using :
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
I then try to set the value of two spans which are on chil pop up from parent window using this childWindow object.
childWindow.onload = function () {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
};
this code works fine as long as I am using chrome. But it refuses to work on IE8. There are no console errors either.
I tried removing childWindow.onload = function () { } but then the page would just sort of refresh on both chrome and IE8.
UPDATE
This did not work either.
function CallPopUp(rowindex,controlname ) {
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}
If test.aspx is in the browser cache, it is possible that the onload event has already happened before you attach your event handler so you're missing it (IE is known to do this with image load events). I'd suggest you check document.readyState before attaching your event handler.
function popupLoad() {
alert('this msg does not shows up when run on IE8');
var hidden1 = childWindow.document.getElementById('hidden1');
var hidden2 = childWindow.document.getElementById('hidden2');
hidden1.innerHTML = rowindex;
hidden2.innerHTML = controlname;
}
var childWindow = open('test1.aspx', '1397127848655', 'resizable=no,width=700,height=500');
if (childWindow.document.readyState === "complete") {
popupLoad();
} else {
childWindow.onload = popupLoad;
}
As another option, you can put the values into the query parameters for the URL:
`"test1.aspx?hidden1=" + rowindex + "&hidden2=" + controlname`
and then have the popup window load it's own fields from it's own onload handler from what's in the query string. Then, you can keep the code in the popup window self contained and you don't have to try to modify one window from another.
If you don't want the user to see this or be able to edit it, you can turn off the location bar in the popup window.

Categories