I have small HTML block on server which is loaded via Ajax call. It has <Link> tag from react router. I want to render this block so that <Link> tag converts to <a>.
I tried to create a temporary react component and pass the HTML block and render it. But the returned HTML is still has the <Link> tag.
Here is HTML block. <Link> tag is on the fourth line.
<div id="mobile-home-categories">
<div class="row feature-categories">
<div class="col-md-6 col-xm-6 col-sm-6 col-xs-6">
<Link to="/bedroom-furniture.htm" state="{ catId: 3 }">
<img src="{{media url="wysiwyg/furniture.png"}}" alt="furniture" />
FURNITURE</Link>
</div>
<div class="col-md-6 col-xm-6 col-sm-6 col-xs-6">
<a href="decor.htm"><img src="{{media url="wysiwyg/decor.png"}}" alt="decor" />
DECOR</a>
</div>
</div>
</div>
promise.done(function(data){
const content = jQuery("<div/>").html(data.firstElementChild.firstElementChild.textContent).html();
const comp = React.createClass({
render: function() {
return <div>{this.props.content}</div>;
}
});
const renderedComponent = ReactDOM.render(<comp content={content}/>, document.createElement('div'));
});
Related
ng-repeat is commented out on chrome inspect
I can't seem to figure out how to get my ng-repeat to work. I can see that the correct information is scoped properly, but when I inspect the HTML in dev tools, the first line below is commented out and the cards don't show up. Any suggestions?
<div ng-repeat="matchedArtist in matchedArtists">
<div class="centerPandora">
<div class="row">
<div class="col-med-12">
<div class="content">
<div class="card">
<div class="firstinfo">
<img src="#" />
<div class="profileinfo">
<h1>{{ matchedArtist.artist }}</h1>
<h3>{{ matchedArtist.date }}</h3>
<h4>{{ matchedArtist.venue }}</h4>
<p class="bio"></p>
<a href="#">
<font color="black">Click for event details</font>
</a>
</div>
</div>
</div>
<div class="badgescard info"><span id="days"></span><span
id="hours"></span><span id="minutes"></span><span id="seconds"></span>
</div>
</div>
</div>
</div>
</div><br /><br /><br /><br />
</div>
'use strict';
var concertList =
angular.module('concertList').controller('ConcertListCtrl',
function($scope){
function hideLogin($scope) {
$scope.advstatus = true;
};
$scope.matchedArtists = matchedArtists
});
UPDATE
Here is a screenshot of the AngularJS scope showing events are being scoped properly
Firstly, you must to be sure that yours controllers works properly and goes inside html template.
Than $scope.matchedArtists - is an Array of objects in yours case
$scope.matchedArtists = [{artist: 'ártist', date: 'date', venue: 'venue '},
{artist: 'ártist2', date: 'date2', venue: 'venue2'}]
Debugging AngularJS Problems
To quickly test the variable on scope:
matchedArtists={{matchedArtists | json}} scope={{$id}}
<div ng-repeat="matchedArtist in matchedArtists">
<div class="centerPandora">
<div class="row">
<div class="col-med-12">
Using the inspection console, click on the element of interest:
>scope=angular.element($0).scope()
>console.dir(scope)
There are several possible reasons the data is not showing:
The template is part of an isolate scope;
The controller is on a sibling element;
The controller was instantiated with controllerAs syntax;
I have a HTML page with different sections, which are loaded with AJAX. I have created a controller for each of the sections.
How is possible to bind the controller on a section which has been dynamically added on HTML?
I have found very complicated solutions, which i don't even know if they apply.
I need the most basic, easiest solution, something similiar with ko.applyBindings($dom[0], viewModel) for the ones who worked with KnockoutJs.
Index html
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container"><!-- load dynamic HTML here --></div>
</div>
</div>
Dynamic HTML
<div ng-controller="profile">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
Javascript:
var app = angular.module('app', []);
app.controller('profile', function ($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
// load new HTML
// normally this is triggered by a link / button
$(function () {
$.get("/EditProfile/Profile", function (data, status) {
$("#container").html(data);
});
});
Don't use jQuery to embed html to your container. If you use jQuery, AngularJS can't track DOM manipulations and trigger directives. You can use ng-include directive of AngularJS.
In index.html file:
...
<div id="container">
<div ng-include="'/EditProfile/Profile'"></div>
</div>
...
If you want you can make that conditional:
...
<div id="container">
<div ng-if="profilePage" ng-include="'/EditProfile/Profile'"></div>
</div>
...
With that example, if you set profilePage variable to true, profile html will be load and render by ng-include.
For detailed info take a look to ngInclude documentation.
By the way, best practice to include views to your layout by triggering same link clicks is using routers. You can use Angular's ngRoute module or uiRouter as another popular one.
If you use ngRoute module, your index.html looks like that:
<div class="row" ng-app="app">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li>
Profile
</li>
</ul>
</div>
<div class="col-xs-9">
<div id="container" ng-view><!-- load dynamic HTML here --></div>
</div>
</div>
And with a router configuration like below, profile html will be automatically loaded and rendered by ngRoute inside ngView directive:
angular.module('myapp', []).config(function($routeProvider) {
$routeProvider
.when('/profile', {
templateUrl: '/EditProfile/Profile',
controller: 'ProfileController'
});
});
I am using Foundation library.
I want to center a div in ReactJS and I am unable to achieve it.
This is a working example in plain vanilla : http://codepen.io/anon/pen/PqdzZR
<div class="vertical grid-block">
<div class="grid-block text-center"><span>Hi there !</span></div>
<div class="grid-block text-center">
<a class="button" href="#">Test Button</a>
</div>
But, this does not work with ReactJS :
var React = require('react');
var Comp = React.createClass({
render: function() {
return (<div className="grid-frame">
<div className="vertical grid-block">
<div className="grid-block text-center"><span>Instructions to login</span></div>
<div className="grid-block text-center">
<a className="button" href="#">Login with Facebook</a>
</div>
</div>
</div>);
}
});
module.exports = Comp;
In the above component, the button has the styling indicating that the Foundation css styling is working.But the div is not centered for some reason.
So, the question is how do I center a div in a ReactJS component using the Foundation library ?
return (<div class="grid-frame">
Should be className?
Check my fiddle: https://jsfiddle.net/reactjs/69z2wepo/
Maybe you forgot to add normalize.css?
var Hello = React.createClass({
render: function() {
return (<div className="grid-frame">
<div className="vertical grid-block">
<div className="grid-block text-center"><span>Instructions to login</span></div>
<div className="grid-block text-center">
<a className="button" href="#">Login with Facebook</a>
</div>
</div>
</div>);
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
Not sure if React is changing the display property for the button?
Display inline-block can be horizontally centered with text align center. Display block works with margin: 0 auto;
I have an ng-repeat which shows a list of sports and next to every sport name I'd like to display an specific image. I'd like to know how to go about displaying the correct png for every sport. How could I make it know what image to display? Here's how the code looks like.
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<ion-list class="list">
<div class="item">
<img src="" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</ion-list>
</div>
I am supposing you want the image based on a key (like sport name). You can maintain a javascript object in your controller with key as name and value can be url of the image
obj = {football:'myurl'}
and use this object as
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sportsFilter = ( sports | sportsFiltered:query )">
<ion-list show-delete="sport.showStars"
class="list">
<div class="item">
<img ng-src="{{obj[sport.name]}}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
You should use ng-src instead of src, so that you can pass the variable into it representing the current image to display, without risking an error 404 while the angular expression isn't parsed yet:
<img ng-src="{{sport.image}}" />
In JS part, you would merely have in your controller a kind of:
$scope.sport = {image: "http://myServer.com/mySuperSportImage.jpg"};
Note that this example doesn't deal with collections to simplify.
This ensures the binding.
You should create an object property for the image:
// HTML
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-if="sport.leagues.length && sport.checked"
ng-repeat="sport in sports">
<div class="item">
<img width="30" height="30" src="{{ sport.im }}" class="sport-image"> <!--Heres where img shoud be-->
<span>{{sport.name}}</span>
</div>
</div>
</div>
// JS
angular.module('myApp',[])
.controller('MyCtrl', function($scope) {
$scope.sport = {
leagues: ['premier', 'championship'],
checked: true
};
$scope.sports = [
{
name: 'soccer',
im: 'http://upload.wikimedia.org/wikipedia/en/e/ec/Soccer_ball.svg'
},
{
name: 'basketball',
im: 'http://upload.wikimedia.org/wikipedia/commons/7/7a/Basketball.png'
}
];
});
See this fiddle:
http://jsfiddle.net/uxu21n4v/1/
<img ng-src="http://www.gravatar.com/avatar/{{sport.imageLocation}}" class="sport-image"/>
Ref: https://docs.angularjs.org/api/ng/directive/ngSrc
I am trying to show exact content when I click on data from ng-repeat.
<div ng-repeat="trailSpot in trail.wayPoints">
<a ng-click="viewState.showSpotDetails = !viewState.showSpotDetails">
<p>Spot {{$index + 1}}. {{trailSpot.wpName}}</p>
</a>
<p >{{trailSpot.wpDescription}}</p>
</div>
When I click the first wpName, I want to show wpDescription only about the first wpName on another div. What should I put in that div.
<div class="panel-body" ng-show="viewState.showSpotDetails">
<div>
???
</div>
</div>
Anybody has any tips on what I am trying to do?Thank you!
Just pass the object to assign the property like this:
http://jsfiddle.net/wLs8axLj/
JS
var app = angular.module('itemsApp',[]);
app.controller('ItemsCtrl',function($scope) {
$scope.items = [
{name:'Test 1',details:'Test 1 Details'},
{name:'Test 2',details:'Test 2 Details'}
];
$scope.showDetails = function(i) {
$scope.item_details = i.details;
};
});
HTML
<div ng-app="itemsApp" ng-controller="ItemsCtrl">
<ul>
<li ng-repeat="i in items" ng-click="showDetails(i)">{{i.name}}</li>
</ul>
<hr>
{{item_details}}
</div>