Could someone help me in understanding the difference between function calls made in React and Normal HTML/JS?
Normal HTML/Javascript : <button onclick="myFunction()">Click me</button>
React : <button onclick={this.myFunction}>Click me</button>
In both cases, the DOM will get loaded/rendered so to avoid the function call being made during load/render we are passing reference in React, but why the function is being called directly in HTML?
Thanks in Advance.
Related
I am using intro.js library in angular 8. Everything working fine, but on this step I am stuck.
I am not able to bind value in data-intro in this button tag. Actually "introForShowHide" is basically a text which i send from my component.ts file.
Can anyone help me in resolving this issue, how i can bind value in data-intro.
<button type="button" data-step="1" [data-intro]="introForShowHide" data-position="right">Demo </button>
write like that
<button type="button"(click)="howResourceDescription()" data-step="1"[attr.data-intro]="introForShowHide" data-position="right">Demo </button>
put your function into its component.ts
howResourceDescription() {
this.introForShowHide = "Click on hide instructions button to hide instructions displayed corresponding to enabling each resource type."
}
I want to disable this button after the onclick function, so either change the z-index, or disable the button, any ideas?
<button id ="a" type="button"
onclick="window.open('https://www.google.ca')"
>
Thanks.
You need to add this.disabled=true after opening the window.
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
Code above needs 'disabled' instead of 'disable.' Try this:
<button id ="a" type="button"
onclick="window.open('https://www.google.ca'); this.disabled=true;"
>
The approach is that you should create a script contain function that does two jobs:
make that button disable using selectById() and adding attribute disabled
then window.open()
i would take a look at jquery
https://api.jquery.com/click/
$( "#a" ).click(function() {
// do your stuff opening a page etc
$( "#a" ).prop("disabled",true);
});
edit:// take Rohit Saxena's approach
this is my first time posting, so forgive a noob if I don't get the format correct. I needed to be able to easily turn a button on and off to 'guide' the user to perform actions in the correct order, and this post helped me in that journey, although I only used part of the answer. I made two functions 'enableClick()' and 'disableClick()', where the parameter is the id of the button, eg: 'enableClick("betButton")' Here is the code:
function disableClick (elementId) {
const x = document.getElementById(elementId);
x.disabled = true;
}
I'm learning js, so everything I'm doing is vanilla at this point on purpose, but it's still fairly simple - obviously, with the enableClick function, the value of x.disabled would be 'false'. These functions can be added inside a function called by a click, after the initial click functionality is complete, so that the button can't be clicked again until the opposite function is called.. love this stuff!
I was wondering how I could get a button <button class="btn btn-primary btn-lg btn-withdraw">Text!</button> automatically clicked when a page is loaded. I've seen other posts about people attempting to do the same thing I am, but I do not understand what to do. Any help would be appreciated. Thanks,
Aiden
Sources- Auto-click button element on page load using jQuery
So, you'll have to put an id attribute to your button.
<button id="myButton" class="btn btn-primary btn-lg btn-withdraw">Text!</button>
Then, at the end of your html, you have to use Javascript inside a script tag to "click" on it as following.
<script>
document.getElementById('myButton').click()
</script>
It seems like you have to learn Javascript, search for tutorials on internet.
You can use the jQuery method .click()
Because you want the button to be clicked once the page is loaded, you want to make sure the DOM element itself has actually loaded before executing your code.
You can read more here:
What is the DOM ready event?
The below code waits for the page to fully load before executing 'click' on the button.
Non-jQuery solution. It doesn't make sense to add jQuery to your page if you will only use it once.
window.onload = function () {
document.querySelector('.btn.btn-primary.btn-lg.btn-withdraw').click();
}
Alternatively, you can add an ID to the button as suggested by Sorikairo and subsequently trigger the click:
//Add ID to button
<button id="myButton" class="btn btn-primary btn-lg btn-withdraw">Text!</button>
//Click on load.
window.onload = function () {
document.getElementById('myButton').click()
}
I have added a small onclick event to a button in my html form and its not working.This is the one I added,which is a basic one
function myFunction()
{
alert("Hello World!");
}
and in html
<button onclick="myFunction" class="btn btn-1 btn-1c">Credit Card</button>
But this is not working,please check the fidddle http://jsfiddle.net/RzT68/8/ .Another pop up is coming if the field are not filled,but I cant figure out,how to remove it during clicking on a button.
Demo http://jsfiddle.net/f8Fd3/
Here is the demo with your code :)
#DownVoter, care to explain please?
OP As m59 said to be bit more evanglistic instead of putting the inline click
Please read this Why is using onClick() in HTML a bad practice?
another demo with lil diff code: http://jsfiddle.net/6wwe2/
OP rest this should fit your need! :))
code
<button onclick="javascript:myFunction()" class="btn btn-1 btn-1c">Credit Card</button>
Try this, as per my understanding your question
<button onclick="myFunction();" class="btn btn-1 btn-1c">
Demo
When using onclick, you have to format the function like this:
<button onclick="myFunction()" class="btn btn-1 btn-1c">Credit Card</button>
With parentheses after your function name.
In your JSFiddle, you select no wrap (head) in the dropdown on the left. When onLoad is selected (by default), your functions are defined within a local scope.
See working example: http://jsfiddle.net/f7W94/
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
Also, you should format the onclick event as a function call, e.g. myFunction() not myFunction.
By writing myFunction you are not executing the function, instead returning the function definition. To execute the function you append the () so it should be;
onclick='myFunction()'
This is confusing at first but makes sense as you start delving into call backs. For instance, when you supply a callback function to something;
success: mySuccessFunction,
error: myErrorFunction
etc you don't put the () because otherwise the functions would execute as the code is ready. Instead you supply the function definition so that the code can execute that function when it wants.
If you're using jQuery:
$('.btn-1c').click(myFunction);
is the simplest implementation. Given the code you've provided, I can't really help you much further, but there are better ways.
HTML
<button class="btn btn-1 btn-1c">Credit Card</button>
jQuery
$(function() {
$("button").click(function(){
alert("Hello World!");
return false;
});
)};
working jsfiddle: http://jsfiddle.net/farondomenic/B4k4T/
I first initialize my app with ng-app="myApp" in the body tag and this works fine for all angularized-html that is loaded on first page load.
Later on I have some code that loads angularized-html in to the DOM.
In angular 1.08 I could just run angular.bootstrap($newLoadHTML, ["myApp"]) after the load and it would work; where $newLoadHTML is the newly added HTML grabbed with jQuery.
In angular 1.2 this does no longer work:(
Error: [ng:btstrpd] App Already Bootstrapped with this Element '' http://errors.angularjs.org/1.2.0-rc.2/ng/btstrpd?p0=%3Cdiv%20ng-controller%3D%22AfterCtrl%22%3E
I am getting this error which I understand, but I don't know how to solve it.
What I need to be able to do is load angularized-html and then make angular aware of it.
Here is a plunker to illustrate it: http://plnkr.co/edit/AHMkqEO4T6LxJvjuiMeT?p=preview
I will echo what others have mentioned: this kind of thing is generally a bad idea, but I also understand that you sometimes have to work with legacy code in ways you'd prefer not to. All that said, you can turn HTML loaded from outside Angular into Angular-bound views with the $compile service. Here's how you might rewrite your current example to make it work with $compile:
// We have to set up controllers ahead of time.
myApp.controller('AfterCtrl', function($scope) {
$scope.loaded = 'Is now loaded';
});
//loads html and afterwards creates a controller
$('button').on('click', function() {
$.get('ajax.html', function(data) {
// Get the $compile service from the app's injector
var injector = $('[ng-app]').injector();
var $compile = injector.get('$compile');
// Compile the HTML into a linking function...
var linkFn = $compile(data);
// ...and link it to the scope we're interested in.
// Here we'll use the $rootScope.
var $rootScope = injector.get('$rootScope');
var elem = linkFn($rootScope);
$('.content').append(elem);
// Now that the content has been compiled, linked,
// and added to the DOM, we must trigger a digest cycle
// on the scope we used in order to update bindings.
$rootScope.$digest();
}, 'html');
});
Here is an example: http://plnkr.co/edit/mfuyRJFfA2CjIQBW4ikB?p=preview
It simplifies things a bit if you can build your functionality as a directive instead of using raw jQuery--you can inject the $compile and $rootScope services into it, or even use the local scope inside the directive. Even better if you can use dynamic binding into an <ng-include> element instead.
Your approach doesn't seem right. You are usinging jQuery and Angular together in an inappropriate way that is likely to have conflicts.
Angular's built in template support is the best way to do this either using ng-include or you can use Angular's routing and along with ng-view. The documentation is here:
http://docs.angularjs.org/api/ng.directive:ngInclude
http://docs.angularjs.org/api/ngRoute.directive:ngView
The simplest possible thing would be to just set the ng-include to the url string:
<div ng-include="'ajax.html'"></div>
If you actually need it to load dynamically when you do something then this is a more complete solution for you:
http://plnkr.co/edit/a9DVEQArS4yzirEQAK8c?p=preview
HTML:
<div ng-controller="InitCtrl">
<p>{{ started }}</p>
<button ng-click="loadTemplate()">Load</button>
<div class="content" ng-include="template"></div>
</div>
Javascript:
var myApp = angular.module('myApp', [])
.controller('InitCtrl', function($scope)
{
$scope.started = 'App is started';
$scope.loadTemplate = function() {
console.log('loading');
$scope.template = "ajax.html";
}
}).controller('AfterCtrl', function($scope)
{
$scope.loaded = 'Is now loaded';
});
Loading an AngularJS controller dynamically
The answer to this question fixed my problem. Since I need to create the controllers after the content was added to the DOM. This fix requires me too register controllers after I have declared it. If someone has an easier solution pleace chip in.
One other gotcha that leads to this Bootstrapping error is the nginclude or ngview scenarios where your dynamic html includes script references to angular js.
My html below was causing this issue when it got injected into an existing Angular page. The reference to the angular.min.js caused Angular to rebootstrap:
<div id="fuelux-wizard" class="row-fluid" data-target="#step-container">
<ul class="wizard-steps">
<li data-target="#step1">
<span class="step">1</span>
<span class="title">Submit</span>
</li>
<li data-target="#step2">
<span class="step">2</span>
<span class="title">Approve</span>
</li>
<li data-target="#step3">
<span class="step">3</span>
<span class="title">Complete</span>
</li>
</ul>
</div>
<script src="/Scripts/Angular/angular.min.js"></script>
<script type="text/javascript">
angular.element('#requestMaster').scope().styleDisplayURL();
</script>