Changing 'href' using JS/jQuery not working on the first click - javascript

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>

Related

How to get id from hyperlink onclick using jquery?

I have hyperlink containing `class="candidate_type". I want click on a button
and show the id of the anchor with the id of candidate_type.
<script>
$(document).ready(function(){
$("#continue").click(function(){
candidate_type = $(".candidate_type").attr('id');
alert(candidate_type);
});
});
</script>
<a class="candidate_type" id="Employer">I`m Employer</a>
<a class="candidate_type" id="Consultant">I`m Consultant</a>
Continue
Thank You
You have more than one candidate_type elements, to get id of all elements you can iterate over it using .each as shown below
$(document).ready(function(){
$("#continue").click(function(){
$(".candidate_type").each(function(){
var candidate_type = $(this).attr('id');
alert(candidate_type);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="candidate_type" id="Employer">I`m Employer</a>
<a class="candidate_type" id="Consultant">I`m Consultant</a>
Continue

Run Javascript on Image Click

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
})
})

Want to make inactive hyperlink

I have problem in hide and show the div element.
In this scenario when user click on the year the respect content is shown.
Problem I want to inactive hyperlinking on respective year when it is opened.
The script and html is below;
for this I have tried .preventDefault(). but not got any success:
<script type="text/javascript" >
$(document).ready(function() {
$("div.new:gt(0)").hide();// to hide all div except for the first one
$("div[name=arrow]:eq(0)").hide();
// $("div.nhide:gt(0)").hide();
// $("a[name=new]").hide();
$("a[name=new]").hide();
$('#content a').click(function(selected) {
var getID = $(this).attr("id");
var value= $(this).html();
if( value == '<< Hide')
{
// $("#" + getID + "arrow").hide();
$("a[name=new]").hide();
$("#" + getID + "_info" ).slideUp('slow');
$("div[name=arrow]").show();
$("div.new").hide();
$(this).hide();
// var getOldId=getID;
// $("#" + getID ).html('<< Hide').hide();
}
if($("a[name=show]"))
{
// $("div.new:eq(0)").slideUp()
$("div.new").hide();
$("div[name=arrow]").show();
$("a[name=new]").hide();
$("#news" + getID + "arrow").hide();
$("#news" + getID + "_info" ).slideDown();
$("#news" + getID ).html('<< Hide').slideDown();
}
});
});
</script>
The html code is below:
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2012">
<div style="float:left;" name="year" id="news2012year">**2012** </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2012_info">
<div class="news">
<div class="news_left">News for 2012</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
<div id="content">
<div class="news_year">
<a href="#" name="show" id="2011">
<div style="float:left;" name="year" id="news2012year">2012 </div>
<div style="float:left;" name="arrow" id="news2012arrow">>></div>
</a>
</div>
<div class="new" id="news2011_info">
<div class="news">
<div class="news_left">News for 2011</div>
</div>
<div class="nhide" ><< Hide </div>
</div>
Fiddle
if i am understanding your problem,
event.preventDefault(); not works with all browser so if you are using other browser like IE
then use event.returnValue = false; instead of that.so you can detect your browser using javascript as
var appname = window.navigator.appName;
This is what I'm currently using in my projects to "disable" an anchor tag
Disabling the anchor:
Remove href attribute
Change the opacity for added effect
<script>
$(document).ready(function(){
$("a").click(function () {
$(this).fadeTo("fast", .5).removeAttr("href");
});
});
</script>
Enabling the anchor:
$(document).ready(function(){
$("a").click(function () {
$(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html");
});
});
Original code can be found here
Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.
Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..
var isActive = true;
if (isActive) {
// Your code here
}
// The place where you want to de-activate the link
isActive = false;
You could also consider changing the link colour to a grey to signify that it is inactive.
Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)
if(!$(this).hasClass("disabled")) {
// Your code here
}
// The place where you want to de-activate the link
$("#linkid").addClass("disabled");
// To re-enable a link
$("#linkid").removeClass("disabled");
// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");
Then in your CSS you could have a declaration like this:
.disabled:link {
color:#999;
}

How to change the title and html on slideToggle

I have this HTML markup:
<a title="Hide comments" hreflang="1" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
<a title="Hide comments" hreflang="2" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
I'll like to change the title and HTML to "Show comments" on slideToggle but didn't know how. I write this code to show/hide a DIV:
$('.comment-show-link').click(function(e) {
$('#comment-show-'+$(this).attr("hreflang")).slideToggle('slow');
e.preventDefault();
});
But not know how to check if DIV is hidden or visible and in each case change title and HTML. Also I know that I can use text() or html() jQuery functions to achieve this but how? Any help?
Thanks in advance
Try this:
$('.comment-show-link').click(function(e) {
var $this = $(this);
var num = $this.attr('hreflang');
$('#comment-show-'+num).slideToggle('slow', function(){
if ($(this).is(':hidden')) {
// do something here
// $this.attr('...', '...')
}
});
e.preventDefault();
});

How can I render a form after a button is clicked in Colorbox?

I'm trying implement a button inside a Colorbox that will update the modal and render a form.
An example of this is Pinterest's add functionality. "Homepage > Add a Pin > Pin URL"
I've tried copying Colorbox's inline HTML example.
<script type="text/javascript">
$(document).ready(function () {
$(".inline").colorbox({inline:true, width:"50%"});
$('a[rel="colorbox"]').live("click", function() {
$.colorbox({
open: true,
href: this.href
});
return false;
});
});
</script>
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>Add a Promotion</strong></p>
<p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>
<p><strong>If you try to open a new ColorBox while it is already open, it will update itself with the new content.</strong></p>
<p>Updating Content Example:<br />
<a class="ajax" href="**shared/promotion_form**" rel="colorbox">Add a Promotion</a></p>
</div>
</div>
The problem is that the form is _promotion_form.html.erb so I can't link to it.
Try moving your selector up a level, and updating to jQuery 1.7.1
Maybe something like this:
$('body').on("click", "a[rel="colorbox"]", function() {
So this way you're watching the body for any element that has that selector "a[rel='colorbox']".
Hope this helps.

Categories