Dynamically setting anchor text from javascript click() - javascript

I have an anchor in the body of my html:
<a id="title" class="acc" ></a>
Then I have the following javascript. The anchor text is set to 'aaa' from the first statement below. When I click on the 'list' element, I get the alert but the anchor text is not updated. Is something wrong here?
$(document).ready(function(){
$('#title').text("aaa");
$("#list").click(function() {
alert($(this).text());
$('#title').text("new title");
});
});

try it with .html like this
$(document).ready(function(){
var title = $('#title').html("aaa");
$("#list").click(function() {
alert(title.text());
title.html('new title');
});
});

This is nicer:
$(document).ready(function(){
$('#title').html("aaa");
});
$("#list").do("click", function() {
alert($(this).html());
$('#title').html("new title");
});

Related

How to change the page content without reloading

I want to know how can I change the content of a div (for example: <div id="MyDiv"></div>) when I click any link for an HTML file with PHP code?
Now, I tried to do this:
$(function(){
$("a").on("click", function () {
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});
But it replaces the content of the whole page.
Yeah, I need to prevent the default action, this will do what I want:
$(function(){
$("a").on("click", function () {
event.preventDefault();
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});

How to add onclick to a link with javascript?

I am using following segment of code to add onclick to anchor tag but apparently it is not working.
var address_edit = $('.edit-user a').attr('href'));
$('.edit-user a').prop('onclick', 'Popup("address_edit","Edit","900","500");')
What I want:
This is my code on inspect element:
<div class="edit-user">
No kidding
</div>
This is what I need it to be:
<div class="edit-user">
<a onclick='Popup("address_edit","Edit","900","500");' href="example.com/nokidding">No kidding</a>
</div>
Add click event like this :
$('.edit-user a').click(function(e) {
e.preventDefault();
Popup("address_edit","Edit","900","500");
// I don't know if you need to redirect after popup open
window.location.href = "example.com/nokidding";
})
It is not prop, it is attr, because onclick is a attribute, not a property. But I would add a click event listener with jQuery to the element and execute your action there in a callback:
$('.edit-user a').click(function(e) {
// this stops the 'href' of the anchor from being executed
// if you want the user to follow the 'href' after click, remove the line
e.preventDefault();
Popup("address_edit", "Edit", "900", "500");
});
It's attr not prop. You can handle it like this:
$('.edit-user a').on('click', function() {
Popup("address_edit", "Edit", "900", "500");
});
You need to use dynamic biding for this because you are creating element dynamically. Use below
$(document).on('click', '.edit-user a', function() {
Popup("address_edit", "Edit", "900", "500");
});
Please confirm my demo :
$('.edit-user a').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
console.log(href);
//Popup(href, "Edit", "900", "500"); //open popup
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit-user">
No kidding
</div>
This should work :)
$(document).ready(function(e){
$(".link").attr('onclick','Popup("address_edit","Edit","900","500");');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link" href="example.com/nokidding">No kidding</a>

jQuery: remove or hide overlay div?

I'm creating an overlay div using the following code when an image thumbnail is clicked:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs)
return false;
});
});
</script>
This works fine.
Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig. so I tried this:
<script>
jQuery(document).ready(function(){
jQuery( "#overlay #imgBig" ).click(function() {
jQuery("#overlay").remove();
});
return false;
});
</script>
but for some reason it just doesn't work which means it doesn't hide/remove the overlay div!
Could someone please advise on this issue?
Thanks in advance.
The click function doesn't work with dynamically created elements. Also, id's are unique so you should only need to use #imgBig in the selector.
Try this:
jQuery(document).ready(function(){
jQuery( "#imgBig" ).on('click', function() {
jQuery("#overlay").remove();
});
return false;
});
You should use the second part inside the first function, like this (I replaced Jquery with $):
...
var imgs = (this.href);
$('#overlay #imgBig').attr("src", imgs);
$( "#overlay #imgBig" ).click(function() {
$("#overlay").remove();
});
return false;
A JSFiddle example:
JSFiddle
Now i need to remove or hide the overlay div when the user clicks on
the img with the id of imgBig
Try assigning click event to img element having src set to imgs
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs);
// assign `click` event to `img` element having `src` set to `imgs`
jQuery("img[src=" + imgs + "]").on("click", function() {
// do stuff
// e.g., remove or hide the overlay div
$(this).parent().remove();
});
return false;
});
});
The problem is that the on() or the click() function doesn't work with dynamically generated HTML content. Previously you could use the live() method but currently it's deprecated in jQuery. Fortunately, the on() method accepts a second argument especially for these cases. So you can use:
jQuery( "body" ).on( 'click', '#imgBig', function() {
jQuery("#overlay").remove();
});
Here's a Fiddle: http://jsfiddle.net/y5y1x5vm/
Hope that solves your problem.

How to attr one link to multiple elements?

I am not really sure if the title points to my question but:
I would like to show two different elements(contents and images) at the same time with one link.. It s kinda content and image slider so if you click link1 attr content1 and image1, if you click on link2 attr content2 and image2 and so on..
That way I can attract boxes but how would I call images too?
$(".box").hide();
$(".box:first").show();
$("a").click(function() {
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box").hide();
$(activeLink).slideDown("normal");
return false;
});
I have come so far..
http://jsfiddle.net/2GR3W/2/
Thnx in advance!
Try:
$(document).ready(function () {
// Text Box
$(".box, .img").hide();
$(".box:first,.img:first").show();
$("a").click(function (e) {
var idx=$(this).index();
e.preventDefault();
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box, .img").hide();
$('.container div').eq(idx).slideDown("normal");
$('.container img').eq(idx).slideDown("normal");
});
});
jsFiddle example
Try refactoring your image ID references to follow a convention named after your link href values.
<img id="box3-img" class="img" src="asd.jpg" width="300" height="200" alt="img3"/>
Then you can treat the 'href' attr value as a mere prefix against the ID for the images:
$(activeLink + "-img").show();
http://jsfiddle.net/2GR3W/5/
My solution for you is:
$(document).ready(function() {
$('.links').on('click','a',function() {
if(!$(this).hasClass('active')){
$('.links a').removeClass('active')
$(this).addClass('active');
$('.container').find('.box, img').hide();
$('.container').find('.box').eq($(this).index()).slideDown('normal');
$('.container').find('img').eq($(this).index()).fadeIn('normal');
}
});
});
$(window).load(function(){
$('.links').find('a:nth-child(1)').trigger('click');
});
Fiddle:
http://jsfiddle.net/2GR3W/7/
With this code you can put infinites <a/>, <div class="box"/> and <img/>, it will always find the .box and the img in the same 'order' and show it

Append <div> with click and remove with click

I have the following problem:
I append the div:
$(".class").click(function() {
$(this).append("<div class='click'></div>");
$("div.click").show();
});
Then i remove it with a click on another button but the div is still there.
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});
Try keeping a pointer to the div the following should work.
var tempDiv;
$(".class").click(function() {
tempDiv = $("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
tempDiv.remove();
});
Otherwise you can use this way
$(".class").click(function() {
$("<div class='click'></div>").appendTo($(this)).show();
});
$(".button").on("click", function(e){
e.preventDefault();
$('.click').remove();
});
PS: You may also remove the .show() if the .click class is not hidden by default
Try this
You have two buttons.
Say:
<div class="Main">
<div>Div0</div>
</div>
<button class="button1">Click to add</button>
<button class="button2">Click to remove</button>
and JS Code is :
var counter=1;
$(".button1").click(function() {
$('.Main').append("<div class='click'> newly added Div "+counter+"</div>");
counter++;
$("div .click").show();
});
$(".button2").click(function() {
$('.Main div').remove(':last-child');
});
Here is an example based on your work : http://jsfiddle.net/UQTY2/128/
<div class="class">Click to add a green box</div>
<button class="button">Click to remove all green boxes</button>
$(".class").click(function() {
$(this).append("<div class='click'></div>");
});
$(".button").click(function(e) {
e.preventDefault();
$("div.click").remove();
});
this will remove
$(".button").on("click", function (e) {
e.preventDefault();
$("div.click").remove();
});
check my fiddle
http://jsfiddle.net/suhailvs/4VmYP/2/
When you dynamicly create element, you need delegated-event: .on( event, selector, handler(eventObject) ).
$(document).on("click", ".button", function(e){
e.preventDefault();
...
$("div.click").hide();
});
If you want remove element, you shoud use .remove() method instead of .hide().
you can dynamically add and remove div with javaScript like this
Check this example
Add and Remove Div dynamically
in this example the default remove button remove the most recent added div or you can say the last div in the container
But if you want to remove particular div with div place number you can enter the div number .
Code example
HTML
<div class="Main">
<div>div1</div>
</div>
<button id="ok">add</button>
<button id="del">remove</button>
<label>Enter div number to remove</label>
<input id="V"/>
<button id="Vok">ok</button>
JS
var counter=0;
$("#ok").click(function(){
$('.Main').append('<div> new div'+counter+'</div>');
counter++;
})
$("#del").click(function(){
$('.Main div').remove(':last-child');
})
$("#Vok").click(function(){
var Val=$('#V').val();
$('.Main div:nth-child('+Val+')').remove();
})
remove "on" from
$(".button").on("click", function(e){
e.preventDefault();
...
$("div.click").hide();
});

Categories

Resources