Add automatic refresh to a div with JS - javascript

The div works perfectly, but adding a new value to it results in NaN. But when updating the page, the div shows the updated value.
Would there be any way to add an automatic refresh to this div?
$(function () {
$(".but").on("click",function(e) {
e.preventDefault();
$(".content").hide();
$("#"+this.id+"div").show();
});
});
.content { display:none };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="but" type="button" id="Id">Load</button>
<div id="Iddiv" class="content">
<h2>content div</h2>
</div>

$(function () {
$(".but").on("click",function(e) {
if ($("h2")[0].innerHTML=='content div'){
$("h2")[0].innerHTML="";
}else {
$("h2")[0].innerHTML='content div';
}
});
});
.content { display:block };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="but" type="button" id="Id">Load</button>
<div id="Iddiv" class="content">
<h2></h2>
</div>

Given that hadent supplied where the new data comes from. Here are 2 examples.
Example one:
<button class="btn1" type="button" id="Id" data-newtxt="Example Text">Load</button>
<div id="section1">
<h2>content div</h2>
<span class="new-data"></span>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.btn1').click(function() {
$('.section1 .new-data').text( $(this).data('newtxt') );
})
});
</script>
Example two:
<button class="btn2" type="button" id="Id" data-newtxt="Example Text">Load</button>
<div class="hidden-div">Some example content</div>
<div id="section2">
<h2>content div</h2>
<span class="new-data"></span>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('.btn2').click(function() {
$('.section2 .new-data').text( $('.hidden-div').text() );
})
});
</script>

Related

Note taking feature, line break and no content

I'm building the feature to take notes on my web app. I'm running into two problems:
I can't figure out how to recognize line breaks. I can hardcore text with line breaks, but when user clicks Edit it shows on the text the <br> and if he saves it just shows <br> in plain text.
Also if the user deletes all the text and clicks save it doesn't work and just prints <textarea>.
Any help is greatly appreciated!
$('#edit').click(function() {
$('#edit').hide();
$('#note').each(function() {
var content = $(this).html();
$(this).html('<textarea style="width:inherit">' + content + '</textarea>');
});
$('#save').show();
});
$('#save').click(function() {
$('#save').hide();
$('textarea').each(function() {
var content = $(this).val(); //.replace(/\n/g,"<br>");
$(this).html(content);
$(this).contents().unwrap();
});
$('#edit').show();
});
#note {
word-wrap: break-word;
max-width: 40rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<h5 class="card-tittle">Note</h5>
<hr>
<div class="container index">
<div class="row">
<div class="jumbotron col-md-12" id="note">
Test Text.
</div>
<div class="col-md-12">
<button class="btn btn-primary" id="edit"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<button class="btn btn-primary" id="save"><span class="glyphicon glyphicon-save"></span>Save</button>
</div>
</div>
</div>
</div>
I think you want to do something like this...
$('#edit').click(function() {
$('#edit').hide();
$('#note').each(function() {
var content = $(this).html().replace(/<br>/g,"\n");
$(this).html('<textarea style="width:inherit">' + content + '</textarea>');
});
$('#save').show();
});
$('#save').click(function() {
$('#save').hide();
$('textarea').each(function() {
var content = $(this).val().replace(/\n/g,"<br>"); //.replace(/\n/g,"<br>");
$(this).html("");
$(this).append(content);
$(this).contents().unwrap();
});
$('#edit').show();
});
Demo: https://www.codeply.com/go/hAL9pWWUFk

SlideUp/Slidedown - Button is child of closing div and doesn'trigger parent

I have a little slideup, slidedown system. width some fading in it. Everything works fine, except from the slide up function. That does not seem to change the display back to none.
Here is a Fiddle:
Slide Up/Down Fiddle
HTML
<div class="standorte-m-wrapper">
<div class="panel-m up">
<div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="0">ZU-1
<i class="icon-down-open-2 iset"></i></button>
</div>
</div><!--
--><div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="1">ZU-2<i class="icon-down-open-2 iset"></i></button>
</div>
</div><!--
--><div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="2">BS<i class="icon-down-open-2 iset"></i></button>
</div>
</div><!--
--><div class="pan-item-m">
<div class="adres-wrap-m">
<button class="mobile" data-ajaxFile="3">LU<i class="icon-down-open-2 iset"></i></button>
</div>
</div>
</div>
<div id="open" class="panel-m down">
<div class="close-button">
<i class="icon-cancel"></i>
</div>
<div id="content">
<div id="php-content-m"></div>
</div>
</div>
JS
$('.adres-wrap-m > button').on('click', function() {
if ($('.panel-m.up').hasClass('open')) {
//alert('already open');
} else {
$('.panel-m.up').addClass('open');
$('.standorte-m-wrapper').addClass('expand');
$('.panel-m.down').slideDown(1000);
}
$('#php-content-m').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
setTimeout(function (){
$('.panel-m.down div').fadeIn(400);
}, 500);
});
$('#close-m').on('click', function() {
$('.panel-m.down div').fadeOut(400);
setTimeout(function (){
$('.panel-m.up').removeClass('open');
$('.standorte-m-wrapper').removeClass('expand');
$('#close-m').parent().css("display", "block");
$('.pannel-m.down').slideUp(1000);
}, 500);
});
});
Looks like you have a typo in $('#close-m').on('click', function()
Change $('.pannel-m.down').slideUp(1000); to $('.panel-m.down').slideUp(1000);
Worked for me

Toggle multiple divs one at a time with 1 button using Jquery

I have four divs which i want to toggle one at a time with a single button. I want to toggle them one after the other and not randomly. I have tried something like below.
$(document).ready(function() {
$('#toggle').click(function() {
$('#1').hide();
});
$('#toggle').click(function() {
$('#2').hide();
});
$('#toggle').click(function() {
$('#3').hide();
});
$('#toggle').click(function() {
$('#4').hide();
});
});
.divs {
border: 1px solid;
height: 30px;
}
<div id='1' class='divs'></div>
<div id='2' class='divs'></div>
<div id='3' class='divs'></div>
<div id='4' class='divs'></div>
<button id='toggle'>
toggle
</button>
Save the state on each click.
$(document).ready(function() {
var state = 1;
$('#toggle').click(function() {
if(state==1){
$('#1').hide();
state=2;
}
else if(state==2){
$('#2').hide();
state=3;
}
else if(state==3){
$('#3').hide();
state=4;
}
else if(state==4){
$('#4').hide();
state=1; //back to state
}
});
$(document).ready(function() {
$('#toggle').click(function() {
$('.divs:visible:first').hide();
});
});
Try this one
var count = 1;
$(document).ready(function () {
$('#toggle').click(function(){
$('.divs').show();
if(count == 4)
count = 1;
$('#' + count).hide();
count++;
});
});
First of all, keeping numeric ids is not good, so considering you will change them after wards, I am writing both the answers with numeric ids and without numeric ids.
With Numeric Ids, it is easy to do.
Suppose you have button to toggle the other four divs then it would look like this:
var state = 1;
$("#toggleButton").click(function(){
$("#"+state++).slideToggle();
if(state===5){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>
<button id="toggleButton">
toggle
</button>
Now coming to the non numeric ids.
var state = 1;
$("#toggleButton").click(function(){
$("#div"+state++).slideToggle();
if(state===5){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='div1' >1</div>
<div id='div2' >2</div>
<div id='div3' >3</div>
<div id='div4' >4</div>
<button id="toggleButton">
toggle
</button>
FYI:In my opinion you should not use numeric ids.
Further adding more in to the code.
If you don't know how many div would be there but you are having a clear cut rule that the div's follow the sequence whether or not they are having numeric/non numeric ids then you can change the code slightly to incorporate that as well like this.
var state = 1;//first button id to be toggled
var total = 4;//this will be the total number of divs to be handled by the button
$("#toggleButton").click(function(){
$("#"+state++).slideToggle();
if(state===(total+1)){state=1;}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id='1' >1</div>
<div id='2' >2</div>
<div id='3' >3</div>
<div id='4' >4</div>
<button id="toggleButton">
toggle
</button>
Happy coding.
Use class instead of Id for using many times
var i = 1;
$('#toggle').click(function(){
$('.divs').show();
$('#' + i).hide();
i++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>
<button id='toggle'>
toggle
</button>
loop through each element and use toggle. This gives the effect that you desire.
$('button').click(function(){
$('.divs').filter(function(index,item){
$(item).toggle('slow')
})
})
Have a look at this demo -
https://jsfiddle.net/ukw5wcmt/
var i = 1;
$('#toggle').click(function(){
$('.divs').show();
$('#' + i).hide();
if(i==4)
{
i=1;
}else{
i++;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='1' class='divs'>dsgsdg</div>
<div id='2' class='divs'>64636</div>
<div id='3' class='divs'>46y</div>
<div id='4' class='divs'>4373477</div>
<button id='toggle'>
toggle
</button>
Try this
.hide{ display: none; }
$(document).ready(function(){
$(".click-btn").click(function(){
var fid = $(".hide:first").prop("id");
$("#"+fid).removeClass("hide");
});
$(".remove-tag").click(function(){
$(this).parent().addClass("hide");
});
});
<div id="cart-1" class="hide">
<div class="remove-tag">x</div>
<h5>1</h5>
</div>
<div id="cart-2" class="hide">
<div class="remove-tag">x</div>
<h5>2</h5>
</div>
<div id="cart-3" class="hide">
<div class="remove-tag">x</div>
<h5>3</h5>
</div>
<div id="cart-4" class="hide">
<div class="remove-tag">x</div>
<h5>4</h5>
</div>
<div id="cart-5" class="hide">
<div class="remove-tag">x</div>
<h5>5</h5>
</div>
<button class="click-btn">click</button>

How can I make jquery script shorter?

I have got following code (i shorted it to make it more readable)
And I would like to ask if it is possible to do not write almost the same code for every button? How can I do it the easiest way? I have got 6 buttons and code would be quite long.
<script>
$(document).ready(function(){
$("#option1").click(function(){
if($(".option1").is(":visible")){
$(".option1").hide("slow",function(){});
}
else{
$(".option2, .option3").hide("slow",function(){});
$(".option1").show("slow",function(){});
}
});
$("#option2").click(function(){
if($(".option2").is(":visible")){
$(".option2").hide("slow",function(){});
}
else{
$(".option1, .option3").hide("slow",function(){});
$(".option2").show("slow",function(){});
}
});
$("#option3").click(function(){
if($(".option3").is(":visible")){
$(".option3").hide("slow",function(){});
}
else{
$(".option1, .option2").hide("slow",function(){});
$(".option3").show("slow",function(){});
}
});
});
</script>
<body>
<div class="containter">
<div class="row">
<div class="col-md-4">
<button type="button" id="option1" class="btn btn-primary">Button1 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option2" class="btn btn-primary">Button2 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option3" class="btn btn-primary">Button3 >></button>
</div>
</div>
</div>
</body>
Without the need to change much of your html, add a common class option to all your option1, option2, ... :
<div class ="option option1">a</div>
<div class ="option option2">b</div>
<div class ="option option3">c</div>
and then you can use this below:
Array.from(document.getElementsByTagName('button')).forEach(function(btn){
btn.addEventListener('click', function(e){
if($("." + e.target.id).is(":visible")){
$("." + e.target.id).hide("slow",function(){});
}
else{
$(".option").hide("slow",function(){});
$("." + e.target.id).show("slow",function(){});
}
});
});
DEMO
You can reduce the code to just one click listener. Try this:
<script>
$(document).ready(function() {
$(".btn-primary").click(function() {
var option = $(this).data("option");
if ($(".option." + option).is(":visible")) {
$(".option." + option).hide("slow", function() {});
} else {
$(".option").not("." + option).hide("slow", function() {});
$(".option." + option).show("slow", function() {});
}
});
});
</script>
<body>
<div class="containter">
<div class="row">
<div class="col-md-4">
<button type="button" id="option1" data-option="option1" class="btn btn-primary">Button1 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option2" data-option="option2" class="btn btn-primary">Button2 >></button>
</div>
<div class="col-md-4">
<button type="button" id="option3" data-option="option3" class="btn btn-primary">Button3 >></button>
</div>
</div>
</div>
<!-- common class option added -->
<div class="options">
<div class="option option1"></div>
<div class="option option2"></div>
<div class="option option3"></div>
</div>
</body>
I added a common class to all the options, and a data-option attribute to your buttons.
You don't need to check to see whether the current button is visible. It's visible because it was just clicked on.
All you need to do is show the other buttons that weren't clicked on and hide the one that was. To do this, assign the same class to all 3 buttons. In the example below, I added the class "myBtn" to all 3 buttons.
$(".myBtn").click(function () {
var id = $(this).attr('id');
$(".myBtn:not(#"+id+")").show("slow", function () {});
$(this).hide();
});
JSFiddle demo.

bootstrap popover misplacement when adding content

Im trying to write function that when you click on a button, textarea is adding in the bottom of my popover content.
the problem is that when the textarea is shown the popover extend down and hides the text.
i want the popover extend only up (save the bottom placement and the original width)
help?
here is my code:
html:
<div class="popover-markup">
<a href="#" class="trigger">
This link triggers the popover.
</a>
<span class="content hide">
<p>This is the popover content.
</p>
<button id="clickme" onclick="showText()">click me</button>
<textarea class="textarea"></textarea>
</span>
</div>
js:
$(document).ready(function () {
$('.popover-markup > .trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
},
container: 'body',
placement: 'top',
html: true
});
$('.textarea').hide();
});
function showText() {
$('.textarea').show();
};
I made a nasty hack where the content is replaced just in time for the popover to calculate a new correct position when invoked again.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="container">
<button id="my-show-popover" type="button" class="btn btn-default" data-container=".container" data-toggle="popover"
data-placement="top" data-html="true" data-trigger="manual">
Popover on top
</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function () {
var popoverNoTextAreaContent = "Nasty hobbitses. <button type='button' id='my-show-text-area-button' class='btn btn-default'>Click</button>",
popoverWithTextAreaContent = popoverNoTextAreaContent + "<textarea></textarea>";
$('#my-show-popover').click(function () {
$(this).attr('data-content', popoverNoTextAreaContent).popover('show');
});
$(document).on('click', '#my-show-text-area-button', function () {
$('#my-show-popover').attr('data-content', popoverWithTextAreaContent).popover('show');
});
});
</script>
</body>

Categories