We Keep Coding

How to update data attribute using JQuery?

I am trying to use JQuery to update a data attribute after clicking on a button.
Please take a look at what I have tried below.
When I click on the div with class previous-wrapper, the whole block is well updated, and the data-nb-attribute get the correct value.
But, when I click on this div for the second time, data-nb-attribute gets the value NaN..
Is there another way to dynamically update and retrieve the value of this attribute?
$(function(){
$(document).on('click','.previous-wrapper',function(){
var get_nb = $(this).find('.previous');
get_nb = get_nb.data("nb");
get_nb = parseInt(get_nb)
//Dom to update
arr_left = $('<i/>', {
className: 'fa-solid fa-arrow-left'
});
previous = $('<div/>', {
className: 'previous',
'data-nb': get_nb-5,
html: "Previous"
});
//Question 2. How to append previous to arrow_left
$(".previous-wrapper").html(previous);
});
});
.previous-wrapper{
cursor: pointer;
background:red;
width:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="previous-wrapper">
<i class="fa-solid fa-arrow-left"></i>
<span class="previous" data-nb="100">Previous</span>
</div>
I would also like to know how to add multiple DOM created by JQuery.

You're overwriting the HTML with an invalid attribute of "classname" instead of "class", which means on the second interation $('.previous') won't match anything.
Corrected version of your code:
$(document).on('click', '.previous-wrapper', function() {
var get_nb = $(this).find('.previous');
get_nb = get_nb.data("nb");
get_nb = parseInt(get_nb)
//Dom to update
arr_left = $('<i/>', {
class: 'fa-solid fa-arrow-left'
});
previous = $('<div/>', {
class: 'previous',
'data-nb': get_nb - 5,
html: "Previous"
});
// including both elements at once:
$(".previous-wrapper").html([arr_left, previous]);
console.log($('.previous-wrapper').html())
});
.previous-wrapper {
cursor: pointer;
background: red;
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="previous-wrapper">
<i class="fa-solid fa-arrow-left"></i>
<span class="previous" data-nb="100">Previous</span>
</div>
It would be much, much simpler, however, to simply update the one attribute you want to update, instead of rewriting all the HTML every click:
$(document).on('click', '.previous-wrapper', function() {
let el = $(this).find('.previous')
// update the data attribute using .attr() instead of .data() because jQuery handles .data internally; it's not reflected in the DOM
el.attr('data-nb', Number(el.attr('data-nb')) - 5);
console.log($('.previous-wrapper').html())
});
.previous-wrapper {
cursor: pointer;
background: red;
width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="previous-wrapper">
<i class="fa-solid fa-arrow-left"></i>
<span class="previous" data-nb="100">Previous</span>
</div>

How i can show the href of all my <a> links inside a span beisde the <a>

I have the following markup, which represents a table which have <a> inside its <td>:-
now i am trying to find a way using javascript, to show the href of all the <a class="ms-listlink"> beside them.so the <td> will contain something as follow:-
Design Transfer
http://***/buisnessfunctions/pmo/progammes/136/
instead of just showing the text:-
Design Transfer
so is there a way to achieve this?

You can do this without javascript - css has a content property that can access attributes. Here's an example:
a {
display: block;
}
a:after {
display: inline-block;
margin-left: 1em;
content: attr(href);
}
Google
Zombocom

Loop through each link, read its href property and insertAfter the link.
$('.ms-listlink').each(function(){
var link = $(this).attr('href');
$(this).insertAfter('<span>'+ link +'</span>');
});

I prefer the CSS solution above, but here's the JS solution FWIW
$('.ms-listlink').each(function() {
const href = $(this).attr('href');
const $td = $(this).closest('td');
$($td).append(href);
})

I really like the CSS answer. Tiny, easy, concise. Just in case you are curious (or for some reason require a JS-only solution), here is a way to do it in plain vanilla JavaScript (no additional libraries):
<div id=container>
<a href=https://google.com >GOOGLE </a> <span></span> <br />
<a href=https://faceboook.com >FACEBOOK </a> <span></span> <br />
<a href=https://yahoo.com >YAHOO </a> <span></span> <br />
</div>
<script>
var container = document.getElementById('container');
var anchor = container.getElementsByTagName('a');
var span = container.getElementsByTagName('span');
for(var item in anchor) {
span[item].innerHTML = anchor[item].href;
}
</script>
*NOTE: If you need the url's to be a clickable part of the hyperlinks, put the span's inside the 'a' tags.

Listen event from Shadow Dom

How do I listen a mouseover event from shadow DOM. I did try as snipcode below but nothing happen. The template instance is generated after button Add is clicked and I register mouseover event for it and hopping this event is fired when mouseover.
Thank a lot
HTML
<body>
<h1 class="text-center">Test import Node</h1>
<div class="container-fluid" style=" background-color: #FAFAFA"></div>
<div class="col-md-12" id = 'root'>
<button type="button" class="btn btn-default go" id='_add'><i class="fa fa-pencil-square-o"></i> Add</button>
<div id = 'textbox' style="height: 200px; width: 400px; font-size: 18px"></div>
</div>
<template id = 'area'>
<div style="height : 400px; width: 300px ; background-color: red"></div>
</template>
</body>
Javascript
$(document).ready(function() {
var button = document.querySelector('#_add');
button.addEventListener('click', function(){
check();
}, false);
});
function check(){
// document.querySelector('#textbox').innerHTML = "Ukie";
var content = document.querySelector('#area').content;
content.addEventListener('mouseover', function(){
display();
}, false);
var root = document.querySelector('#root');
root.appendChild(document.importNode(content, true));
}
function display(){
document.querySelector('#textbox').innerHTML = "Here";
}

As per addEventListener docs:
The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).
Therefore element must exist in the DOM, when you call addEventListener on it.
As a workaround, you can use event delegation using jquery on method to achieve the same. Here is a working jsfiddle by tweaking your sample a bit.
$('#root').on('mouseover', '.dyn', function(){
display();
});
Here bound element will be parent of template content(about which you are sure that it will exist while binding event) and you'll pass selector of your content html to .on method as argument. Thus whenever event occurs on child(in this case your template content) it will bubble up to parent and callback will be triggered.

You can use on function with jQuery. With on function you can "bind" events on element which not created in the DOM when the code was executed.
Read this: http://api.jquery.com/on/

AngularJS - ng-disabled not working for Anchor tag

I am using ng-disabled, I like it. It's working good for me for input and buttons. For anchor tag not working. How can I fix?
HTML code
<a ng-disabled="addInviteesDisabled()">Add</a>
JS code
$scope.addInviteesDisabled = function() {
return $scope.event.status === APP_CONSTANTS.STATUSES.PENDING_APPROVAL;
};

There is no disabled attribute for hyperlinks.
You can do this:
.disabled {
cursor: not-allowed;
}
<a ng-click="disabled()" ng-class="{disabled: addInviteesDisabled()}">Add</a>
$scope.disabled = function() {
if($scope.addInviteesDisabled) { return false;}
}

You could create a linkDisabled css class, and apply it to your anchor:
<style>
.linkDisabled {
cursor: not-allowed;
pointer-events: none;
color: grey;
}
</style>

You can do this through CSS, no fancy directives needed. Just use ng-class to apply a class sort of like this:
ng-class:
ng-class="{disabledLink: disabledFunction()}"
css:
.disabledLink {
color: #ccc;
pointer-events:none;
}
full credit to-
https://css-tricks.com/pointer-events-current-nav/

You can't disable anchor tag using ng-disabled.
Form control has disabled property but anchor tag has no disable property.
Check Why does angular's ng-disabled works with bootstrap's btn class?

You can user fieldset for enable disable a link.
<input type="checkbox" ng-model="vm.iagree"> I Agree
<fieldset ng-disabled="!vm.iagree">
<a class="btn btn-primary grey" href="javascript:void(0)" ng-click="vm.Submit()">Submit</a>
</fieldset>

You can not disable anchor tag directly.You can do something this:
Assign two property in controller
public bool btndisabled { get; set; }
public string href { get; set; }
And use it for controller side code :
if (auction.btndisabled== true)
{
auction.href = "javaScript:void(0);";
}
else
{
auction.href = "/Auction/Index?id=" + auction.Auction_ID;
}
In your view :
<input type="button" class="btn btn-primary" ng-disabled="item.btndisabled" value="Update"/>

When ng-Disabled evaluated to true, sets the disabled attribute on the element which is generally an input, or other form control. <a> tags don't have disabled attributes so it will never be set. Try setting the ng-disabled on your link to true and you will see for yourself.
Maybe this will help: ng-disabled And Anchor Tags Oh Noes!

Yes buddy we can disable the anchor tag, lets see what need to do that. Anchor is clickable , first we nedd to disable the click , we can do that by pointer-events: none; and then to show the use it's disabled we can change the color on which we have to disable it like color: #95979A;. Still we need to understand whats happening here, adding the above will not disable the click event of anchor tag. To stop that we need to add ng-disabled which we add the attribute event as disabeld=disabled, We need to catch that using a[disabled].
So final Code :
a[disabled] {pointer-events: none;color: #95979A;}
will disable the click event of the anchor tag.
Hope this helped.
Thanks

The best way is to add the disabled condition into the function of the anchor. Thus, the functions only perform when the disabled condition is checked and passed.
$scope.next_kh_resource = function(){
if ($scope.selected_kh_index < ($scope.selected_step.step_kh_resources.length -1)){
var next = $scope.selected_kh_index + 1;
$scope.selected_kh_index = $scope.selected_kh_index +1;
$scope.selected_kh_resource = $scope.selected_step.step_kh_resources[next];
}
}
$scope.prev_kh_resource = function(){
if ($scope.selected_kh_index > 0){
var prev = $scope.selected_kh_index -1;
$scope.selected_kh_index = prev;
$scope.selected_kh_resource = $scope.selected_step.step_kh_resources[prev];
}
}
In the example above, I disabled the pagination anchors next and prev by inserting the disabled condition into the functions. The users are smart. They will soon learn that its the end page and they can click next but nothing will happen

i had the same problem doing a navigation buttons, this workaround was a good solution for my project!
Some link text
Basically, there are two buttons (made with links tags) one for next and other for previous. there are two $scope variables, nextItem and prevItem , one for each button. So if there is no next (or previous) the tag will be styled properly (so you see its disabled).
When nextItem is not null, the href will be rendered to href="/the-link/i-want-to-use" and when is null, href will be href="#".

No disabled attribute in anchor tag. Used "disabled" class for anchor tag.
$scope.data = {name:dinesh}
<a ng-click="get_data()" ng-class="{disabled: data}">Add</a>

You can use ng-href to disable event

There is no disabled attribute for hyperlinks in Angular JS. So you can do follows:
html
<a ng-click="disabled()" ng-class="{disabled: isLinkDisabled}">LINK TO Disable</a>
app.js
$scope.disabled = function() {
$scope.isLinkDisabled = true;
}
CSS
.disable{
cursor: not-allowed;
pointer-events: none;
color: grey;
}

Use a-disabled instead of ng-disabled
<a a-disabled="addInviteesDisabled()">Add</a>

Javascript creating <div> on the fly

I have a a link that looks similar to this
Blog
As you can the link has an ID of 'blog' what I want to do is to create an div on the fly with the ID from the link that was clicked so if the 'blog' is clicked, then the markup would be
<div id="blog">
<!--some content here-->
</div>
Like wise if for instance the news link is clicked then I would like,
<div id="news">
<!--some content here-->
</div>
to be created in the markup if this possible? and how Im pretty new to jQuery.

Try this:
$("a").click(function(){
$("#wrapper").append("<div id=" + this.id + "></div>");
});
Not tested, should work ;)
where: #wrapper is parent element, work on all a as you see.

You will need to give the div a different ID. Perhaps you could give it a class instead:
$("#blog").click(function() {
$(this).after("<div class='blog'>...</div>");
return false;
});
That's just one of many ways to create a div. You probably also want to avoid duplicates however in which case, use something like this:
$("#blog").click(function() {
var content = $("#blog_content");
if (content.length == 0) {
content = $("<div></div>").attr("id", "blog_content");
$(this).after(content);
}
content.html("...");
return false;
});
As for how to handle multiple such links I would do something like this:
Blog
News
Weather
<div id="content"></div>
with:
$("a.content").click(function() {
$("#content").load('/content/' + this.id, function() {
$(this).fadeIn();
});
return false;
});
The point is this one event handler handles all the links. It's done cleanly with classes for the selector and IDs to identify them and it avoids too much DOOM manipulation. If you want each of these things in a separate <div> I would statically create each of them rather than creating them dynamically. Hide them if you don't need to see them.

Try This :
<a id="blog">Blog</a>
<a id="news">news</a>
<a id="test1">test1</a>
<a id="test2">test2</a>
$('a').click(function()
{
$('<div/>',{
id : this.id,
text : "you have clicked on : " + this.id
}).appendTo("#" + this.id);
});

First of all you should not make 2 elements with same ID. At your example a and div will both have id="blog". Not XHTML compliant, plus might mess up you JS code if u refernce them.
Here comes non-jquery solution (add this within script tags):
function addDiv (linkElement) {
var div = document.createElement('div');
div.id = linkElement.id;
div.innerHTML = '<!--some content here-->';
document.body.appendChild(div); // adds element to body
}
Then add to HTML element an "event handler":
Blog

This question describes how to create a div. However, you shouldn't have two elements with same IDs. Is there any reason why you can't give it an id like content_blog, or content_news?

Unfortunately if you click on a link the page you go to has no idea what the idea of the link you clicked was. The only information it knows is what's contained in the URL. A better way to do this would be to use the querystring:
Blog
Then using the jQuery querystring plugin you could create the div like:
$("wrapper").add("div").attr("id", $.query.get("id"));

You shouldn't have elements in your page with the same ID. Use a prefix if you like, or perhaps a class.
However, the answer is as follows. I am imagining that your clickable links are within a div with the ID "menu", and your on-the-fly divs are to be created within a div with the ID "content".
$('div#menu a').click(function(){
$('div#content').append('<div id="content_'+this.id+'"><!-- some content here --></div>');
});
Any problems, ask in the comments!

Also the following statement is available to create a div dynamically.
$("<div>Hello</div>").appendTo('.appendTo');
Working fiddle: https://jsfiddle.net/andreitodorut/xbym0bsu/

you can try this code
$('body').on('click', '#btn', function() {
$($('<div>').text('NewDive').appendTo("#old")).fadeOut(0).fadeIn(1000);
})
#old > div{
width: 100px;
background: gray;
color: white;
height: 20px;
font: 12px;
padding-left: 4px;
line-height: 20px;
margin: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div>
<!-- Button trigger modal -->
<button type="button" id="btn">Create Div</button>
<div id="old">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>