calling ng-click function from an external script - javascript

i am working on a chrome extension that can automate a form filling. So the form which i am filling has a next button attached to it that has a ng-click attribute "forward()" like this-
<button type="button" ng-class="{disabled: !showNext()}" ng-click="forward()" class="btn btn-success btn-lg default pull-right" style="font-size: 18px;">Next <i class="fa fa-chevron-right white-color"></i></button>
I tried calling angular.element($('button.pull-right')).scope().forward() or $('button.pull-right').scope().forward() and the function executes but the view doesnt get updated. I know i can do $('button.pull-right'.click() and that works but actually i am in need of bypassing the click event, for that i need to bind the click to my external script funciton(which i will inject into page through my extension) and then from my script call the forward() function.
I had a lot of time googling this but none worked out for me. Please Help!

When you're reaching into Angular from outside of its context it will not notice that you've done so unless you tell it about it. You do that by using $apply.
Try this:
angular.element($('button.pull-right')).scope().$apply(function() {
angular.element($('button.pull-right')).scope().forward();
});

Related

how do I call js script from angular button

I am trying to call this script <script src="products/products_list.js"></script> each time when I click on 'Add Button'.
Currently, this script is being called only once when the page load.
html code
test.html
<div class="col-md-1 form-group"><br/>
<input type="button" class="btn btn-primary" value="Add Button" ng-click="packageCtrl.add(rlCtrl)" ng-disabled="packageCtrl.disableAdd()"/>
</div>
<script src="products/products_list.js"></script>
Whatever is in that script needs to be placed in a function. Then a call to that function can be made in the click handler for that button.
My best guess is that whatever is in that JS file is just inline code that is being executed immediately upon load. If you want that code to be executed at specific times, it needs to be placed in a event handler to be executed when that event occurs.
Ultimately, you are not providing enough information to truly answer this questions.

Can´t use ng-click function

I created a button dinamically with javascript and I added the ng-click="callSomething()" , when i render it, it have the corresponding class, but when I press the button it doesn´t work, I created a Button directly in the frontend with the same function and it works
This works
<button ng-click="callSomething(1231)" id="somethingButton">Change</button>
This isn´t working
button = `<td><button ng-click="callSomething(${data[i].order_number})" class="btn btn-primary" >Change</button></td>`
Please your help

A method in angular that simply closes the page when hit to a button

To exit a window or Angular page I have created an Exit button in the .html. To make the button work I want to write a method in the .ts file that will help me simply close the page.
Note: I am using Angular11 and Bootstrap 4.
Help me write the method.
I'd suggest you share a piece of code you have tried first before asking the question like that. Anyways here's something you can do:
In Html:
<button type="button" class="btn btn-link" (click)="closePage()">Close Page</button>
In TS:
closePage(){
window.close();
}

HTML5 Javascript function not getting called on button click

I have an html page, thats intended to take user's email and password. I defined "login()" method in one of js file but the function doesn't get executed after button click.
HTML file:
http://pastie.org/10276940
Ok,
first, you should be careful about quotes and double quotes... there is already a mistake in your onclick code.
Then, I would not use onclick. I would do it by adding an eventListener (click) on the button, like this :
document.getElementById('myButton').addEventListener('click',function(){
//do something
});
Here is an example on this way to do it.
There are several other ways to do this, like you did with onClick, but here is just the way I would do the job.
http://jsfiddle.net/tz4bnu0m/4/
Problem is also that when you call login in your onclick event, function is just not defined (yet), here is a way to do it with your onclick event, just add function definition before you call it in onclick event :
http://jsfiddle.net/tz4bnu0m/5/
Hope it helps!
(since it is not an input type submit, you don't have to handle default action, click will not submit the form by default)
The problem is on the button.
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById("inputEmail").value,
document.getElementById("inputPassword").value)">Sign in</button>
You are mixing double quotes. Change it by single quotes an it works
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" onclick="login(document.getElementById('inputEmail').value,
document.getElementById('inputPassword').value)">Sign in</button>
This works but...
I don't recommend to you to make this events in HTML directly. You can separate this code and make it more reusable:
<button id="myID"></button>
<script>
document.getElementById("myID").onclick = function() {
// good stuff
};
//other way:
document.getElementById("myID").addEventListener('click', function() {
// good stuff
});
</script>
Good luck

get back to previous page

just i want to make back button in my site. once i click the button it need to take the url in to previous page. how can i make this using jquery?
<button type="button" onclick="history.back();">Back</button>
the answer by wRAR is correct, you can use history.back or history.go(-1). However, if you are using ajax, you might need a bit more than that.
Stephen Walter has a nice article on how to use jQuery, ASP.NET, and Browser History which basically describes how to save and restore the application state yourself. I recommend you give a read.
Elijah Manor(co-host of the Official jQuery Podcast) has also written a nice article about this topic.
I hope this helps
-D
Try this: am using materialise css.
<button id="back_btn" class="btn waves-effect waves-light" name="action">Back<i class="material-icons left">chevron_left</i>
</button>
In your jquery script file add
$("#back_btn").click(function (){
window.history.back();
});
within the document ready function.
For JQM, this works!
$(document).ready(function(){
$('.backLink').click(function(){
parent.history.back();
return false;
});
});
This is what I have successfully used in one of my recent projects:
<script>
function goBack() {
window.history.back();
}
</script>
<a href="#" onclick="goBack()" class="btn-event-show-video">
Return to Stand
</a>
I think button onclick="history.back();" is one way to solve the problem.But it might not work in the following cases:
If the page gets refreshed or reloaded.
If the user opens the link in a new page.
To overcome these, the following code could be used if you know which page you have to return to.
E.g. If you have a no of links on one page and the back button is to be used to return to that page.
<input type="button" onclick="document.location.href='filename';" value="Back" name="button" class="btn">

Categories