I have some JS like below. I find that if I remove mdl-js-layout the onClick of the button works. Otherwise it fails. Why might this be? I have already did componentHandler.upgradeDom()
'use strict';
module.exports = React.createClass({
componentDidMount: function() {
console.log('update')
componentHandler.upgradeDom();
},
addExpense: function() {
console.log('add expense');
},
render: function() {
return (
<div ref="appLayout" className="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
<div className="mdl-layout__drawer">
<span className="mdl-layout-title">Expenses</span>
<nav className="mdl-navigation">
<a className="mdl-navigation__link" href="#">Expenses</a>
<a className="mdl-navigation__link" href="#">Settings</a>
</nav>
</div>
<main className="mdl-layout__content">
<div className="page-content">
<div className="mdl-grid">
<div className="mdl-cell mdl-cell--12-col">
<button ref="btnAddExpense" onClick={this.addExpense} className="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
Add Expense
</button>
</div>
</div>
</div>
</main>
</div>
);
}
});
If I look into the React debugger tools, I can actually see the onClick is supposed to be bound?
It looks like mdl is not compatible with react, and prevents the click events from the react component from working. Hopefully, this would be fixed in a future update, but until then, you can work around this by manually re-adding the events after mounting the component.
componentDidMount: function() {
componentHandler.upgradeDom();
var button = this.refs.btnAddExpense;
button.addEventListener('click', this.addExpense);
},
Demo
Hopefully this answers your question:
With the resources used it apparently does not need to touch the DOM.
HTML
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js">
</script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
JS
var Widget = React.createClass({
handleBtnClick: function(e) {
e.preventDefault();
alert("clicked!");
return true;
},
render: function() {
return <div >
<form>
< button className = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-textfield--full-width mdl-button--facebook"
onClick = {
this.handleBtnClick
} >
Click MEEEEEE!
< /button > </form> < /div >;
}
});
ReactDOM.render( < Widget / > ,
document.getElementById('container')
);
Related
Looking to remove a class if a certain button is clicked.
<div class="slide-container">
<section class="about" id="slide-0">
<div class="menu-total">
<nav class="nav">
<button class="nav_link home" onclick="slideTo('slide-2')">HOME</button>
<button class="nav_link about" onclick="slideTo('slide-0')">ABOUT</button>
<button class="nav_link fun-stuff" onclick="slideTo('slide-1')">FUN STUFF</button>
<button class="nav_link professional" onclick="slideTo('slide-3')">PROFESSIONAL</button>
<button class="nav_link contact" onclick="slideTo('slide-4')">CONTACT</button>
</nav>
<div class="hamburger">
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
<span class="hamburger__patty"></span>
</div>
</div>
The one I want to remove the class on is the HOME button. So "slideTo('slide-2)". If it's clicked on the others then the class is kept. I believe someone is either wrong with my loop or not getting the ID correctly of the items/
function slideTo(slideId) {
const slide = document.getElementById(slideId);
slide.scrollIntoView({
behavior: 'smooth'
})
// above this line works fine
let nonHome = document.querySelectorAll('.slide-container section');
let nonHomeID = document.getElementById('slide-2');
var i;
setTimeout(function(){
for (i=0; i < nonHome.length; i++ ){
// i believe it's somewhere here it is wrong
if (nonHome[i].id != nonHomeID){
nonHome[i].classList.add("nav-visibility");
} else{
nonHomeID.classList.remove("nav-visibility");
}
}
}, 1000)
}
If you can use jquery library, you can write in the HTML:
<button class="nav_link" data-value="home">HOME</button>
...
and then in the JS code:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // Get the data-value clicked
$(".nav_link").each(function() { // Loop through all elements of the class 'nav-link'
var v = $(this).data("value");
if (v == valueClicked) {
$(this).removeClass("nav-visibility");
} else {
$(this).addClass("nav-visibility");
}
)
}
Not much simpler, but the HTML is cleaner.
Simpler version if it is not required to browse through all buttons at each button click:
$(".nav_link").on("click", function() {
var valueClicked = $(this).data("value"); // The value of the button clicked by the user
if (valueClicked == "home") {
$(this).removeClass("nav-visibility");
console.log('remove')
} else { $(this).addClass("nav-visibility");
console.log('add')
}
});
Im trying to implement dropdown menu in oracle JET but if I click on the menu link it doesn't work :( What am I doing wrong?
html:
<div id='menubutton-container'>
<oj-menu id="myMenu" slot="menu" style="display:none" on-oj-action="[[menuItemAction]]">
<oj-option id="ac" value="Additional Compensation" >
<span class="demo-icon-font demo-fire-icon-24" slot="startIcon"></span>
<a id="1ds" href="#2"
data-bind="click: menuItemAction">MyLink</a>
</oj-menu>
</oj-menu-button>
</div>
vieModel js:
self.selectedMenuItem = ko.observable("(None selected yet)");
self.menuItemAction = function( data, event )
{
this.selectedMenuItem(event.currentTarget.id);
return true;
};
Bootstrap.whenDocumentReady().then(
function()
{
ko.applyBindings(new EmployeesViewModel, document.getElementById('menubutton-container'));
}
);
First there is no closing tag for oj-option and starting tag for oj-menu-button.
The currentTarget.id it will refer to oj-menu.
below html and js works fine
<div id='menubutton-container'>
<oj-menu-button>
<oj-menu id="myMenu" slot="menu" style="display:none" on-oj-action="[[menuItemAction]]">
<oj-option id="ac" value="Additional Compensation" >
<span class="demo-icon-font demo-fire-icon-24" slot="startIcon">MyLink</span>
</oj-option>
</oj-menu>
</oj-menu-button>
self.selectedMenuItem = ko.observable("(None selected yet)");
self.menuItemAction = function (event)
{
console.log(event.currentTarget);
console.log(event.currentTarget.id);
console.log(event.target.value);
self.selectedMenuItem(event.target.value);
return true;
};
I am loading jquery.ime editor which supports the multi language editing, using this library https://github.com/wikimedia/jquery.ime/blob/master/examples/ced/script.js, there behavior is on "change" they are loading corresponding language JSON. I need that work on button click. on button click i am opening modal window, there I have text field, where I have write in regional languages. I know the language code based on that corresponding language is coming there, but right now the issue is I am able write in regional language on second click of button.
Here is my code:
open(writecontent: TemplateRef<any>, countvalue,books) {
this.config.keyboard = false;
this.modalRef = this.modalService.show(writecontent, Object.assign({}, this.config,{ class: 'gray modal-lg' }));
$( document ).ready( function () {
'use strict';
var $ced, ime, $imeSelector, $langSelector;
$.ime.setPath( '../../' );
$ced = $( '#ced' );
// Initialise IME on this element
$ced.ime( {
showSelector: false
} );
// Get the IME object
ime = $ced.data( 'ime' );
ime.enable();
$imeSelector = $( '#imeSelector' );
$langSelector = $( '#go' );
$langSelector.click(function() {
ime.setLanguage(books.language[0].language_id);
});
$ced.on( 'imeLanguageChange', function () {
listInputMethods( ime.getLanguage() );
});
function listInputMethods( lang ) {
$imeSelector.empty();
ime.getInputMethods( lang ).forEach( function ( inputMethod ) {
$imeSelector.append(
$( '<option/>' ).attr( 'value', inputMethod.id ).text( inputMethod.name )
);
});
$imeSelector.trigger( 'change' );
}
$imeSelector.on( 'change', function () {
var inputMethodId = $imeSelector.find( 'option:selected' ).val();
ime.load( inputMethodId ).done( function () {
ime.setIM( inputMethodId );
});
});
});
}
HTML CODE
<button id="go" (click)="open(books)" [ngClass]="{'disabled': disbutton}" [disabled]="disbutton" class="cl_add">ADD CONTENT</button>
<ng-template #writecontent>
<div class="modal-header">
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide();destrory()">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-center"> write Content</h4>
</div>
<div class="modal-body" role="application">
<form ngNativeValidate (ngSubmit)="onSubmit()" #writeContentForm="ngForm">
<div class='imeSelector' style="display:none">
<select id="imeSelector"></select>
</div>
<div>
<label for="regLang">Title</label>
<input type="text" id="ced" class="txt_book_inf" name="regLang" minlength="10" maxlength="150" required />
</div>
<div>
<label class="new_span_txt">Write Content</label>
<textarea id="mytextareaid" name="mytextareaid" rows="20" cols="80" style="width: 100%; height:200px;"></textarea>
</div>
<div id="message"></div>
<br />
<div class="text-center">
<button type="submit" class="btn-left" class="btn btn-primary">SAVE</button>
</div>
</form>
</div>
</ng-template>
And i am working on Angular project both id and angular click event on the same button is that causing the issue ?
problem with click event after making this change its working fine.
$(document).on("click", "#go", function(){
});
Below is my html format i want to open leftbar div tag while clicking of open-left tag and also close leftbar div tag while clicking of open-left tag.
<div id="leftbar" class="snap-drawers">
<div class="snap-drawer snap-drawer-left">
<div>
<br />
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
<img src="assets/img/nloop-min.png" alt="" class="drawer-logo" />
</div>
<br />
<ul>
<li><i class="fa fa-home fa-1x"></i> Home</li>
<li><i class="fa fa-dot-circle-o fa-1x"></i> Tour</li>
<li><i class="fa fa-bullseye fa-1x"></i> FAQ</li>
<li><i class="fa fa-magic fa-1x"></i> About</li>
<li><i class="fa fa-comment-o fa-1x"></i> Contact</li>
</ul>
<br />
<p>
© 2013 - nLoop</p>
</div>
</div>
</div>
<div id="content" class="snap-content">
<div id="sidebarmenu" class="col-lg-1 col-sm-1 col-xs-1 col-md-1">
</div>
<div id="rightpart" class="margingap">
Right part
</div>
</div>
<script type="text/javascript">
var snapper = new Snap({
element: document.getElementById('content'),
disable: 'right'
});
$(document).ready(function () {
var addEvent = function addEvent(element, eventName, func) {
if (element.addEventListener) {
return element.addEventListener(eventName, func, false);
} else if (element.attachEvent) {
return element.attachEvent("on" + eventName, func);
}
};
addEvent(document.getElementById('open-left'), 'click', function () {
snapper.open('left');
var state = $(this).is('.open');
if (state) {
snapper.close('left');
}
});
});
</script>
Open and close div element while cliking an anchor tag:
$("#open-left").click(function(){
$("#leftbar").toggle();
});
See more about this here: .toggle() Documentation
Code explanation:
I am just attaching a click event to the #open-left tag and then I called the .toggle() on the #leftbar. This just pretty much keeps record of what is the current state of the object, hiddden or shown, and then calls the particular function according to the state.
Also, see this working example: fiddle.
Are you maybe looking for something like jQuery's hide() and show()? Or toggle()?
Try this:
var isOpen = false;
$("#open-left").click(function(){
if(isOpen){
$("#leftbar").slideUp(); isOpen = false;}
else{ $("#leftbar").slideDown(); isOpen = true; }
});
I am trying to create a modal view and have a base class that all modals need and then extending it for more specific functionality.
PlanSource.Modal = Ember.View.extend({
isShowing: false,
hide: function() {
this.set("isShowing", false);
},
close: function() {
this.set("isShowing", false);
},
show: function() {
this.set("isShowing", true);
}
});
PlanSource.AddJobModal = PlanSource.Modal.extend({
templateName: "modals/add_job",
createJob: function() {
var container = $("#new-job-name"),
name = container.val();
if (!name || name == "") return;
var job = PlanSource.Job.createRecord({
"name": name
});
job.save();
container.val("");
this.send("hide");
}
});
I render it with
{{view PlanSource.AddJobModal}}
And have the view template
<a class="button button-green" {{action show target=view}}>+ Add Job</a>
{{#if view.isShowing}}
<div class="modal-wrapper">
<div class="overlay"></div>
<div class="dialog box box-border">
<div class="header">
<p class="title">Enter a job name.</p>
</div>
<div class="body">
<p>Enter a name for your new job.</p>
<input type="text" id="new-job-name" placeholder="Job name">
</div>
<div class="footer">
<div class="buttons">
<a class="button button-blue" {{action createJob target=view}} >Create</a>
<a class="button" {{action close target=view}}>No</a>
</div>
</div>
</div>
</div>
{{/if}}
The problem is that when I click the button on the modal dialog, it gives me an "action createJob" can not be found. Am I extending the objects incorrectly because it works if I put the createJob in the base Modal class.
Fixed
There was an issue somewhere else in my code. The name got copied and so it was redefining it and making the method not exist.