Angularjs removing dynamically generated rows - javascript

I have following html and Angularjs controller code to add rows dynamically.
<form name="{{form.name}}"
ng-repeat="form in forms">
<h2>{{form.name}}</h2>
<div ng-repeat="(i,cont) in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
<input type="text" class="xdTextBox" ng-model="cont.p_id"/>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
Controller code to add rowsis
$scope.addFields = function (form) {
if (typeof form.contacts == 'undefined') {
form.contacts = [];
}
form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
}
What I want to do next is after adding rows if i mouse over any row a delete link or button shows up and if one clicks it, it removes that row.
Here is the working plunker for the adding rows.
http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview
Please let me know how I can mouse over a row and click the remove button or link to remove that list.
Thanks

Take a look here:
http://plnkr.co/edit/zxjHLzqiAQnZzcaUwgBL?p=preview
I added the "contact" class to the div container so I could identify it in the CSS:
<div ng-repeat="(i,cont) in form.contacts" class="contact">
I added the remove button inside the container and gave it the "remove" class:
<button type="button" class="remove" ng-click="form.contacts.splice(i, 1);">Remove</button>
(Note: You may wish to have a function inside your scope for removing a contact if you need to do anything more complicated than just removing it from the array.)
To get the button to be hidden initially, but show up when you hover over the row, I used the following CSS:
.contact .remove { visibility: hidden; }
.contact:hover .remove { visibility: visible; }

You can do it by adding a function to your scope that recieves the form and index, then splicing the desired index out of it:
<div ng-repeat="(i,cont) in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
<input type="text" class="xdTextBox" ng-model="cont.p_id"/>
<button ng-click="delete(form, i)">Delete</button>
</div>
Then, the Javascript (add this to your controller):
$scope.delete = function(form, index) {
form.contacts.splice(index, 1);
}
http://plnkr.co/edit/2SEGDnGoE7kaw0KvOpKr?p=preview

Related

how do I make it so when I click a button from a foreach list, it only activates the button in that specific list?

So I have some buttons that will toggle some input text areas where I can send a message, how do I make it so when I click a button from a specific list, it only activates the button in that specific list.
I tried so many other things but I really don't know how to get this over it.
I'm kinda new to JS, I mainly do Java.
function showFeedback (list) {
var lines = "";
var counter = 0;
list.forEach(function (obiect) {
$(document).ready(function(){
$("button").click(function(){
$("#div"+ obiect.idfeedback +"").fadeToggle("slow");
});
});
counter++;
var style = "";
if(obiect.feedbackType == 1){
style = "style=\"background: green;\"";
} else if(obiect.feedbackType == 0){
style = "style=\"background: red;\"";
}
lines += `<div class="page-block"><div style="text-align: right">X</div><div class="cv-block" ${style} >
<div id="parent_div_1">
Name: ${obiect.firstn}
${obiect.lastn}
</div>
<div id="parent_div_2" style="float: right">
Date: ${obiect.date}
</div>
<div class="message_div"><p>${obiect.message}</p></div>
</div>
<button>Contact</button>
<div id="div`+ obiect.idfeedback +`" style="display: none">
<form action="contact" method="post">
<textarea name="message" id="umessage" cols="30" rows="10" maxlength="450" placeholder="Type your message here..." style="height:115px;width: 620px"></textarea>
<input type="hidden" name="email" id="umail" value="`+obiect.email+`">
<input type="hidden" name="action" value="feedback">
<div><input type="submit" value="Send Email"></div>
</form>
</div>
</div>`;
}); if(counter==0){
lines+= `<div class="page-block">No feedbacks to review.</div>`;
}
$("#obiect").html(lines);}
Get rid of $(document).ready, it is used to make sure the markup has been loaded before assigning events. In your scenario, markup is being generated dynamically, plus document.ready inside a loop does not make sense.
The simplest way to fix this code is to move the $('button') outside the loop. After the loop, do the following
$('button').click(function(){
$(this).next().fadeToggle("slow");
})
What this code does is add a handler on the click event of every button element, when the button's clicked, it finds the element which is placed next to the button element, which in your case is the required div element, and show that.

PHP & JQuery Adding Dynamic Inputs

I'm using Jquery in order to add dynamic inputs on my page. I only want to display one input initially, then more can be added by clicking a button.
This works as expected.
I'm then using PHP in order to catch the $_POST values of the inputs and send them to an external script. This also works, however I'm always receiving one extra item in my array, and it's empty.
I think this is because I have a hidden <div> field in my HTML, which is shown when a new input is generated?
My code is below;
HTML
// unnecessary code removed
<div class="after-add-more">
<button class="add-more" type="button" title="Add"></button>
<input name="addmore[]" value="" type="text">
</div>
<div class="copy-fields hide">
<div>
<button class="remove" type="button" title="Remove"></button>
<input type="text" name="addmore[]" value="">
</div>
</div>
JQUERY
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function() {
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
PHP
<?php
// unnecessary code removed
$field_values_array = $_POST['addmore'];
?>
Without generating an additional input, I enter 1111111 into the input box and submit. A print_r($_POST) produces;
[addmore] => Array
(
[0] => 1111111
[1] =>
)
Any help is appreciated.
You are probably better just getting the parent of the element that was clicked and adding your markup after that. Here is an example:
$(document).ready(function() {
// this function handles the click event
function addField(parent) {
// find your template, in this case its the first .after-add-more
var html = $(".after-add-more").first().clone();
// reset the value of any inputs
$('input', html).val('');
// wire the click handler for the button
$("button", html).click(function() {
addField($(this).parent());
});
// append it to the parent of the parent, addContainer
html.appendTo(parent.parent());
}
// wire the click handler for the add-more button
$(".add-more").click(function() {
addField($(this).parent());
});
// I don't know what the intention of this code is so I'm leaving it alone
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
// unnecessary code removed
<div id="addContainer">
<div class="after-add-more">
<button class="add-more" type="button" title="Add">Add</button>
<input name="addmore[]" value="" type="text">
</div>
</div>
<div class="copy-fields hide">
<div>
<button class="remove" type="button" title="Remove">Remove</button>
<input type="text" name="addmore[]" value="">
</div>
</div>

Jquery closest does not work?

I'm trying to build a general function that get's called from four different checkboxes. When the checkbox is checked it should remove the attribute disabled from a button near the checkbox.
my buttons all have diffrent classes like this
button 1: class="button primary pie list-buy-button list_buy_button_1903"
button 2: class="button primary pie list-buy-button list_buy_button_1901"
button 3: class="button primary pie list-buy-button list_buy_button_1899"
button 4: class="button primary pie list-buy-button list_buy_button_1897"
first i bind the event to my checkboxes
$(".avtalsbox").each(function()
{
$(this).click(function()
{
chbclickeventhandler(this);
});
});
then i handle it with this function.. this i where i encounter a problem
i have tried many solutions but noone works?
function chbclickeventhandler(thebox)
{
if (thebox.checked) {
//SOLUTION 1
var button = $(thebox).closest("[class*='buy_button']");
$(button).removeAttr("disabled");
//SOLUTION 2
var button = $(thebox).parent().children("[class*='buy_button']");
$(button ).removeAttr("disabled");
}
}
this is how my html looks like
<div class="buyonly boxhighlight varmepaket1">
<div width="100%" style="float:right;">
<!---köpknapp--->
<form class="product_form" action="/shoppingcart/increase_product_count/" method="post">
<input type="hidden" name="quantity" value="1" id="quantity">
<span class="button-container pie">
<!-- THIS IS THE INPUT I WANT TO REMOVE DISABLED FROM ASWELL AS ADD IT -->
<input class="button primary pie list-buy-button list_buy_button_1903" type="submit" value="Beställ idag!" disabled="">
</span>
<!---crap--->
<input type="hidden" name="product_id" value="1903">
<input type="hidden" name="article_number" value="varmepaket2">
</form>
<!---köpknapp END--->
</div>
<div width="" style="float:right;">
<a href="#" onclick="eb_klarna_sum=14990; $('body').find('#klarna_payment').click(); return false;">
<img class="symbol" src="/layouts/focus/klarna_symbol.png"> Dela upp betalningen från xxx kr/mån</a></div>
<div style="float:left;"><input type="checkbox" class="avtalsbox" name="godkannavtalet" value="varmepaket1">Jag godkänner avtalet!</div>
</div>
Your usage of closest is incorrect try this way: Closest will only get you to the parent or itself provided there is a match in the selector. So here use closest to get to the parent div with the class .buyonly and find for the button inside that.
$(".avtalsbox").change(chbclickeventhandler);
function chbclickeventhandler() {
if (this.checked) {
//SOLUTION 1
var button = $(this).closest(".buyonly").find("[class*='buy_button']");
$(button).prop("disabled", false);
}
}
Fiddle
If you are looking to toggle the button then you can just do:
$(".avtalsbox").change(chbclickeventhandler);
function chbclickeventhandler() {
$(this)
.closest(".buyonly")
.find("[class*='buy_button']")
.prop("disabled", !this.checked);
}
In your case checkbox is not a children of button, so you cannot use closest!
use
$(thebox).closest('.product_form').find(["class*='buy_button']");

How to remove a particular div tag and reset its content using javascript

Code below contains certain tags in all four.
Image-1
here is the code :
<div style='background-color:YellowGreen;height:20px;width:100%;margin-top:15px;font-weight: bold;'>
Delegate(s) details: </div>
<div style="border:1px solid black;"><br/>
<div id="delegates">
<div id="0">
Name of the Delegate:
<input name='contact_person[]' type='text' size="50" maxlength="50" />
Designation:
<select name='delegate_type_name[]' class='delegate_type'>
<option value='select'>Select</option>
<option value='Main'>Main</option>
</select>
</div><br/>
</div>
<div>
<input type="button" name="more" value="Add More Delegates" id="add_more" />
<br />
<br />
</div>
</div>
In the above code on line 5 where <div id="0"> changes to value 1 in script that I mentioned in "add_more"
And the javascript for "add_more" is given below
jQuery('#add_more').click(function(){
var id = jQuery('#delegates > div:last').attr('id');
var temp = "<div id='"+(parseInt(id)+parseInt('1'))+"'> Name of the Delegate: <input type='text' size='50' maxlength='50' name='contact_person[]' /> Designation:";
temp += "<select name='delegate_type_name[]' class='delegate_type additional_delegate'><option value='select'>Select</option><option value='Additional'>Additional</option><option value='Spouse'>Spouse</option></select> <input type='button' name='rem' value='Remove' id='remove' /></div><br/>";
jQuery('#delegates').append(temp);
});
In the javascript code above I have added a remove button in the temp+ variable
<input type='button' name='rem' value='Remove' id='remove' />
Image-2 shows the remove button every time I click on "Add more Delegates" button.
In the image-2 I click on Add More Delegates button it shows the "remove" button on the right of drop down select list.
I want a jQuery function for remove button, so that when I click on remove it should remove <div id="1"> and also reset content before removing the div tag. Below image-3 is the output that I want when I click on remove button.
code that I tried was this from some reference is this
jQuery('#remove').click(function(){
var id = jQuery('#delegates > div:last').attr('id').remove();
});
but no luck.
Thanks.
You can't give an element id that is only a number, it must be #mydiv1, #mydiv2 or something similar, i.e. beginning with a letter not a number.
For starters your markup is a total mess. There is no way you should be using for layout purposes. Read up on tableless layouts and css.
The first thing you need to change is the id's of your div. An id cannot start with a numeric. I suggest naming the first div delegate0. Secondly, you are adding a remove button on every new row with the same id - all id's on a page should be unique so i suggest you change this to class="remove".
As for your question, it really boils down to needing to add a jQuery handler to the remove buttons using the .livedocs method.
This is as simple as:
jQuery('.remove').live('click',function(){
$(this).closest('div').remove();
});
Also, you need to keep a running counter of the id of the items added, and increment this every time a new row is added.
var nextDelegate = 1;
jQuery('#add_more').click(function(){
... your code here
nextDelegate++;
});
Also, I removed the superfluous <br/> after each div.
Live example: http://jsfiddle.net/cb4xQ/

javascript + div tags

these days i read and learn more about my problem!the code is here:
<div align="right" id="parent" name="parent">
<select name="select30" id="select30" value=""/>here inside i have options values and work dynamically with query to my DB</select>
<input type="button" id="moreFields" value="+" onclick=""/> //add select tags
<input type="button" value="-" onclick="" /> //remove select tags
<div name="child" id="writeclone"></div> //here cloned the child from parent DIV
</div>
<input type="button" name="enter" id="" value="ENTER" onclick="getoptionvalues();"/>
My problem is how i can get the names or id's from child DIV when + button fired.When this button fired create child DIVs in Child DIV!!Can anybody HELP ME to correct my JAVASCRIPT code
<script>
function getoptionvalues() {
var parent=document.getElementById('parent');
for (var count=0;count<parent.childNodes.length;count++) {
if(parent.childNodes[count].tagName =='DIV') {
alert ('parent.childNodes[count]');
}
}
}
</script>
As ThiefMaster pointed out, 'parent.childNodes[count]' should be parent.childNodes[count]. Then to get the id, it is just .id and name is .name
if(parent.childNodes[count].tagName =='DIV') {
alert (parent.childNodes[count].id);
alert (parent.childNodes[count].name);
}
At the very least, you need to add a method name to your onClick:
<input type="button" id="moreFields" value="+" onclick="$:getoptionvalues()"/>
Then, using jquery, you can grab an array of components of a certain type, and then loop through w/ alerts:
function getoptionvalues() {
var dropdownMenus = $("select");
dropdownMens.each(function () {
var id = $(this).id;
alert(id);
});
}

Categories

Resources