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.
Related
I am loading two scripts on my websites:
<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
Where my_site.js looks like this:
... many other functions, not nested
function captachaCallback() {
console.log("Captcha");
}
... other functions
Then in my form I am using:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Whenever I press the button, a white half-transparent overlaying empty div appears, but nothing happens (console message doesn't appear) and the form is stuck.
I am using the latest Chrome.
Thanks in advance
The problem was that I had a CSS setting affecting all divs on my website.
div { overflow: hidden; }
Apparently this makes the popup window with the captcha test invisible.
Removing this setting solved the problem.
I'm suspecting that the element is going out of the visibility. So can you try adding data-badge="inline" to the recaptcha element in the html
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>
Hope this helps.
You're not rendering the captcha.
The submit button is trying to verify the response of the captcha once the user completes the captcha by sending a callback to the function specified on data-callback. Since you haven't created the component it gets stuck in a loop.
The submit button cannot be the same tag where you load the CAPTCHA. You need to render the captcha in an empty tag.
Instead of:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Render it like:
<div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
Wrap it up inside a form. You already have it, so just modify it.
Since you're specifying what function to run once the captcha is completed you don't need to worry about the submit button.
The structure should look something like this:
<form action="?" method="POST">
/// The other elements in your form
/// ...
<div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
<br/>
<input id="btnSubmit" type="submit" value="Submit">
</form>
Also be sure to look up the documentation ;)
https://developers.google.com/recaptcha/docs/display
How to add event listeners to the button on the page for the 'click' event?
Call your method in the eventHandler of the Button
<button id="submit" type="button" onclick="calculateBMI()">Calculate BMI</button>
Other way would be te encapsulate fields and button under a <form> and add the function in the "onsubmit" event of the form.
As from your question I can see that you want to link the js file with HTML file and use the event listener for calling the function.
Lets assume you have the HTML file with the name as CalculateBMI.html and js file name as CalculateBMI.js.
You can use the below code inside the HTML file head to connect the js file with HTML.
<script src="CalculateBMI.js"></script>
Once done you can change button input with below code with event as described below:
<button id="submit" onclick="calculateBMI()">Calculate BMI</button>
If you have any issue please let me know
The following code does not redirect to the given webpage
<form>
<button onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
</form>
It is so because when you create a button within the form tags, it is created as a submit button by default. So, instead of redirecting the webpage, it submits the data and reloads the current webpage.
The following code will do the required job because now, the type of the button is button and not submit.
<button type="button" onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
Even better, you can place your redirect code into a JavaScript function. Then you can call that function from within your HTML code. Like this
<script type="text/javascript">
<!--
function redirectTo(sUrl) {
window.location = sUrl
}
//-->
</script>
<button onclick="redirectTo('../magnet/index.php')">Get HTML!</button>
Hope this will work for you. Cheers
The answer was to add type="button" like #shivamag00 explained.
But be careful with replace(), it's not possible to use "back" to navigate back to the original document since you are replacing the history state.
An alternative is to use the assign() function, (documentation here)
Suppose you have a base url as
www.website.come
and want to go to
www.website.come/new-page
it's simple
<button type="button" onclick='window.location.assign("new-page")'>Go to new page</button>
It's worked for me, hope it's useful for someone else.
I have code that is behaving one way on jsfiddle, one way on localhost, and another when uploaded to my website. I've been wrestling with the problem for a few days now. I don't know what tests or trial and errors I can run at this point.
This jsfiddle is working exactly as I want it to work.
http://jsfiddle.net/2ZLse/10/
When I insert this code into my project, and run it on localhost with WAMP, the javascript for the page does not work. The javascript is valid when run through jslint.
Stranger still, when I upload the exactly same files to my website, the javascript is functional, and I can even click on the watch button and render the form, but the nevermind button does not return me to the original state. I'm not receiving any errors on my cPanel.
When I replace
$(document).on('click', '.nevermind', function() {
$('#imagebox').html(imagebox);
});
with
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
The localhost will function the same as the website functions, with functioning javascript, but without a functioning nevermind button.
Below is the code, but let me tell you more about the rest of the page incase it's relevant. I'm using php. It's a .php file, bootstrap is loaded and working, jquery is loaded, and the javascript is run at the bottom of the page, not the header. There is ajax running elsewhere on the page, which works on the website but not the localhost, and I have the correct connect.php file for each. My best guess is that ajax has something to do with it.
What is the problem, or what tests can I run?
Here is the HTML
<div id="inputbox">
<form><button type="button" id="watchcontrol" class="btn btn-default">Watch</button>
</form>
<br>
</div>
<!-- images and continued input extension-->
<!-- imagebox also acts as control panel -->
<div id="imagebox">
ORIGINAL STATE
</div>
Here is the javascript.
var imagebox = 'ORIGINAL STATE';
var watchform = '<form action="post/watchpost.php" method="post">' +
'<input type="text" name="watchid" /><br>' +
'<input type="submit" class="btn btn-default" value="Contribute" />' +
'</form>' +
'<br><br><button type="button" class="btn btn-default nevermind">nevermind</button>';
$(document).ready(function(){
//control functionality
$(document).on('click', '.nevermind', function() {
$('#imagebox').html(imagebox);
});
$('#watchcontrol').click(function(){
$('#imagebox').html(watchform);
});
});
Event binding on dynamically created elements?
This question, while helpful, did not solve my issue. I believe my issue is separate from that one.
The following only binds event handler to the EXISTING DOM element:
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
which does not include what you append after clicking on #watchcontrol.
The following would work though, binding the event everytime when you create the dynamic element (even though I suggest that you free the element before removing it from the DOM):
$('#watchcontrol').click(function(){
$('#imagebox').html(watchform);
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
});
http://jsfiddle.net/2ZLse/11/
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();
});