I get this error in my navbar.jsx file.Navbar is defined in react-bootstrap.js. I add react-bootstrap.js to my bundles, but it still not working. How to solve that?
var MyNavbar = React.createClass({
render: function () {
return (<Navbar>
<Navbar.Header>
<Navbar.Brand>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<MenuItem eventKey={1}>...</MenuItem>
<MenuItem eventKey={2}>...</MenuItem>
<MenuItem eventKey={3}>...</MenuItem>
<MenuItem eventKey={4}>...</MenuItem>
</Nav>
</Navbar.Collapse>
</Navbar>);
}
});
ReactDOM.render(<MyNavbar/>,document.getElementById('navbar'));
Im trying to bundle my js and jsx files to _Layout.cshtml
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new BabelBundle("~/bundles/main").Include(
"~/Scripts/react/react.js",
"~/Scripts/react/react-dom.js",
"~/Scripts/react/react-bootstrap.js",
"~/Scripts/jquery-1.10.2.js",
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/Components/Navbar.jsx"
));
BundleTable.EnableOptimizations = true;
}
}
Layout.csthml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="navbar"></div>
#RenderBody()
</body>
</html>
#Scripts.Render("~/bundles/main")
Related
this is my security config:
protected void configure(HttpSecurity http) throws Exception {
http
.authorizeRequests()
.antMatchers("/login","/newuser").permitAll()
.antMatchers("/css/**").permitAll()
.antMatchers("/js/**").permitAll()
.antMatchers("/**").hasRole("USER").anyRequest().authenticated()
.and()
.formLogin()
.loginPage("/login")
.permitAll()
.and()
.httpBasic()
.and()
.csrf()
.csrfTokenRepository(csrfTokenRepository())
.and()
.addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
}
First of all i'm redirected to login page when i'm not authenticated.
Second when i'm trying to create a new user requesting this path "/newuser" Response status is ok but the page isn't displayed .
These are my Controller methods:
#RequestMapping("/login")
public String login() {
return "loginpage.html";
}
#RequestMapping(value="/newuser")
public String newUser() {
return "signup.html";
}
This is my loginpage.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="AuthenticationController">
<form role="form" ng-submit="signin()">
<div class="form-group">
<label for="username">Username:</label> <input type="text"
class="form-control" id="username" name="username" ng-model="credentials.username"/>
</div>
<div class="form-group">
<label for="password">Password:</label> <input type="password"
class="form-control" id="password" name="password" ng-model="credentials.password"/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<a href ng-click="newuser()">Create new account</a>
</div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/init.js"></script>
<script>
angular.element(document).ready(function() {
code.application.initialize(function() {
angular.bootstrap(document, ['authentication']);
}, function(error) {
console.log("Error while initializing Application Content Developer:", error);
});
});
</script>
<script src="js/AuthenticationController.js"></script>
</body>
</html>
This is my signup.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="css/angular-bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<p>SIGNUP</p>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/init.js"></script>
<script>
angular.element(document).ready(function() {
code.application.initialize(function() {
angular.bootstrap(document, ['authentication']);
}, function(error) {
console.log("Error while initializing Application Content Developer:", error);
});
});
</script>
<script src="js/AuthenticationController.js"></script>
</body>
</html>
And this is my project main structure:
The thing i cannot understand is : Why login page is rendered successfully but signup page is ignored and not rendered at all.
Would suggest you to try a default success url. Eg:
.loginPage("/login").defaultSuccessUrl("/newuser", true)
I am writing a Worklight Hybrid application and utilizing jQuery Mobile in it.
The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="jqueryMobile/jquery/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="css/itemDetails.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery/jquery-1.9.1.js"></script>
<script src="jqueryMobile/jquery/jquery.mobile-1.3.1.js"></script>
<script src="js/itemDetails.js"></script>
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<h1>Item Details</h1>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/messages.js"></script>
<script src="modules/core/MenuPanel.js"></script>
</body>
</html>
The CSS:
#CHARSET "UTF-8";
#itemDetailsNavBar
{
background: #ffb400 !important;
height: 44px;
padding-top: 20px;
}
#listButtonLeft {
background: transparent url("images/list.png");
box-shadow: none;
data-corners :"false";
margin-top: 19px;
border: none;
}
#editButtonRight {
background: transparent url("images/edit.png");
box-shadow: none;
data-corners :"false";
margin-top: 15px;
border: none;
}
When previewing in a browser I see it properly:
But when previewing via Worklight Console's MBS, this is what I am getting:
I removed the CSS from the head and added it just before the body end tag and everything seems to work fine both in simulator and the MBS.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
</head>
<body >
<div data-role="page" id="detailsPage">
<div data-role="header" id="itemDetailsNavBar">
<h1>Item Details</h1>
</div>
</div>
<link rel="stylesheet" href="css/itemDetails.css">
<script src="js/itemDetails.js"></script>
</body>
</html>
How can I apply/put external or extra <script> references and CSS <link> in my Razor content/child pages?
#model Portal.Common.Models.TempModel
#{
ViewBag.Title = "asdasd";
ViewBag.MissionId = id;
ViewBag.id = 0;
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (false)
{
<script src="../../Scripts/jquery-1.7.1-vsdoc.js" type="text/javascript"></script>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="...../ui/jquery.ui.mouse.js"></script>
<script src="...../ui/jquery.ui.draggable.js"></script>
}
<style type="text/css">
img[src*="iws3.png"] {
display: none;
}
#section JavaScript {
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript"></script> "
In your _Layout you could have 2 sections: one for the scripts and one for the styles:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
#RenderSection("Styles", false)
</script>
</head>
<body>
#RenderBody()
#RenderSection("Scripts", false)
</body>
</html>
and then in your view override the sections you want:
#model Portal.Common.Models.TempModel
#{
ViewBag.Title = "asdasd";
ViewBag.MissionId = id;
ViewBag.id = 0;
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Styles {
<!-- main CSS -->
<link href="#Url.Content("~/Content/Site.css)" rel="stylesheet" type="text/css" />
<!-- some external CSS -->
<link href="http://www.example.com/foo.css" rel="stylesheet" type="text/css" />
<!-- some inline CSS -->
<style type="text/css">
img[src*="iws3.png"] {
display: none;
}
</style>
}
#section Scripts {
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="#Url.Content("~/ui/jquery.ui.mouse.js")></script>
<script src="#Url.Content("~/ui/jquery.ui.draggable.js")></script>
<script type="text/javascript">
// some inline javascript
</script>
}
Another way,
It's useful while same css and script files are referenced from different cshtml files and you are not using a default layout.
Create a partial view(let _Reference.cshtml) in shared folder and add the following for raw output :
#Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
.....
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Now in the head tag of your referencing cshtml, add this :
<head>
<title>MVC Test</title>
#Html.Partial("_Reference")
</head>
Hope this will help someone.
I have tried many methods to show the mapView in phonegap application that online provided. but still cant works. here is my code. Hope someone can help me to solve the problem
Thanks in advance
this is the map.js file code
function onMapLoad(){
if(isConnected){
//load google api
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","http://maps.googleapis.com/maps/api/js?sensor=true&callback="+"getGeolocation");
document.getElementByTagName("head")[0].appendChild(fileref);
}
else{
alert("Must be connected to the internet");
}
}
function getGeolocation(){
var options ={
maximumAge:3000,
timeout:5000,
enableHighAccuracy:true
};
navigator.geolocation.getCurrentPosition(loadMap,geoError,options);
}
function loadMap(position){
var latlng = new google.maps.LatLng(
position.coords.latitude,position.coords.longitude);
var myOptions ={
zoom:8;
center:latlng,
myTypeId:google.maps.MapTypeId.ROADMAP
};
var mayObj = document.getElementById("map_canvas");
var map = new google.maps.Map(mapObj,myOptions);
var marker = new google.maps.Marker({
position:latlng,
map:map,
title:"You"
});
}
function geoError(error){
alert('code: '+error.code +'\n' +'message: '+error.message +'\n');
}
$(document).bind("pageload",onMapLoad);
Here is the map.html file
<!DOCTYPE html>
<html>
<head>
<title>Map page</title>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
</head>
<body>
<div data-role ="page" id="map-page">
<div id ="map_canvas" style =" width:300px; height:400px">
</div>
<script type="text/javascript" charset ="utf-8" src="js/map.js"></script>
</div>
</body>
</html>
I'm trying to create a slide out panel for my navigation for an ios app using phonegap. The problems occur when I get to the page below and the JSON starts loading. First of all I get this error in the console of xcode:
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
After all the images load, my css3 transition is really choppy, even though it runs smoothly on every other page. What I'm wondering is if the AJAX script is constantly going out and trying to retrieve those images that have errors. Therefore I have an unending script that is causing ios to run choppy. Is there a way to close the script after it retrieves the images or do you have another idea on how to fix this? Here is my code:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><div><img src="img/home-icon-white.png" /></div>Home</li>
<li class="where"><div><img src="img/where-icon-gray.png" /></div>Where</li>
<li class="series"><div><img src="img/watch-icon-gray.png" /></div>Series</li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>