Hello I am starting to learn in web programming language using asp.net mvc4 and bootstrap. I am getting this error (Server Error in '/' Application) when running my application but if it is in default code it is functioning fine.
These are my codes
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
I didn't change anything here
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="Corinthians 3" />
<title>Sample BS</title>
<!-- Bootstrap Core CSS -->
<link href="#Url.Content("~/plugin/bower_components/bootstrap/dist/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<!-- MetisMenu CSS -->
<link href="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.css")" rel="stylesheet" type="text/css" />
<!-- DataTables CSS -->
<link href="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css")" rel="stylesheet" type="text/css" />
<!-- Animation CSS -->
<link href="#Url.Content("~/plugin/css/animate.css")" rel="stylesheet" type="text/css" />
<!-- Custom CSS -->
<link href="#Url.Content("~/plugin/dist/css/sb-admin-2.css")" rel="stylesheet" type="text/css" />
<!-- Custom Fonts -->
<link href="#Url.Content("~/plugin/bower_components/font-awesome/css/font-awesome.min.css")" rel="stylesheet" type="text/css" />
<link href="../../plugin/dateTimePicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div>
<label for="disabledSelect" style="color:#A94442; display:none;" id="lblTotalCollectibles"></label>
</div>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0; background-color:#337AB7;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
< span class="sr-only"> Toggle navigation < /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
< span class="icon-bar">< /span >
</button>
<a class="navbar-brand" href="#Url.Content("~/BS/BSSSS")" style="color:White;">BS</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li style="margin-top:13px;">
<span class="fa fa-clock-o" style="color:White;" id="timeTxt"></span>
</li>
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
</li>
<li> <!--style="display:none;"> -->
</li>
<li> <!--style="display:none;"> -->
</li>
<li>
<i class="fa fa-wrench fa-fw" id="side-menu-filemaintenance"></i> File Maintenance <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
</li>
<li>
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper" style="background-image:url(../../Images/bg.gif); background-attachment: fixed;">
<div class="container-fluid">
#RenderBody()
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="#Url.Content("~/plugin/bower_components/jquery/dist/jquery.min.js")" type="text/javascript"></script>
<!-- Bootstrap Core JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/bootstrap/dist/js/bootstrap.min.js")" type="text/javascript"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/metisMenu/dist/metisMenu.min.js")" type="text/javascript"></script>
<!-- DataTables JavaScript -->
<script src="#Url.Content("~/plugin/bower_components/datatables/media/js/jquery.dataTables.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/plugin/js/jquery.scrollUp.min.js")" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/moment-with-locales.js" type="text/javascript"></script>
<script src="../../plugin/dateTimePicker/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
<!-- Custom Theme JavaScript -->
<script src="#Url.Content("~/plugin/dist/js/sb-admin-2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/userdefined/Sales/jsSales.js")" type="text/javascript"></script>
</body>
</html>
And Lastly for my View>BS>BSSSS.cshtml
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
</head>
<body>
<div>
<h1>aaaa</h1>
</div>
</body>
</html>
Here is the picture of the error.
UPDATED
#Gaurav here is the new error that i follow your suggested way.
Approach 1
Rename your BSSSS.cshtml to Index.cshtml and move it to Views/Home folder (replace existing file).
Leave the statement as return View(); in Home controller's Indexaction.
Approach 2
Let the BSSSS.cshtml file remain at path Views/BS/BSSSS.cshtml. In your Home controller's Index action change the return View(); to return View("BSS/BSSSS.cshtml");
Related
I created a navigation bar inside the class jumbotron using bootstrap. But it seems that there is some problem with the navigation bar menu. There is no padding or styles in the "li" tags. All the li tags just sticked together in the following manner:
HOMEPRICEGALLERYMEDIAFAQsCONTACT US
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">here comes the image</img>
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</body>
you forgot to add a tags to your li tags. this a tag is responsible for the padding--
.navbar-nav>li>a {
padding-top: 15px;
padding-bottom: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>TATTOO</title>
<meta charset="utf-8">
<meta class="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<!--create a header first using jumbotron class or header tricks-->
<div class="jumbotron" id="header">
<img src="#">
<!-- adding the navigtion bar -->
<nav class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav">
<li>HOME</li>
<li>PRICE</li>
<li>GALLERY</li>
<li>MEDIA</li>
<li>FAQs</li>
<li>CONTACT US</li>
</ul>
</div>
</nav>
</div>
</body>
</body>
If you wrap the text inside the list items in anchor tags, you would see it styled :) Let me know if it works
<ul class="nav navbar-nav">
<li><a href='#'>HOME </a></li>
<li><a href='#'>PRICE </a></li>
<li><a href='#'>GALLERY </a></li>
<li><a href='#'>MEDIA </a></li>
<li><a href='#'>FAQs </a></li>
<li><a href='#'>CONTACT US </a></li>
</ul>
I'm working on a project that reads a URL and then goes to the link and reads the data. Its a text hosting website (TextUploader.com) But when it downloads the site. I only want the data from the text that I have put there. When I download the Link and send it to the RichTextBox1 this is what i get
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>'HPTjNRgUfG' | TextUploader.com</title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="icon" type="image/ico" href="http://textuploader.com/favicon.ico">
<meta property="og:title" content="HPTjNRgUfG" xmlns="http://www.w3.org/1999/html"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://textuploader.com/5jx4u"/>
<meta property="og:site_name" content="textuploader.com - HPTjNRgUfG"/>
<meta property="og:description" content="Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">a..."/>
<link rel="canonical" href="http://textuploader.com/5jx4u"/>
<!-- bootstrap framework css -->
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap.min.css">
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/css/bootstrap-responsive.min.css">
<!-- power tooltips -->
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip.css">
<!-- main stylesheet -->
<link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/beoro.css">
<link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/tu_custom.css">
<!--[if lte IE 8]><link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/ie8.css">
<![endif]-->
<!--[if IE 9]><link media="all" type="text/css" rel="stylesheet" href="http://textuploader.com/assets/css/ie9.css">
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flot/0.7/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36314765-1']);
_gaq.push(['_setDomainName', 'textuploader.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link media="all" type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body class="bg_c">
<div id="fb-root"></div>
<script>(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=456470037742170";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- main wrapper (without footer) -->
<div class="main-wrapper">
<!-- top bar -->
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="pull-right top-search">
</div>
<div id="fade-menu" class="pull-left">
<ul class="clearfix" id="mobile-nav">
<li>Home</li>
<li>Discover</li>
<li>Help</li>
<li>Developers</li>
<li>Contact</li>
<li><a href='https://textuploader.com/profile'>My Account</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- header -->
<header>
<div class="container">
<div class="row">
<div class="span3">
<!-- <div class="main-logo"><a href="http://textuploader.com/"><img src="http://textuploader.com/assets/img/textuploader_logo.png" alt="TextUploader.com"></div> -->
<div class="main-logo"></div>
</div>
<div class="span5">
<nav class="nav-icons">
<!-- small icons navigation -->
</nav>
</div>
<div class="span4">
<div class="user-box">
<div class="user-box-inner">
<img src="//www.gravatar.com/avatar/d41d8cd98f00b204e9800998ecf8427e?s=80&r=g&d=mm" class="user-avatar img-avatar" alt="Gravatar"/>
<div class="user-info">
Create an Account <ul class="unstyled">
<li>Login</li>
<li>·</li>
<li>Password</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- breadcrumbs -->
<div class="container">
<ul id="breadcrumbs">
<li>
<a href="http://textuploader.com/">
<i class="icon-home"></i>
</a></li>
<li>Home</li>
<li>textuploader.com/5jx4u</li>
<li><span>Posted on: 11/16/15 1:59:00 AM UTC</span></li>
</ul>
</div>
<!-- main content -->
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="w-box w-box-blue">
<div class="w-box-header"><h4>"HPTjNRgUfG" - Views: 2 · Hits: 2 - Type: Public</h4></div>
<div class="w-box-content cnt_a ">
<div class="toolbar clearfix">
<div class="pull-left">
<div class="toolbar-icons clearfix">
<div style="overflow:hidden;width:90px;float:left;">
<div class="fb-like" data-href="http://textuploader.com/5jx4u" data-send="false" data-layout="button_count"
data-width="450" data-show-faces="false"></div>
</div>
<div style="overflow:hidden;width:90px;float:left;">
Tweet
</div>
<div style="overflow:hidden;width:90px;float:left;">
<div class="g-plusone" data-size="medium" data-annotation="none"
data-href="http://textuploader.com/5jx4u"></div>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="pull-right">
<div class="btn-group">
<button class="btn btn-mini" onClick="parent.location='http://textuploader.com/5jx4u/rev'; void(0);">Revisions (0)</button>
<button class="btn btn-mini" onClick="parent.location='http://textuploader.com/contact'; void(0);">Report Abuse</button>
</div>
</div>
</div>
<pre><code class='no-highlight'>Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">accidently took 2 40 mg paxil</a> "We need that flexibility," Fox said. "When you pick your offensive line, not just for the season, but for game day, you have to pick them from the standpoint of having some flexibility. You've got to have a swing guard/center, you've got to have a swing tackle/guard, for the games."
</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="footer_space"></div>
</div>
<!-- footer -->
<footer>
<div class="container">
<div class="row">
<div class="span8">
<div>© 2016 Exsom Group, LLC. All Rights Reserved.</div>
</div>
<div class="span4">
<ul class="unstyled">
<!--
<li>TUArmor</li>
<li>·</li>
-->
<li>Terms of Service</li>
<li>·</li>
<li>Privacy Policy</li>
<li>·</li>
<li>DMCA</li>
<li>·</li>
<li>System Status</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Common JS -->
<!-- jQuery framework -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- bootstrap Framework plugins -->
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0//js/bootstrap.min.js"></script>
<!-- top menu -->
<script src="http://textuploader.com/assets/js/jquery.fademenu.js"></script>
<!-- top mobile menu -->
<script src="http://textuploader.com/assets/js/selectnav.min.js"></script>
<!-- actual width/height of hidden DOM elements -->
<script src="http://textuploader.com/assets/js/jquery.actual.min.js"></script>
<!-- jquery easing animations -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- power tooltips -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-powertip/1.1.0/jquery.powertip-1.1.0.min.js"></script>
<!-- date library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<!-- common functions -->
<script src="http://textuploader.com/assets/js/beoro_common.js"></script>
<!-- twitter button code -->
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>
<!-- +1 code -->
<script type="text/javascript">
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = '//apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</body>
</html>
What I want is just the plaintext here:
<pre><code class='no-highlight'>Please call back later <a href=" http://philadelphiaexplorers.org/about-the-explorers-club/#annual ">accidently took 2 40 mg paxil</a> "We need that flexibility," Fox said. "When you pick your offensive line, not just for the season, but for game day, you have to pick them from the standpoint of having some flexibility. You've got to have a swing guard/center, you've got to have a swing tackle/guard, for the games."
</code></pre>
How would I write a simple code to parse only the data Between the " " and "" Above?
You can grab it using Regex if you want.
Tried & Tested
(?s)(<pre>.+?<\/pre>)
That above is the pattern that can be used. If you want to confirm please see that here.
I didn't show you how this can be done in .net as you did not provide us with what you have tried. I could break down the pattern, but the above link does that already.
I have tried many solutions from Stack Overflow and looked at the bootstrap documentation and have downloaded local copy of shiv.js and repond.js and included them in footer but after refreshing in IE8 its still same as before no javascript is working and even no media queries are rendering as rendered in google chrome. navbar is also no displaying.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Theme Webmonopolist">
<meta name="author" content="Faisal Naseer">
<link rel="shortcut icon" href="assets/ico/favicon.png">
<title> WebMonopolist</title>
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/icomoon.css">
<link href="assets/css/animate-custom.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>
</head>
<body>
.......
......
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/retina.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/js/smoothscroll.js"></script>
<script type="text/javascript" src="assets/js/jquery-func.js"></script>
<script type=”text/javascript” src=’https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js’></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/js/shiv.js"></script>
<script src="assets/js/respond.js"></script>
<![endif]-->
</body>
</html>
First of all, you should put your shiv and respond at the <head> tag, like they show here. It makes it possible detect browser's features before the whole page is loaded.
Second, here they say that serving respond.js from file:// pseudo-protocol is disabled for security purposes. Even serving it from a CDN, apparently, won't work, since here is indicated that for serving from another domain you must make some configuration.
So finally, I fixed all of it, ran the following code in localhost, not from file://, and the navbar works like a charm:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv/dist/html5shiv.min.js"></script>
<script type="text/javascript" src="lib/respond/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<h1>Hello, from IE8!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
I have a SearchGoogle html page which opens a google map.I want to load this html file into a modal dialog on the click of a button.
Defined a modal on my main index.jsp page and href the SearchGoogle.html. The content doesnt load up.Any help?
The below page is the remote page i want to load in an Modal Dialog.Have tried remote content loading.It is not working
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/googleMap.css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</head>
<body>
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
If you look up the load method in the jQuery API doc, it says that the load method uses innerHTML to parse the page to be loaded and that:
During this process, browsers often filter elements from the document such as <html>,
<title>, or <head> elements.
I suggest putting the googleMap.css on the modal page and moving your scripts in the page above to the body tag like this:
HTML for the page to be loaded (which I'm calling remote.html):
<!DOCTYPE html>
<html>
<head>
<title>Search Map</title>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Google Map Modal Title</h4>
</div>
<div class="modal-body">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="type-selector" class="controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label> <input type="radio"
name="type" id="changetype-establishment"> <label
for="changetype-establishment">Establishments</label> <input
type="radio" name="type" id="changetype-geocode"> <label
for="changetype-geocode">Geocodes</label>
</div>
<div id="map-canvas"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script src="script/googleMap.js"></script>
</body>
</html>
HTML for the page with the modal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Add the googleMap.css on this page -->
<link rel="stylesheet" type="text/css" href="css/googleMap.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- The contents of remote.html will be injected here. Don't forget to wrap your content in the modal-header, modal-body, and modal-footer classes! -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
I have created a simple project (Hybrid with Dojo) that contains one view with three pages - all created using the Dojo Mobile View wizard.
After I build all and deploy, and preview with the Worklight Console, the view doesn't render the arrows of the list items properly and once a list item is clicked, it looks like the new page opens on top of the view, instead of transitioning.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HelloWorld2App</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/HelloWorld2App.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
<script type="text/javascript" data-dojo-config="isDebug: false, async: true, parseOnLoad: true, mblHideAddressBar: false" src="dojo/dojo.js"></script>
</head>
<body id="content" style="display: none;">
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Heading'"></div>
<div data-dojo-type="dojox.mobile.EdgeToEdgeList">
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 1',moveTo:'page1'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 2',moveTo:'page2'"></div>
<div data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="label:'Page 3',moveTo:'page3'"></div>
</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page1">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 1',back:'Back',moveTo:'view1'"></div>On page 1
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page2">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 2',back:'Back',moveTo:'view1'"></div>On page 2
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" id="page3">
<div data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'Page 3',back:'Back',moveTo:'view1'"></div>On page 3
</div>
<script src="js/initOptions.js"></script>
<script src="js/HelloWorld2App.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Since Virginie is not copying the answer from the comments, here is answer for all to know:
The above did not work while using the internal browser in Eclipse. After moving to use an external browser this is now working.