How to restore div which is hidden using empty() function - javascript

html code:
<button id="add"></button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
Jquery code:
$("#add").click(function(){
$("#count_search").empty();
})
I want to show count_search div once again on clicking on any other button execpt to add button
In above code add is button on which empty() is implimented. On clicking on add button count_search is got hide. Then after I want to restore that div content

.empty() deletes the elements in your container (count_search).
Instead, you can use .hide()/.show() or better approach, you can use .toggle() that show or hide your element.
$("#add2").click(function() {
$("#count_search").toggle();
});
$("#add").click(function() {
if ($("#count_search").is(":visible")) {
$("#count_search").hide();
} else {
$("#count_search").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Show/Hide</button>
<button id="add2">Toggle</button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>

By empty() you are deleting an item in DOM.
Instead of empty, you can use toggle(), which hides the element and If you click once again, the item will show.
$("#add").click(function(){
$("#count_search").hide();
})

Related

avoid multiple cloned or duplicated div on button click and insertAfter the same last cloned div once

I have a div and I want to duplicate it. I mean that I wanted the same div to be duplicated once. I have used such code for it.
$("#btnAddRules").click(function(){
$(".div1_section").clone().insertAfter($(".div1_section"));
});
But, when click on the button again and again , it is adding multiple of the DIVs and I wanted only one div to be inserted after the last div.
<div class="col-md-8">
<div class="row div1_section">
<div class="col-md-6">
<label>hey hey hey</label>
<select class="form-control">
<option>klklk</option>
<option>huhuuh</option>
</select>
<br/>
</div>
<div class="col-md-6">
<label>abc</label>
<div class="input-group-currency">
<span class="currency">pk</span>
<input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
</div>
</div>
</div>
Hope to hear from you, soon.
Thanks
Use last() to target just the last element from the collection:
$("#btnAddRules").click(function() {
$(".div1_section").last().clone().insertAfter($(".div1_section").last());
});
.div1_section {
line-height:50px;
margin:20px 0;
padding:0 20px;
background:tomato;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>
Remove the event listener after the first click like this:
var callback = function () {
document.getElementById('btnAddRules').removeEventListener('click', callback);
$(".div1_section").clone().insertAfter($(".div1_section"));
}
document.getElementById('btnAddRules').addEventListener('click', callback);
Sorry for using vanilla JS and your jquery, I'm more used to write vanilla JS.
Use last() to target just the last element from the collection and after() to put div after a div:
$("#btnAddRules").click(function(){
$(".div1_section").last().after($(".div1_section").last().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>

Replacing Div content with another using jQuery

I have a div named Groupz and another div named vegasDetailz
Now i want, when i click on the button that is lying in first div , first div should disappear and the second div should take it's place for this purpose i have written the following jquery code
$(document).ready(function() {
$("button").click(function() {
$("#vegasDetailz").replaceWith("#Groupz");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz"></div>
But it is not working for me. Any ideas ?
Note: I am using php laravel 5.3
You are trying to click on $("button") but you have no button, so use $(".getstart"), since it is the id of your input.
Second your .replaceWith("#Groupz") are just trying text into the div, you have to get the element first before you can replace the entire element. Like .replaceWith($("#Groupz"))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").replaceWith($("#Groupz").html("Im an replaced"));
});
});
</script>
You can remove submitBTN getstart from the div vegasDetailz then add new one to the second div Groupz:
$(document).ready(function() {
$(".getstart").click(function(){
$(".getstart").remove();
$("#Groupz").append($("<input class='getstart' name='button' type='submit' value='Get Started'>"));
});
});
#vegasDetailz {
background-color: grey;
width:500px;
height:60px;
}
#Groupz {
width:500px;
background-color:pink;
height:60px;
margin-top:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
</div>
You need to use the name as you selector then use like this input[name=button] if you want to use class as your selector then use .submitBTN.
$(document).ready(function() {
$("#Groupz").hide();
$(".submitBTN").click(function() { // you can also use input[name=button] for '.submitBTN'
$("#vegasDetailz").hide();
$("#Groupz").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz">
Hai Another div
</div>
If you just want to show & hide the div on the button click, then try this code:
<div id="vegasDetailz">
<input class="submitBTN getstart" name="button" type="submit" value="Get Started">
</div>
<div id="Groupz" style="display:none;">Hello</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".getstart").click(function(){
$("#vegasDetailz").css('display','none');
$("#Groupz").css('display','block');
});
});
</script>
Just make the div id named Groupz hidden by default, if you don't want to show the second div in default state.
I hope, it may be helpful to you.

adding div around link using jquery

I am adding a div around a link on click of a button. but when i click button multiple times, it adds multiple divs.
<li>
<label> </label>
<div class="deletebutton">
<label> </label>
<div class="deletebutton">
<label> </label>
<div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</div>
</div>
</li>
How can i make sure that it first checks if there is a div around link and then adds.
I am using following code:
var parentTag = $(".ruRemove").parent().get(0).tagName;
if (parentTag == 'LI') {
$(".ruRemove").wrap("<div class='data deletebutton'></div>");
$(".deletebutton").before("<label></label>");
} else {
var par = $('.deletebutton').parent();
if (par.is('div')) par.remove();
$(".ruRemove").wrap("<div class='data deletebutton'></div>");
var prev = $('.deletebutton').prev();
if (prev.is('label')) prev.remove();
$('.deletebutton').before("<label></label>");
}
it should become this:
<li>
<label> </label>
<div class="deletebutton">
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</div>
</li>
when i click button. before clicking html is:
<li>
<input type="button" id="ctl00_ContentPlaceHolder1_ctrlAddPhotos_RadUpload1remove1" value="Remove" class="ruButton ruRemove" name="RemoveRow">
</li>
Here is a solution shown in a jsFiddle.
The code story is
HTML
<button id="myButton">My Button</button
JavaScript
$(function() {
$("#myButton").click(function() {
if ($(this).parent().get(0).tagName !== "DIV") {
$(this).wrap("<div class='myDiv'>");
}
});
});
What the code does is register a callback for a button click. When clicked, we ask for the parent of the button that was clicked and ask if the parent node has a tag name of "DIV" meaning it is a <div>. If it is not a div, then we wrap the button in a div and end. On the next call, the detection of the parent being a div will be true and no new div will be added.
Why don't you just use for example a function that does what you want only on the first click?
So only on the first click of that button adds the div, if you click other times the button, it wont do anything. This way you wont add multiple divs.
To do that you could use for example jQuery:
<script type="text/javascript">
$("#firstclick").one("click",function() {
alert("This will be displayed only once.");
});
</script>
You can check even the jQuery API Documentation regarding one:
http://api.jquery.com/one/

Clone inline form fields and append to parent container

I have the following form fields:
<div id="filename-url-container">
<div class="form-inline form-group">
<input name="filename[]" class="form-control" placeholder="Filename" type="text">
<div class="input-group">
<input name="url[]" class="form-control" placeholder="URL" type="text">
<span class="input-group-btn">
<button class="btn btn-default btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
I want to grab the first child each time the button is pressed and append it to the bottom of the filename-url-container div without the values of the original cloned fields.
I tried to get this to work but it's not appending correctly:
$('#filename-url-container').on('click', '.btn-add', function (e) {
e.preventDefault();
var formGroup= $('#filename-url-container :first-child');
$('#filename-url-container').append(formGroup);
console.log(controlForm);
});
You should .clone the elements before appending them - as written your code would simply take the existing elements and try to move them to exactly the same place.
You also need to constrain your selector, else it will pick every :first-child element within the container, not just the one that's the immediate child:
$('#filename-url-container').on('click', '.btn-add', function (e) {
var formGroup= $('#filename-url-container > :first-child').clone(true);
formGroup.find('input').val(''); // erase values
$('#filename-url-container').append(formGroup);
});
demo at http://jsfiddle.net/alnitak/dvqgnga0/
$('#filename-url-container').on('click', '.btn-add', function (e) {
e.preventDefault();
var formGroup= $('#filename-url-container div:first-child').html();
$('#filename-url-container').append(formGroup);
console.log(formGroup);
});
You need to append html, not object it self.
http://jsfiddle.net/npdh2v3L/
I don't think you are using :first-child correctly. :first-child refers to the first child of the type to it's left. Other than that you just need to get rid of those values. Additionally, I'm not seeing a need to Event.preventDefault() since you are not using a submit button.
$('#filename-url-container .btn-add').click(function(){
var clone = $('#filename-url-container .form-group:first-child').clone(true);
clone.find('input').val('');
$('#filename-url-container').append(clone);
});

twitter bootstrap ".input-append" not work with popover

When I use input append and popover at the same time then popover not working, but when I remove the appended input (by removing the input-append class) then it works.
Here is my code:
<span class="input-append">
<button class="span2" id="filter" type="text" name="filter" placeholder="Type your filter">itest</button>
<button class="btn" id="filterSubmits">Go</button>
</span>
<script>
jQuery(function() {
$('#filter').attr('data-title', 'Search tips').
attr('data-content', 'Search format: -|+').
attr('data-placement', 'bottom').
attr('data-trigger', 'focus');
$('#filter').popover('show');
})
</script>
Is there something wrong here?
If you take a look at the css for input-append, you'd see that it sets font-size to 0. Adding the following style will fix your issue:
.popover {
font-size: 14px;
}

Categories

Resources