Let's say I have this page structure
<div id="line-value-container-1-1">
<button type="button" id="up_value_1_1">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_1">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-2">
<button type="button" id="up_value_1_2">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_2">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-3">
<button type="button" id="up_value_1_3">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_3">
<span class="icon-chevron-down"></span>
</button>
</div>
Let'say when for example when button with id="up_value_1_3" is clicked, I want to move the its parent div up onde element so it's stays before div with id="line-value-container-1-2" like this:
<div id="line-value-container-1-1">
<button type="button" id="up_value_1_1">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_1">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-3">
<button type="button" id="up_value_1_3">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_3">
<span class="icon-chevron-down"></span>
</button>
</div>
<div id="line-value-container-1-2">
<button type="button" id="up_value_1_2">
<span class="icon-chevron-up"></span>
</button>
<button type="button" id="down_value_1_2">
<span class="icon-chevron-down"></span>
</button>
</div>
This problem is easely solved with JQuery insertBefore() function.
Now Imagine I want to exchange id's between this two moved div's, when I say for example:
$("#line-value-container-1-2".attr('id', "#line-value-container-1-3");
$("#line-value-container-1-3".attr('id', "#line-value-container-1-2");
This simple exchange does not works because after the first id change the document becames an invalid HTML, because there's two elements with same id, and the second statement will just select the first element with that id which is the id previously changed.
Conclusion all changes make no changes. How can I solve this problem?
You can use custom data-* attributes like
$("#line-value-container-1-2").attr('data-id', "line-value-container-1-3");
$("#line-value-container-1-3").attr('data-id', "line-value-container-1-2");
$("#line-value-container-1-2,#line-value-container-1-3").each(function(){
$(this).attr('id', $(this).attr('data-id'));
});
You can temporarily store the first reference in a variable while you make the change, like this:
var temp = $('#line-value-container-1-2');
$('#line-value-container-1-3').attr('id', 'line-value-container-1-2');
temp.attr('id', 'line-value-container-1-3');
Related
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
In this HTMl code :
<div class="modal__actions">
<button class="btn btn--passive">Cancel</button>
<button class="btn btn--success">Add</button>
</div>
<div class="modal" id="delete-modal">
<h2 class="modal__title">Are you sure?</h2>
<p class="modal__content">
Are you sure you want to delete this item? This action can't be made
undone!
</p>
<div class="modal__actions">
<button class="btn btn--passive">No (Cancel)</button>
<button class="btn btn--danger">Yes</button>
</div>
</div>
I am trying to reach to :
<button class="btn btn--passive">No (Cancel)</button>
item , I know there are different ways, but I am trying to use querySelector, I tried these commands but none of them selected what I was looking for:
const r1=document.querySelector('#delete-modal .btn btn--passive')
const r2=document.querySelector('#delete-modal, .btn btn--passive')
const r3=document.querySelector('.btn btn--passive, #delete-modal ')
Isn't it possible to use class and ID at the same time on querySelector ?
You should not have any space between the classes btn and btn--passive as they are for the same element. Also, you should prefix the class symbol for all the classes:
const r1=document.querySelector('#delete-modal .btn.btn--passive');
console.log(r1);
<div class="modal__actions">
<button class="btn btn--passive">Cancel</button>
<button class="btn btn--success">Add</button>
</div>
<div class="modal" id="delete-modal">
<h2 class="modal__title">Are you sure?</h2>
<p class="modal__content">
Are you sure you want to delete this item? This action can't be made
undone!
</p>
<div class="modal__actions">
<button class="btn btn--passive">No (Cancel)</button>
<button class="btn btn--danger">Yes</button>
</div>
</div>
Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.
<div class="appendOuter">
<?php
foreach($query as $data){
$id = $data['ID'];
$initialAccess = $data['Access'];
if(strlen($initialAccess) > 3){
echo '
<div class="box" >
<input type="hidden" value='.$id.' class="ID">
<textarea class="Access">'.$Access.'</textarea>
</div>';
}
}
?>
<div class="text-center">
<button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
My javascript to append a new div
<script>
function addMorediv(index){
var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
element.appendTo('.appendOuter');
}
</script>
Assuming that all your other HTML structure is similar to what you've demoed:
element.appendTo($(this).parent().parent());
Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea(s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.
$('.btn-add').on('click', function() {
var $box = $(this).parent().parent().find('.box:last');
var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
$element.appendTo($box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">
<!-- Assume your PHP generated 3 ".row" div rows in for loop -->
<div class="row">
<div class="box">
<input type="hidden" value="1" class="ID">
<textarea class="Access">1</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="2" class="ID">
<textarea class="Access">2</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="3" class="ID">
<textarea class="Access">3</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
</div>
I've got a page with multiple div elements of class 'container', ie:
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="internal"> 123456789 </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard </button>
</div>
</div>
How can I select all buttons of class 'delete', but only if the a element had origin="internal"?
The common ancestor of both elements is the div of class "container".
Besides, how can I programmatically click on all those buttons on page load?
You can select all the buttons with class="delete" and then you can use an if else statement. For example:
$('.delete').on('click',function(){
if($(this).parent().data('origin') == 'internal'){
//do something
}else{
//do something else
}
})
Filter and map all containers:
const result = Array.from(document.querySelectorAll(".container"))
.filter(c => c.querySelector("a[origin=internal]"))
.map(c => c.querySelector("button.delete"));
console.log(result);
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="internal"> A </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard A </button>
</div>
</div>
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="external"> B </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard B </button>
</div>
</div>
<div class="container">
<div class="data">
<a class="myclass" href="foo" origin="internal"> C </a>
</div>
<div class="actions">
<button class="save" role="add" add="Save" remove="Remove"> Save </button>
<button class="delete" role="add" remove="Discard" rel="nofollow"> Discard C </button>
</div>
</div>
(Furthermore, i believe that jQuery should never be used.)
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());
});