I have the following graphical button on my site:
<a href="#" class="addto_cart_btn">
<span id="btn_text">Click here to add to cart now</span>
</a>
I want to run a specific javascript script when clicked (current value #) to run some javascript - the javascript code essentially generates a popup iFrame with additional content in it.
What is the best approach for achieving this?
try this
<script type="text/javascript">
window.onload = function() {
document.getElementById("btn_text").onclick = function() {
// Do your stuff here
};
};
</script>
Or if you can use JQuery
<script type="text/javascript">
$(document).ready(function() {
$("#btn_text").click(function(){
// Do your stuff here
});
});
</script>
One approach is to add an onclick attribute
<a href="#" class="addto_cart_btn" onclick="someFunction()">
<span id="btn_text">Click here to add to cart now</span>
</a>
And then the javascript:
function someFunction(){
//do stuff
}
You should use OnClick attribute
<a href="#" class="addto_cart_btn" onclick="yourFunction();">
<span id="btn_text">Click here to add to cart now</span>
</a>
for plain javascript
window.onload = function(){
document.getElementById('btn_text').onclick = function(){
// do stuff;
}
}
for jQuery
jQuery(function($){
$('#btn_text').on('click', function(){
// do stuff
})
})
Related
I want to trigger the click on a tag which has div with id='a'.
$(document).ready(function() {
$("#chat_list_content a:has(div[id='a'])").click();
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$('#chat_list_content a').click(function() {
alert('you are here');
})
})
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Click should happen automatically and output alert box. But, there is no respond from the code.
Thanks in advance.
When you call $("#chat_list_content a:has(div[id='a'])").click(), the custom click handler is not yet described yet. That means it doesn't do anything. You just need to move the click trigger below the click function definition:
$(document).ready(function() {
//$("#chat_list_content a:has(div[id='a'])").trigger("click");
$("#chat_list_content a").click(function() {
alert("you are here");
});
// Make sure to add this after the click handler definition above
$("#chat_list_content a:has(div[id='a'])").click();
});
working sandbox: https://codesandbox.io/s/exciting-gagarin-t55er
There is no need to use :has() here at all, you can simply use Attribute Equals Selector [name="value"] to achieve what you are looking for.
$(document).ready(function(){
$('#chat_list_content a').click(function(){
alert('you are here at '+ $(this).index());
});
$('#chat_list_content a div[id=a]').click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chat_list_content">
<a href="#">
<div id="a">A</div>
</a>
<a href="#">
<div id="b">B</div>
</a>
</div>
Having this simple HTML:
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon"></i>
</a>
And this script.
<script type="text/javascript">
window.addEvent('domready', function()
{
$('show-modal-button').onclick = function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>
It doesnt work on the first click. The modal opens on the first click but nothing is shown (blank modal). If I close the modal and click on the buttom again, the modal shows the href page (in the example above, google) correctly.
I've read some other threads with the same problem and people solve it adding return false; but I add that line and still doesnt work.
The console.log prints the correct url on the first click.. I also tested with $('show-modal-button').addEvent('click', function (ev) { with no luck :(
Any ideas how to make this work on the first attemp?
In addition to other comments :
Selecting elements with their id in jquery is done by prepending "#" to the id
Changing an element's attribute in jquery is done by using the function attr(name, value)
Inside your click function, you can refer to your jquery element by using $(this)
See this working snippet :
$(function(){
$("#show-modal-button").click(function(e){
e.preventDefault();
var modalUrl = 'http://www.google.es';
$(this).attr('href', modalUrl);
console.log($(this).attr('href'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon">show modal</i>
</a>
try this..
<script type="text/javascript">
$(function(){
$('show-modal-button').click(function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>
I'm having troubles creating an exit button for the following script.
I'm using popup.js from http://docs.toddish.co.uk/popup/.
It sais that in order to do it we should use popup.close() from inside the object. But there are no examples and I can't get it to work. Does anyone have an idea?
JSFiddle link = http://jsfiddle.net/andrewallen817/bedhhu1o/3/
Html:
<a href=#txt class="popup" >Click here</a>
<div id="txt" style="display:none">
<h1>This is a title</h1>
<p>this is some text</p>
<button>close</button>
</div>
JS
$(function(){
$('.popup').popup();
});
I fixed it for you by looking at the doc. JSfiddle
$(function () {
$('.popup').popup({
afterOpen: function () {
var popup = this;
$('button').click(function () {
popup.close();
});
}
});
});
You might want to specify which button you want to give the popup.close() or else every button will have it.
this is my code snippest.
<div class="pagination pagination-0" style="-moz-user-select: none;">
<a class="jp-previous jp-disabled">«</a>
<a class="jp-current">1</a>
<span class="jp-hidden">...</span>
<a class="">2</a>
<a class="jp-next">»</a></div>
from this code i want fetch value of
<a class="jp-current">
through jquery. please note, id is restricted to use with it.
Try this:
$(".jp-current").on("click", function () {
console.log($(this).text());
})
http://jsfiddle.net/U6mBQ/
And if you don't need that just on click:
console.log($(".jp-current").text());
var val = $(".jp-current").first().text();
Use
$(".jp-current").click(function () {
console.log(this.innerHTML); // or this.textContent
})
References
.textContent
.innerHTML
class-selector
This is what my current link looks like:
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="square">
<span class="ttt_square">
</span>
</a>
I know it's not ajax because the jQuery ajax:success type events are never invoked.
This is teh site that I'm working on: http://ttt-ai.heroku.com/
If you want to disable all links on a page you can use this:
$("a").live('click', function(e) {
e.preventDefault;
return false;
});
Or you can target specific links like this:
$("a.disabledLink").live('click', function(e) {
e.preventDefault;
return false;
});
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="disabledLink">
<span class="ttt_square"> </span>
</a>
Try this,
<script type="text/javascript">
$(function() {
$('a').click(function() {
$(this).attr('href', 'javascript:void(0);');
});
});
</script>
And if you will add a class to your link for being more specific; let's say
<a class="disableAfterClick" href="/board/take_turn?id=313&x=1&y=2" data-remote="true"> <span class="ttt_square"> </span> </a>
than
<script type="text/javascript">
$(function() {
$('a.disableAfterClick').click(function() {
$(this).attr('href', 'javascript:void(0);');
});
});
</script>
You can use e.preventDefault() .
var $a = $("a");
$a.click(function() {
$a.click(function(e) {
e.preventDefault();
}
});
no need to traverse twice, or if you do
$("a").live("click", function() {
$("a").click(function(e) {
e.preventDefault();
}
});