I'm developing an ASP.NET MVC4 web application. I want to create views that is spesific for mobile browsers. I have followed this tutorial http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features. I have installed the package jQuery.Mobile.MVC and added the requested line to the Global.asax file. The installation have created a file called _Layout.Mobile.cshtml, and this file looks like this:
_Layout.Mobile.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
#Html.Partial("_ViewSwitcher")
<div data-role="header">
<h1>#ViewBag.Title</h1>
</div>
<div data-role="content">
#RenderSection("featured", false)
#RenderBody()
</div>
</div>
</body>
</html>
I also added a mobile view for the index view.
Index.Mobile.cshtml
#{
ViewBag.Title = "Home";
}
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
But when I open the webpage in an iPhone simulator, the page looks nothing like the one in the tutorial. It is blank with plain text. I have viewed the page source and can see that only the site.Mobile.css file is loaded.
<head>
<meta charset="utf-8" />
<title>Home</title>
<meta name="viewport" content="width=device-width" />
<link href="/Content/Site.Mobile.css" rel="stylesheet"/>
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.js"></script>
<script>
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
I created a new web application project through VS2012, but this time I chose the Mobile Application template. When I run this project and view the page source, a lot more css-files is displaying.
<head>
<meta charset="utf-8" />
<title>Log in</title>
<meta name="viewport" content="width=device-width" />
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Content/jquery.mobile-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.structure-1.2.0.css" rel="stylesheet"/>
<link href="/Content/jquery.mobile.theme-1.2.0.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
I have checked that all of these files exists in my webApp project, but for some reason they are not loading. What am I doing wrong?
I have managed to figure this out, but the solution was a tricky one so I'm answering my own question in case others experience the same problem.
I changed the App_Start/BundleMobileConfig.cs from:
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-{version}.css"
));
to
bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
"~/Content/jquery.mobile-1.3.1.min.css",
"~/Content/jquery.mobile.structure-1.3.1.min.css",
"~/Content/jquery.mobile.theme-1.3.1.min.css"
));
It looks like I only got the minified version of the jquery mobile css, while the stylebundle was looking for the original version. I think this is a bug when installing the jquery.mobile.MVC package.
Related
I have tried implementing Bundling in Asp.net webform projects.
My Bundleconfig:
System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.ScriptBundle("~/bundle/LoginPageJS")
.Include("~/assets/js/jquery-1.11.2.min.js", "~/assets/bootstrap/js/bootstrap.min.js", "~/assets/js/validatr.js", "~/assets/js/jquery.placeholder.js"));
System.Web.Optimization.BundleTable.Bundles.Add(new System.Web.Optimization.StyleBundle("~/bundle/LoginPageCSS")
.Include("~/assets/bootstrap/css/bootstrap.css", "~/assets/styles/stylesheet.css",
"~/assets/styles/non-responsive.css", "~/assets/styles/Window.css", "~/IACMSkin/Window.IACMSkin.css"));
BundleTable.EnableOptimizations = true;
MasterPage:
<head runat="server">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My Sample</title>
<%: #Styles.Render("~/bundle/LoginPageCSS") %>
<%: #Scripts.Render("~/bundle/LoginPageJS") %>
</head>
It's working in my local machine as well as VM(Windows server 2016 IIS10) and not in UAT environment.
The difference I see here is
Below is from my local and VM:
<link href="/bundle/LoginPageCSS?v=1FyFAVt-XUmly2H-AbvXacpx3b4ou5J-Tsk2Ac5PxaE1" rel="stylesheet"/>
<script src="/bundle/LoginPageJS?v=Kw5fkDuqDSQdMcwvucaZg-o1ChJ6qAulChBWIhFdZhc1"></script>
Below is from UAT:404 error
<link href="/bundle/LoginPageCSS" rel="stylesheet"/>
<script src="/bundle/LoginPageJS"></script>
I checked debug="false" as well.
Please help
I've been trying to get a Javascript function to fire when my page's AJAX processing is triggered without success. Most of my time has been spent trying to get the OnBegin AjaxOption value working, but I have spent time with the global JQuery .ajaxSend handler as well (which I believe might not be compatible with ASP.NET MVC), both without success.
I've reduced my page to something pretty simple. My Index.cshtml for the project is:
#using SalePointWebItemInquiry.Controllers
#using System.Web.Mvc.Ajax
#{
ViewBag.Title = "Home Page";
}
#Scripts.Render("~/bundles/jquery", "~/bundles/jqueryval")
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
#using (Ajax.BeginForm("PressButton",
"Home",
new AjaxOptions
{
OnBegin = "TestFunction"
}))
{
<div>
<input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
}
The page that this renders is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="container body-content bordered">
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
<form action="/Home/PressButton" data-ajax="true" data-ajax-begin="TestFunction" id="form0" method="post">
<div>
<input class="btn btn-default" type="submit" id="1" name="buttonType" value="Enter" />
</div>
</form>
<footer>
<div class="row">
<div class="col-md-5">
<p>© 2015 - Application</p>
</div>
<div class="col-md-7 text-right">
Version: Put version here
</div>
</div>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"d2eef5342ac64f3db1545856102f4a6f"}
</script>
<script type="text/javascript" src="http://localhost:53954/45ae7332668647b5a3795d87cd6ba1a9/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Does anyone have any thoughts on why the TestFunction() Javascript function isn't firing when I click the ENTER button?
Solution:
Thanks for the help :). I wasn't properly referencing jquery.unobtrusive-ajax.js. The direct solution to my problem was to use Nuget to retrieve a Javascript package that wasn't local using this command at Nuget console:
Install-Package Microsoft.jQuery.Unobtrusive.Ajax
Since I didn't have jquery.unobtrusive-ajax.js locally, all of my attempts to reference it locally failed. I may have tried a CDN reference once or twice, but that never worked out and I had a lot of theories as to the cause of the problem at the time.
I didn't even have to change the code. This code in BundleConfig.cs automatically included the file once I had retrieved it:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.unobtrusive*",
"~/Scripts/jquery.validate*"));
You have duplicated
<script src="/Scripts/jquery-1.10.2.js"></script>
Remove the second one and then you also need to add jquery.unobtrusive-ajax.js in order for Ajax.BeginForm() to work (other wise you just making a normal submit - and therefore TestFunction() will never be called)
Looks like you are loading your script before JQuery can load. Scripts need to load at the bottom of the page just before the body tag and after JQuery loads.
Please try
#section Scripts
{
<script type="text/javascript">
function TestFunction() {
alert("Calling testfunction.");
}
</script>
}
This will place the script after JQuery loads.
I'm using a Bootstrap template and their HTML and their CSS / JS load order is like this:
<!DOCTYPE html>
<!--[if IE 8]> <html class="ie ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<title>Atropos - Responsive Multipurpose</title>
<meta name="keywords" content="HTML5,CSS3,Template" />
<meta name="description" content="" />
<meta name="Author" content="Dorin Grigoras [www.stepofweb.com]" />
<!-- mobile settings -->
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=0" />
<!-- WEB FONTS -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800" rel="stylesheet" type="text/css" />
<!-- CORE CSS -->
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css" />
<link href="assets/plugins/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css" />
<link href="assets/css/animate.css" rel="stylesheet" type="text/css" />
<link href="assets/css/superslides.css" rel="stylesheet" type="text/css" />
<!-- REVOLUTION SLIDER -->
<link href="assets/plugins/revolution-slider/css/settings.css" rel="stylesheet" type="text/css" />
<!-- THEME CSS -->
<link href="assets/css/essentials.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout-responsive.css" rel="stylesheet" type="text/css" />
<link href="assets/css/color_scheme/orange.css" rel="stylesheet" type="text/css" /><!-- orange: default style -->
<!--<link id="css_dark_skin" href="assets/css/layout-dark.css" rel="stylesheet" type="text/css" />--><!-- DARK SKIN -->
<!-- styleswitcher - demo only -->
<link href="assets/css/color_scheme/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />
<link href="assets/css/color_scheme/red.css" rel="alternate stylesheet" type="text/css" title="red" />
<link href="assets/css/color_scheme/pink.css" rel="alternate stylesheet" type="text/css" title="pink" />
<link href="assets/css/color_scheme/yellow.css" rel="alternate stylesheet" type="text/css" title="yellow" />
<link href="assets/css/color_scheme/darkgreen.css" rel="alternate stylesheet" type="text/css" title="darkgreen" />
<link href="assets/css/color_scheme/green.css" rel="alternate stylesheet" type="text/css" title="green" />
<link href="assets/css/color_scheme/darkblue.css" rel="alternate stylesheet" type="text/css" title="darkblue" />
<link href="assets/css/color_scheme/blue.css" rel="alternate stylesheet" type="text/css" title="blue" />
<link href="assets/css/color_scheme/brown.css" rel="alternate stylesheet" type="text/css" title="brown" />
<link href="assets/css/color_scheme/lightgrey.css" rel="alternate stylesheet" type="text/css" title="lightgrey" />
<!-- /styleswitcher - demo only -->
<!-- STYLESWITCHER - REMOVE ON PRODUCTION/DEVELOPMENT -->
<link href="assets/plugins/styleswitcher/styleswitcher.css" rel="stylesheet" type="text/css" />
<!-- Morenizr -->
<script type="text/javascript" src="assets/plugins/modernizr.min.js"></script>
</head>
<body><!-- Available classes for body: boxed , pattern1...pattern10 . Background Image - example add: data-background="assets/images/boxed_background/1.jpg" -->
-- LOTS OF HTML HERE --
<!-- JAVASCRIPT FILES -->
<script type="text/javascript" src="assets/plugins/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.appear.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.isotope.js"></script>
<script type="text/javascript" src="assets/plugins/masonry.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/magnific-popup/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/plugins/stellar/jquery.stellar.min.js"></script>
<script type="text/javascript" src="assets/plugins/knob/js/jquery.knob.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="assets/plugins/superslides/dist/jquery.superslides.min.js"></script>
<script type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js"></script><!-- STYLESWITCHER - REMOVE ON PRODUCTION/DEVELOPMENT -->
<script type="text/javascript" src="assets/plugins/mediaelement/build/mediaelement-and-player.min.js"></script>
<!-- REVOLUTION SLIDER -->
<script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.plugins.min.js"></script>
<script type="text/javascript" src="assets/plugins/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="assets/js/slider_revolution.js"></script>
<script type="text/javascript" src="assets/js/scripts.js"></script>
<!-- Google Analytics: Change UA-XXXXX-X to be your site's ID. Go to http://www.google.com/analytics/ for more information. -->
<!--<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X', 'domainname.com');
ga('send', 'pageview');
</script>
-->
</body>
There's quite a bit of JS at the bottom that need to be loaded only after the DOM is 100% ready in the browser.
Unfortunately I'm having a hard time getting the timing right - my page still does not function like the demo does - the Slider doesn't show up, parallax doesn't work, and I'm sure a lot of things also don't work that I haven't noticed. I'm sure this is happening because some DOM nodes don't exist yet by the time the JS (normally all loaded at the bottom) is loaded by Meteor.
Here's what I've tried:
NOTE: I would also like to put a lot of these JS files directly into client/javascripts so that I can take advantage of Meteor's auto-minifying and bundling feature on production
1 . I figure that after the layout template is rendered is when the DOM should be ready, so I'm going to append the script tags to the body after layout is rendered, but this doesn't work.
Template.layout.onRendered(function() {
console.log('layout rendered');
var appendToHead = function(array){
for (index in array){
$('head').append(array[index]);
};
};
var array = [
// an array of all the script tags
'<script type="text/javascript" src="assets/plugins/jquery-2.0.3.min.js"></script>',
'<script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>'
// etc...
];
appendToHead(array);
});
I've tried wrapping this function in a Tracker.afterFlush() but that's not working either.
I've tried putting this function into main.js but that's not working.
I've tried wrapping this in Meteor.startup() and doesn't work.
I've even tried wrapping this in $('document').ready() and it didn't work.
I'm going to go out on a limb and say that even putting everything into its own package won't work, since packages can only control the package load order based on its dependencies on other JS files, but doesn't have the ability to control load order based on DOM status, right?
BTW, I put console logs next to each attempt and here is the order they were fired.
code inside Tracker.afterFlush has been fired
code inside main.js has been fired
code inside jQuery document.ready() has been fired
code inside layout.onRendered has been fired
Part of the difficulty is the fragmented template nature of Meteor. A piece of JS code (let's say a slideshow) needs a DOM element to exist before it can run. It doesn't make sense to have that code load when the layout is rendered, because the layout is just the layout and won't have the DOM element. The DOM element the slideshow needs is contained in the {{> intro}}, {{> photos}}, and {{> videos}} templates.
But it's also tedious to write code that loads the slideshow JS three separate times for those three separate templates...
What if there are eight different 3rd-party JS scripts that you're using? One template uses four, another uses eight, another uses one, another uses six. It would be a complete pain to have to define EXACTLY which scripts are to load in the onRendered callback of each seperate template, over and over again.
You can use your main template's rendered() method to load the required JS scripts in given order. Lets say your main template (or top level template) is named as appLayout then you can define rendered() method as below.
Place your all JS files in public\js folder in your meteor app.
Template.appLayout.rendered = function() {
if (!window.allScriptsLoaded) {
var scripts = [
// list of JS files to be loaded.
'js/libs/jquery-2.1.1.min.js',
'js/libs/jquery-ui-1.10.3.min.js',
'js/plugin/jquery-touch/jquery.ui.touch-punch.min.js',
'js/bootstrap/bootstrap.min.js'
];
function loadNext() {
var src = scripts.shift();
if (typeof src === 'undefined')
return;
var s = document.createElement("script");
s.setAttribute('src', src);
if (s.addEventListener) {
s.addEventListener("load", loadNext, false);
} else if (s.readyState) {
s.onreadystatechange = loadNext;
}
document.body.appendChild(s);
};
loadNext();
window.allScriptsLoaded = true;
}
}
This way you can have exact control on load order of your files.
So I'm using a jQuery plug-in called Coin Slider. The slideshow seems to be working fine but I want to connect it with a database that I have created in the App_Date folder in Visual Studio 2010.
When clicked on a certain picture, I want the system to search the table in the database using the description of that particular image in the slideshow as a keyword. If the item exists in the database, it would go to the website mentioned in the href. Otherwise, it would display "item not found".
All I've done is make the slideshow.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="css/coin-slider/coin-slider.min.js" type="text/javascript"></script>
<link href="css/coin-slider/coin-slider-styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('#coin-slider').coinslider();
});
</script>
</head>
<body>
<div id='coin-slider'>
<a href="the first website goes here" target="_blank">
<img src='1.jpg' >
<span>
Description goes here
</span>
</a>
<a href="the second website goes here">
<img src='2.jpg' >
<span>
Description goes here
</span>
</a>
</div>
</body>
</html>
Any help would be appreciated.
I am using JQuery for the first time today. I can't make it to work (It simple doesnt show up). I want to display inline content using Thickbox (Eventually I will be displaying a PDF in an iframe). I have included all the javascript and css files etc. and referenced them as in code below.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryLearning._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="Scripts/thickbox.js" type="text/javascript"></script>
<script src="Scripts/thickbox-compressed.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="App_Themes/Theme/Css/thickbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="#TB_inline?height=50&width=300&inlineId=hiddenModalContent"
title="Simple Demo" class="thickbox">Show hidden content.</a>
<div id="hiddenModalContent" style="display: none;">
<div style="text-align: center;">
Hello ThickBox!</div>
</div>
</div>
</form>
</body>
</html>
Am I missing something?
Thanks,
Ali
I think you need to alter the sequence of the script files, otherwise they won't work properly:
<script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Scripts/thickbox.js" type="text/javascript"></script>
<script src="Scripts/thickbox-compressed.js" type="text/javascript"></script>
<link href="App_Themes/Theme/Css/thickbox.css" rel="stylesheet" type="text/css" />
Also: Aren't "thickbox.js" and "thickbox-compressed.js" different compression formats of the same module? In that case, you can omit one of them. If you want to debug inside the js, you need "thickbox.js", otherwise "thickbox-compressed.js" is sufficient.