I had properly working link with JS onclick attribute on a CMS, the code looked like this:
<a class="button is-success" onclick="return klaro.show();">click</a>
it was opening the model window.
Now I'm trying to replicate this on an old React.js project.
I remember, that there are a few language notations, but as I'm not working at all with this language it's difficult for me.
I've these kind of links:
<li>{t('Link')}</li>
<li><a class="button is-success" onclick="return klaro.show();">{t('cookie choice')}</a></li>
But since it's React the last link is not working. I tried to change it to <a className="button is-success" onClick={() => "return klaro.show();"}>člick</a> but the onClick event is absent once the page is rendered.
How should it be done correctly with this notation?
Pass a reference to of klaro.show to the onClick prop. This will tell React to call the klaro.show method when you click.
<a className="button is-success" onClick={klaro.show}>člick</a>
People already answered the question correctly; but there is another dirty unclean way to do that as well; I don't recommend it, just for your information:
<li dangerouslySetInnerHTML={{__html: `
<a class="button is-success" onclick="return klaro.show();">click</a>`
}}></li>
Use this
<li>{t('Link')}</li>
<li><a class="button is-success" onClick={klaro.show}>{t('cookie choice')}</a></li>
Or Use Like This
<li>{t('Link')}</li>
<li><a class="button is-success" onClick={() => klaro.show()}>{t('cookie choice')}</a></li>
Related
I have a code like this :
<div id="logreg" style="display: none;width:100%;max-width:660px; height:450px;" class="logreg">
my content
</div>
and i need use in many links on my site like this :
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;" class="btnReg float-right">
Register
</a>
<a data-fancybox="logreg" data-src="#logreg" href="javascript:;">
<i class="fas fa-user"></i>
</a>
but doesn't work too many links, only one link work :-(
Please help me.
You are creating gallery that contains two items and both items refer to the same content. Therefore simple use different value for data-fancybox element to not create a group and everything will work fine, demo - https://jsfiddle.net/tecnw6x7/
I have AngularJS (1.x) component - or actually directive to be precise,
and the elements inside this directive are get fired/worked/actioned only in the second click.
For example: a dropdown will not toggle unless you click twice.
After the second click the toggle will be on each next click.
It's like the elements are not digested in the DOM.
This is the component call:
<dropdown-custom-component-example></dropdown-custom-component-example>
This is the component html file:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>
you could try to digest by your own inside your directive, after you've checked if $digest isn't alreay in progress:
if(!$scope.$$phase) $scope.$digest();
// or $apply ..
hope this solves your issue :)
Most of the time AngularJS does not respond is because something is happening outside the Angular context, in those cases it's useful to try to replicate the functionality you want with built-in AngularJS directives.
It would be useful to have access to some of the implementation of your component. However, with all the information you have provided, you can use the ngClick built-in directive:
<div class="dropdown">
<a class="btn pl-2" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="modal" data-target=".create-supplier" ng-click="yourFunctionHere(this)">
<i class="fa icon-plus text-primary"></i>
Action
</a>
</div>
</div>
AngularJS Docs - ngClick
I have an web app which is working phine on the simulator,android and ios, but on windows phone one onclick event does not work. This is my HTML code:
<ul id ="triggerresolutionbg" class="table-view">
<li class="table-view-cell media">
<element>
<button class="btn btn-link btn-nav pull-left">
<span class="icon icon-left-nav" id ="triggerLeft" onClick = "triggerText(this.id)" ></span>
</button>
</element>
<button class="btn btn-link btn-nav pull-right">
<span class="icon icon-right-nav" id ="triggerRight" onClick = "triggerText(this.id)"></span>
</button>
<element>
<center id ="triggerText">After I...</center>
</element>
</li>
</ul>
I´m using Ratchet,Bootstrap and JQuery.
Why the onclick methods on Windows Phone does not work ?
According to the HTML5 spec for button putting interactive content inside a button element is invalid.
Content model:
Phrasing content, but there must be no interactive content descendant.
So you should not expect event listeners to work on elements inside a button. Some browser violate the spec and permit this, but others do not. Try attaching the onclick handler to the button element itself.
Since you are using this.id, I would recommend restructuring your HTML in the process, but something like this should work.
<button class="btn btn-link btn-nav pull-left" onclick="triggerText(this.firstElementChild.id)">
<span class="icon icon-left-nav" id="triggerLeft"></span>
</button>
Bootstrap Button Link Not Working see code below:
<ul>
<li>
<a href="home.aspx?Id=146">
<button class="btn btn-primary btn">Button Link</button>
</a>
</li>
</ul>
I use firebug for development, is there an easy place to see what javascript events are attached and to which objects such as this button class? find it hard to debug as don't know what code is being called and on what events for bootstrap and other external js files
Or, you can just use a link which looks like a button..
Button Link
Remove a tag and add window.location.href to button onclick
<button class="btn btn-primary btn"
onclick="window.location.href='home.aspx?Id=146'; return false;">
Button Link
</button>
So I thought this script was pretty straight forward:
<a id="BackButtonlnk" href="#" class="white" onClick="history.go(-1)"></a>
When I click it it briefly shows the previous page but just looks like it refreshes
and you never end up at the previous page.
Try adding "; return false" to your onclick.
I think what's happening is the onclick fires (trying to go to the previous page), and then the browser tries to go to "(current page)#" (note the "#"), and essentially refreshes the original page. Thus, it appears that it's going back and forth - because it is.
<a id="BackButtonlnk" href="#" class="white" onClick="history.go(-1); return false;"></a>
Try using the href instead of the onclick event:
<a id="BackButtonlnk" class="white" href="javascript:history.go(-1);">Go Back</a>
In Javascript has many forms.
<a id="BackButtonlnk" class="white" href="javascript:history.back(-1);">Go Back</a>
If you wanna do that you write, recomend
<a id="BackButtonlnk" class="white" href="javascript:history.go(-1);"></a>