Add new boostrap 4 card dynamicly - javascript

I would know in js how to add dynamicly a new card. The code below allow to remove a card but not to add new.
I started something like that, but I am blocked.
The html code example
The card
<div class="container">
<div class="row">
<button type="button" class="btn btn-primary" aria-label="Insert" onClick="addAnother()" id="insert">
<span aria-hidden="true">Insert</span>
</button>
</div>
<div class="row">
<ul class="row list-unstyled" id="list">
<li class="col-md-4" id="element1">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
<li class="col-md-4" id="element2">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
<li class="col-md-4" id="element1">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title <a class="close" href="#">×</a></h4>
<p class="card-text">Some example text. Some example text.</p>
Card link
Another link
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
the script>
Remove a card
<script type="text/javascript">
$('.close').click(function(){
var $target = $(this).parents('li');
$target.hide('slow', function(){ $target.remove(); });
})
</script>
Add a card ==> this is element is not correct must be included the card code I think
<script>
addAnother = function() {
var ul = document.getElementById("list");
var li = document.createElement("li");
var children = ul.children.length + 1
li.setAttribute("id", "element"+children)
li.appendChild(document.createTextNode("Element "+children));
ul.appendChild(li)
}
</script>


You could attach a click event using the id #insert, as you have with the close action, rather than referencing a function inline.
$('#insert').click(function(){
$( "ul#list" ).append( "<li>any html here</li>" );
});

Related

Jquery search not working properly in accordion?

Here if search text matches the text of <a> tag I want to hide other unmatched items.
Here what is happening is if the searched input does not match any thing then only the accordion disappears otherwise nothing happens.
I want to display only the accordion which matches the searched text and hide unmatched .How can I do it here ?
script
jQuery("#query").keyup(function () {
var filter = jQuery(this).val();
jQuery("#accordion").each(function () {
if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
jQuery(this).hide();
} else {
jQuery(this).show()
}
});
});
html
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

Your html structure are missing some tags . Then you can iterate through your [data-toggle] element and if match found hide closest card from that elements.
Demo Code :
jQuery("#query").keyup(function() {
var filter = jQuery(this).val().toLowerCase(); //get text
//loop through `a` tag
jQuery("#accordion [data-toggle]").each(function() {
if (jQuery(this).text().toLowerCase().trim().indexOf(filter) < 0) {
jQuery(this).closest(".card").hide(); //hide closest card
} else {
jQuery(this).closest(".card").show()
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="text" id="query">
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>
</div>
</div>
</div>

This should be easy. its a little mistake that you did.
jQuery("#query").keyup(function () {
var filter = jQuery(this).val().toLowerCase();
// Search function return 0 when it dose not find anything.
// and the Regexp should be using g instead of i so the problem with casesensetive should be solved.
jQuery("#accordion .card-body .col-3").each(function () {
var text = jQuery(this).text().toLowerCase();
if (text.indexOf(filter) == -1) {
jQuery(this).hide();
} else {
jQuery(this).show();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="query" >
<div class="crollable">
<div id="accordion">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" data-target="#collapse1" aria-expanded="false">Text</a>
</div>
<div id="collapse1" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse2" data-target="#collapse1" aria-expanded="false">Text2</a>
</div>
<div id="collapse2" class="collapse" data-parent="#accordion">
<div class="card-body">
<div class="col-3">value2</div>
</div>
</div>

mouse over on list item will target the text of paragraph

Below is my html where i want to target the element id first when clicking on the list element demo similarly targeting the element id second when clicking on the list element demo2 and so on . is it doable by using javascript mouseover function . mouse out function should not display any text . I need my text display only when mouse is hovered on the list item
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo">
<strong>test1</strong>
</li>
<li id="demo2">
<strong>test2</strong>
</li>
<li id="demo3">
<strong>test3</strong>
</li>
<li id="demo4">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>

You can querySelectorAll to get all the required li and p elements. Then you need to iteerate over li_arr and add mouseover event listener to each li. Since their (li and p elements) numbers are equal, you can directly use the index to target the p.
once: true will make sure, event listener doesn't fire again, after firing for 1st time. Without any mouseout, the changes made to p will be retained.
let li_arr = document.querySelectorAll(".slider-controls ul li")
let p_arr = document.querySelectorAll(".slider-slide-body p");
li_arr.forEach((li, index) => {
li.addEventListener("mouseover", () => {
p_arr[index].style.display = "block"; //Add whatever style you want here
}, {
once: true
})
});
.slider-slide-body p {
display: none;
}
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo">
<strong>test1</strong>
</li>
<li id="demo2">
<strong>test2</strong>
</li>
<li id="demo3">
<strong>test3</strong>
</li>
<li id="demo4">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>

I added data-effects to your li elements. it has the id of the object you wont to effect something.
So getting this id you can apply what you wanto to this object.
i used Jquery in this example.
Try this Running the code and let me know.
$('li').on('mouseover',function(){
// some logs for better understand...
//console.log($(this).attr("id"));
//console.log($(this).data("effects"));
//getting the id of the object to effect, from the html object where the mouse is on over
eid = $(this).data("effects");
//do something to object , for example change the color...
$(eid).css("color","red");
});
$('li').on('mouseout',function(){
eid = $(this).data("effects");
//do something to object , for example restore the orig color...
$(eid).css("color","black");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section-body">
<div class="slider-details">
<div class="slider-controls">
<ul>
<li id="demo" data-effects="#first">
<strong>test1</strong>
</li>
<li id="demo2" data-effects="#second">
<strong>test2</strong>
</li>
<li id="demo3" data-effects="#third">
<strong>test3</strong>
</li>
<li id="demo4" data-effects="#fourth">
<strong>test4</strong>
</li>
</ul>
</div>
<div class="slider-clip">
<div class="slider-slides">
<div class="slider-slide">
<h4 class="slider-slide-title">
test1
</h4>
<div class="slider-slide-body">
<p id="first">this is para one</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test2
</h4>
<div class="slider-slide-body">
<p id="second">this is para2</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test3
</h4>
<div class="slider-slide-body">
<p id="third">this is para3</p>
</div>
</div>
<div class="slider-slide">
<h4 class="slider-slide-title">
test4
</h4>
<div class="slider-slide-body">
<p id="fourth">this is para4</p>
</div>
</div>
</div>
</div>
</div>
</div>

jquery to hide accordion header/title

I have a template that I'm creating for colleagues to use in a WYSIWYG editor (am a teacher) with an accordion so they can easily add content to each one of them. It will have surplus headers/content for colleagues to use but that doesn't show any that has something like "title_name" as the text of the header.
The HTML is:
<div class="accordion">
<div class="card">
<div class="card-header" data-toggle="collapse">
<h2 class="card-title">
Accordion 1
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 1 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 2
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 2 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
Accordion 3
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 3 of 4 content here.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title">
title_name
</h2>
</div>
<div class="collapse">
<div class="card-body">
<p>Insert Accordion 4 of 4 content here.</p>
</div>
</div>
</div>
</div>
The jquery that I have is
$(".card-header").each(function(){ ($(this).text() === "title_name") ? $(this).hide() : $(this).show()});
Help will be greatly appreciated :)

You can use :contains of jquery. Since you are having h2 tag inside div of class card-header, jquery is not able to get the text of title_name. I verified this code should work.
$("div.card-header:contains(title_name)").hide();

jQuery. Bootstrap wizard not going to next step

I am using a bootstrap wizard but when you click on the next step, it's not going forward .
I am trying to make it go all the way and enable the previous once it reaches the end.
For some reason its not working correctly
my FIDDLE
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('ul.setup-panel li.active a').trigger('click');
$('#activate-step-2').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-2"]').trigger('click');
$(this).remove();
})
$('#activate-step-3').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-3"]').trigger('click');
$(this).remove();
})
});

First: you missed the next buttons in your html like:
<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
If you need to cycle both on the container and setup you can implement this behavior in one of the two container and make the other to follow the first one.
I rearranged your code so that you can cycle in a cyclic way (updated fiddle here).
If, instead, you want to cycle only on the setup you may consider a new event: clickwiz instead of click.
The snippet:
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide().eq(0).show();
navListItems.on('click', function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active').addClass('disabled');
allWells.hide();
if ($item.next('li').length == 0) {
//
// for cyclic: go back to first ele
//
navListItems.eq(0).closest('li').removeClass('disabled').addClass('active');
allWells.eq(0).show();
} else {
$item.next('li').removeClass('disabled').addClass('active');
$target.next('div').show();
}
}
});
$('[id^="activate-step-"]').on('click', function(e) {
var href = '#' + $(this).closest('.setup-content').attr('id');
$('ul.setup-panel li a[href="' + href + '"]').trigger('click');
})
});
body{
margin-top:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row form-group">
<div class="col-xs-12">
<ul class="nav nav-pills nav-justified thumbnail setup-panel">
<li class="active"><a href="#step-1">
<h4 class="list-group-item-heading">Step 1</h4>
<p class="list-group-item-text">First step description</p>
</a></li>
<li class="disabled"><a href="#step-2">
<h4 class="list-group-item-heading">Step 2</h4>
<p class="list-group-item-text">Second step description</p>
</a></li>
<li class="disabled"><a href="#step-3">
<h4 class="list-group-item-heading">Step 3</h4>
<p class="list-group-item-text">Third step description</p>
</a></li>
<li class="disabled"><a href="#step-4">
<h4 class="list-group-item-heading">Step 4</h4>
<p class="list-group-item-text">Fourth step description</p>
</a></li>
</ul>
</div>
</div>
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1> STEP 1</h1>
<button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 2</h1>
<button id="activate-step-3" class="btn btn-primary btn-lg">Activate Step 3</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 3</h1>
<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-4">
<div class="col-xs-12">
<div class="col-md-12 well text-center">
<h1 class="text-center"> STEP 4</h1>
<button id="activate-step-1" class="btn btn-primary btn-lg">Activate Step 1</button>
</div>
</div>
</div>
</div>

Change url based onanother link in jQuery

I need to make second url same as first url using jQuery. Please see my html code below. It is a list of divs and as.
<div class="text-center">
<h5 class="category">No need to change this url </h5>
<div class="tx-div small"></div>
<p class="name">Url</p>
<span class="price">
<div class="add-to-cart-button">
Change this to url1
</div>
</div>
<div class="text-center">
<h5 class="category">No need to change this url </h5>
<div class="tx-div small"></div>
<p class="name">Url</p>
<span class="price">
<div class="add-to-cart-button">
Change this to url1
</div>
</div>
Please help

Updated code:
$('.text-center').each(function(){
$('a:eq(2)', this).attr('href', $('a:eq(1)', this).attr('href'));
});
Try this code:
$('.fc').each(function(){
$('.sec', this).attr('href', $('.fic', this).attr('href'));
});

Try this code, Here is working example try....
$(".text-center").find('.url1').each(function( i ) {
var url1 = $(this).attr('href');
$(this).parent().find('.url2').attr('href',url1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="text-center">
<h5 class="category">No need to change this url </h5>
<div class="tx-div small"></div>
<a class="url1" href="url1"><p class="name">Url</p></a>
<span class="price">
<div class="add-to-cart-button">
Change this to url1
</div>
</span>
</div>
<div class="text-center">
<h5 class="category">No need to change this url </h5>
<div class="tx-div small"></div>
<a class="url1" href="url11111"><p class="name">Url</p></a>
<span class="price">
<div class="add-to-cart-button">
Change this to url1
</div>
</span>
</div>

Categories

Resources