I'm a newbie in web development and am now starting a project using bootstrap and jquery as a start.
I might be mistaken in my understanding of web development, but I'll try asking this anyway:
I have a list-group of cards. Each card as an item (just li, not using list-group-item to preserve card style).
I want to be able to dynamically insert new cards. Currently I'm manually adding the HTML code using js/jquery. For example:
let card_class = document.createElement("div");
card_class.setAttribute("class", "card mx-3 my-5");
card_class.setAttribute("name", "card-class");
let row_class = document.createElement("div");
row_class.setAttribute("class", "row no-gutters bg-dark text-white-50");
row_class.setAttribute("name", "row-class");
let profile_class = '<div class="col-auto">'+
'<img src="profile.jpg" style="height:50px;" class="img-fluid" alt=""></img></div>';
let col_class = document.createElement("div");
col_class.setAttribute("class", "col");
col_class.setAttribute("name", "col-class");
let card_col_class = document.createElement("div");
card_col_class.setAttribute("class", "card-block px-2");
card_col_class.setAttribute("name", "card-col-class");
let card_footer = '<div class="card-footer"><span class="btn-toolbar btn-group-sm px-5">'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle" data-toggle="modal" data-target="#post-comment"><i class="far fa-comment-alt"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="fas fa-retweet"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-heart"></i></button>'+
'<button type="button" class="btn text-white-50 mx-auto rounded-circle"><i class="far fa-share-square"></i></button></span></div>';
//get the tweet info (object parameter) and put it in the header and body of the card.
let username = tweet_info.username;
let tweet = tweet_info.tweet;
let card_header = '<div class="card-header">#'+username+'</div>';
let card_body = '<div class="card-body" style="white-space: pre-wrap;" onclick="setInfo(this)" type="button"'+
'data-toggle="modal" data-target="#tweet-id">'+tweet+"</div>";
//now actually add the card to the html.
$("div[name='main-content'").prepend(card_class);
$("div[name='card-class']").append(row_class);
$("div[name='row-class']").append(profile_class);
$("div[name='row-class']").append(col_class);
$("div[name='col-class']").append(card_col_class);
$("div[name='card-col-class']").append(card_header);
$("div[name='card-col-class']").append(card_body);
$("div[name='card-col-class']"]).append(card_footer);
What I wondered is, how can I simplify my code.
I thought, is it possible to for example take an li item, duplicate it and just change it a bit?
Edit:
For example, the HTML code to duplicate (same as the js code):
<li class="card">
<div class="row no-gutters bg-dark text-white-50">
<div class="col-auto">
<img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<div class="card-header">#Username</div>
<div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
<div class="card-footer">
<span class="btn-toolbar btn-group-sm px-5">
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
</span>
</div>
</div>
</div>
</div>
</li>
You can use .clone() to clone your html element then use .find() to change any element inside this cloned element and finally append same to your ul using appendTo method.
Demo Code :
$("#cloned").on("click", function() {
var cln = $("ul li:first").clone() //cloned first li
cln.find(".link").text("something") //use find and change username
cln.find(".card-body").text("something something...") //use find and change content
$(cln).appendTo($("ul")) //append to ul
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="card">
<div class="row no-gutters bg-dark text-white-50">
<div class="col-auto">
<img src="profile.jpg" style="height:50px;" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<div class="card-header">#Username</div>
<div class="card-body" onclick="setInfo(this)" type="button" data-toggle="modal" data-target="#tweet-id">Content</div>
<div class="card-footer">
<span class="btn-toolbar btn-group-sm px-5">
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-comment-alt"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle" data-toggle="collapse" data-target="#comments"><i class="far fa-comments"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="fas fa-retweet"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-heart"></i></button>
<button type="button" class="btn mx-auto text-white-50 rounded-circle"><i class="far fa-share-square"></i></button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<button id="cloned">Clone Me</button>
Related
I'm trying to print data from my modal. The modal displays the proper value, but when I click the print button, the first data in my database appears.
Flow:
Admin Panel
Table containing the user data
Button of Modal
Modal with Print button
innerHTML for printing
I can't figure out what's wrong. Can someone help me?
<script type="text/javascript">
function printDiv(){
var divToPrint=document.getElementById('cts-card');
var newWin=window.open('','_blank','height=600,width800');
newWin.document.open();
newWin.document.write('<html><title>ISKULTrace</title><style>.card-title{font-size:20px;}</style><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){window.close();},750);
}
</script>
MODAL:
<button type="button" class="badge icon-left btn-dark" data-bs-toggle="modal"
data-bs-target="#qr<?php echo $row['u_id'];?>">
<i class="fa fa-qrcode" aria-hidden="true"></i> QR Code
</button>
<!--Dark theme Modal -->
<div class="modal fade text-left" id="qr<?php echo $row['u_id'];?>" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel150" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
role="document">
<div class="modal-content">
<div class="modal-header bg-dark white">
<span class="modal-title" id="myModalLabel150">Card</span>
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<div class="modal-body">
<div id="cts-card" style="overflow: auto;" align="center">
<div class="card">
<div class="card-content">
<br>
<div class="card-body">
<table class="table table-bordered mb-0" style="width: 3.5in;border-collapse: collapse;">
<tr>
<td align="center" style="padding-top:5%;">
<img class="mx-auto d-block" src="../assets/images/logo/logo.png" alt="Logo" style="width: 70%;">
</td>
</tr>
<tr>
<td align="center">
<img class="img-fluid w-100" src="../temp/<?php echo $row['qr']; ?>.png" alt="Contact Tracing Card">
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary"
data-bs-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block"><i class="fa fa-times" aria-hidden="true"></i> Close</span>
</button>
<button type="button" class="btn btn-dark ml-1" id="print-card" data-bs-dismiss="modal" onclick="printDiv();">
<span class="d-none d-sm-block"><i class="fa fa-print" aria-hidden="true"></i> Print</span>
</button>
</div>
</div>
</div>
</div>
I am trying to make a looking like Wordpress cms (backend part) thing. It is possible to add multiple, exactly the same, header elements where a user can write inside and safe. Creating/adding all works. Dragging, dropping and sorting also works (jquery-ui). I already made all exactly the same heading elements have an diffrent ID using var "index"). The problem is that I cant get the id of the heading element I clicked. I need this so I ONLY change color, font-size and text-color to the one I clicked, and not to all of them... I think all my code is getting very messy and need to ask you guys because I am stuck :(
Like the code is right now, it works perfectly for just 1 of the draggable objects. I want it to work for mutliple.
Here is my code:
<script>
var index = 0;
$(function() {
$("#sortable").sortable({
revert: false,
});
$(".draggableElement").draggable({
connectToSortable: "#sortable",
revert: "invalid",
//helper: "clone"
helper: function(){
$("#removeDiv").remove();
var element = '\
<div id="containerHeader_'+index+'" class="bg-light w-100 mb-3 h-auto">\
<div class="border-bottom p-2 d-flex">\
<button id="firstHeader" onclick="headingOne()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H1</button>\
<button id="secondHeader" onclick="headingTwo()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H2</button>\
<button id="thirdHeader" onclick="headingThree()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H3</button>\
<button id="fourthHeader" onclick="headingFour()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H4</button>\
<button id="fifthHeader" onclick="headingFive()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H5</button>\
<button id="sixtHeader" onclick="headingSix()" class="mr-2 font-weight-500 cursor-pointer bg-transparent border-0 outline-none">H6</button>\
</div>\
<input id="headingInput" class="form-control border-0 shadow-none testen-class large-input" placeholder="Heading"></input>\
</div>';
index ++;
return element;
}
});
});
{# $(document).ready(function() {
$("#firstHeader").click(function() {
alert("clik");
});
}); #}
function headingOne() {
$("#headingInput").css('font-size', '3rem');
$(".font-weight-500").css('color', 'black');
$("#firstHeader").css('color', '#0069d9');
//console.log("containerHeader_"+index);
//$("containerHeader_"+index).find("#firstHeader").css('color', '#0069d9');
}
//function headingTwo, three, four ... Exactly the same
</script>
The blue buttons in the left top are draggable, after the drag they transform into the "Heading" part with H1 H2 H3 etc. I dragged 2 Heading elements into the page. Only the first one is always working... Hope this edit helps to make it more clear.
Here is the image:
This is my HTML, of the draggable buttons.
<div class="border-top d-flex justify-content-between flex-wrap pt-3 px-3">
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Header">
<i class="fas fa-heading fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Text">
<i class="fas fa-align-left fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Image">
<i class="far fa-image fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Audio">
<i class="fas fa-volume-up fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Link">
<i class="fas fa-link fa-2x fa-fw"></i>
</div>
</div>
<div class="text-center pb-3 flex-30 draggableElement">
<div class="btn btn-primary custom-padding-button" data-toggle="tooltip" data-placement="top" title="Video">
<i class="fas fa-video fa-2x fa-fw"></i>
</div>
</div>
</div>
//Sortable
<div class="container bg-secondary input-group p-3">
<div class="container gray input-group w-100" id="testContainer">
<div class="w-100">
<input class="form-control shadow-none large-input remove-border mb-3" placeholder="Titel"></input>
</div>
<div class="w-100">
<input class="form-control shadow-none remove-border mb-3" placeholder="Subtitel"></input>
</div>
<div class="w-100">
<textarea class="form-control shadow-none remove-border mb-3" placeholder="Samenvatting"></textarea>
</div>
<div class="w-100">
<input type="text" data-role="tagsinput"/>
</div>
</div>
<div id="sortable" class="py-3 w-100">
<div id="removeDiv" class="text-center text-white">Drag in here</div>
</div>
</div>
you need to convert button id to class.
<button id="firstHeader"
to
<button class="firstHeader"
and script becomes
$(".firstHeader").click(function() {
alert($(this).parents(".bg-light").attr("id"));
});
Here is the keyboard I'd like to use:
<div id='key1' class="container my-3" id='first'>
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '1';">1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '2';">2</button>
<button type="button" class="col-sm btn btn-primary py-3" onclick="document.getElementById('empid').value=document.getElementById('empid'). value + '3';">3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '4';">4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '5';">5</button>
<button type="button" class="col-sm btn btn-primary py-3 " onclick="document.getElementById('empid').value=document.getElementById('empid').value + '6';">6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '7';">7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '8';">8</button>
<button type="button" class="col-sm btn btn-primary py-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '9';">9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value.slice(0, -1);">Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" onclick="document.getElementById('empid').value=document.getElementById('empid').value + '0';">0</button>
</div>
</div>
As you can see, right now, the inputs get directed to empid only. I'd like to be able to switch to another input field (id='input2') after 6 characters have been typed into empid.
I'm open to using jQuery/Javascript but have no experience with them. Any and all help is appreciated.
Change data-target-input to target your element #input-id or .form-control
i.e. <div data-target-input="#my_input_id"> or <div data-target-input=".my_input_class">
$('[data-toggle="keybrd"]').each(function(){
var btn = $(this).find('.btn'), input = $($(this).data('target-input'));
btn.on('click',function(e){
e.preventDefault();
var val = $(this).text();
if(val=='Delete'){
input.val(input.val().slice(0,-1));
}else{
input.val(input.val()+val);
}
});
});
#import url('https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm p-0 pt-3">
<input class="form-control form-control-lg" type="text" id="empid">
</div>
</div>
</div>
<div class="container my-3" id='first' data-toggle="keybrd" data-target-input="#empid">
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">2</button>
<button type="button" class="col-sm btn btn-primary py-3">3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">5</button>
<button type="button" class="col-sm btn btn-primary py-3">6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">8</button>
<button type="button" class="col-sm btn btn-primary py-3">9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3">Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">0</button>
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-sm p-0 pt-3">
<input class="form-control form-control-lg my-input" type="text">
</div>
</div>
</div>
<div class="container my-3" id='second' data-toggle="keybrd" data-target-input=".my-input">
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">2</button>
<button type="button" class="col-sm btn btn-primary py-3">3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">5</button>
<button type="button" class="col-sm btn btn-primary py-3">6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3">7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">8</button>
<button type="button" class="col-sm btn btn-primary py-3">9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3">Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3">0</button>
</div>
</div>
For what you are trying to do I would recommend against JQuery and consider using a simple Javascript framework like Vue to bind data to your inputs. If you are going to use Jquery I would do something like the following.
$(document).ready(function(){
var currentInput = 0;
var totalInputs = 2
$('.number-input')[currentInput].focus();
function nextInput(){
console.log(`currentInput: ${currentInput}`);
if(currentInput < totalInputs - 1){
currentInput++;
$('.number-input')[currentInput].focus();
console.log(`newinput: ${currentInput}`);
} else if(currentInput >= totalInputs -1){
currentInput = 0;
$('.number-input')[currentInput].focus();
console.log(`newinput: ${currentInput}`);
}
}
$('.enter-input').click(nextInput);
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class='container'>
<div class='form-inputs row'>
<div class="input-group mb-3">
<span class='input-group-prepend bg-primary p-2'>First</span>
<input class='number-input' type='number'>
</div>
<div class="input-group mb-3">
<span class='input-group-prepend bg-primary p-2'>Second</span>
<input class='number-input' type='number'>
</div>
</div>
<div id='key1' class="my-3" id='first'>
<div class="row btn-group-lg mb-3" role='group'>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >1</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >2</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >3</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >4</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >5</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >6</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >7</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >8</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >9</button>
</div>
<div class="row btn-group-lg mb-3">
<button type="button" class="col-sm btn btn-danger py-3 mr-3" >Delete</button>
<button type="button" class="col-sm btn btn-primary py-3 mr-3" >0</button>
<button type="button" class="col-sm btn btn-success py-3 mr-3 enter-input" >Enter</button>
</div>
</div>
</div>
JQuery can retrieve a collection of tags which can allow you to iterate over them. I gave a common class name to the number inputs I want to iterate over and use that class name to grab a list of the elements so I can simply call .focus on the element.
I have some navigation buttons with fontawesome icons. 'Previous' has a left facing arrow. 'Next' has a right facing arrow. When left in their original order everything works as expected. When I rearrange the buttons, the 'Prev' left arrow icon flips to be facing right.
I have tried using different icons (chevron-left/right) and I get the same behavior.
Is this normal behavior that I am not aware of, or a bug, or something else entirely?
Order 1 :
<button v-if="showPrev()" class="col-md-2 mb-3 btn btn-outline-info" #click="prev()"><i class="icon-large fas fa-arrow-left"></i> PREV </button>
<!-- Spacer --><div v-else class="col-md-2"></div>
<button v-if="showSubmit()" class="col-md-2 mb-3 btn btn-success" #click="next()"> SUBMIT <i class="icon-large fas fa-check"></i></button>
<button v-else-if="showFinish()" class="col-md-2 mb-3 btn btn-outline-danger" #click="finish()"> FINISH <i class="icon-large fas fa-check"></i></button>
<!-- Spacer --><div v-else class="col-md-2"></div>
<button v-if="showNext()" class="col-md-2 mb-3 btn btn-outline-info" #click="next()"> NEXT <i class="icon-large fas fa-arrow-right"></i></button>
<!-- Spacer --><div v-else class="col-md-2"></div>
Output 1
Order 2 :
<button v-if="showPrev()" class="col-md-2 mb-3 btn btn-outline-info" #click="prev()"><i class="icon-large fas fa-arrow-left"></i> PREV </button>
<!-- Spacer --><div v-else class="col-md-2"></div>
<button v-if="showNext()" class="col-md-2 mb-3 btn btn-outline-info" #click="next()"> NEXT <i class="icon-large fas fa-arrow-right"></i></button>
<!-- Spacer --><div v-else class="col-md-2"></div>
<button v-if="showSubmit()" class="col-md-2 mb-3 btn btn-success" #click="next()"> SUBMIT <i class="icon-large fas fa-check"></i></button>
<button v-else-if="showFinish()" class="col-md-2 mb-3 btn btn-outline-danger" #click="finish()"> FINISH <i class="icon-large fas fa-check"></i></button>
<!-- Spacer --><div v-else class="col-md-2"></div>
Output 2
MCVE attempt :
(Font-awesome icons aren't displaying in SO snippets making reproduction impossible. If I'm missing something, comment and I'll edit)
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="card p-0 mt-5">
<div class="row pt-3">
<div class="col-md-3"></div>
<button class="col-md-2 mb-3 btn btn-outline-info"><i class="icon-large fas fa-arrow-left"></i> PREV </button>
<button class="col-md-2 mb-3 btn btn-outline-info"> NEXT <i class="icon-large fas fa-arrow-right"></i></button>
<button class="col-md-2 mb-3 btn btn-success"> SUBMIT <i class="icon-large fas fa-check"></i></button>
<div class="col-md-3"></div>
</div>
</div>
The problem is with the 'vue-if' statements. When a vue-if fails and the button is not displayed, the next button to be rendered is displaying the icon that wasn't displayed because of the vue-if.
Simply wrapping the button/icon combo in a div and performing the vue-if check there solves the problem.
<div v-if="showPrev()" class="col-md-2 mb-3 ">
<button class="btn btn-lg btn-outline-info" #click="prev()"><i class="icon-large fas fa-arrow-left"></i> PREV </button>
</div>
I have a page with posts, comments and replies. Posts can have many comments, and each comment can have many replies - similar to the way Facebook works.
I am adding these dynamically via an ajax call to each post.
At the end of each list of replies there is a reply form. The problem I am having is when a new reply is added to a comment, I am unable to insert the reply before the reply form - which is the last child of the li.
Here is my js:
var $div = $('.js-post-show');
function _addComment(comment) {
var tplText = $('#js-comment-template').html();
var tpl = _.template(tplText);
var html = tpl(comment);
$div.find('.js-comment-list')
.append($.parseHTML(html));
}
function _addReply(reply, commentId) {
var tplText = $('#js-reply-template').html();
var tpl = _.template(tplText);
var html = tpl(reply);
$div.find("li[data-comment-id='" + commentId + "']")
.append($.parseHTML(html));
}
function _loadReplyForm(comment) {
var tplText = $('#js-reply-form-template').html();
var tpl = _.template(tplText);
var html = tpl(comment);
$div.find("li[data-comment-id='" + comment.id + "']")
.append($.parseHTML(html));
}
And here is my HTML:
<li class="list-group-item py-4 comment-list" data-comment-id="871">
<div class="media">
<div class="avatar avatar-sm">JD</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">John Doe</span>
</div>
<p>
Comment here...
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-871" data-toggle="collapse" aria-expanded="true" aria-controls="create-reply-871">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-comment" data-url="/api/comments/871/toggle-comment-like" data-is-liked="1">
<span class="fas fa-thumbs-up"></span>
<span class="js-like-comment-count">1</span>
</button>
</div>
</div>
</div>
</div>
<div class="media">
<div class="avatar avatar-sm">JD</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">Jane Doe</span>
</div>
<p>
Reply here...
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-24" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-24">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/24/toggle-reply-like" data-is-liked="0">
<span class="far fa-thumbs-up"></span>
<span class="js-like-reply-count">0</span>
</button>
</div>
</div>
</div>
</div>
<div class="media">
<div class="avatar avatar-sm">RS</div>
<div class="media-body">
<div class="mb-2">
<span class="h6 mb-0">Rob Smith</span>
</div>
<p>
Another reply
</p>
<div class="d-flex align-items-center">
<div class="mr-2">
<button class="btn btn-sm btn-outline-primary" data-target="#create-reply-25" data-toggle="collapse" aria-expanded="false" aria-controls="create-reply-25">Reply</button>
<button class="btn btn-sm btn-outline-primary js-like-reply" data-url="/api/replies/25/toggle-reply-like" data-is-liked="0">
<span class="far fa-thumbs-up"></span>
<span class="js-like-reply-count">0</span>
</button>
</div>
</div>
</div>
</div>
<div class="media js-create-reply collapse show" id="create-reply-871" style="">
<div class="media-body">
<form method="post" class="card-body js-create-reply-form needs-validation" novalidate="novalidate" data-url="/api/replies/871">
<div class="form-group"><textarea id="reply" name="reply" required="required" class="from-control-lg js-create-reply-textarea form-control" rows="4" placeholder="Type your reply here"></textarea></div>
<div class="d-flex align-items-center">
<button type="submit" class="btn btn-success mr-3 js-create-reply-button">Submit your reply</button>
Cancel
</div>
</form>
</div>
</div>
</li>
I have tried insertBefore() but without success, any advice would be greatly appreciated.
You can use insertAfter() jquery function : http://api.jquery.com/insertafter/
also you target the last reply using :last in your selector like
$(replyHtml).insertAfter("#js-reply-template li:last");