I have a button in a page:
<asp:Button ID="BtnOpening" runat="server" Text="Locale" OnClientClick="TipologiaMenuClick('1')" AutoPostBack="False" CausesValidation="False" />
Clicking this button calls a javascript:
function TipologiaMenuClick(TipoMenu)
{
...
some things
...
var BtnRefreshMenuList = document.getElementById('MainContent_BtnRefreshMenuList')
if (BtnRefreshMenuList != null)
{
alert('1');
BtnRefreshMenuList.click();
alert('2');
}
}
BtnRefreshMenuList is a button calling a procedure in the backend.
With FireFox I see the first alert, then the backend is called (I have a breackpoint there).
With Edge or Chrome, I see the first alert, the backend is NOT called, and I see the second alert.
I tried with JQuery
$("#MainContent_BtnRefreshMenuList").click();
but nothing changes: all ok with FireFox, nothings works with Edge or Chrome.
Any suggestion?
Edit 28/07 10:08:
I have new informations:
I tried with a double call:
$("#MainContent_BtnRefreshMenuList").click();
setTimeout(function () { $("#MainContent_BtnRefreshMenuList").click() }, 50);
The first call works with FireFox, I found the second call as a suggestion online, and SHOULD work for other browsers.
In different PCs and different virtual machines I see different behaviours.
In a virtual machine Windows 7 the page works with Firefox, Edge, Chrome, in another virrtual machine with Windows 7 the page works only with Firefox.
In my physical PC Windows 10 the page works with all browsers.
I removed all internet data, cookies included, but nothing changes.
This thing is driving me CRAZY.
Edit 28/07 11:12:
browser compatibility is bettere with
setTimeout(function () { $("#MainContent_BtnRefreshMenuList").click() }, 10);
and even better with
setTimeout(function () { $("#MainContent_BtnRefreshMenuList").click() }, 5);
It seems related with the timeout: with 5 milliseconds the page works well with a lot of browsers, from Windows, Iphone, Android.
I have reproduced your situation as simply as I can. Clicking the button does not prevent the 2nd alert from showing, but once you dismiss the 2nd alert it will do the postback, providing you don't lose focus on Chrome for any reason. If you lose focus then the postback won't happen, and the alerts are auto-dismissed. This must be a Chromium thing.
Initial state:
After clicking: "Trigger back end post through JS ..."
After dismissing the alert
Finally
HOWEVER, if I minimise Chrome before dismissing either alert, the postback will never happen.
Here is the ASPX code
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="ClickButtonTest.aspx.vb" Inherits="Scrap.ClickButtonTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
function backEndPostBack() {
var button = document.getElementById("btn_BackEndPost")
if (typeof button !== 'undefined') {
alert("Going to click the button.");
button.click();
button.value = "I've been clicked";
alert("Should never reach this alert because of the postback.")
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Trigger back end post through JS (will click the button below)<br />
<br />
<asp:Button ID="btn_BackEndPost" runat="server" ClientIDMode="Static" Text="I've not been clicked" />
<asp:Literal ID="lit_PostbackStatus" runat="server" >No postback has happened yet...</asp:Literal>
</div>
</form>
</body>
</html>
Here is the VB.NET code
Public Class ClickButtonTest
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
End Sub
Private Sub btn_BackEndPost_Click(sender As Object, e As EventArgs) Handles btn_BackEndPost.Click
lit_PostbackStatus.Text = "btn_BackEndPost_Click was fired on the server..."
End Sub
End Class
Related
Can someone tell me the "best" way to detect Safari and then its version number?
Look, I don't want to do it but I can't find a way to pin down a WORKING version of speechSynthesis on Safari
See below for an example that works on iOS 7.1.2 IF you don't add the onEnd listener. Apart from that everything is peachy.
In my real world full blown example it talks but still won't deliver the at end event.
On iOS 8 there is no issue.
Please offer a best-of-breed agent/version sniffer or a better working-feature-detector.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fini()
{
alert("end");
}
function talk()
{
if (!('speechSynthesis' in window)) {
alert("Unsupported browser");
return;
}
alert("Getting ready.");
var utterance = "Hello World";
var chat = new SpeechSynthesisUtterance(utterance);
chat.addEventListener('end', fini, false);
speechSynthesis.speak(chat);
}
</script>
</head>
<body>
<p>On Safari this example won't fire any known events<br />
onend, onerror, even onended: -</p>
<input type="button" value="Talk" onclick="talk()" />
<br /><br />
No probs on Chrome or Opera. Spewin!
</body>
</html>
For the record, the addEventListener was throwing an exception on 7.2.1 that could be trapped to signify unsupported speech synthesis.
Opera mobile has laryngitis
Different problem same topic: -
You (and I) may question the correctness of this behaviour in Opera but it appears to be as simple as there are no known/registered/available voices for Opera Mobile on my Android phone :-(
"Sing for me Christine! Sing my angel, SING!" Sorry couldn't help it.
So are there any files I have to download?
FYI on Safari, apparently, the speechSynthesis.getVoices method is synchronous which makes life easy. Elsewhere it is asynchronous and will return an array of length 0 on first call.
We need to register an event such as: -
speechSynthesis.onvoiceschanged = function() {
voices = window.speechSynthesis.getVoices();
alert("Voices " + voices.length);
if (!done) theWork();
};
This never fires on Opera Mobile. Curious!
Why don't I get a error from the synthesis specification like "language-unavailable" or "voice-unavailable"?
Because I didn't explicitly specify a language and a voice?
And why does Chrome deliver onvoiceschanged 3 times?
Hi Experts,
I want to know if it is possible in Struts 1.x to display a
confirmation dialog from Struts Action. In more detail :
I have Action Form,Action Class and importList.jsp file. When i click
a button(on the main Jsp file) .. the current importList.jsp is
displayed by setting the properties of Action Form. In this jsp file i
have ok and cancel button. When i click OK button, on the basis of
some condition i want to show the confirmation dialog saying yes or
no, if the user clicks yes it will move forward, and on cancel.. it
will move to main jsp file(not to importList.jsp file)
Any ideas ....
You can use javascript to get this done. Instead of "Yes/No" dialog you will get "Ok/Cancel" dialog box. You will have to replace "importList url" and "main page url" with your actual urls.
This may not be syntactically accurate but it's a start.
<head>
<script type="text/javascript">
$(document).ready(function(){
$('input[type=submit]').click(function(){
var answer = confirm("You will be forwarded. ");
if(answer){
//your logic
document.location.href="importList url";
}else{
//your logic
document.location.href="main page url";
}
});
});
</script>
</head>
<body>
<input type="submit" value="Ok" />
</body>
I am trying to offer a playlist of videos and only play a video once its link was clicked. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WW Video Player</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="video_player" class="video-js vjs-default/skin" width="800" height="600" data-setup='{ "controls": true }'></video>
<script type="text/javascript">
videojs("video_player", {}, function() {});
function SelectVideo(path)
{
var mplayer = videojs("video_player", { "controls": true, "autoplay": false });
mplayer.src({ type:"video/mp4", src: path});
mplayer.play();
mplayer.requestFullScreen();
}
</script>
Play Video
</body>
</html>
In the <video> tag, I have tried adding plain controls and removing data-setup, but I can't get the controls to show up.
Furthermore, mplayer.requestFullScreen(); isn't working, either - here's Firebug's error message:
TypeError: mplayer.requestFullScreen is not a function
I'm running Firefox 22.0 on Windows 7 64bit.
Any ideas? Thanks!
Video.js is good and bad at the same time. I appreciate the work that's gone into it, but I've spent days getting it to work correctly. I wish I'd found your answer earlier, codoplayer looks good.
Videojs goes wrong whenever a javascript error occurs, and subsequently fails to set the correct classes on the control bar etc.
The bad javascript could be in your own code, and there is one in video.js that affects Firefox.
First, make sure your own scripts aren't failing...
The function that must be changed in video.js is: vjs.Player.prototype.techGet()
When an exception occurs, it handles it, then re-throws at the end. Replace the line 'throw e;' with 'return null;'
Why? There are methods within video.js that do not seem to realise that techGet could throw.. here is an example:
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
It throws an exception on techGet whenever the tech is flash, which is common in Firefox, IE8 etc. It will never reach this.cache_.src || ''. It looks like that wasn't the intention, so it's probably a bug.
If interested in IE8, you will have to do something with all the calls to innerHTML, they may fail and will need replacing with a method that works on the DOM instead.
My button handler gets called twice - once for mousedown/touchstart and a second time for mouseup/touchend.
This happens both on my iPhone device and in my Chrome Browser.
Using ST 1.1
I haven't found any references to this problem which seems to suggest that something in my env is wrong, but I'm running out of things to check ...
Examining the event objects passed to the handler in Chrome DevTools I can see that they're both simulated "tap" events, the first originating from "mousedown" and the second from "mouseup".
Any ideas ?
EDIT:
I've found out that this happens when I add a call (even with an empty handler) to Ext.EventManager.onDocumentReady.
If I remove this call, I only get clicks on "mouseup" as expected.
If I replace it with Ext.onReady it works !!!
This is really bewildering since one is an alias for the other ...
code reproduction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="resources/Sencha/sencha-touch-debug.js" type="text/javascript"></script>
<link href="resources/Sencha/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
MyPanel = Ext.extend(Ext.Panel, {
fullscreen: true,
initComponent: function() {
this.items = [{
xtype: 'button',
text: 'Login',
handler: this.myHandler,
scope: this
}];
MyPanel.superclass.initComponent.apply(this, arguments);
},
myHandler: function(b, e) {
console.log(e.event.type);
}
});
Ext.EventManager.onDocumentReady(function() {
});
Ext.onReady(function() {
new MyPanel();
});
</script>
</head>
<body></body>
</html>
I've had this problem with with undecorated link nodes. I managed to fix it by eating touchend events on A nodes:
document.addEventListener('touchend', function(e) {
e.preventDefault() if e.target.localName == 'a')
}, true);
This isn't exactly your problem, but chances are that your problem is simliar, caused by both touch and click events being sent to the widget. Here's a method I use to spam my console with as much of all events being sent (that's raw DOM events, not Ext events) as possible. It's useful for troubleshooting low-level problems like this.
I'm making a mobile version of my website, and trying to make it feel as native as possible on the iphone. However, any background areas of the page respond to swiping gestures such that you can shift the page partway off the screen. Specifically, if the user touches and swipes left, for example, the content shifts off the edge of the screen and one can see a gray background 'behind' the page. How can this be prevented? I'd like to have the page itself be 320x480 with scroll-swiping disabled (except on list elements that I choose).
I have added the following meta tags to the top of the page:
<meta name="viewport" content="width=320; height=480; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
I've also tried the following as the event handler for the touchstart, touchmove, and touchend events of the body element:
function cancelTouchEvent(e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
return false;
}
It doesn't stop the swiping behavior, but does prevent clicks on all links on the page...
Any help is much appreciated. Thanks!
I had the same problem, but on the iPad, and couldn't find anyone who had been able to solve the problem in the general case, but I believe I have come up with a solution that works.
The solution is (in Javascript) --
document.addEventListener('touchmove', function(e) {
if (e.preventDefault) { e.preventDefault(); }});
Simple, no? It works by preventing the default behavior on 'touchmove' events, so the swiping of the background doesn't happen. It doesn't affect the simulated click events.