jquery not() function not working on all elements - javascript

I am using jquery not to remove html of elements.
I don't get jQuery not() work in proper way. It removes all elements from children except the last one that I mentioned.
My Html-
<body>
<div id="edit-save-section">
<button id="edit-button" class="btn btn-info btn-large">
<span><i class="fa fa-cog"></i> EDIT</span>
</button>
<button class="division-twenty btn btn-success btn-large" data-loading-text="Saving..." class="btn btn-primary" id="btn_save"><span><i class="fa fa-save"></i> SAVE</span>
</button>
</div>
<nav id="menu">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
</ul>
</nav>
<div class="removable-section">
<b><i class="fa fa-arrows fa-2x"></i></b>
<a class="span1 pull-right remove-section-action" rel="tooltip" title="Remove section" data-placement="left" href="javascript:;"><b><i class="fa fa-times fa-2x"></i></b></a>
</div>
<div id="allhtml"></div>
</body>
Clearing html with jQuery-
$('#btn_save').click(function () {
var notAll = $('body').children().not("#menu", ".removable-section", "#edit-save-section").html();
$('#allhtml').append(notAll);
console.log($('#allhtml').html());
});
Somehow I managed removing #menu and .removable-section , But I can't remove #edit-save-section
And If i try to change order of these sections like-
var notAll = $('body').children().not("#menu","#edit-save-section",".removable-section").html();
Then it acts weird. It doesn't remove from body the last children found in above html structure. Here in this case it is .removable-section.
Let me know what is that I am doing wrong?

You can also use JQuery Clone to achieve this
$('#btn_save').click(function () {
var notAll = $('body').clone(true);
notAll.find("#menu").remove();
notAll.find(".removable-section").remove();
notAll.find("#edit-save-section").remove();
$('#allhtml').append(notAll);
});

Related

insertAdjacentHTML is not a function in todolist

I was making my first pure Js project of todolist. I want when user adds an item in the list it gets it placed at the list. I was using this code I saw in a tutorial but it gives an error.
It gives an error: jeep.insertAdjacentHTML is not a function
Here is the markup:
<section class="listContent">
<div class="container">
<ul class="list" id="deep">
<li style="text-align: center" id="itemList">
<!-- < i class="fa fa-circle-o pull-left" id = "circle" aria - hidden="true" > </i>
<p class="text" > DRINK COFFEE < /p>
<i class="fa fa-trash pull-right" id = "delete" aria - hidden="true" > </i> -->
</li>
</ul>
</div>
</section>
Here is the JS
const date = document.getElementById("date");
const jeep = document.getElementById("deep");
const items = document.getElementById("itemList");
function addToDo(todo) {
const item =
`<i class="fa fa-circle-o pull-left" job="complete" id="circle" aria-hidden="true"></i>
<p class="text"> ${todo}</p>
<i class="fa fa-trash pull-right" id="delete" job="delete" aria-hidden="true"></i>
` ;
const position = "beforeend";
console.log(item);
console.log(position);
jeep.insertAdjacentHTMl(position, item);
}
addToDo("drink coffe");
first try .insertAdjacentHTML - the L should be capitalized. Also it looks like in the HTML markup that element lives inside of the <li> no adjacent to it. It looks like you might want to use .appendChild() on the <ul id="deep"></ul>

onClick event is being caught by the parent element along with the clicked element

I have a div and inside it there are some elements.
my parent div has a test() function by using onClick.
in inside parent div there is a quickView() function by using onClick.
now, when I click on quickView() function, test() function fired .
<div onClick="test();" class="product-inner">
<h5 class="product-title height-40-px">
title
</p>
</h5>
<hr class="mt8 mb8">
<div class="product-meta">
<ul class="product-price-list">
<li><span class="product-save dir-to-right"><strong>7500</strong></span>
</li>
<li><span class="product-old-price dir-to-right">120,000</span>
</li>
<li><span class="product-price">%95</span>
</li>
</ul>
<hr class="mt0 mb0 mr6 hr-blue">
<div class="col-md-12 mt10">
<span class="col-md-6">
۹ <i class="fa fa-users"></i>
</span>
<span class="col-md-6">
<p class="font-size-12 display-inline">
zone
<i class="fa fa-map-marker"></i>
</p>
</span>
</div>
<ul class="product-actions-list mt35">
<li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730);" data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart <i class="fa fa-shopping-cart"></i></a>
</li><li>details <i class="fa fa-eye"></i>
</li>
</ul>
</div>
</div>
Use event.stopPropagation() to prevent the click event from propagating to the parent. This is how you use it.
P.S. IE supports e.cancelBubble instead of e.stopPropagation()
function quickView(value, e) {
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
console.log(value);
}
function test() {
console.log('test Fired');
}
<div onClick="test();" class="product-inner">
<h5 class="product-title height-40-px">
title
</p>
</h5>
<hr class="mt8 mb8">
<div class="product-meta">
<ul class="product-price-list">
<li><span class="product-save dir-to-right"><strong>7500</strong></span>
</li>
<li><span class="product-old-price dir-to-right">120,000</span>
</li>
<li><span class="product-price">%95</span>
</li>
</ul>
<hr class="mt0 mb0 mr6 hr-blue">
<div class="col-md-12 mt10">
<span class="col-md-6">
۹ <i class="fa fa-users"></i>
</span>
<span class="col-md-6">
<p class="font-size-12 display-inline">
zone
<i class="fa fa-map-marker"></i>
</p>
</span>
</div>
<ul class="product-actions-list mt35">
<li><a data-original-title="add cart" class="btn btn-cart btn-sm popup-text" href="#product-quick-view-add-to-cart" onclick="quickView(18730, event); " data-effect="mfp-move-from-top" data-toggle="tooltip" data-placement="top" title="">cart <i class="fa fa-shopping-cart"></i></a>
</li><li>details <i class="fa fa-eye"></i>
</li>
</ul>
</div>
</div>
Click events are bubbling up from the inner element clicked up to the document root going through all the parents of the clicked element. in order to stop it from propagating up you should use - event.stopPropagation();
That's how event bubbling works. First the click event is triggered on the element that actually was clicked (a.btn.btn-cart in your case) and then it goes upwards and reaches the parent div with test(). You can prevent further event propagation by passing an event to your quickView() function and calling event.stopPropagation(). Then, your HTML should look like this:
<a class="btn btn-cart btn-sm popup-text" onclick="quickView(event, 18730);">Cart</a>
And your JavaScript function:
function quickView(event, number) {
event.stopPropagation();
console.log(number) // Do some stuff with the passed ID.
}

How to preselect a option - Dropdown

my HTML is a static variant, not a solution builded with ng-repeat or an existing JSON/Angular Controler.
I need to select a custom option and used alreay ng-select without a success.
My HTML looks like:
<div class="btn-group" dropdown>
<button type="button" class="pull-right btn btn-block btn-dropdown" dropdown-toggle>
<div class="pull-left">
<i class="flag-{{my.filter.flag}} left vcenter"></i>
<span class="vcenter">{{my.filter}}</span>
</div>
<div class="pull-right"><span class="caret"></span></div>
</button>
<ul class="dropdown-menu" dropdown-menu ng-init="options[0]">
<li ng-class="{active: my.filter == 'Germany'}">
<a ng-click="my.filter = 'Germany'; my.filter.flag='DEU'"><i class="flag-DEU"></i><span>Germany</span></a>
</li>
<li ng-class="{active: my.filter == 'England'}">
<a ng-click="my.filter = 'England'; my.filter.flag='GBP'"><i class="flag-GBP"></i><span>England</span></a>
</li>
</ul>
</div>
so how can i solve it to preselect the option "Germany" by pageloading into the div.pull-left section?
You mention ng-select in your question, but you used ng-selected. Maybe it is just a typo.

jQuery bootstrap multiple collapse not work

I need to collapse multiple button and div using jQuery and bootstrap like this :
HTML:
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
JS:
$(function () {
$('#demo').on('hide.bs.collapse', function () {
$('#button').html('<span class="fa fa-collapse-down"></span> Show');
})
$('#demo').on('show.bs.collapse', function () {
$('#button').html('<span class="fa fa-collapse-up"></span> Hide');
})
})
but in action only work one button and div. how do can i fix this problem?!
DEMO
Use different id in the data-target. For example use #demo1 and #demo2 respectively.
Answer Edited as per Dynamic div & Button
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="open" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
<BR><BR><BR>
<button id="button" type="button" class="btn btn-primary" data-toggle="collapse" data-start="close" data-target="#demo" data-close-text="Hide" data-open-text="Show"> <span class="fa fa-collapse-down"></span> Show</button>
<div id="demo" class="collapse">
<ol class="list-group">
<li class="list-group-item">Warrior</li>
<li class="list-group-item">Adventurer</li>
<li class="list-group-item">Mage</li>
</ol>
</div>
// toggle content on click
$('[data-toggle="collapse"]').click(function () {
if ($(this).attr('data-start') == 'open') {
$(this).html($(this).attr('data-close-text'));
} else {
$(this).html($(this).attr('data-open-text'));
}
$(this).attr('data-start', $(this).attr('data-start') == 'open' ? 'close' : 'open');
});
// set initial content
$('[data-toggle="collapse"]').each(function () {
if ($(this).attr('data-start') == "open") {
$(this).html($(this).attr('data-open-text'));
} else {
$(this).html($(this).attr('data-close-text'));
}
});
If you only want one div open at a time you might be able to achieve this very easily using the data-toggle-="tabs" attribute on buttons inside of a list with the "nav" class. You can read more about this in the bootstrap JavaScript documentation.
You can't have the same id="button" (or any other ID) twice on two different elements in a file.
This should be the code that you are looking for, but it may be cumbersome to have too many levels of JS so you must map it to a class instead, and then use the parent() function
http://jsfiddle.net/mu4whyb6/

retrieve dynamically created values of hidden input with jquery

The following is the form created via php.
<form method="POST" action="http://localhost:8000/resources/11" accept-charset="UTF-8">
<label for="tag">Tagname</label>
<input class="form-control" id="tags" name="tagname" type="text">
</div>
<div id="tagnames" class="control-group clearfix">
<div class="tag-wrapper pull-left">
<button data-original-title='This is about quantum description.' data- placement="top" data-toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
quantum <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<div class="tag-wrapper pull-left">
<button data-original-title='This is about kids!' data-placement="top" data- toggle="tooltip" class="btn btn-default tag_tooltip" type="button">
<span class="tagname">
kids <i class='fa fa-times cancel'></i>
</span>
</button>
</div>
<input id="tag_ids" name="tag_ids" type="hidden" value="4,5">
</div>
<div id="tagname"></div>
<button type="submit" class="btn btn-primary submit_button">
<span class="fa fa-pencil-square-o"></span>
Update
</button>
<a class="btn btn-default" href="http://localhost:8000/resources">Cancel</a>
</form>
I want to alert(4) or alert(5) whichever corresponding tagname I click on.And I should be able to remove that id from the value.
Can anyone please help me?
I been scratching for two days for this problem.
I would suggest you to do this way by splitting into arrays and get the index:
$('.tag_tooltip .fa-times').on('click', function(){
var o = $('#tag_ids').val().split(','), // creates an array
idx = $(this).closest('.tag-wrapper').index(), // get the index of closest parent
value = o.splice(idx, 1); // remove the value
$('#tag_ids').val(value); // apply the new values
alert($('#tag_ids').val());
});

Categories