I just created mvc 4 application. In that application I want to show alert,if user open this web application using Internet Explorer 6,7 and 8
This is the code I put top of "_Layout.cshtml" file
#if ((Request.Browser.Browser == "IE") & ((Request.Browser.Version == "8.0") | (Request.Browser.Version == "7.0") | (Request.Browser.Version == "6.0")))
{
<script type='text/javascript'>
alert("You're using older version of Internet Explorer")
</script>
}
But this is not checking internet explorer version , it gives me pop up for almost all the versions of Internet Explorer ( Edge(11) , 10 , 9 , 8 , 7, 6 )
How can I filter those versions separately
Try this-
#if (Request.Browser.Browser == "IE" && Convert.ToDouble(Request.Browser.Version) < 7.0)
{
<script type='text/javascript'>
alert("You're using older version of Internet Explorer")
</script>
}
Edit-
This checks if current version of IE is lower than 7.0, You can change the version number accordingly.
Edit 2-
I just realized my browser was named as InternetExplorer, So I changed following-
#if (Request.Browser.Browser == "InternetExplorer" && Convert.ToDouble(Request.Browser.Version) < 7.0)
{
<script type='text/javascript'>
alert("version is not lower");
</script>
}
The following JavaScript should do what you need:
<script type='text/javascript'>
var div = document.createElement("div");
div.innerHTML = "<!--[if lt IE 9]><i></i><![endif]-->";
var isIeLessThan9 = (div.getElementsByTagName("i").length == 1);
if (isIeLessThan9) {
alert("You're using older version of Internet Explorer");
}
</script>
Related
Recently, we have introduced SignalR into our project and hoping use its features. Currently SignalR is used only for showing progress bar on a couple of webpages on the client side for long running processes on the server. Could anyone help me with implementation of the SignalR and its ramifications?
.Net Framework Standard MVC application at at a time more than 3000 users connected to the webapp in Microsoft Azure hosted site.
SignalR is loaded and a connectionID is ($.connection.hub.start().done(function ().....) acquired in the _Layout.chtml. This is because, if the user may open different features in the webapp on different tabs and the these tabs may happen to have progress bars in it. So a unique connection ID on each Tab opened will help the SignalR to process the response.
I suspect a potential problem here for the page load performance and other unknown issues can be triggered because the layout page is opening a new connectionID each time the pages are loaded or refreshed.
Any other standard solution welcome if this is problematic.
Thanks for your help.
_Layout.chtml
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/ProgressBarHelper.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-2.4.2.min.js" type="text/javascript"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript">
var connectionId = null;
$(function () {
// Reference the auto-generated proxy for the hub.
var progress = $.connection.progressHub;
//console.log(progress);
// Create a function that the hub can call back to display messages.
progress.client.AddProgress = function (message, percentage, reportmsg, showProgressReport, autoClose) {
if (CommonProgressBar.IsVisible() == false)
popupProgressBar.Show();
CommonProgressBar.SetPosition(percentage);
$('#popupProgressMessageText').text(message); //+ 'for ' + connectionId);
if (percentage == "100") {
if (autoClose == true) {
popupProgressReportText.SetText("Report");
popupProgressBar.Hide();
}
else {
popupProgressCloseButton.SetEnabled(true);
}
}
else {
if (autoClose == true) {
popupProgressCloseButton.SetEnabled(false);
}
}
var rptmsg = popupProgressReportText.GetText(); // $('#popupProgressReportText').GetText();
if (reportmsg != null && reportmsg != "") {
if (rptmsg != null && rptmsg != "") {
popupProgressReportText.SetText(rptmsg + "\r\n" + reportmsg);
}
else {
popupProgressReportText.SetText(rptmsg);
}
}
};
$.connection.hub.start().done(function () {
connectionId = $.connection.hub.id;
console.log(connectionId);
});
});
</script>
I have a websocket server and I run in a html page the following code:
<!DOCTYPE html><head>
<title>In/Out: Test</title>
<script type="text/javascript">
var socket;
function onLoad() {
socket = new WebSocket("ws://10.10.10.1:80", "inout");
socket.onopen = function() {
socket.send("update");
}
var previous = 0;
socket.onmessage = function got_packet(msg) {
var now = Date.now();
var st = "" + (now - previous) + " ms";
previous = now;
console.log(st);
document.getElementById("debug").innerHTML = st;
}
}
</script>
</head>
<body onload="onLoad();">
<span id="debug" name="debug" style="font-size:300%"></span></body></html>
The server sends messages at least every 100ms.
Everywhere (Windows, Linux, Android, even MacOS), it's working very well, I receive messages at the same rate.
On iOS 11 (iPod touch, iPhone), with ANY browser (Safari, Chrome) it's extremely slow and I receive messages at best every 1200ms.
Here are two devices (Android phone and iPod touch 6th gen):
This report (here) seems to be similar to my problem.
Any idea what could be the issue? Anyone experiencing the same problem?
I'm trying to upload a video to a server in PhoneGap. The code is running in terms of opening the camera dialog and recording the video, but then the JS in the index.html file requires use of the FileTransfer plugin.
Adding this plugin from the phonegap command line results in the following error...
/platforms/ios/ManUtd/Plugins/org.apache.cordova.file-transfer/CDVFileTransfer.m:23:9: 'CDVLocalFilesystem.h' file not found
The html file is the documented code from the PhoneGap website
<!DOCTYPE html>
<html>
<head>
<title>Capture Video</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureVideo() {
// Launch device video recording application,
// allowing user to capture up to 2 video clips
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
</head>
<body>
<button onclick="captureVideo();">Capture Video</button> <br>
</body>
</html>
I have run both these commands and both result in the code breaking
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
I am targeting iOS only at the moment
This appears to be related to the whole PhoneGap/Cordova thing.
Creating a new project using Cordova instead of PhoneGap, has sorted the problem. It appears as if the FileTransfer API is broken if you start an app using PhoneGap.
I have previously successfully tested this MVC functionality in my app in Chrome but have recenlty also tested in IE (10) and Firefox.
When I mash the submit button on a page which sends model values to its controller for running a query and generating a report, it now works only in Firefox (each of the three browser indeed have their own peculiar characteristics -- where they shine or "dull" in relation to their cohorts (gleaming in purple and gold) -- but Chrome and Firefox seem to have lost the connection between the submit button's click handler and the corresponding Controller's method.
The app seems to simply hang after mashing the submit button in Chrome and IE; the breakpoints I have -- the first of which is at the very beginning of the corresponding [HttpPost] ActionResult in the Controller class -- are not reached. In fact, the app seems to freeze after mashing the button -- right-clicking the submit button after that does not give me an "inspect that element" in the context menu.
[HttpPost]
public ActionResult ReceiptCriteria(SalesReceiptCriteriaModel model)
{
if (ModelState.IsValid) // <-- there is a breakpoint here; only Firefox reaches it
{
. . .
In Firefox, it runs, and the breakpoints are hit.
What could possibly cause Chrome and IE to fail in this way, wheras Firefox soldiers on?
UPDATE
In response to Moby's request, here is the jQuery for the View in question:
The HTML in the View is pretty generic; the jQuery is:
$("#submit_button").click(function() {
// http://stackoverflow.com/questions/18192288/how-can-i-compare-date-time-values-using-the-jqueryui-datepicker-and-html5-time
var begD = $.datepicker.parseDate('mm/dd/yy', $('#BeginDate').val());
var endD = $.datepicker.parseDate('mm/dd/yy', $('#EndDate').val());
if (begD > endD) {
alert('Begin date must be before End date');
$('#BeginDate').focus();
return false;
}
else if (begD.toString() == endD.toString()) {
var dteString = begD.getFullYear() + "/" + (begD.getMonth() + 1) + "/" + begD.getDate();
var begT = new Date(dteString + " " + $('#BeginTime').val());
var endT = new Date(dteString + " " + $('#EndTime').val());
if (begT > endT) {
alert('Begin date must be before End date');
$('#BeginTime').focus();
return false;
}
}
$("#NumberOfResults").css("visibility", "visible");
$("#NumberOfResults").html("Please wait...");
EnableButton("submit_button", false);
// If all are selected, don't enumerate them; just set it at "All" (change of case, from 'all' to 'All', shows that the logic did execute)
var deptsList = $('#depts').checkedBoxes();
if (deptsList.length < deptsArray.length) {
$('#deptHeader span').html(deptsList.join(", "));
}
else if (deptsList.length == deptsArray.length) {
$('#deptHeader span').html("All");
}
// " "
var sitesList = $('#sites').checkedBoxes();
$('#sitesHeader span').html(sitesList.join(", "));
if (sitesList.length < sitesArray.length) {
$('#sitesHeader span').html(sitesList.join(", "));
}
else if (sitesList.length == sitesArray.length) {
$('#sitesHeader span').html("All");
}
$('#hiddenDepts').val(deptsList);
$('#hiddenSites').val(sitesList);
var UPCs = $('#UPC').val();
if (UPCs == "All") {
$('#UPC').val("1"); // take everything (1 and greater)
}
var resultsText = jQuery.trim($("#spanNumberOfResults").text());
if (resultsText != "") {
$("#NumberOfResults").css("visibility", "visible");
if (resultsText == "0") {
$("#NumberOfResults").css("color", "red");
} else {
var href = '/#ConfigurationManager.AppSettings["ThisApp"]/TLDCriteria/LoadReport';
var report_parms = {
GUID: "#Model.GUID",
SerialNumber: "#Model.SerialNumber",
ReportName: "#Model.ReportName"
};
window.open(href, "report_window", "resizable=1, width=850, left=" + (screen.width / 2 - 425));
}
}
}); // end of submit button click
function EnableButton(id, enable) {
if (enable) {
$("#" + id).removeAttr("disabled")
.removeClass("bottomButtonDisabled")
.removeClass("bottomButtonEnabled")
.addClass("bottomButtonEnabled");
} else {
$("#" + id).attr("disabled", "true")
.removeClass("bottomButtonDisabled")
.removeClass("bottomButtonEnabled")
.addClass("bottomButtonDisabled");
}
}
UPDATE 2
Something else which may or may not shed some light on this problem is my .js and .css references:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" defer > </script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript" defer> </script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript" defer> </script>
<script src="#Url.Content("~/Scripts/jquery-migrate-1.2.0.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/anytime.compressed.js")" type="text/javascript"> </script>
<script src="#Url.Content("~/Scripts/dynamicCheckboxes.js")" type="text/javascript" > </script>
. . .
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/dynamicCheckboxes.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/anytime.compressed.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="/Scripts/html5shiv.js"> </script>
<![endif]-->
UPDATE 3
The Network tab in the Chrome Developer Tools looks like the middle of Wyoming (a whole lot of nothing), with a msg about the bottom informing me "No requests captured. Reload the page to see detailed information on the network activity."
When I dutifully mashed F5, it showed all the .js and .css files accessed, and finally (at the top), the page I'm gawking at. Mashing the "View Report" causes no more activity in the tab, though. I do see the console.log() msg I placed at the end of the submit button click handler, though, to wit: "made it to the end of submit button click"
There is one err msg in the console, too, but this:
Failed to load resource: the server responded with a status of 400 (Bad Request) http://localhost/%3C%=%20System.Configuration.ConfigurationManager.AppSettings[%22ThisApp%22]%20%%3E/Content/Images/SSCSsprite.png
Would simply fail to load the resource, not wreak other mayhem, right?
UPDATE 4
Based on Simon Halsey's hint, I found that, on stepping though the jQuery in Chrome, it fails this test:
if (resultsText != "") {
...obviously it's not in Firefox, and I assume that it also fails in IE (I'll czech to be sure in both cases, and update this).
Later: It's "" in Firefox, too...and the first time through, it also failed-wouldn't continue on. Second time through, it got through, though...???
There is two options:
There is no request due to javascript error
Your request signature doesnt math controller method
A.
Browsers have different behaivior with some javascript functions. Thats one of the reasons why jQuery is so popular.
The most efficient way to find it is to debug javascript line by line in each browser.
Likely it is the reason.
B.
Also your javascript is quite exotic for me. I guess you are catching sumbit button click and modifying inputs values on a fly.
I would recommend to use $.post or $.ajax and preventDefault instead.
It would make your javascript more clear and simple.
C.
To analyze what requests are sent from your browser I would recommend to use fiddler.
http://fiddler2.com/
Im trying to use jquery mobile with phonegap, in a multi-page document.
Tring to use basic href links within the document, gives the Origin null is not allowed by Access-Control-Allow-Origin error which is quite annoying.
This is because the index page is refered to via file:// rather than http:// which webkit interprets as origin null. Has anyone got jquery mobile and phonegap to work in a multi page environment? if so how can you do it? If you add rel=external to the href tags the links work, but of course all the transitions are lost.
Cant find any info on this specific problem on stack overflow or teh internetz.
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind( "mobileinit", function(){
//alert("mobileinit fired");
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript">
function onDeviceReady() {
navigator.network.isReachable("google.com", reachableCallback, {});
}
// Check network status
function reachableCallback(reachability) {
// There is no consistency on the format of reachability
var networkState = reachability.code || reachability;
var states = {};
states[NetworkStatus.NOT_REACHABLE] = 'No network connection';
states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection';
if (networkState != 0) online = true;
}
var online = navigator.onLine || false;
$(document).ready(function() {
$(document).bind('deviceready', function(){
onDeviceReady()
})
// Your main code
})
//Now if you about to make an AJAX call to load up some dynamic data, you can easily check to see if you're online
if(online) {
} else {
}
</script>
</head>
<body>
<h1>Welcome to PhoneGap</h1>
Edit html
</body>
</html>
Here's the official documentation on how to do just what you are looking for...
Hope this helps!
Leon's comment is the correct answer - you need to add rel="external" to static links.
To Test
Download mongoose http server
copy mongoose_xxxxxxx.exe file to your assets/www
Now you can design your html pages for jquery mobile without Access-Control-Allow-Origin
I think you can find the solution here: http://view.jquerymobile.com/master/demos/faq/how-configure-phonegap-cordova.php
$.mobile.allowCrossDomainPages = true;
$.support.cors = true;
$.mobile.phonegapNavigationEnabled = true
Although I have not gotten it to work, I think that here are the solution.
if you are targeting app above JELLY_BEAN(API Level 16), here is what you can add to MainActivity class.
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
super.appView.getSettings().setAllowUniversalAccessFromFileURLs(true);
}
Which will allow null origin XHR requests.