When the button is clicked, I want the new reply to be added to the top by update time desc.
For example, I added three replies. New reply 3 should on the top.
I tried two methods. It seems like after the page is loaded, click button function can not obtain the new added html.
$(document).ready(function() {
$('[id ^="submitCommentButton"]').click(function() {
$('#top').append('<div style="background-color:red"> New reply number </div>'); // method 1
// $('<div style="background-color:red> New reply number </div>').insertBefore($('#reply_container').children('.each').first()); // method 2
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
Your code: $('#top').append(' will add the given html to the end of the selected tag.
You need prepend()
$('#top').prepend('<div style="background-color:red"> New reply number </div>');
I think this is what you want:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
<script>
$(document).ready(function() {
$('button').click( function(){
$('#reply1').prepend('<div style="background-color:red"> New reply number </div>');
});
});
</script>
second way to add HTML:
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<div id="top"></div>
<div id="reply_container">
<div id="reply1" class="each">
<div>reply1</div>
<button type="button" id="submit1">Submit</button>
</div>
<div id="reply5" class="each">
<div>reply5</div>
<button type="button" id="submit5">Submit</button>
</div>
<div id="reply20" class="each">
<div>reply20</div>
<button type="button" id="submit20">Submit</button>
</div>
</div>
<script>
$(document).ready(function() {
$('button').click( function(){
$('<div style="background-color:red"> New reply number </div>').insertBefore('#reply1');
});
});
</script>
Related
I get a problem when creating a dropdown list. When I trigger the dropdown by toggle the "show-item" class, it doesn't work. Can you guys help me to see what happen? Thx!!! There's the code below
var duration_dropdown = document.getElementById('duration-dropdown');
var mins_ctn = document.getElementById('mins-ctn');
duration_dropdown.onclick = function(){
mins_ctn.classList.toggle('show-item')
}
<body>
<div class="container">
<div class="title">
<h1>Dropdown Demo</h1>
</div>
<div class="dropdown-ctn">
<div class="dropdown">
<button id="duration-dropdown" class="dropdown-mins">MM</button>
<div class="mins-ctn" id="mins-ctn">
<span class="minute">01</span>
<span class="minute">02</span>
<span class="minute">03</span>
<span class="minute">04</span>
</div>
</div>
</div>
</div>
<script src="dropdown.js"></script>
</body>
I want to animate whole bunch of cards in with javascript and hide them when they press a button a data filter. what would be the best way in doing this?
I was thinking of using hide() and show() but zooms the content out and looks bad, I would like to do more of a sorting fade in and out but want to clear the grid and fade items in nicely.
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
I think this is what you're after?
This assumes each card is a type of category like your filter buttons.
Notice the new data-type added to the cards and the typo on theatre.
To achieve the fade effect, we use jQuery's fadeOut() and fadeIn() methods. You can view more information about jQuery effects here.
//when a button is clicked
$('.button-group button').on('click', function(){
//store the category of the clicked button
var category = $(this).attr('data-filter');
//Loop through all `.card` elements
$('.card').each(function(){
//If the current card in this loop has the same category as the button and it's not the 'all' button then hide it, otherwise fade all cards back in.
if($(this).attr('data-type') != category && category != 'all') {
$(this).fadeOut();
} else {
$(this).fadeIn()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theatre" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div data-type="bar-pub" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the bar/pub type</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="attraction" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the attraction type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="theatre" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the theatre type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
You'll wanna apply the data attributes set on your buttons to the corresponding card and from there just query the card based on its' value:
$(function() {
$('.category-button').on('click', function() {
const filter = this.dataset.filter;
const $filteredCard = $(`.card[data-filter="${filter}"]`);
if (filter === 'all') {
$('.card').stop().fadeIn();
} else {
$filteredCard.stop().fadeIn();
$('.card').not($filteredCard).stop().fadeOut();
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card" data-filter="attraction">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="bar-pub">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="theater">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
For some reason my JS on click isn't working. I have the id and class tagged.
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type='text/javascript' src="js/index.js"></script>
<script>
$(document).ready(function(){
alert("Hello World");
});
</script>
</head>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
And here's the Javascript.
$(document).ready(function() {
// Only change code below this line.
$("#getMessage").on("click", function(){
$(".message").html("Get message");
});
// Only change code above this line.
});
I'd really appreciate some insight! Thank you very much. My hyphothesis is that the index.js file isn't linking properly but the src is definitely right.
$(document).ready(function() {
$("#getMessage").on("click", function(){
alert('You Clicked..!!');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
You are forget to include script, If no you may miss-aligned the script file,Please load it first.
If you intend to use the functionality of a certain library - jQuery in this case - then you have to load this library before you use any of its functionality.
$(document).on("click", "#getMessage", function(){
$(".message").html("Get message");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class = "row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class = "row text-center">
<div class = "col-xs-12 well message">
The message will go here
</div>
</div>
<div class = "row text-center">
<div class = "col-xs-12">
<button id = "getMessage" class = "btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
You Might be missing the jQuery script file. This works perfect for me.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
alert("Hello World");
});
$(document).ready(function () {
$("#getMessage").on("click", function () {
$(".message").html("Get message");
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row text-center">
<h2>Cat Photo Finder</h2>
</div>
<div class="row text-center">
<div class="col-xs-12 well message">
The message will go here
</div>
</div>
<div class="row text-center">
<div class="col-xs-12">
<button id="getMessage" class="btn btn-primary">
Get Message
</button>
</div>
</div>
</div>
</body>
</html>
Hi I am trying to implement a js/jquery program in which the steps are as follow
when someone click button 1 then wrapper div first is hide and wrapper div of 2 button (second ) is shown . similarly for third and forth
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
I have tried this but know it will not work
<script type="text/javascript">
$('.button').on('click', function(e){
console.log($( this));
$( this ).closest(".wrapper .second").hide();
});
</script>
you could just toggle a class:
$('.button').on('click', function() {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second hidden">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
JS:
$('.button').on('click', function () {
$(this).closest('div').add($(this).closest('.wrapper').find('.hidden')).toggleClass('hidden');
});
CSS:
.hidden {
display: none;
}
-jsFiddle-
I would check what the parent class is. If its first hide element and show the next, else hide element and show prev, like so:
$('.button').on('click', function(e){
if($(this).parent().attr('class')=='first'){
$(this).parent().hide();
$(this).parent().next().show();
}else{
$(this).parent().hide();
$(this).parent().prev().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">1</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">2</button>
</div>
</div>
<div class="wrapper">
<div class="first">
<div class="content">content1</div>
<button class="button">3</button>
</div>
<div class="second">
<div class="content">content2</div>
<button class="button">4</button>
</div>
</div>
Keeping your HTML the same, replace your javascript with:
$('.button').on('click', function(e){
$( this ).closest(".wrapper").find(":hidden").show();
$( this ).closest("div").hide();
});
$('.second').hide();
See jsFiddle
I have following DIV which shows some controls:
<div id="buttonrow" class="buttonrow">
<div class="Add" title="Add">
<div class="AddButton">
<input id="images" name="images" title="Add Photos" multiple="multiple" type="file">
</div>
<div class="AddText">
Add
</div>
</div>
<div class="Upload" title="Upload">
<div class="UploadButton">
<button id="start" type="submit" title="Upload Photos">
</button>
</div>
<div class="UploadText">
Upload
</div>
</div>
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos">
</button>
</div>
<div class="ClearText">
Clear
</div>
</div>
<div class="Delete" title="Delete">
<div class="DeleteButton">
<button id="delete" type="button" title="Delete Photos">
</button>
</div>
<div class="DeleteText">
Delete
</div>
</div>
<div id="SelectAll">
<input title="Select All Images" id="selectAllCB" type="checkbox">
</div>
<div id="dragandrophandler">
Drag & Drop Your Photos Here
</div>
<div id="ImagesCount">
</div>
<div id="Loading" class="Loading">
<img alt="loading" src="../customcontrol/progress.gif">
<div>
Loading...</div>
</div>
</div>
I need to know how can I disable this entire DIV using Javascript/JQuery function?
EDIT: To disable DIV means user should not be able to interact with DIV controls. They must be in read-only state (non-clickable). I dont want to hide DIV!
in Javascript, you can use:
<script lnaguage="javascript">
document.getElementById('buttonrow').style.display='none';
</script>
use:
$("#buttonrow *").attr("disabled", "disabled").off('click');
Try this with .prop():
$("#buttonrow :input").prop("disabled", true);
:input will select all input elems including text, textarea, button, select etc.
$("button, input",$("#buttonrow")).attr("disabled", "disabled");
Can you please try this:
$("#buttonrow").each(function()
{
$(this).prop('disbaled',true);
});
Hope this helps..
$('#buttonrow').on('click', function(){
$(this).css({ 'opacity': 0.7 });
return false;
})