retrieve dynamically created values of hidden input with jquery - javascript

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());
});

Related

How to append a div to another 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>

How to remove a div that has been created using .append() in jquery? [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I would like to remove the div created using .append()
Example:
HTML
<input id="type_ingd" type="text">
<button class="btn btn-primary" id="add_ingd">
Add
</button>
<div class="text-left ingd-cont">
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Rooms <i class="fa fa-close"></i>
</div>
</div>
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Mansions <i class="fa fa-close"></i>
</div>
</div>
</div>
JS
$("#add_ingd").on('click', function(e) {
var ti = $('#type_ingd').val();
$( ".ingd-cont" ).append( '<div class="btn-group incl-ingd"><button type="button" class="btn btn-default">'+ti+' <i class="fa fa-close"></i></button></div>' );
});
$("i.fa-close").on('click', function(e) {
removeIngd(this);
});
function removeIngd(thiscont) {
$(thiscont).closest('div.incl-ingd').remove();
var iiv = $(".incl-ingd:visible").length;
if (iiv == 0){
$("#find-recp-btn").attr('style', 'display:none;');
}
}
First, I try to input a word (ex: kitchen)then click the Add button.
Then the word will append inside the ingd-cont.
And the problem is when I click the fa-close of the word it does not removed..
I'm not sure if this is possible but if it is, please help me out :)
The problem is with your selector $("i.fa-close").on('click', function(e) {...}); which does not catch events on elements, which were dynamically added.
The selector can be changed to into this to catch also the dynamically added elements:
$(".ingd-cont").on('click', 'i.fa-close', function(e) {
removeIngd(this);
});
Here is working example. I adjusted your code slightly to make it working properly ;)
$("#add_ingd").on('click', function(e) {
var ti = $('#type_ingd').val();
$( ".ingd-cont" ).append( '<div class="btn-group incl-ingd"><div type="button" class="btn btn-default">'+ti+' <i class="fa fa-close">X</i></div></div>' );
});
$(".ingd-cont").on('click', 'i.fa-close', function(e) {
removeIngd(this);
});
function removeIngd(thiscont) {
$(thiscont).closest('div.incl-ingd').remove();
var iiv = $(".incl-ingd:visible").length;
if (iiv == 0){
$("#find-recp-btn").attr('style', 'display:none;');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="type_ingd" type="text">
<button class="btn btn-primary" id="add_ingd">
Add
</button>
<div class="text-left ingd-cont">
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Rooms <i class="fa fa-close">X</i>
</div>
</div>
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Mansions <i class="fa fa-close">X</i>
</div>
</div>
</div>

Change class name based on text mentioned in the box in Jquery

i am trying to change the current class name prefix.
Here is how my html looks like:
<div class="add_multi_category_block">
<div class="form-group">
<div class="col-md-2">
<a id="add_category" class="control-label add_category">Add multiple category</a>
</div>
<div class="col-md-10">
</div>
</div>
<div class="form-group main_category">
<div class="col-md-1 rowCountNumber" style="text-align: right;">0</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="add_sub_category main_category0 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group main_category">
<div class="col-md-1 rowCountNumber" style="text-align: right;">1</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="add_sub_category main_category1 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group sub_category_1">
<div class="col-md-2 rowCountNumber" style="text-align: right;">1.0</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group sub_category_1">
<div class="col-md-2 rowCountNumber" style="text-align: right;">1.1</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
</div>
</div>
Here is how it looks like when its get arranged in HTML with CSS, check below screenshot:
Now the problem is, i can have N level of childs here. Here i just want to do is, if i remove "0" column, then it should update the below column from "1" to "0" and sub-sequent child's should be
0
0.0
0.0.0
0.0.1
0.1
and so on...with the below number as well. So for the time being i used this below code to remove all the child under one parent.
Here is how it looks like.
$(document).on('click', '.remove_category', function(){
var parentRowCount = $(this).closest('.form-group').find('.rowCountNumber').html();
var subCategory = parentRowCount.replace(/[ .]/g, "_");
$(this).closest('.form-group').remove();
$("*[class*='sub_category_"+subCategory+"']").remove();
var i = 0;
$('.main_category').each(function(){
$(this).find('.rowCountNumber').html(i); /*----------This will change the number of outer columns but not of the childs -------*/
i++;
});
});
Is there any way to rename all the child with all sub level child at the same time?
For your understanding i am adding one more screenshot of show you how complexity increases here.
Thank you!
You just need to do another loop of all the sub-level elements and change the numbers. Below is the relevant code change.
$('.main_category').each(function(i,v){ // added "i" for index value
var previousNumber = $(this).find('.rowCountNumber').html(); // gets you the old number
var subClassName = 'sub_category_'+ previousNumber; // get the possible sub element class names
$(this).find('.rowCountNumber').html(i);
$('.add_multi_category_block [class="'+ subClassName +'"]').each(function(subIndex,elem){
$(elem).removeClass(subClassName).addClass('sub_category_' + i);
$(elem).find('.rowCountNumber').html( i + '.' + subIndex );
});
//i++; not required as the default callback provides you the index value.
});
Note: I have also changed certain code for better performance, Other changes which you can consider is
instead of $("*[class*='sub_category_"+subCategory+"']").remove(); use
$(".add_multi_category_block [class='sub_category_"+subCategory+"']").remove(); This will limit jquery to search only within the specified parent div .add_multi_category_block.

Show/Hide elements that are generated in a foreach loop

I am looping out forum entries and next to each one i have placed a button to show or hide the reply to comment form, i got this to work using a simple JS script. However because the script is looped out it only works for the top one. presumably because it cannot identify each element using an id because id won't be unique (and class would cause all of them to show/hide). I did think of adding something like {{$comment->id}} to the id so it would be unique but i cannot then use the JS script? can i?
Below is the relevant code:
#extends('layout')
#section('head')
<script>
$(document).ready(function(){
$("#showhidereply").click(function(){
$("#replycomment").toggle();
});
});
</script>
#stop
#section('content')
...
<!-- Comments -->
#foreach ($post->comments as $comment)
<span class="pull-right">
<div class=" btn-group">
<button class="btn btn">
<span class="glyphicon glyphicon-picture"></span> Owner's Name Here
</button>
<button class="btn btn btn-primary" id="showhidereply">
<span class="fa fa-reply"></span>
</button>
</div>
</span>
<p>{{ $comment->body }}</p>
</div>
<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div class="input-group" style="padding-top: 5px;">
<input type="text" name="body" class="form-control"></input>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Reply to Comment</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
#stop
I did have someone make a suggestion of changing to:
Button
<button class="btn btn btn-primary" class="showhidereply" data-id="{{ $comment->id }}">
<span class="fa fa-reply"></span>
</button>
Form
<form method="POST" action="/forum/{{ $post->id }}/comments/{{ $comment->id }}/newresponse" id="replycomment-{{ $comment->id }}">
Script
<script>
$(document).ready(function(){
// change the selector to use a class
$(".showhidereply").click(function(){
// this will query for the clicked toggle
var $toggle = $(this);
// build the target form id
var id = "#replycomment-" + $toggle.data('id');
$( id ).toggle();
});
});
</script>
But that still doesn't work but the elements are all now unique.
Many Thanks!
Try using this,
<button class="btn btn btn-primary" data-id="{{ $comment->id }}" onclick="showHide('replycomment-{{ $comment->id }}');">
<span class="fa fa-reply"></span>
</button>
//javascript code
<script>
function showHide(id){
$("#"+id).toggle();
}
</script>

How can I swap two id's between 2 html elements?

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');

Categories