Set dynamically generated buttons "disabled" - javascript

I have a chat application based on WebSockets. Next to every message there should be a rating button. I need to prohibit selfratings by setting the corresponting buttons to disabled. The problem is that the messages and their buttons are generated dynamically and the code snippet doesn't work.
$(".btn").prop("disabled", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button class="btn">Click</button>

you have to call the
$(".btn").prop("disabled", true);
right after the dynamic generated html snippet is inserted into the DOM-Tree.
or you add the disabled right on the generation of the html node.
<button class="btn" disabled>Click</button>

something like this? http://jsfiddle.net/swm53ran/172/
<button class="add">Add</button>
<div class="section" id="template">
This is a section
<button class="rate">Rate This!</button>
</div>
$(document).ready(function() {
$('.add').on('click', function(e) {
e.preventDefault();
var clone = $('#template').clone(true).attr('id', '');
clone.find('.rate').prop('disabled', true);
clone.appendTo('body');
});
});

Related

How to increase ID while copying a tag in javascript

I have a form and in my form there is a plus button for adding a div and at last I will send a list of that div to my controller.
$(“#addDiv”).click(function() {
$(“#myForm div# section_0).clone().appendTo(“#myForm”);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id=“myForm”>
<div id=“section_0”>
//some tags here
</div>
<button id=“addDiv” class=“btn btn-primary”>add</add>
</form>
There is not any problem in copying that div but I need to append a new id for that div and be increased by one.
If anyone can help I would appreciate
Set a global variable globalSectionId to increment at each click and replace the attribute id each time you clone()
globalSectionId = 0;
$("#addDiv").click(function (){
$("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm");
// clone(). and set the new id with the .attr() - Thx #Phil
});
I made a JSFiddle working: https://jsfiddle.net/4efkhdba/
globalSectionId = 0;
$("#addDiv").click(function (){
$("#myForm div#section_0").clone().attr({id:`section_${++globalSectionId}`}).appendTo("#myForm");
// clone(). and set the new id with the .attr() - Thx #Phil
console.log('the new id:'+globalSectionId)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myForm">
<div id="section_0">
CLONE DIV!
</div>
<button type="button" id="addDiv" class="btn btn-primary">add</add>
</div>
You better create a div with id boilerplate and then use it for cloning. Once you append the clone then iterate through the whole div list and add the id's.
<div id="boilerplate" class="tag">
// some tags here
<div>
$("#addDiv").on("click", function() {
$("div#boilerplate").clone().appendTo("#myForm");
$("#myForm").find("div.tag").each(function(i) {
$(this).attr("id", "section_" + i);
});
});
Try this.
Here I have declared one variable which helps us to update id dynamically.
var id=1;
$("#addDiv").click(function() {
var $div=$("#myForm div:last")
var klon=$div.clone().prop('id','section_'+id++);
$div.after(klon);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div id="section_0">
//some tags here
</div>
</form>
<button id="addDiv" class="btn btn-primary">add</button>
You can try this code here:
Not needed any loop just use document find item length because item length is given integer number and our id start at 0. so when item one then it returns 1 and we create new item id with last change one (1).
$("#addDiv").on('click',function(e){
e.preventDefault();
$('#section_0').append('<div id="section_'+$(document).find('.item').length+'" class="item"> Section '+$(document).find('.item').length+'</div>');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<div class="item" id="section_0">
//some tags here
</div>
<button id="addDiv" class="btn btn-primary">add</div>
</form>
==== Thanks ====

Cannot to display one chart at a time when clicked on first button in JavaScript?

After checking some related questions, couldn't find any good answers.
I have created 2 different charts(with Chart.js). And I have 2 buttons (btn1 and btn2), when clicked on btn1, I want to display the 'languageSkillchart'. However when clicked on btn2 then it should display 'programmingSkillchart'.I have tried in several ways but I am only getting the language skill chart even when i clicked btn2.
Your help would be greatly appreciated.
Both Of my Charts in same page:
In my CV.html, I have two Buttons
<div id="chartButton" class="langBtn">
<button id="btn1" class="button">Click Me!</button>
</div>
<div id="chartButton" class="codeBtn">
<button id="btn2" class="button">Click Me!</button>
</div>
//have added the script
<script src="js/showAndHideSkills.js"></script>
MySkillChart.html page
<div id="langchartcontainer" class="Chartcontainer">
<canvas id="languageSkillsChart"></canvas>
</div>
<!--The hidden Programmingskill div, -->
<div id="codechartcontainer" class="Chartcontainer" style="display: none">
<canvas id="codingSkillsChart"></canvas>
</div>
showAndHideSkills.js
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var langchartcontainer = document.getElementById("langchartcontainer");
var codechartcontainer = document.getElementById("codechartcontainer");
//alternative: 1
/*btn1.addEventListener('click', function () {
window.open('mySkillsChart.html', '_blank');
langchartcontainer.style.display = 'block';
});
btn2.addEventListener('click', function () {
window.open('mySkillsChart.html', '_blank');
codechartcontainer.style.display == 'none';
codechartcontainer.style.display = 'block';
});*/
//Alternative: 2
/*if(btn1.onclick(window.open('mySkillsChart.html', '_blank'))){
codechartcontainer.style.display == 'none';
langchartcontainer.style.display = 'block';
}else if (btn2.onclick(window.open('mySkillsChart.html', '_blank'))){
langchartcontainer.style.display = 'none';
}
}*/
//Alternative: 3
$(document).ready(function(){
$("#btn1").click(function(){
window.open('mySkillsChart.html', '_blank');
$("#langchartcontainer").slideToggle("fast");
$("#codechartcontainer").hide("fast");
});
$("#btn2").click(function(){
window.open('mySkillsChart.html', '_blank');
$("#codechartcontainer").show("fast");
$("#langchartcontainer").hide("fast");
});
});
[1]: https://i.stack.imgur.com/7OZ1K.png
The output I get is:
Option 1:
By opening new window you could open 2 different html files (langchartcontainer.html and codechartcontainer.html) instead of just only one and put images in their own html file:
$(document).ready(function(){
$("#btn1").click(function(){
window.open('langchartcontainer.html', '_blank');
});
$("#btn2").click(function(){
window.open('codechartcontainer.html', '_blank');
});
});
Option 2:
If you definitely want to use only one html file to open you need to pass a variable in order to dictate which image is shown in the external html. Because you can't control with javascript what happens in a different file:
something like:
window.open('mySkillsChart.html?whichImagetoShow=A', '_blank');
And in the external html mySkillsChart.html you need to insert a different javascript code in order to read the variable whichImagetoShow and do show/hide code inside of that page.
3) You want to show the images in same page with the one which you paste code above (CV.html), than don't use open window code, just show/hide but you need to have the images displayed in same page.
If you're using window.open() it will put your MySkillChart.html page in a new document, meaning you won't be able to access it from the your CV page. To have access to it from there you would need to put it into an iframe or container on your CV document.
So your CV.html would be something like:
<div class="chartContainer"></div">
<div>
<button class="lang">Click Me!</button>
</div>
<div>
<button class="code">Click Me!</button>
</div>
<script>
$.get('MySkillChart.html').done(charts=> {
$(charts)
.appendTo('.chartContainer')
.find('.Chartcontainer')
.hide();
})
$('button')
.on('click', ()=> $('.Chartcontainer').hide())
.on('click', '.code', ()=> $('.codechartcontainer').show()
.on('click', '.lang', ()=> $('.langchartcontainer').show());
</script>
It seems that you need to "switch" values on your html buttons divs:
<div class="chartButton" id="langBtn">
<button id="btn1" class="button">Click Me!</button>
</div>
<div class="chartButton" id="codeBtn">
<button id="btn2" class="button">Click Me!</button>
</div>

Trying to return to previously faded html file

So I have a series of buttons on a main HTML file that fade out part of the HTML and fade in new HTML using Javascript, and the new HTML has a back button that I want to use to make the current HTML file fade out and fade in the main one but is not working.
These are my buttons:
<div id="buttons">
<button id="button-job" class="button">FIND JOB</button>
<button id="button-offers" class="button">OFFERS</button>
<button id="button-save" class="button">SAVE</button>
</div>
Back button on another HTML:
<button id="button-back" class="button">BACK</button>
This is my Javascript:
$(function() {
$("#profile1").load("profile.html");
$("#button-job").click(function(){
$("#profile1").fadeOut(1000,function(){
$("#profile1").load("jobs.html");
$("#profile1").fadeIn(1000);
});
});
$("#button-offers").click(function(){
$("#profile1").fadeOut(1000,function(){
$("#profile1").load("offers.html");
$("#profile1").fadeIn(1000);
});
});
$("#button-back").click(function(){
$("#profile1").fadeOut(1000,function(){
$("#profile1").load("profile.html");
$("#profile1").fadeIn(1000);
});
});
});

get value with data attribute and display on other div

I would like to show the value "1,000 below" found inside the button on this div using jquery
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
I got this so far but not working, it shows the class ".1000"
var syo = $this.attr('data-filter');
$(this).parent().find('.showvaluehere').html(syo);
for clarity, I want the value of the button to be on the
so that it shows like this;
<div class="showvaluehere">1,000 below</div>
Thanks
You are getting value of data-filter attribute, which is .1000
Try this
$('.button').click(function() {
var syo = $(this).text();
$('.showvaluehere').html(syo);
})
Your code is confusing as you're referencing a lot of elements and attributes which seem unrelated to the HTML you've shown and the problem you describe.
That said, you can do what you require by simply setting the text() of the .showvaluehere element to match that of it's neighbouring button, like this:
$('.showvaluehere').text(function() {
return $(this).next('button').text();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>
$('.button').click(function() {
$('.showvaluehere').text($(this).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="showvaluehere">here</div>
<button class="button" data-filter=".1000">1,000 below</button>

While adding a div content into another div on click of a button

Here is my code --
<div id="div1">
this is div 1
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
<div id="div2">
this is div 2
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn2 -->
</form>
</div>
<div id="showtheaddedform">
//here my form will be push on click to button
</div>
<button type="button" id="btn1">Add the form1</button>
<button type="button" id="btn2">Add the form2</button>
// the click function in my js file are as -
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
});
$(document).on("click","#btn2",function(){
$("#showtheaddedform").append($("#div2").html());
});
now the problem is --
On click #bun1 it's adding the content of #div1 into #showtheaddedform (i.e. the form attribute and all element inside form), like
<div id="showtheaddedform">
<form class="thisformtobeaddeverytime">
<!-- this form to be add on click #btn1 -->
</form>
</div>
but when I'm clicking #btn2 it's adding only the element inside the form , like
<div id="showtheaddedform">
<!-- this form to be add on click #btn2 -->
</div>
[ NOTE : I've not written any kind of remove query ]
..any idea , how it's removing !!!
Both your buttons have the same id. Also there is a syntax mistake in
$(document).on("click","#btn1",function(){
$("#showtheaddedform").append($("#div1").html());
}
add
); to it
DEMO
Actually Form tag is getting append to the div on second button's click. But in the UI it will not be shown as it doesnt have any tags or text in it. Try giving some text or tag in it. It will work
EDIT
Updated Fiddle
Your second button appears to have the wrong ID.
<button type="button" id="btn1">Add the form2</button>
Change to
<button type="button" id="btn2">Add the form2</button>
Try Below code in java script tag and also change your button id to btn1 and btn2
$(document).ready(function(){
//alert("hi");
$("#btn1").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div1").html());
});
$("#btn2").click( function()
{
$("#showtheaddedform").empty();
$("#showtheaddedform").append($("#div2").html());
});
});

Categories

Resources