React - Minified exception occurred in mvc - reactjs

i want add some react.js components in ASP.NET mvc application. but react.js sometimes working and not working. i am using gulp-uglify in gulp.js
i have already try to set : dev environment
set NODE_ENV=development
but still I get that error in browser console.
#* React Library *#
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
#* JSX parser library *#
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="/dom.jsx" type="text/babel"></script>
dom.jsx
var object;
var $item_url = "/item/";
var $c_url = "/category/";
var TemplateGrid = React.createClass({
render: function() {
return (
<div className="product-item column">
<span className="pin featured">Featured</span>
<div className="product-preview-actions">
<figure className="product-preview-image">
<img src="assets/images/items/flat_m.jpg" alt="product-image" />
</figure>
<div className="preview-actions">
<div className="preview-action">
<a href={$item_url + this.props.item.name}>
<div className="circle tiny primary">
<span className="icon-tag" />
</div>
</a>
<a href={$item_url + this.props.item.name}>
<p>Go to Item</p>
</a>
</div>
<div className="preview-action">
<a href={$item_url + this.props.item.name}>
<div className="circle tiny secondary">
<span className="icon-heart" />
</div>
</a>
<a href={$item_url + this.props.item.name}>
<p>Favourites +</p>
</a>
</div>
</div>
</div>
<div className="product-info">
<a href={$item_url + this.props.item.ProductId + "/" + (this.props.item.name).replace(/\s/g, "_")}>
<p className="text-header">{this.props.item.name}</p>
</a>
<p className="product-description"></p>
<a href={$c_url + this.props.item.Category}>
<p className="category primary">{this.props.item.Category}</p>
</a>
<p className="price"><span>$</span>12</p>
</div>
</div>
);
}
});
var Widgets = React.createClass({
getInitialState: function(){
return {
items: []
}
},
componentDidMount:function(){
$.get(this.props.dataUrl, function (data) {
object = data;
if(this.isMounted()){
this.setState({
items: data.tumb
});
}
}.bind(this));
},
componentDidUpdate: function () {
$(".slide-control.left,.slide-control.right").append('<svg class="svg-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#svg-arrow"></use></svg>');
setTimeout(function () {
$('.owl-carousel').owlCarousel('refresh');
}, 1000);
},
render : function(){
var rows = [];
var left = [];
var right = [];
this.state.items.forEach(function (item) {
var i=0;
var o = object.objects[i]; i++;
document.getElementById('Thumb-title').innerText = o.name;
rows.push(<TemplateGrid key={item.ProductId} item={item} />);
});
return (
<div className="product-showcase">
<div className="headline primary">
<h4 id="Thumb-title" />
<div className="slide-control-wrap">
<div className="slide-control left">
</div>
<div className="slide-control right">
</div>
</div>
</div>
<div id="pl-1" className="product-list grid column4-wrap owl-carousel">
{rows}
</div>
</div>
);}
});
ReactDOM.render(
<Widgets dataUrl="/thumb/8/1" />,
document.getElementsByClassName('w1')
);

Related

angular JS adding and removing movie to a array of favorites

I'm quite new to angular js and I am having a hard time trying to implement a function who adds a movie to an array of favorites and removes it from the array in case it's already there (difficult part).
Those are my controllers bellow. The SearchController and DetailsController refer to the search.html and details.html respectively, also bellow. Can I get any help?
Thanks in advance
var myControllers = angular.module("myControllers", []);
myControllers.controller(
"SearchController",
function MyController($scope, $http) {
$scope.searchByTitle = function (title) {
$http
.get("http://www.omdbapi.com/?apikey=d4458e16&s=" + title)
.then(function (data) {
$scope.movies = data.data.Search;
});
};
$scope.wishlist = JSON.parse(localStorage.getItem("wishlist"));
}
);
myControllers.controller(
"DetailsController",
function MyController($scope, $http, $routeParams) {
$http
.get("http://www.omdbapi.com/?apikey=d4458e16&i=" + $routeParams.itemId)
.then(function (data) {
$scope.movies = data.data;
});
$scope.favList = JSON.parse(localStorage.getItem("wishlist")) || [];
$scope.isFavorite = false; //JSON.parse(localStorage.getItem("isFavorite")) || false;
$scope.addMovieToFavList = function (item) {
/*if ($scope.favList.includes(item)) {
console.log("movie is on favorites and will be removed");
//$scope.favList.pop(item);
} else {
console.log("movie is not on favorites and will be added");
//$scope.favList.push(item);
}*/
!$scope.isFavorite ? $scope.favList.push(item) : $scope.favList.pop();
$scope.isFavorite = !$scope.isFavorite;
localStorage.setItem("wishlist", JSON.stringify($scope.favList));
//localStorage.setItem("isFavorite", JSON.stringify($scope.isFavorite));
};
}
);
search.html:
<div class="container-fluid">
<h1>Film App<h1>
<div class="row">
<h2>Search</h2>
<input
ng-model="title"
class="form-control"
placeholder="Search for a film"
value="Search"
/>
<button ng-click="searchByTitle(title)" class="btn btn-primary btn-block">
Search for a movie
</button>
<ul class="list-group">
<li ng-repeat="movie in movies | filter:title" class="list-group-item">
<a href="#!/details/{{movie.imdbID}}">
<img ng-src="{{movie.Poster}}" width="30px" />
{{movie.Title}}<span>, {{movie.Year}}</span>
</a>
</li>
</ul>
</div>
</div>
<div class="container-fluid">
<h1>My Favorites<h1>
<ul class="list-group">
<li ng-repeat="favouriteMovie in wishlist" class="list-group-item">
<a href="#!/details/{{favouriteMovie.imdbID}}">
<img ng-src="{{favouriteMovie.Poster}}" width="30px" />
{{favouriteMovie.Title}}<span>, {{favouriteMovie.Year}}</span>
</a>
</li>
</ul>
</div>
details.html:
<div class="container">
<div class="row">
<div class="col-12 mt-3">
<div class="card" ng-model="movies">
<div
class="card-header d-flex align-items-start justify-content-between"
>
<a href="#!">
<button>Back Home</button>
</a>
<button ng-click="addMovieToFavList(movies)">
{{isFavorite==false?'Add to favorites':'Remove from favorites'}}
</button>
<h1 class="card-title my-0">{{movies.Title}}</h1>
<img ng-src="{{movies.Poster}}" />
</div>
<div class="card-body">
<div class="card-text text-secondary">
<h4>Year</h4>
<p>{{movies.Year}}</p>
<h4>Cast</h4>
<p>{{movies.Actors}}</p>
<h4>Plot</h4>
<p>{{movies.Plot}}</p>
<h4>Rating</h4>
<p>{{movies.imdbRating}}/10</p>
</div>
</div>
</div>
</div>
</div>
</div>
You will want to check for the movie via an identifier (like an ID) not by comparing whole objects. So, assuming the object has a property called 'ID' we can check for that. Also, to remove an item from your array, you can use splice
$scope.addMovieToFavList = function(item) {
let index = $scope.favList.findIndex(movie => movie.ID == item.ID);
if (index === -1) {
// movie doesn't exist in favorites yet
$scope.favList.push(item)
$scope.isFavorite = true;
} else {
// movie exists, we will splice it out
$scope.favList.splice(index, 1)
$scope.isFavorite = false
}
localStorage.setItem("wishlist", JSON.stringify($scope.favList));
};

Foundation Dropdown menu in React

I’m trying to include a Foundation dropdown menu in my React application. However, when I try to add in the normal code for the dropdown menu, the dropdown functionality does not work, and the the dropdown menu items all automatically display. I also receive the errors:
Uncaught TypeError: $(...).foundation is not a function
at Constructor.componentDidMount (eval at
Below is my code. Thanks so much.
var React = require('react');
var $ = require('jQuery');
var Nav = React.createClass({
componentDidMount: function () {
$(document).foundation();
},
render: function () {
return(
<div>
<div className="off-canvas-wrapper">
<div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div className="off-canvas-content" data-off-canvas-content>
<div className="title-bar show-for-small-only">
<div className="title-bar-left">
<button className="menu-icon" type="button" data-open="mobile-menu"></button>
<span className="title-bar-title">MENU</span>
</div>
</div>
<nav className="top-bar nav-desktop">
<div className="wrap">
<div className="top-bar-left">
<h5 className="site-logo">Insurance</h5>
</div>
<div className="top-bar-right">
<ul className="menu menu-desktop dropdown" data-dropdown-menu>
<li>
Linkedin
<ul className="menu">
<li>StackOverflor</li>
</ul>
</li>
<li>Facebook</li>
<li>FAQ</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
);
}
});
module.exports = Nav;
Have you imported "foundation-sites" in the "app.js" file.?

using ng-if to make p appear if image is null

I want to make a <p> appear if an image is missing from the image source. So if there is an image show the image if there is no image show the stuff in the <p> tag.
<div id="logo">
<img src="{{selected_.image}}">
<div ng-if="selected_.image == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
</div>
Directive to handle images
var app = angular.module("app", []);
app.directive("imageLoading", function ($rootScope, $timeout) {
return {
restrict: "A",
scope: {
imageLoading: "="
},
link: function (scope, element) {
element.on("error", function () {
element.hide();
scope.$apply(function(){
scope.imageLoading = true;
})
});
}
};
});
<html ng-app="app">
<head>
</head>
<body>
<h4>image 1</h4>
<img image-loading="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92d.png">
<div ng-show="google">google image not found</div>
<hr>
<h4>image 2</h4>
<img image-loading="google2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
<div ng-show="google2">google image not found</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
Here, I made working example for that plz check below link.
https://jsfiddle.net/hirojaisinghani/pxwbyuLL/27/
Plz check that.
<div ng-app="ImageDisplay">
<div id="logo" ng-controller="ImageController">
<div>
<h3>
First Image
</h3>
<img ng-if="selected_.image1 != ''" src="{{selected_.image1}}" height="100px" width="50px" /></div>
<div ng-if="selected_.image1 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>">
</p>
</div>
<div>
<h3>
Second Image
</h3>
<img ng-if="selected_.image2 != ''" src="{{selected_.image2}}" /> </div>
<div ng-if="selected_.image2 == ''">
<p>hey<button ng-click="discardIntroPage();" class="button button-assertive">Add A Photo</button>
</p>
</div>
</div>
</div>
var app = angular.module('ImageDisplay', []);
app.controller('ImageController', function($scope) {
$scope.selected_ = {
image1:null,
image2:null
};
$scope.selected_.image1= 'https://cdn0.iconfinder.com/data/icons/metro-style-people-svg-icons/48/User_login-512.png';
// alert($scope.selected_.image1);
$scope.selected_.image2 = '';
$scope.discardIntroPage = function() {
alert('Add Photo');
}
});

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `MovieResults`

I can not go to the Move.js page to page Details.js
I do not understand why I have this response : Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of MovieResults
Movie.js :
var Movie = React.createClass({
render: function(){
var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;
var myLink = 'search/' + this.props.movie.imdbID;
return(
<div className="well">
<div className="row">
<h4 className="text-center">
<Link to={myLink} activeClassName="current">{this.props.movie.Title}</Link>
</h4>
</div>
</div>
)
},
});
Details.js :
var Details = React.createClass({
render: function(){
var link = 'http://www.imdb.com/title/' + this.props.movie.imdbID;
var title = this.props.movie.Title;
var year = this.props.movie.Year;
var type = this.props.movie.Type;
var poster = this.props.movie.Poster;
var imdbID = this.props.movie.imdbID;
return(
<div className="well">
<div className="row">
<div className="col-md-4">
<img className="thumbnail" src={poster} />
</div>
<div className="col-md-8">
<h4><a href={this.props.movie.Title}> {title}</a></h4>
<ul className="padding">
<li className="list-group-item">Type : {type}</li>
<li className="list-group-item">Year Released : {year}</li>
<li className="list-group-item">Id imdb : {imdbID}</li>
</ul>
<a className="btn btn-primary" href={link}>View on IMDB</a>
</div>
</div>
<Movie movie={this.props.Details} key={i} />
</div>
)
},
});
DOCS
The key should always be supplied directly to the components in the
array, not to the container HTML child of each component in the array
So... Add key attribute to the first child <div>
var MovieResults = React.createClass({
render: function(){
return(
<div>
<h3 className="text-center"> Results </h3>
{
this.props.movies.map(function(movie, i){
return(
<div key={i}>
<Movie movie={movie}/>
</div>
)
})
}
</div>
)
}
})

How to delete data inside the list using bootstrap modal?

I just want to delete the data inside the table using bootstrap modal, but it seems so hard to find the right way how to do this, here's my sample code. Inside my modal I have an href code that use to delete the data
, it is working outside the modal. I just want to know any solution make this working. thanks.
var app = angular.module('app', ['ui.bootstrap']);
var student = [{
name: 'Andrew'
}, {
name: 'Butler'
}, {
name: 'Cameron'
}, {
name: 'Delo'
}, {
name: 'Emman'
}, {
name: 'Ferbs'
}];
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('customersCtrl', function($scope, $timeout) {
$scope.list = student;
$scope.currentPage = 1; //current page
$scope.entryLimit = 10; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
});
app.filter('startsWithA', function() {
return function(items, letter) {
console.log(items, letter)
var filtered = [];
var letterMatch = new RegExp(letter, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (letterMatch.test(item.name.substring(0, 1))) {
filtered.push(item);
}
}
console.log(filtered);
return filtered;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<div ng-app="app">
<div class="container" ng-controller="customersCtrl">
<div class="row">
<div class="col-12">
<h2 id="titleHead"><center>Student List</center></h2>
</div>
<div class="option-panel">
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form">
<div class="input-group">
<input type="text" ng-model="search" ng-click="filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search">
</div>
</form>
</div>
</div>
<div class="nav navbar-default">
<div class="tab-panel">
<nav>
<ul>
<li class="active" name="active"><a ng-click="letter = '[AB]'">A-B</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[CD]'">C-D</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[EF]'">E-F</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="no-more-tables">
<table class="col-md-12 table-bordered table-condensed cf" ng-show="filteredItems > 0">
<thead class="cf">
<tr>
<th>
<center>Name
<a ng-click="sort_by('first_name');"></a>
</center>
</th>
</tr>
</thead>
<tbody color="#">
<tr ng-repeat="data in filtered = (list | filter:search |orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit |startsWithA:letter |limitTo:entryLimit ">
<td data-title="Name" class="text-center">{{data.name}} <a type="button" class="btn btn-xs btn-primary" style="width: 40%;" href="#" data-toggle="modal" data-target="#myModal" >Delete</a>
</td>
</tr>
</tbody>
</table>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<center>
<h4>No results found</h4>
</center>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<center>
<div pagination="" page="currentPage" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</center>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Student</h4>
</div>
<div class="modal-body">
<p>Do you want to delete this student?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" href="<?php echo base_url(); ?>index.php/students/edit/studentform/{{data.id}}" >Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
First I would suggest using $http service, or similar, for removing a record. Also, You'll notice that I made a change to the way your controller was organized by using the controller as syntax, and assigning everything to the controller, and not to the scope. That way you can pass on the controllers scope to directives and such more easily.
The idea is that you preserve an ID of the selected item, so that you can use it later on when you trigger the server delete action.
This can be done in many different ways, this is just one of the ways.
Hope this helps.
var app = angular.module('app', ['ui.bootstrap']);
var student = [{
id: 0,
name: 'Andrew'
}, {
id: 1,
name: 'Butler'
}, {
id: 2,
name: 'Cameron'
}, {
id: 3,
name: 'Delo'
}, {
id: 4,
name: 'Emman'
}, {
id: 5,
name: 'Ferbs'
}];
app.filter('startFrom', function() {
return function(input, start) {
if (input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.controller('customersCtrl', function($http, $timeout) {
var vm = this,
itemId = null;
/**
* Store a selected item's ID
* #param id
*/
vm.getItemId = function (id) {
itemId = id;
};
/**
* Remove the selected item from the list
*/
vm.deleteItemFunction = function () {
console.log('remove', itemId);
// And then something like this
$http.delete('/students/edit/studentform/' + itemId).success(function () {
console.log('successfully removed');
});
};
vm.list = student;
vm.currentPage = 1; //current page
vm.entryLimit = 10; //max no of items to display in a page
vm.filteredItems = vm.list.length; //Initially for no filter
vm.totalItems = vm.list.length;
vm.setPage = function(pageNo) {
vm.currentPage = pageNo;
};
vm.filter = function() {
$timeout(function() {
vm.filteredItems = vm.filtered.length;
}, 10);
};
vm.sort_by = function(predicate) {
vm.predicate = predicate;
vm.reverse = !vm.reverse;
};
});
app.filter('startsWithA', function() {
return function(items, letter) {
console.log(items, letter)
var filtered = [];
var letterMatch = new RegExp(letter, 'i');
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (letterMatch.test(item.name.substring(0, 1))) {
filtered.push(item);
}
}
console.log(filtered);
return filtered;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>
<div ng-app="app">
<div class="container" ng-controller="customersCtrl as customer">
<div class="row">
<div class="col-12">
<h2 id="titleHead"><center>Student List</center></h2>
</div>
<div class="option-panel">
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form">
<div class="input-group">
<input type="text" ng-model="search" ng-click="customer.filter()" placeholder="Search student" class="form-control" placeholder="Search" name="search">
</div>
</form>
</div>
</div>
<div class="nav navbar-default">
<div class="tab-panel">
<nav>
<ul>
<li class="active" name="active"><a ng-click="letter = '[AB]'">A-B</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[CD]'">C-D</a>
</li>
<li class="active" name="active"><a ng-click="letter = '[EF]'">E-F</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="no-more-tables">
<table class="col-md-12 table-bordered table-condensed cf" ng-show="customer.filteredItems > 0">
<thead class="cf">
<tr>
<th>
<center>Name
<a ng-click="customer.sort_by('first_name');"></a>
</center>
</th>
</tr>
</thead>
<tbody color="#">
<tr ng-repeat="data in filtered = (customer.list | filter:search |orderBy : customer.predicate : customer.reverse) | startFrom:(customer.currentPage-1)* customer.entryLimit |startsWithA:letter |limitTo: customer.entryLimit ">
<td data-title="Name" class="text-center">
{{data.name}}
<a type="button" class="btn btn-xs btn-primary" style="width: 40%;" href="#" ng-click="customer.getItemId(data.id)" data-toggle="modal" data-target="#myModal">Delete</a>
</td>
</tr>
</tbody>
</table>
<div class="col-md-12" ng-show="customer.filteredItems == 0">
<div class="col-md-12">
<center>
<h4>No results found</h4>
</center>
</div>
</div>
<div class="col-md-12" ng-show="customer.filteredItems > 0">
<center>
<div pagination="" page="customer.currentPage" on-select-page="customer.setPage(page)" boundary-links="true" total-items="customer.filteredItems" items-per-page="customer.entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</center>
</div>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Student</h4>
</div>
<div class="modal-body">
<p>Do you want to delete this student?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" ng-click="customer.deleteItemFunction()">Yes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Resources