I just started learning to use ReactJS to render views, but I found the bootstrap CSS classes don't work as expected if I insert the attributes directly into the ReactJS components. For example, in the below code, I wish to generate a panel with the classes: panel-default and panel-heading; however, the generated view doesn't carry the bootstrap style. I was wondering why and how to fix, if possible. Please note that I've compiled my ReactJS code and included the compiled JS in the HTML code (see at the bottom).
var taxonGroups = {
identifier: 'ABC-x981',
sources: [
{segmentName: 'segment1', length: 1090},
{segmentName: 'segment2', length: 98},
{segmentName: 'segment3', length: 2091},
{segmentName: 'segment4', length: 1076},
],
fields: ['Taxon Name', 'Taxon ID', 'Taxon source'],
collectionDate: '2001-09-10'
};
var Taxon = React.createClass({
render: function() {
return (
<div class="panel panel-default"> <div class="panel-heading"><p>{this.props.data.identifier}</p></div>
<table class="table table-bordered table-striped table-hover">
{
this.props.data.sources.map(function(source) {
return <Segment name={source.segmentName} length={source.length}/>
})
}
</table>
</div>
);
}
});
var Segment = React.createClass({
render: function() {
return <tr><td>{this.props.name}</td><td>{this.props.length}</td></tr>
}
});
React.render(<Taxon data={taxonGroups} />, document.getElementById('container'));
The HTML code:
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
<title>reactJS 3 - Rendering data with bootstrap styles</title>
</head>
<body>
<span>Is there anything?</span>
<div id="container">
</div>
<div class="panel panel-default">
<div class="panel-heading">This is Panel Heading!</div>
<div class="panel-body">
This is panel body
</div>
</div>
<script src="scripts/ReactJS/build/taxon.js"></script>
</body>
</html>
In React, the attribute is className, not class. So for example, rather than having
<div class="panel panel-default">
You should instead have
<div className="panel panel-default">
By setting it as class, React ignores that attribute, and as a result the generated HTML doesn't include the classes the CSS needs.
If you run your expected HTML through the compiler, that is indeed what you get.
I had a similar issue when following a React tutorial, i was writing
<div classname="my bootstrap code here">
instead of
<div className="my bootstrap code here">
className should be in camel case for jsx. Hope this helps :).
Related
Is it possible to create several text editor cells within a single page? My desired outcome is to have a button that when clicked allows the user to add new cells of code, where the user can write and later run. Similar to Jupyter notebook. The editor itself is imported from the ace.js library.
For that, I think I need some function add_editor(parent_div) that adds a new text editor to a div that is given as a parameter. ( Which I have failed to implement )
My initial thoughts are perhaps to create a shared class for all of the editors and append it to the father div with jQuery, but when I tried using a class instead of an id for the design,the editor won't load.
I'm not so good with handling with the DOM (especially without React), so even if the solution seems obvious to you, it might not to me.
This is last working version of the code that I have so far
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
<style type="text/css" media="screen">
#editor {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div class="container" style="">
<div id="editor">
<!-- the div containing the code, has the id "editor" !-->
def print_something():
print(a)
</div>
</div>
</div>
<div class="col-3">
empty column
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
function configure_editor(){
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
}
configure_editor()
</script>
</body>
</html>
Help will be much appreciated!
Edit: I need to solve this in Javascript or Jquery, without React.
A cleaner method is to assign an editor to each instance using your own structure. With jquery:
<div id="instance0"></div><div id="instance1"></div>
<script>
var instances[];
var $rootElement = $('#instance0');
newInstance($rootElement);
var $rootElement = $('#instance1');
newInstance($rootElememt);
function newInstance($rootElement){
var instance = {};
instance.id = $rootElement.attr('id');
instance.$root = $rootElement;
instance.editor = ace.edit($rootElement[0]);
instance.editor.instance = instance;
instances.push(instance);
}
</script>
This gives you a 1 to 1 instance to editor relationship with backpointers. It will save you much angst in the future. You can just flip in sessions and keep the editors static.
I think I have found somewhat of a solution on my own with jQuery, even though it seems messy.
Each time a new editor will be added with increasing ids, i.e : "editor0", "editor1", "editor2", and so on.
Here is the full code
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div id="editors_container">
</div>
</div>
<div class="col-3">
<button id="add_editor">Add a new editor</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
existing_editors = [];
$(document).ready(function(){
$("#add_editor").click(function(){
console.log("reached here!")
let editor_id = "editor"+existing_editors.length;
$newDiv = $("<div id="+editor_id+" style=width:100%;height:100%>"+"</div>");
$("#editors_container").append($newDiv);
let editor = ace.edit(editor_id);
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
existing_editors.push(editor);
});
});
</script>
</body>
</html>
I'm having problems with loading a page that has been packed with Webpack. Im using React to render the page HTML. When I open my html in my web browser, it gives me the following error:
Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element.
in div (created by Component)
in div (created by Component)
in Component"
My html is:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="cssWEB.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body data-ng-app="App">
<div id="root"></div>
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
My JS is:
import React from 'react';
import ReactDOM from 'react-dom';
import {Element, scroller} from 'react-scroll';
const Component = React.createClass({
componentDidMount: function() {
scroller.scrollTo('myScroller', {
duration: 1500,
delay: 500,
smooth: true
});
},
render: function() {
return (
<div>
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link type="text/javascript" href="jscode.js"></link>
<header>
La Barriada
</header>
<div className="cube" change-background colorcode="#f45642" ref={(el) => { this.messagesEnd = el; }}>
<div className="front"><span>Experience</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
<div className="wrap2">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Work</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<div className="wrap3">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Contact</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<Element name="link1">
<div className="bg2" id="linkhere"></div>
</Element>
<div className="slide1">
</div>
<div className="slidechild1">
<div className="centerbox">
<div className="center">
<ul>
<li data-ng-click="clicked2()" id="B1">aa</li>
<li id="B2">cc.i</li>
</ul>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<Component />,
document.getElementById("root")
);
What is causing this error and how can I fix it?
You might want to double check if those attributes are sorted by React. You can do so by reading the docs page here.
It doesn't look like those DOM attributes change-background or colorcode are
supported.
EDIT: The same docs state that:
In React, all DOM properties and attributes (including event handlers)
should be camelCased. For example, the HTML
attribute tabindex corresponds to the attribute tabIndex in React.
So it might be worth trying changeBackground and colorCode respectively in your JSX and see if that does the trick.
ReactJS currently don't supports custom attributes as specified here. It strips of unknown attributes. You can solve the problem by manually adding the attribute in the componentDidMount method as specified in this SO answer.
You can't use any custom attributes as a prop. Rather you should use valid html attributes. React supports almost every valid html attributes. Here is the list of valid html attributes supported by React.
In my application I'm making a get request through Angular's http service and in the view looping over the returned data to show an unordered list. But the problem is even though data is available after the get request , its not getting dispplyed on the page. Seems to be a CSS style problem, but don't know how to fix it. I want to show the unorder list within a bootstrap panel as a body.
Below is the angular piece of code inside the controlller for setting up the data
$http.get('/messages').success(function(data) {
console.log("Messages are "+data);
$scope.records=data;
});
Here is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Bootstrap News plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/libs/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/libs/css/custom.css"/>
<script src="/libs/js/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="/libs/js/newsbox.min.js" type="text/javascript"></script>
<script src="/libs/js/angular.min.js" type="text/javascript"></script>
<script src="/libs/js/main.js" type="text/javascript"></script>
</head>
<body ng-app="mean" ng-controller="MainCtrl">
<br/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-list-alt"></span><b> What you wanna do before you die ...</b>
</div>
<div ng-cloak class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1">
<li class="news-item" ng-repeat="item in records">
<table cellpadding="4">
<tr>
<td >
<img class="img-circle" width="60"
ng-src="/images/{{($index+11) % 10}}.png"/>
</td>
<td ng-cloak>
{{$index+1}}. {{item.username}}
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1 ">
<form name="messageForm" novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
<div class="form-group">
<textarea required ng-model="formModel.message"
style="background-color:#ffffe6;border:double 4px orange;border-radius: 0.5em;" rows="3" cols="50" id="message" placeholder="Write your message and press enter.."> </textarea>
<button class="btn btn-primary" type="submit">Shoot it</button>
</div>
<p ng-cloak class="help-block" ng-show="formModel.nameError">Looks like you forgot to mention your name !!!</p>
<p ng-cloak class="help-block" ng-show="formModel.messageEmpty">Really you don't wanna do anything before you die !!! </p>
<p ng-cloak class="help-block" ng-show="formModel.messageTooLong">You are trying to do too many things buddy, just 150 characters !!! </p>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".demo1").bootstrapNews({
newsPerPage: 12,
autoplay: true,
pauseOnHover:true,
direction: 'up',
newsTickerInterval: 4000,
onToDo: function () {
//console.log(this);
}
});
});
</script>
</body>
</html>
When I check through chrome dev tool, data is present in that unordered list, data is present but somehow not getting displayed properly within bootstrap panel.
See this image
I noticed there is one undefined element at the bottom of unordered list while checking through dev tools. Any idea whats going wrong?
The panel body is empty
Why is the [ul] tag style set to "height:0px; overflow-y:hidden"? -- this would hide your content
you could also move the ng-cloak to the div.panel-body to the div.row and remove it from the child td
--
Delay bootstrapNews binding
$(function(){
if ($('.panel-body[ng-cloak]').length > 0)
return window.setTimeout(arguments.callee, 10);
$(".demo1").bootstrapNews({...});
});
I think you should write a directive for getting a callback when ng-repeat is done and that is a better solution instead of any 'delay' tactics.
Might help you to go through how I have done in my code- used a directive to emit a render finished event:
dashboard.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});
In the controller I keep the event listener:
$scope.$on('dataLoaded', function(ngRepeatFinishedEvent) {
// your code to add bootstrapNews binding
});
and in the html side, I call them like this:
<div class="add_tenant_name" ng-repeat="tenant in tenants" on-finish-render="dataLoaded">
// more divs
</div>
I am trying to figure out how to use a jQuery plugin with the Kendo UI template.
I have an index.html that calls a views/home.html file. Then there is a home.js file that controls some functionality for the home.html using a model.
I am trying to use a jQuery barcode plugin. We are dynamically getting data from our service and outputting the data (although right now I am just trying to hardcode values). How would I get the jQuery plugin to work with the Kendo UI template code.
My code is below.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/home.js"></script>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<!--Need to add back button and mail center buttons-->
<span data-role="view-title"></span>
<a data-role="button" data-align="right" href="views/messagecenter.html" class="nav-button"><i class="fa fa-envelope-o"></i></a>
<i class="fa fa-bars"></i>
</div>
</div>
</head>
home.html
<div data-role="view" data-layout="main" data-model="app.MemberInfo" data-title="Home" >
<div id="MemberCardHeader">
<div data-template="memberTemplate" data-bind="source: MemberInfo">
<!--Member card x-kendo-template id="memberTemplate" renders here-->
</div>
</div>
</div>
<script type="text/x-kendo-template" id="memberTemplate">
<div id="memberCard">
<!--Barcode should render here-->
<div id="Barcode"></div>
</div>
</script>
home.js
var app = app || {};
app.MemberInfo = (function (){
/*Barcode code*/
/*HOW DO I GET THIS TO WORK WITH KENDO UI CODE ABOVE*/
$("#Barcode").kendoBarcode({
value:"288288",
type:"ean8"
});
}());
you can instantiate the widget in the init event of the view:
http://docs.telerik.com/kendo-ui/api/javascript/mobile/ui/view#events-init.
after watching this presentation (https://www.youtube.com/watch?v=ImR0zo1tA_I) I wanted to try Angular JS. I copied the code, exactly what was on the screen, but i doesn't work. I tried it in my browser, in my page (http://thecodemaker.com.pl), I was doing research about AngularJS but it still doesn`t want to work.
Code :
<!DOCTYPE html>
<html ng-app="basicApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<form>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title"><b>ToDo List</b></h1>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "todo in todos">
<div class="checkbox">
<label>
<input type="checkbox"> {{todo}}
</label>
<button type="button" class="close">×</button>
</div>
</li>
</ul>
</div>
<div class="form-group has-feedback">
<label class="control-label invisible">Enter Task</label>
<input type="text" class="form-control text-primary"></input>
<button type="button" class="close form-control-feedback text-muted">±</button>
</div>
<div class="alert alert-info">Enter new task to get started</div>
<div class="alert alert-danger">Maximum number of tasks allowed : 5</div>
</div>
</form>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
</body>
</html>
Any ideas what is wrong ?
There seems to be a lot wrong with your snippet. For one, your submit/add button is not bound to an event listener or anything so it's not doing anything that you'd want (like adding an item to the property on your controller's $scope).
Check out the Todo example on Angular's official website, it's more up to date.
https://angularjs.org/ (scroll down).
Here's the video for it: https://www.youtube.com/watch?v=WuiHuZq_cg4
There is an error : Bootstrap's JavaScript requires jQuery, which means you need to add jQuery library to your project, required by bootstrap.js
Starting with Angular 1.3.x, you can no longer declare a controller as a generic global function on window. Controllers must now use the more current form of component declaration.
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
In the HTML, change ng-app="" to ng-app="basicApp.