javascript:void(0) in jquery - javascript

I have an jsp page with html and js like below. Now I want to keep the js function test() to another js file. I m trying to write that using jquery.
<div class="class1">
<a href="javascript:void(0)" onclick="test();" id="add_another" ><b>Add another user</b></a>
</div>
JS function
function test(){
alert("I am here");
//other code
}
I tried to write like this
$(function() {
$('#add_another').click(test);
});
But its not working. I am not sure if its because its having href="javascript:void(0)"
When the user clicks Add Another User link, it show display another div. That is the test() doing. But the alert itself is not coming.
Can somebody please help me in this?

To replicate javascript:void(0) you can use event.preventDefault() in js like this.
$(function () {
$('#add_another').click(function (e) {
e.preventDefault();
test();
});
});

Related

Loading javascript function on button event

I would like to call a Javascript function once the button is displayed on screen. What I am looking for is similar to the 'onclick' attribute:
<input type="button" class="button-class" onclick="function(this)">
However, I would like the function to be called as soon as the button is displayed on screen i.e. it should be instantaneous (button creation=function call). I have already tried 'onload' but this does not seem to work. Is there a way to do this please?
Thank you
Put an script element invoking the function after the button element
<input type="button" class="button-class" onclick="fn(this)" value="button" id="btn">
<script>
function fn(obj){
console.log(obj)
}
fn(document.getElementById("btn"));
</script>
#Questionnaire, you can't do what you want since an action should take place for a button (click event) to execute code.
As a good practice, load your Javascript code after the page is done loading. This is to avoid blocking the rendering of HTML code since
Javascript is synchronous.
...
<script type="text/javascript">
function init() {
// Code for your button function here
}
window.onload = init();
</script>
</html>
The code above is pretty much it.
Just write the function name in onclick property instead of function(this) like the following..
<script>
function myFunc(e){
//do something
}
</script>
<input type="button" class="button-class" onclick="myFunc(this)">
#Bartman pointed out how the .ready() funtion handled it as a document.ready.
So i came up with a small solution to run the waanted funtion once the input button is created. Hotfix but cant imagine another solution
I hope this helps. If not please add a comment so i can edit the answer.
function clickFunc(e) {
alert("click event");
}
function loadFunc() {
alert("load event");
}
$("#button").click(function() {
$("div").append("<input id=\"but\" type=\"button\" class=\"button-class\" onclick=\"clickFunc(this)\">");
$("body").append("<script>loadFunc();<\/script>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="button" type="button">
<div></div>

Redirecting to site from an existing button being clicked

I'm quite new to coding. I have a button with the ID='test'. I want to run a line of code in javascript or HTML to redirect users to a site when that button is clicked.
Button:
<button id="test" type="submit" onclick="setNick(document.getElementById('nick').value); return false; return false" class="btn btn-play-guest btn-success btn-needs-server primaryButton" data-itr="play_as_guest">
I tried running this:
<script>
document.getElementById("test").onclick = window.location='http://www.google.com/'
</script>
However, this would redirect straight away. I want it to redirect only when the button is clicked. Please help me fix this.
Many thanks.
You are assigning the redirect to the button where you need to assign it to a function.
You can try something like this:
document.getElementById("test").onclick = function(){
window.location='http://www.google.com/';
}
I would suggest use onclick on button, for example
your button will look like this
<button id="test" onclick="redirect()">Redirect</button>
Now in the script write the redirect function as
<script>
function redirect() {
window.location.href = "http://www.google.com/";
}
</script>

How to call javascript in href in sharepoint column

I do have a calculated column in sharepoint which creates an anchor tag in which href have a javascript function call to test method but it's not getting called what i am missing here.
Code :
<script type="text/javascript">
function test()
{
alert("hiii");
}
</script>
and calculated column :
<a href='javascript:test()'> Click </a>
Thanks in advance
Pure JS:
function test(){
alert("I am alerted");
}
<a onclick='test()' > Click </a>
jQuery
$(document).ready(function (){
$("#myID").on("click", function (){
alert("I am alerted !");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="myID" > Click </a>
If I understand, you need to change the display (html generated) of a field in SharePoint.
You are un 2013, you can use JSlink property of your field. With this, you can link a file JS to your field, and this file will be executed every time that sharepoint will generate the rendering of your field.
Check this link to understand how it work and see some exemples ;) : https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
hope this will help you
The attribute in the anchor you are looking for is called onclick:
<a onclick="test()"> Click </a>
This should do the trick I guess.
Check the w3c-schools site for a more detailed description: W3C Schools on the onclick HTML attribute
Please try this way:
<a href='javascript:void(0)' onclick='test()'> Click </a>
<script type="text/javascript">
function test()
{
alert("hiii");
}
</script>

Stop some links (href containing certain string) from working

I'm attempting to stop some links on my site from working.
Here is my code:
Links:
<a href='http://mysite.home.com'>Home</a><br>
<a href='http://mysite.home.com/nextpage'>Next Page</a><br>
<a href='http://mysite.string.home.com'>Home 2</a><br>
<a href='http://mysite.string.home.com/otherpage'>Other Page</a>
Jquery:
<script>
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
</script>
The goal is to stop the last two links (with href containing '.string.') from working and instead display the alert. However, this code isn't working and the links still work. What am I doing wrong?
The strange thing is the code works fine here: http://jsfiddle.net/TzUN3/364/
but not on my site. I have the script and links both in the <body> of my page, script after the links. Is this correct?
Thanks.
Forgot to add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
to my page. Feel like an idiot.
Thank you all.
$(function() {
// Jquery is ready
// *= is contains
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
});

PHP javascript problems

I am totally new in php, so my opology if this question seems weird to you.
I have one php file (index.php) something like,
echo "
<div>
<FORM name='myform' id='myform' method='post' action=''>
// I fetch data from mysql and populate dropdown list. Tha't work fine.
// Then I have one submit button when I click on that
echo "<button id='showButton' type='submit'> Show </button>";
</FORM>
";
Then I have one process.js file something like,
$(document).ready(function() {
$('#showButton').click(function () {
// Here I make one AJAX call to php file (fetch_more_data.php), which fetch more data from database
// This also works fine
});
});
In fetch_more_data.php I fetch more data and display in table using
echo "
<script type = 'text/javascript' src = 'edit.js'></script>
<table ...>
<td>
<button id="myButton"></button>
</td>
</table>
";
This is also work fine. but I want to edit one table cell and for that I need to write some java script code. I want to write on click function for myButton in Javascripr, for that I have written on edit.js file,
$(document).ready(function() {
$('#myButton').click(function () {
alert('Hello');
});
});
The problem is $('#myButton').click(function () never called. I have spent long time but being a beginner my search options are limited.
I would appriciate if someone solve this problem.
Regards,
try calling it like this:
$(document).ready(function(){
$(document).on('click', '#myButton', function(){
alert('hi');
});
});
hope this helped
try with
$('#myButton').live('click',function () {
alert('Hello');
});
});
Try this:
$(document).ready(function() {
$(document).on("click", "#myButton", function () {
alert('Hello');
});
});
Since the html is being added to the DOM dynamically, you need to handle it using Event Delegation in jQuery
I think the problem is that you are not loading the jQuery
Download the jquery on the same folder where is your php file and add this line in your code
<script src="jquery-1.11.0.min.js"></script>

Categories