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" />
Related
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>
I just created a card-form(bootstrap) and in the form,
there are a plus icon and hidden contents(id=mycontent_1 with display: none). what I'm trying to do is listed as follows.
I tried to do the first one on my java-script but it's not working.
when I click plus icon, my function(toggler) should be executed and the icon would be hidden and my contents(text boxes and delete button) have to be visible.
similarly in opposite direction, when I click the delete button, my
contents(text boxes and a delete button) have to be invisible and the
plus icon should be visible.
need your kind helps for my two functions.
here are my codes for jsfiddle.
https://jsfiddle.net/Sanchez/aq9Laaew/219304/
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="cardHeader1" style="visibility: hidden;"> no name </div>
<div class="card-body">
<a href="#" class="btn btn-info btn-lg" onclick="toggler('myContent_1');">
<span class="glyphicon glyphicon-plus" id=icon1 onclick="toggler('myContent_1');"></span> Plus
</a>
<div id="myContent_1" class="card-title" style="display: none;" >
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Number</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Title</span>
</div>
<input type="text" id="title_1" name="title" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-tumblr"></i>
</span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="button" id="delBtn_1" class="btn btn-danger">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
function toggler(divId){
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
x.style.display = "none";
y.style.visibility = "visible";
$("#delBtn_" + tempId).show();
$("#" + divId).toggle();
}
To begin with you should place you js code on the head before the body.
Afterwards, replace the a tag with button
Finally call toggler function on delete button's onclick
<script>
function hidePlusBtn() {
$("#plusBtn").hide();
}
function toggler(divId) {
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
x.style.display = "none";
y.style.visibility = "visible";
$("#delBtn_" + tempId).show();
$("#" + divId).toggle();
}
</script>
<div class="col-sm-6">
...
<button
id="plusBtn"
class="btn btn-info btn-lg"
onclick="toggler('myContent_1');">
<span
class="glyphicon glyphicon-plus"
id=icon1
onclick="toggler('myContent_1');">
</span> Plus
</button>
...
<button
type="button"
id="delBtn_1"
class="btn btn-danger"
onclick="toggler('myContent_1'); hidePlusBtn()">Delete
</button>
...
</div>
Updated Demo: https://jsfiddle.net/1s390orm/
When I load my page, (it's made with Bootstrap - - http://themejulies.tumblr.com) , it looks like this:
When I push the info button in the left corner (which opens a div), the little down arrow towards the bottom of the page moves up.
How do I make it so that I can click the info button to open the div, and the little down arrow does not move up?
And here's the code:
<div class="container-fluid" id="foo" style="z-index:5; display:none; height:auto;">
<center>
<div class="container-fluid" style="height:auto; margin-top:2%;">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-3" style=" margin-top:1%;"><img class="avatar-style-circle" src="{PortraitURL-128}" /><br/><h3>{AuthorName}</h3></div>
<div class="col-xs-12 col-md-6" style="background-color:blue; margin-top:2%;"><p style="text-align:justify;">{Description}<br/></p></div></div></div>
<div class="container-fluid" style="height:auto; margin-top:2%; margin-bottom:2%;">
<center>
<div class="container-fluid">
<div class="input-group">
</div>
<form action="/search" method="get">
<input type="text" name="q" value="{SearchQuery}" placeholder="{lang:Search}" class="form-control" placeholder="Search for...">
</form>
</div><!-- /input-group -->
<br/>
<div class="btn-group" role="group" aria-label="..."> Ask
Archive
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Pages
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" style="z-index:5; margin-left:13%;">
{block:HasPages}{block:Pages}<li>{Label}</li> {/block:Pages} {/block:HasPages}
</ul>
</div><!-- /.col-lg-6 --></center>
</div>
</div>
</div>
</div>
<div class="site-wrapper">
{block:ifShowInfoButton}
<i class="fa fa-info-circle fa-3x" style="position:absolute; margin-left:0.4%; margin-top:0.4%; color:{color:Info Button Color};"></i>
{/block:ifShowInfoButton}
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="inner cover">
<h1 class="pagetitle" style="position:relative; font-family:{text:Google Web Font name Title}; font-weight:700; color:{color:Title and Tagline Text};">{Title}</h1>
{block:ifShowTagLine} <p class="pagedesc" style="postition:relative; font-family: {text:Google Web Font name Tagline}, sans-serif; font-weight:500; color:{color:Title and Tagline Text};">{text:Tagline}</p>{/block:ifShowTagLine}
</div>
<div class="mastfoot">
<div class="inner">
<a name="bottom"> <i class="fa fa-angle-down fa-5x"></i></div></a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" id="bottom">Test</div>
Set the div that appears when you click the info button to
position:absolute;
background: #333;
this will pull it out of the document flow and will not affect the other divs
or if that is not the effect you were looking for set the div with the down arrow to position: absolute;
#media (min-width: 768px) {
.mastfoot {
position: absolute;
}
}
the problem is with position:absolute
I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');
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;
}