I want to insert a div inside the div having id = newDiv when the <button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button> is clicked. How can I do this with jQuery? I'm using after() but it only inserts the div after the button.
actually, I want to do this dynamically as there could be multiple sections like this
here is my HTML code
<div class="row border-bottom g-3 player-song-detail">
<div class="col-md-1 col-2 my-auto text-center">
<!-- play button -->
<button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button>
<input type="text" value="Song Title" placeholder="write song title here" hidden>
</div>
<div class="col-md-4 col-8 my-auto" id="newDiv">
<!-- div should be inserted here -->
</div>
</div>
here is my jQuery code
$(".songBtn").click(function(){
$( this ).after( "<div>Test Div</div>" );
});
use append instead of after
$(".songBtn").click(function(){
$( "#newDiv" ).append( "<div>Test Div</div>" );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row border-bottom g-3 player-song-detail">
<div class="col-md-1 col-2 my-auto text-center">
<!-- play button -->
<button class="songBtn btn"><i class="fa fa-play fa-lg playbtn"></i>btn</button>
<input type="text" value="Song Title" placeholder="write song title here" hidden>
</div>
<div class="col-md-4 col-8 my-auto" id="newDiv">
<!-- div should be inserted here -->
</div>
</div>
$('.songBtn').click(function(){
$('#newDiv').append('<div></div>');
})
#newDiv{
border:1px solid red;
}
#newDiv div{
background:orange;
border:1px solid red;
width:10px;height:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newDiv">This is div with ID newDiv</div>
<button class="songBtn btn">this is the button</button>
Related
When I am putting the whole card into the form tag in HTML then the js is not working please give me a solution. I want to put form because the enter key of the keyboard is not working. and I want that to work, and in future, i want to save the conversation into the database model , the backend is made up of Django.
here is my html:
<section>
<div class="container py-5">
<div class="row d-flex justify-content-center">
<form>
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center p-3"
style="border-top: 4px solid blue; background-color:#3792cd;" >
<h5 class="mb-0" style="text-align:center; color:white;">Your chatbot is here!
</h5>
<div class="d-flex flex-row align-items-center">
<i class="fa fa-minus me-3 text-muted fa-xs"></i>
<i class="fa fa-comments me-3 text-muted fa-xs"></i>
<i class="fa fa-times text-muted fa-xs"></i>
</div>
</div>
<div class="card-body" data-mdb-perfect-scrollbar="true" style="height: 440px;
overflow-y:auto">
<h5>Let's Chat<img style=""></h5>
<div id="chatbot">
</div>
</div>
<div class="card-footer text-muted d-flex justify-content-start align-items-
center p-3" style="text-align:center; background-color:#3792cd">
<div class="input-group mb-0">
<input type="text" class="form-control" id="textInput" name="userMessage"
placeholder="Type message"
aria-label="Recipient's username" aria-describedby="button-addon2" />
<button type="submit" id="buttonInput" style="padding-top: .55rem;">
Send<i class="fa fa-send" style="padding-left: 0.5em;"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
<section>
</form>
Here is my Java scripts:
function getUserResponse(){
var userText = $('#textInput').val();
var userHTML = "<div class='userhtml'><div class='img'><img style='width:36px'
src='https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375__340.png'/></div><div
class='userText'><span>"+userText+"</span></div></div>";
$('#textInput').val("");
$('#chatbot').append(userHTML);
$.get('/getResponse',{userMessage:userText}).done(function(data){
var returnedMessage = "<br/><div class='bothtml'><img style='width:46px'src=''/><p
class='botText'><span>"+ data +"</span/></p></div>";
$('#chatbot').append(returnedMessage);
})
}
$('#buttonInput').click(function(){getUserResponse();})
if you tell me how to store the conversation into the django model it will be really appriciated too
Thankyou!
I'm a little overtaxed right now. I want to copy the last div with the class .recipe-options-line and paste it behind the last div with the class .recipe-options-line. That works so far.
I have to make some changes to the element before inserting the div. How can I do that?
i want to delete any entries in the textarea that are present in the copied element.
i want to replace in the copied element the number in the textarea (name="recipeOptions[0][number]") by the content of the variable RecipeOptionNumber.
i want to replace in the copied element the last number of the data-limit-target="unique-10-1" and of the span id="unique-10-1" in the last div with the content of the variable RecipeOptionNumber, too.
Is that possible? Or do I have to look for another solution? Can someone help me?
HTML:
<div class="col-md-12" id="recipe-options-div">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" name="recipeOptions[0][number]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" name="recipeOptions[0][unit]" rows="1"></textarea>
<i class="fa fa-dot-circle-o"><!-- icon --></i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" name="recipeOptions[0][name]" rows="1"></textarea>
<textarea data-limit-target="unique-10-1" class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment"><!-- icon --></i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption"><i class="glyphicon glyphicon-plus"></i>option</a>
</div>
JS:
var RecipeOptionNumber = 2;
$(document).on("click", "#addRecipeOption", function () {
$(".recipe-options-line:last").clone().insertAfter("div.recipe-options-line:last");
RecipeOptionNumber ++;
});
Is that possible? Or do I have to look for another solution? Can someone help me?
Yes, of course it's possible! A good solution here would be to create a blank template for recipe options and a re-usable function to add them programmatically. See example below with comments:
$(function() {
var recipeOptionsDiv = $("#recipe-options-div");
var RecipeOptionNumber = 0;
// Re-usable function to add recipe options
function addRecipeOption() {
// A blank recipe <div>
var newRecipe = $("#recipe-template-wrapper .recipe-options-line").clone();
// Iterate through each [data-recipe] element and set its [name] attribute accordingly
newRecipe.find("[data-recipe]").each(function() {
var recipeOption = $(this).attr("data-recipe");
$(this).attr("name", "recipeOptions[" + RecipeOptionNumber + "][" + recipeOption + "]");
});
// Set [data-limit-target] to RecipeOptionNumber + 1
newRecipe.find("[data-limit-target]").attr("data-limit-target", "unique-10-" + (RecipeOptionNumber + 1));
// Insert the new HTML
recipeOptionsDiv.append(newRecipe);
// Increment recipe counter
RecipeOptionNumber++;
}
// Add click event listener for Add Option button
$("#addRecipeOption").click(addRecipeOption);
// Add the first recipe option on page load
addRecipeOption();
});
#addRecipeOption {
background-color: tomato;
cursor: pointer;
display: table;
margin-bottom: 5px;
margin-top: 10px;
min-width: 100px;
padding: 10px;
text-align: center;
}
#recipe-template-wrapper {
display: none;
}
.recipe-options-line {
border-bottom: 1px solid;
margin-bottom: 15px;
padding-bottom: 10px;
}
<!-- Add option button -->
<div class="text-center mb-15">
<a class="m-0 btn btn-outline btn-shadow-1 btn-info hvr-underline-from-left btn-sm btn-block" id="addRecipeOption">
<i class="glyphicon glyphicon-plus"></i>option
</a>
</div>
<!-- Recipe option divs will be appended here -->
<div class="col-md-12" id="recipe-options-div"></div>
<!--
Hidden recipe option template HTML
Elements' custom data-* attributes will be used to set their name attributes
-->
<div id="recipe-template-wrapper">
<div class="recipe-options-line">
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Anzahl"></div>
<textarea class="hide" data-recipe="number" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-3">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Einheit"></div>
<textarea class="hide" data-recipe="unit" rows="1"></textarea>
<i class="fa fa-dot-circle-o">
<!-- icon -->
</i>
<span class="maximum-limit"></span>
</div>
</div>
<div class="col-md-6">
<div class="fancy-form">
<div contenteditable="true" class="form-control limit-textarea autocomplete-textarea" data-placeholder="Zutatenname"></div>
<textarea class="hide" data-recipe="name" rows="1"></textarea>
<textarea data-limit-target class="limit-textarea hide recipe-options-textarea" data-maxlength="250"></textarea>
<i class="fa fa-comment">
<!-- icon -->
</i>
<span id="unique-10-1" class="maximum-limit"></span>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Well your are missunderstanding th concept och memory.
When you clon the items. make change to it before insertit
Example.
$("button").click(function(){
var inputCloned = $("input").last().clone();
// make changes
inputCloned.val("input nr " + $("input").length)
// add the cloned input to the body
$("body").append(inputCloned)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Clone last item</button>
<input type="text" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<title>Chat Test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div id="AVAInteractArea" class="col mb-4 bg-dark justify-content-center"
style="max-height: 25rem; overflow-y: auto">
<div class="d-flex justify-content-start mb-4">
<h5>
<span class="badge badge-primary">AVA</span>
Hi, how are you?
</h5>
</div>
<div class="d-flex justify-content-end mb-4">
<h5>
Hi, I am good about you?
<span class="badge badge-secondary">You</span>
</h5>
</div>
<script>
function addDiv(parent_div) {
var div = document.createElement('div');
var parent = document.getElementById(parent_div);
div.innerHTML = '<p>TEST</p>';
parent.appendChild(div);
}
var button = document.getElementById('AVAInteractTypeSubmit');
if (button) {
button.addEventListener('click', function () {
// change dynamically your new div
addDiv('AVAInteractArea');
});
}
</script>
</div>
<form class="col-lg-6 offset-lg-3 mb-5">
<div class="row form-group justify-content-center">
<input id="AVAInteractType" type="text"
placeholder="Ask AVA about law"
class="form-control-lg border-white"
style="outline: none"
autofocus="autofocus">
<button id="AVAInteractTypeSubmit" class="btn-lg btn-primary" style="outline: none">Ask</button>
</div>
<button id="AVAInteractSpeak" class="btn-lg btn-primary" style="outline: none">Or speak to AVA</button>
</form>
</div>
</div>
</div>
</body>
</html>
I am trying to make it so that when I click the button with id="AVAInteractTypeSubmit", it adds a div to the parent div with id="AVAInteractArea". However, whenever I run this code, no such div appears to be added to the parent div. I don't know why it isn't working please help me. I don't want to use jQuery, I just want the Javascript code in the script tag above fixed.
Edit
Thank you #brk for fixing my problem. But now I want to do something different, I want to add everything to a function dedicated to adding the div inside the parent div, so I replaced all the code in the script tag with
function addUserAVAInteraction() {
var div = document.createElement('div');
var parent = document.getElementById('AVAInteractArea');
div.innerHTML = '<div class="d-flex justify-content-end mb-4"><h5>Hi, I am good about you?<span class="badge badge-secondary">You</span></h5></div>';
parent.appendChild(div);
}
And I added a attribute to the button, onclick="addUserAVAInteraction()". Whenever I click the button with id="AVAInteractTypeSubmit", it adds the div to the parent div but only for a second, then it immediately goes away. I need it like how it was working with #brk's solution, please help.
Default button type is submit. So on clicking the button it is refreshing. Add event.preventDefault
function addDiv(parent_div) {
var div = document.createElement('div');
var parent = document.getElementById(parent_div);
div.innerHTML = '<p>TEST</p>';
parent.appendChild(div);
}
var button = document.getElementById('AVAInteractTypeSubmit');
if (button) {
button.addEventListener('click', function(e) {
e.preventDefault();
// change dynamically your new div
addDiv('AVAInteractArea');
});
}
<div class="container">
<div class="row">
<div class="col">
<div id="AVAInteractArea" class="col mb-4 bg-dark justify-content-center" style="max-height: 25rem; overflow-y: auto">
<div class="d-flex justify-content-start mb-4">
<h5>
<span class="badge badge-primary">AVA</span> Hi, how are you?
</h5>
</div>
<div class="d-flex justify-content-end mb-4">
<h5>
Hi, I am good about you?
<span class="badge badge-secondary">You</span>
</h5>
</div>
</div>
<form class="col-lg-6 offset-lg-3 mb-5">
<div class="row form-group justify-content-center">
<input id="AVAInteractType" type="text" placeholder="Ask AVA about law" class="form-control-lg border-white" style="outline: none" autofocus="autofocus">
<button id="AVAInteractTypeSubmit" class="btn-lg btn-primary" style="outline: none">Ask</button>
</div>
<button id="AVAInteractSpeak" class="btn-lg btn-primary" style="outline: none">Or speak to AVA</button>
</form>
</div>
</div>
</div>
my code is
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
//Here I want to add some html
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
When somebody clicks on addnewsticky I want to add html immediatly after that sticky,
Expected output
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
<h3>Hi this is added html</h3>
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
See newly added html <h3> tag
How to do that using jquery?
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().find('.stickyboard').html("some html");
}
but this is adding to the same class itself not after that class
You can insert it after the .stickyboard ancestor of the click target.
So
$(e.currentTarget).closest('.stickyboard').after("<h3>Hi this is added html</h3>");
You can use .after() also like:
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().after("some html");
}
I am looking to if a div is empty and my code works if the div looks like this with no white space, but I am using Smarty and want to show data if it is available. If the highlights class is empty then I want to show the no_highlights well.
If it helps the only content that will appear inside the highlights is <div class="form-group"> <!-- different content --> </div>
<div class="highlights">
{if $highlights}
{/if}
</div>
<i class="fa fa-plus"></i> Add Highlight <br>
<div class="well no_highlights">
<h4>No highlights found</h4>
<p>You have not yet added any highlights to this property</p>
<p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>
var highlight = '<div class="form-group"> <label for="highlight" class="col-sm-3 col-lg-2 control-label">Highlight:</label> <div class="col-sm-9 col-lg-3 controls"> <input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" placeholder="Highlight Name"> </div> <div class="col-sm-9 col-lg-7 controls"> <textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea> <i class="fa fa-plus"></i> Remove Highlight </div> </div>';
if(('.highlights')){
$('#add_highlight').hide();
$('#order_highlights').hide();
}else{
$('.no_highlights').hide();
}
$('.first_highlight').click(function(){
$('.no_highlights').hide();
$('#add_highlight').show();
$('#order_highlights').show();
$('.highlights').append(highlight);
});
$('#add_highlight').click(function(){
$('.highlights').append(highlight);
});
Try this,
Template
{if $highlights}
<div class="highlights">
</div>
{/if}
Jquery
if(! $('.highlights').length){
$('#add_highlight').hide();
$('#order_highlights').hide();
}else{
$('.no_highlights').hide();
}
Else you can choose any one from How to check if div element is empty
To check if a div element is empty refer here
Alternatively you should put a check in the template itself
<div class="highlights">
{if $highlights}
{/if}
</div>
<a href="#" class="pull-right showhouse-text {if $highlights}{else}hidden{/if}" id="add_highlight">
<i class="fa fa-plus"></i>Add Highlight
</a> <br>
<div class="well no_highlights {if $highlights}hidden{/if}">
<h4>No highlights found</h4>
<p>You have not yet added any highlights to this property</p>
<p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>
CSS:
.hidden{
display: none;
}