We Keep Coding

jQuery on Button Click in mobile devices

I have a Button
d3.select("#updatebutton").on("click", function(e) {
try{
$.get('any url', function(data) {
alert('Any Alert Message');
window.location.href = window.location.href;
});
}
catch (e) {
alert('Error: ' + e);
}
}
where i want to do certain actions on the button click event:
app.get('any url', function(req, res, next) {
try{
anyfunction();
}
catch(e) {
alert('Error');
}
});
It is working fine on normal web browser, however if I open my webpage on a mobile device, it seems that the click event is never called and nothing happens. Is this a jQuery Problem or am I missing something?
The Code is running on a node.js Server.
Hope anyone can help.
UPDATE:
I'm using jade as rendering-engine for HTML. My Button looks like the following:
div#updatebutton
i.fa.fa-repeat.fa-lg
| 'some description'

Try with touchstart event.
UPDATE
Please check.
var myButton = d3.select("#updatebutton");
myButton.on("touchstart", onDown);
function onDown() {
alert("Work");
try{
$.get('any url', function(data) {
alert('Any Alert Message');
window.location.href = window.location.href;
});
}
catch (e) {
alert('Error: ' + e);
}
}

You can detect user device using navigator object. Refer this
If device is touch enabled then use touchstart/touchend events or use click events for desktops(click events should work in mobile browsers too, can not guess the reason by going through the provided code)
Try this:
function is_touch_device() {
return (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0));
}
var myButton = d3.select("#updatebutton");
var myEvent = is_touch_device() ? 'touchend' : 'click';
myButton.on(myEvent, onDown);
function onDown() {
$.get('any url', function(data) {
alert('Any Alert Message');
window.location.reload(); //better way to reload the page
}).fail(function(error) {
console.log(error);
});
}

JavaScript works in debug mode but not working normal mode

$(document).ready(function() {
urlHolder.checkUser = '${checkUser}';
$('#checkUserForm').submit(function() {
checkUser();
});
});
var urlHolder = new Object();
function checkUser() {
$.post(urlHolder.checkUser, {
email : $('#email').val(),
password : $('#password').val(),
}, function(response) {
if (response != null) {
alert('Success! User has been added.');
} else {
alert('Failure! An error has occurred!');
}
});
};
I'm using this code for checking user exist or not. When I used firefox debugger (breakpoint on alert() line ), it worked and server came back a response, but if I didn't put any breakpoint, alert doesn't work, but server came back a response. Note: not only alert() but also window.location.href = "http://stackoverflow.com"; didn't work.

Change the following lines to prevent the form from being submitted:
$('#checkUserForm').submit(function(event) {
event.preventDefault();
checkUser();
});

How to enable OpenTok Plugin for Internet Explorer

I am trying to implement open tok for my video chat application.
I am using opentok.min.js v 2.2.9 with php SDK. It is working fine with google chrome and firefox.
According to their announcements, it should work in IE with 32 bit OS.
https://tokbox.com/opentok/libraries/client/js/release-notes.html
But it is not working for me at any version of IE.
Anybody knows how to implement it for IE?
// Detect whether this browser is IE
var isNotIE = function isIE() {
var userAgent = window.navigator.userAgent.toLowerCase(),
appName = window.navigator.appName;
return !(appName === 'Microsoft Internet Explorer' || // IE <= 10
(appName === 'Netscape' && userAgent.indexOf('trident') > -1)); // IE >= 11
};
function connect() {
if (isNotIE() && OT.checkSystemRequirements()) {
session = OT.initSession(apiKey, sessionId);
sendMessage("Session has initialized. Connecting to session ... ");
session.on({
streamCreated: function(event) {
sendMessage("New stream in the session: " + event.stream.streamId);
var parentDiv = document.getElementById(subscriberElement);
var replacementDiv = document.createElement("div"); // Create a div for the publisher to replace
replacementDiv.id = "opentok_subscriber";
parentDiv.appendChild(replacementDiv);
subscriber = session.subscribe(event.stream, replacementDiv, subscriberProperties, function(error) {
if (error) {
console.log(error);
} else {
console.log("Subscriber added.");
}
});
},
streamDestroyed: function(event) {
sendMessage("Stream stopped streaming. Reason: " + event.reason)
},
signal: function(event) {
sendMessage("Signal sent from connection " + event.from.id);
// Process the event.data property, if there is any data.
}
});
session.connect(token, function(error) {
if (error) {
sendMessage("Error connecting: ", error.code, error.message);
} else {
sendMessage("Connected to the session successfully.");
displayBtn('connected');
}
});
}else{
sendMessage("What Should I do if it is IE?? :(");
}
}
function sendMessage(message) {
message = '<br>' + message;
$("#statusbox").append(message);
}

Now that IE versions 8-11 are supported by the plugin, you shouldn't need to switch on the isNotIE() && OT.checkSystemRequirements() condition, you can just use the same code path for all of those browsers.
It may still be a good idea to detect IE versions that are outside that range to let the user know that the feature of your application that uses OpenTok is not supported with some suggestions to upgrade/install.
Otherwise, one code suggestion: In the streamCreated event handler, rather than using 4 lines of code to create a new DOM element and then add it to a container, you can use the insertMode: "append" option. This works for both Publishers and Subscribers.
Before:
var parentDiv = document.getElementById(subscriberElement);
var replacementDiv = document.createElement("div"); // Create a div for the publisher to replace
replacementDiv.id = "opentok_subscriber";
parentDiv.appendChild(replacementDiv);
subscriber = session.subscribe(event.stream, replacementDiv, subscriberProperties, function(error) {
if (error) {
console.log(error);
} else {
console.log("Subscriber added.");
}
});
After:
subscriber = session.subscribe(event.stream, document.getElementById(subscriberElement), { insertMode: "append" }, function (error) {
if (error) {
console.log(error);
} else {
console.log("Subscriber added.");
// Set the ID of the DOM element if thats used elsewhere in the code
subscriber.element.id = "opentok_subscriber";
}
});

Invoke a web service form JQuery: doesn't work in IE (JQMIGRATE: jQuery.browser is deprecated ??)

I'm a newbie in Ajax and JQuery but I need to invoke a web service in my little web application HTML/Javascript based.
All works fine using Firefox or Chrome but nothing happens using IE (I'm using IE 9 now ...).
Here you are the code
if ($.browser.msie && window.XDomainRequest) {
if (window.XDomainRequest) {
var query = 'http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Numeri_Civici_2012.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=IN.NUMERICIVICI.2012&SRSNAME=EPSG:4326&bbox=7.70,44.80,7.75,44.85&outputFormat=GML2';
var xdr = new XDomainRequest();
if (xdr) {
xdr.onload = function () {
alert("OK");
}
xdr.onerror = function () {
alert("KO");
}
xdr.open('GET', query);
xdr.send();
}
}
}
else {
var query = 'http://wms.pcn.minambiente.it/ogc?map=/ms_ogc/wfs/Numeri_Civici_2012.map&SERVICE=WFS&VERSION=1.0.0&REQUEST=GetFeature&TYPENAME=IN.NUMERICIVICI.2012&SRSNAME=EPSG:4326&bbox=7.70,44.80,7.75,44.85&outputFormat=GML2';
$.ajax({
type: "GET",
url: query,
dataType: "text",
crossDomain: true,
success: function (data1) {
alert("OK");
alert(data1)
},
error: function (response, textStatus, errorThrown) {
alert("KO");
alert(errorThrown);
}
});
}
I tried to synthesize in a jsfiddle so you can try if you want.
When I try to execute in IE the browser console tell me that ...
JQMIGRATE: jQuery.browser is deprecated
How can I modify my code?
Thank you all in advance, any suggestion or wokaround will be appreciated!!!
Cesare

The $.browser function is, indeed, deprecated. If you want to detect IE, use this instead:
var browser = navigator.userAgent.toLowerCase(),
isIE = (browser.indexOf("msie")>-1 || browser.indexOf("trident")>-1);
if (isIE && window.XDomainRequest) {
//the rest of your code
}

Best Practise to check Internet connection in javascript

I am using Ajax to check my internet connection after every few second for my application which is using IE instance. But due to low bandwidth my internet explorer is crashing.
What best practise can be followed to check the internet connection so that it prevent crashing of internet explorer and boost performance ?
I am using the following code to check my internet connection.
The explanation of which is given at: -
http://tomriley.net/blog/archives/111 from where I get the jquery file.
(function ($) {
$.fn.checkNet = function (intCheckInterval, strCheckURL) {
if (typeof (intCheckInterval) === 'undefined') {
var intCheckInterval = 5
} if (typeof (strCheckURL) === 'undefined') {
var strCheckURL = window.location
} else if (strCheckURL.indexOf('http') === -1) {
var strCheckURL = 'http://' + strCheckURL
} intCheckInterval = intCheckInterval * 1000; function doRequest(strCheckURL) {
$.ajax({ url: strCheckURL, cache: false, success: function () {
if ($('#netWarn').length) {
$('#netWarn').fadeOut()
} $('.tempDisabled').removeAttr('disabled').removeClass('tempDisabled')
}, error: function () {
if (!$('#netWarn').length) {
$('body').prepend('<p id="netWarn">No internet connection detected, some features will be re-enabled when a connection is detected. </p>'); $('#netWarn').fadeIn()
}
}
})
} setInterval(function () {
doRequest(strCheckURL)
}, intCheckInterval)
}
})(jQuery);

my plugin takes an argument for the length of time between the requests. So, if you want a 10sec interval between requests, call it with this code:
$.fn.checkNet(10);
...after you've included the plugin. I uploaded a new version recently which works much more efficiently.