I Want to show pop-up on page load but i don't have knowledge about react javascript . I am using lightbox pop-up . its working fine but its working onclick function . I need to open pop up on page load.
my code is :-
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/react-with-addons.js'></script>
<script type="text/jsx" src='js/react-lightbox.jsx'></script>
</head>
<body>
<div id='react-canvas'></div>
<script type="text/jsx">
/** #jsx React.DOM */
React.renderComponent(
<Lightbox>
<LightboxTrigger>
<a href='javascript:void(0)'>Click me to open!</a>
</LightboxTrigger>
<LightboxModal>
<div>
<h1>This is the basic usage!</h1>
<p>Good luck :D</p>
</div>
</LightboxModal>
</Lightbox>,
document.getElementById('react-canvas')
);
</script>
</body>
</html>
Try to create custome elements and add method this.props.openLightbox on componentWillMoutn
var ToggleButton = React.createClass({
componentWillMount(){
this.props.openLightbox();
}
render() {
return(<button onClick={this.props.openLightbox}>Open Lightbox</button>);
}
});
And put this custom element into <LightboxTrigger>
<LightboxTrigger>
<ToggleButton />
</LightboxTrigger>
Related
Previously there was a <div>, the contents of which i was toggling on ng-click. With components in Angular 1.5, i moved the contents of the <div>and created a component. I want to load this component on ng-click now.
Is this possible ?
I did not find any help yet. If possible, a help would be great.
Its possible to show/hide the component (having your div content). I have created a plnkr, refer the below code and plnkr link
https://plnkr.co/edit/sZSfslXTDGfvGwiDdBSZ?p=preview
HTML:
<!DOCTYPE html>
<html ng-app="componentApp">
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="componentController">
<button ng-click="showComponent()" id="changeText">Show Component</button>
<div-content ng-if="isShowContent"></div-content>
</body>
</html>
JS:
angular.module("componentApp", [])
.controller("componentController", function($scope) {
$scope.isShowContent = false;
$scope.showComponent = function() {
$scope.isShowContent = !$scope.isShowContent;
document.getElementById("changeText").innerHTML = $scope.isShowContent ? "Hide Component" : "Show Component";
};
})
.component("divContent", {
template: "This is the content of my div"
});
I am using materializecss and the problem is that Google Map not loading in materialize modal. But other than modal, its working fine. I did everything what i have to do. Any solution for this problem?
Update:
I found the solution for my problem. Actually i was using multiple
view in that modal and placed my map div back of one div using
ng-show. It causes my map to not display. But placing map div in
front of all other div fixed my issue. :)
When the modal shows up, it re-sizes its content to fit into it. So your Google map component's size is changed and as a result, it just needs to be refreshed.
Just add the following code in your <script> tag.
$('.modal-trigger').leanModal({
ready: function() {
var map = document.getElementById("googleMap");
google.maps.event.trigger(map, 'resize');
}
});
That should do it :)
=== EDIT ===
I've added a sample for what i think might help you. This sample initializes the map object when the page loads, and it uses the same object in the model.
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="js/jquery-2.2.0.js" type="text/javascript"></script>
<script src="js/materialize.js" type="text/javascript"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center: new google.maps.LatLng(51.508742, -0.120850),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function () {
$('.modal-trigger').leanModal({
ready: function () {
var map = document.getElementById("googleMap");
google.maps.event.trigger(map, 'resize');
}
});
});
</script>
</head>
<body>
<a href="#mapmodel" class="modal-trigger blue z-depth-1 waves-effect waves-light btn-floating">
<i class="red material-icons">location_on</i>
</a>
<div id="mapmodel" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Test</h4>
<div id="googleMap" style="width:500px;height:380px;"></div>
</div>
<div class="modal-footer">
Got it
</div>
</div>
</body>
</html>
I have the following angular sample app:
<html ng-app="theapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
</head>
<body>
<div ng-controller="bootstrapper">
<p>This is the bootstrapper</p>
<p><button ng-click="loadtemplate1()">Load Template1</button></p>
<p><button ng-click="testalert()">Test Alert</button></p>
</div>
<script type="text/html" id="template1">
<div ng-controller="template1">
<p>This is template one {{1+5}}</p>
</div>
</script>
<script type="text/javascript">
angular.module('theapp',[])
.controller('bootstrapper',function($scope){
//alert('bootstrapper controller');
$scope.testalert=function(){
alert('call from testalert');
};
$scope.loadtemplate1=function(){
var html=document.getElementById('template1').innerHTML;
document.getElementsByTagName('body')[0].innerHTML=html;
};
})
.controller('template1',function($scope){
alert('template1 controller');
});
</script>
</body>
</html>
All I'm trying to achieve is to dynamically load a controller from some html string which resides in the same page.
However, I need some help, as this current setup doesn't seem to work.
I am just starting out with react, while that is going fine, I am not able to start using react-bootstrap here is what my .html file looks like:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/jsx" src="react-bootstrap.js"> </script>
<script type="text/jsx">
React.render(
<p> test </p>
<Button> test </Button>,
document.body
);
</script>
</body>
</html>
Does not work.
I get a Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
Any help is deeply appreciated.
UPDATE:
Question has been solved.
Solution:
Make it:
React.render( <div> <p> test </p> <Button> test </Button> </div>,
document.body)
also add,
var Button = ReactBootstrap.Button;
I found the solution:
React needs a single root element to render. So, change it to -
React.render( <div> <p> test </p> <Button> test </Button> </div>,
document.body)
also add,
var Button = ReactBootstrap.Button;
I am trying to make a PhoneGap webapp using angular. I have these three files.
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8"/>
<meta name="viewport"
content="width=device-width,height=device-height,user-scalable=no"/>
<!-- Cordova Build Application -->
<script charset="utf-8" src="cordova.js"></script>
<!-- Main Dependencies -->
<script src="vendor/jquery/jquery-1.11.1.min.js"></script>
<!-- Angular Declaration -->
<script src="vendor/angular/angular.min.js"></script>
<script src="vendor/angular/angular-route.min.js"></script>
<!-- Angular App Declaration -->
<script src="assets/js/index.js"></script>
<script src="app/app.js"></script>
<script src="app/controller.js"></script>
<script src="app/factory.js"></script>
<script>
app.initialize();
</script>
<!-- UI KIT -->
<script src="vendor/ui-kit/js/uikit.min.js"></script>
<link rel="stylesheet" href="vendor/ui-kit/css/uikit.min.css"/>
<!-- User Defined Styles -->
<link rel="stylesheet" href="assets/css/kore.css"/>
</head>
<body class="uk-width-1-1">
<div>
<header class="uk-width-1-1" id="eca-main-nav-container">
<nav class="uk-navbar">
<div class="uk-navbar-flip">
<ul class="uk-navbar-nav">
<li><a href="#eca-main-nav" data-uk-offcanvas>
<i class="uk-icon uk-icon-bars"></i>
</a>
</li>
</ul>
</div>
</nav>
</header>
<div ng-view="" id="eca-main-view"></div>
<footer>
<!-- Main Navigation Canvas -->
<aside id="eca-main-nav" class="uk-offcanvas">
<section class="uk-offcanvas-bar">
<ul class="uk-nav uk-nav-offcanvas">
<li>Home</li>
</ul>
</section>
</aside>
</footer>
</div>
</body>
</html>
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
app.js
//constants
var appOrigin2 = 'http://event.deremoe.com/api/vendor/events2';
var appOrigin = 'http://event.chart.local/api/vendor/events.json';
var app = angular.module('app',['ngRoute']);
app.config(function($routeProvider){
//chart site
$routeProvider.when('/chart',{
templateUrl:'view/chart',
controller:'chartController'
});
$routeProvider.when('/event',{
templateUrl:'view/event',
controller:'eventViewController'
});
//start route
$routeProvider.otherwise({redirectTo:'/chart'});
});
controller.js
/* chartController
* view/chart.html
*/
app.controller('chartController',['$scope','chartListLoadService',function($scope,chartListLoadService){
alert('this is running');
//chartListLoadService.fetchListJSONP('all',$scope);
//$scope.eventDetail = function(eventId){
// alert(eventId);
//};
}]);
/* eventViewController
* view/event.html
*/
app.controller('eventViewController',['$scope',function($scope){
}]);
It works fine on the browser. The Alert is triggered just fine in the controller. But when I compiled it on Phonegap, the AngularJS is not initialized.
I've read that you need to execute the code after the 'deviceready' in order to work. I looked into this quetions here:
Angular ng-view/routing not working in PhoneGap
and try to use it. But it appears that it doesn't do anything. I can't understand why, or I might be missing something to do this, as well as my ng-app has a specific name and is attached to the app variable as seen.
Kindly help.
You should not use ng-app when manually bootstrapping Angular. See https://docs.angularjs.org/guide/bootstrap.