Why onClick in my React class is not working - javascript

Below is my React Component
var NavHead = React.createClass({
getInitialState: function() {
return { in: 0};
},
handleClicking: function(event){
var text=0;
console.log(this.state.in);
},
render: function(){
return(
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href={this.props.url} >
<img src={this.props.img_src} alt="tm-logo" onClick={this.handleClicking}/>
</a>
</div>
);
}
});
However, when I click the logo, there is nothing happened. Is there anything wrong in my code?
For more information, I have more than 20 components in my file. I have tried to copy-paste onClick handler to every component, and found that there is only 1 component that the code works. Below is that component.
var NavBarMenu = React.createClass({
getInitialState: function() {
return { itemClick: 0};
},
handleClick: function(event) {
console.log(this.state.itemClick)
this.setState({itemClick: event.currentTarget.dataset.id});
},
render: function(){
return(
<ul className="nav navbar-nav navbar-menu">
{this.props.data.map(function(object, i){
return <li onClick={this.handleClick} data-id={i} className={this.state.itemClick==i?"active":""}><a href={object.url}>{object.name}</a></li>;
},this)}
</ul>
);
}
});

I tried to run your code, and run into the same issue.
I fixed it by changing the order of required react js files. The react-dom.js library was included before react.js
Something similar to:
<script src="react.js"></script>
<script src="react-dom.js"></script>
The key thing is react-dom.js should come after react.js.

I think your javascript engine is optimizing out your code in the first case because it is only doing a console.log. In the second case, state is mutated so the code is kept around.

Related

Vue Object not updating with axios POST request

<template>
<div>
<div class="dropdown d-inline-block ml-2">
<button type="button" class="btn btn-sm btn-dual" id="page-header-notifications-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-on:click="MarkAllAsRead($event)">
<i class="si si-bell"></i>
<span class="badge badge-danger badge-pill" v-if="CountUnread(notifications)">{{ CountUnread(notifications) }}</span>
</button>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right p-0 border-1 font-size-sm" aria-labelledby="page-header-notifications-dropdown">
<div class="p-2 bg-primary text-center">
<h5 class="dropdown-header text-uppercase text-white">Notifications</h5>
</div>
<ul class="nav-items mb-0" style="overflow-y:scroll; height:500px;">
<!-- notifications should have been updated by axios but they never appear -->
<li v-for="notification of notifications">
<div v-if="notification.length">
<notification v-bind:notification="notification[0]"></notification>
</div>
<div v-else>
<notification v-bind:notification="notification"></notification>
</div>
</li>
<div class="p-2 border-top" v-if="hasMore">
<a class="btn btn-sm btn-light btn-block text-center" href="javascript:void(0)" v-on:click="loadMoreNotifications($event)">
<i class="fa fa-fw fa-arrow-down mr-1"></i> Load More..
</a>
</div>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
props:[
'user'
],
data: function() {
return{
notificationsIndex:0,
notifications:[],
hasMore:1
}
},
methods: {
loadNotifications: function(){
var data = {
index: this.notificationsIndex
};
axios.post('/notifications/getAll',data).then( response => {
if(response.data){
if(this.notifications.length==0){
this.notifications=response.data;
console.log(this.notifications);//data fetched here successfully
}
else{
this.notifications.push.apply(this.notifications,response.data);
}
}
else{
this.hasMore = 0;
}
});
console.log(this.notifications);//couldn't find data, just observer object
},
loadMoreNotifications: function(event){
event.preventDefault();
this.notificationsIndex++;
this.loadNotifications();
},
CountUnread: function(notifications){
var count=0;
for(var i=0;i<notifications.length;i++){
if(notifications[i].read_at == null){
count++;
}
}
return count;
},
HasNotification: function(notification){
list = this.notifications.filter(item => {
return item.id == notification.id;
});
return list.length
}
},
created: function(){
this.loadNotifications();
window.Echo.private('App.User.' + this.user.id)
.notification((notification) => {
if(this.HasNotification){
this.notifications.unshift(notification);
}
});
}
}
</script>
And notifications object has nothing in html template as well.
Note: This same code works fine on all pages where I have this only instance of vue. On another page (localhost/horizon)(using laravel horizon package and updating it's layout.blade.php ) where there are two instances of vue, one for notifications and other of Laravel/Horizon, this request returns nothing.
The problem here as #cbaconnier mentioned is that you're using an async function and not waiting for the result.
The console.log() that's failing is due to the fact that it's executed before the post request is retrieved (that's why you're receiving an observer).
The same happens in your created method.
try taking all the code that's dependant on the received notifications into the .then() callback of the axios call.
The problem here was, I was using a bootstrap shipped with app theme I was using and when I installed Horizon and updated Horizon layout.blade.php file according to my customisations, it broke this piece of code because it was using some other bootstrap version and once I removed the bootstrap from the horizon require('bootstrap'); in one of it's app.js file, everything worked fine.

KnockoutJS hasFocus doesn't work

I can't seem to figure out how to make this thing work, wherever i put this binding it won't work
Here's my script
<a class="dropdown-toggle expanded" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" data-bind="hasFocus:notificationService.aaaa">
this.aaaa = ko.observable(false);
And my html
<span data-bind="text:notificationService.aaaa"></span>
Where notificationService is an Object passed with Require. Everything else works, but not this hasFocus
Any clues?
If notificationService is an observable, your binding needs to be
data-bind="hasFocus:notificationService().aaaa"
(with the invocation parentheses after notificationService). Also, you need to add tabindex to the <a> tag, as your anchor is not a link (it has no href) and so it would not normally be able to be focused.
const vm = {
notificationService: ko.observable({
aaaa: ko.observable(false)
})
};
ko.applyBindings(vm);
setTimeout(() => {
vm.notificationService().aaaa(true);
}, 800);
a:focus {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<a class="dropdown-toggle expanded" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" data-bind="hasFocus:notificationService().aaaa" tabindex="0">Anchor</a>
<span data-bind="text:ko.toJSON(notificationService)"></span>

Angular UI navbar collapse not working

I can't seem to get my navbar to start as collapsed with the below code. I'm using Angular-ui-bootstrap:
navbar.directive.html:
<button type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div collapse="isCollapsed">
<ul class="nav navbar-nav">
<li>Test</li>
<li>Testing...</li>
</ul>
</div>
navbar.controller.js:
angular.module('gameApp')
.controller('NavbarController', NavbarController);
NavbarController.$inject = ['playersService'];
function NavbarController(playersService) {
var vm = this;
vm.isCollapsed = true;
var getCurrentPlayer = function() {
playersService.getCurrentPlayer().$promise.then(function(data) {
vm.player = data.player;
});
};
var init = function() {
getCurrentPlayer();
};
init();
}
When the page is minimized to the point where the responsive navbar toggle appears the menu is already showing. Even if I change it to vm.isCollapsed = false; the menu still starts as open.
Controller is built using this to allow controllerAs syntax but variables in html are set up to use $scope.
If directive does not have isolated scope you need to declare the alias for controller somewhere and prefix all the variables with the alias.
--OR--
Need to change controller to bind all the variables to $scope not this
Not sure how directive is configured or where controller is being declared in the view

React onClick event only triggerable once after compiling from jsx to js

I have a component that builds a list of images with 2 buttons on each array entry.
One of the 2 buttons has an onClick event which updates its parentComponent so that the image is shown in a bigger view.
Everything works perfectly in the precompilex jsx version. But as soon as i try out the "live" compiled version the onClick event only works once.
To make it work on another element I need to reload the page.
I don't get any console errors. No idea where the error might be.
If you want to recreate it you can paste the code and create a div with the id "bilder".
I am using the latest react version :
<script src="some-react-CDN-0.13.3.js"></script>
<script src="some-react-CDN/JSXTransformer-0.13.3.js"></script>
Heres the source :
var Bilder = React.createClass({
getInitialState: function() {
return {
data:[
['1', '/app/public/imgs/image.jpg', 'bild1.jpg'],
['2', '/app/public/imgs/image.jpg', 'bild2.jpg'],
['3', '/app/public/imgs/image.jpg', 'bild3.jpg'],
['4', '/app/public/imgs/image.jpg', 'bild4.jpg'],
['5', '/app/public/imgs/image.jpg', 'bild5.jpg']
],
currentPic:[],
display:'showBild clearfix dn',
displayBg:'darkBg dn'
};
},
showBild: function(e, data){
this.setState({
currentPic: e,
display: 'showBild clearfix db',
displayBg: 'darkBg db'
});
},
hide: function(){
this.setState({
display: 'showBild clearfix dn',
displayBg: 'darkBg dn'
});
},
render: function() {
return (
<div>
<SingleBild data={this.state.data} chosenBild={this.showBild} />
<BildDetail hide={this.hide} data={this.state.currentPic} display={this.state.display} displayBg={this.state.displayBg} />
</div>
);
}
});
var SingleBild = React.createClass({
getInitialState: function() {
return {
bild:[]
};
},
showBild: function(data, e){
e.preventDefault();
this.props.chosenBild(data);
},
render: function() {
var scopeThis = this;
var displayBild = function(bild){
return <li><img src={bild[1]} alt="" /><span>{bild[2]}</span><a onClick={scopeThis.showBild.bind(null, bild)} href="#"><i className="fa fa-eye"></i></a><i className="fa fa-trash-o"></i></li>
};
return (
<ul className="dashboardUl bilder clearfix">
<h2>Gemeldete Bilder:</h2>
{this.props.data.map(displayBild)}
</ul>
);
}
});
var BildDetail = React.createClass({
hide: function(){
this.props.hide();
},
render: function() {
return (
<div>
<div className={this.props.display}>
<img src={this.props.data[1]} alt="" />
<span>{this.props.data[2]}</span>
<ul>
<li><i className="fa fa-trash-o"></i></li>
<li><i className="fa fa-ban"></i></li>
</ul>
</div>
<div onClick={this.hide} className={this.props.displayBg}></div>
</div>
);
}
});
React.render(<Bilder />, document.getElementById('bilder'));
I think you should remove the mapping of data onto list nodes out of the return statement in render and then bind component Class to to the map callback function.
...
render: function() {
var listNodes = this.props.data.map(function(bild) {
return (
<li>
<img src={bild[1]} alt="" />
<span>{bild[2]}</span>
<a onClick={this.showBild} href="#">
<i className="fa fa-eye"></i>
</a>
<a href="#">
<i className="fa fa-trash-o"></i>
</a>
</li>
)
}.bind(this));
return (
<ul className="dashboardUl bilder clearfix">
<h2>Gemeldete Bilder:</h2>
{listNodes}
</ul>
);
}
Now

Convert razor enumdropdownlistfor to bootstrap button group dropdown

I have a razor syntax enumdropdownlist for displaying either active/inactive status.
#Html.EnumDropDownListFor(model => model.Status, new { #class = "btn btn-default btn-lg dropdown-toggle" })
I want to use a button group drop down with glyphs like I have below but don't know how to get my model value 'model.Status' to set the value of the button group drop down.
$(document).ready(function() {
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li id="item1">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active
</li>
<li id="item2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed
</li>
</ul>
</div>
I don't care if I use html or razor, I just want to use the boostrap button drop down with glyphs and I want to be able to set the enumerated view model value active/inactive (Status) when the page loads.
Although the Bootstrap dropdown buttons look similar to a select list, their functionality is vastly different. I wouldn't recommend trying to use a Bootstrap dropdown button as a replacement for a select list if you need to actually post the "selected" item.
If you're just looking for a more stylistic and visually appealing alternative to a traditional select control, take a look at something like Select2, and while the look is pleasant enough out of the box, there's also a project that styles it to fit even better with the rest of Bootstrap.
If you're dead set on using Bootstrap dropdown buttons, you've got a lot of work ahead of you. You'll need to set up some JavaScript that will read the information from the select element and dynamically create the Boostrap dropdown button based on that, while hiding the original select. Then, you'll need to map over all the events such as a click on one of the items in the dropdown so that it selects the same item in the actual select element. You'll also have to account for highlighting the item in the dropdown that corresponds with the selected option in the select list, etc. If you run into specific problems while writing all that code, you can ask additional questions here as necessary, but providing you with all the code you'll need here is far beyond the scope of StackOverflow.
You can try to enumerate through enum values and put them in page, please notice the Html.HiddenFor from the end, we will use it to store the selected Status.
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
#{
var values = Enum.GetValues(typeof(Status));
for(int i=0; i < values.Count; i++)
{
var status = (Status)values[i];
<li id="item#(i+1)" class="select-status" data-status="#values[i]">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>#status.ToString()
</li>
}
}
</ul>
</div>
#Html.HiddenFor(model => model.Status)
After we create the html we have to update the selected Status in Html.HiddenFor to persist when a POST is performed.
$(document).ready(function() {
$('.select-status').click(function(){
$('#Status').val($(this).data('status')); // update the status in hidden input
});
#for(int i=0; i < values.Count; i++)
{
<text>
$('#item#(i+1)').on('click', function() {
$('#item0').text('#status.ToString()');
});
</text>
}
});
HTML snippet example:
$(document).ready(function() {
$('.select-status').click(function(){
$('#Status').val($(this).data('status')); // update the status in hidden input
});
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li id="item1" class="select-status" data-status="1">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active
</li>
<li id="item2" class="select-status" data-status="2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed
</li>
</ul>
</div>
<br />
Visible Status just for test
<input type="text" id="Status" value="1" />
Note: The code may have some errors but the logic/flow is the same.
In .cshtml file
<script>
myModelStatus = '#Model.Status';
</script>
#Html.EnumDropDownListFor(model => model.Status, new { #class = "btn btn-default btn-lg dropdown-toggle" })
more html here...
In your js file
$(document).ready(function() {
var status = myModelStatus;
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
You are listening for click events on the li element rather than on the anchor tag
You should stop event propagation by using event.preventDefault() method.

Categories

Resources