Positioning Dynamically created Button - javascript

I have created four text boxes and when I click a delete button it adds another set of text boxes with a remove button like this:
This is My script
$(document).ready(function() {
$("#add").click(function () {
$('.main').append("<div><br />" + $('.append_list').html() + '<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
});
});
How can I add this button next to the first text box which is created dynamically?
With reference to this Question
Output Image

Create a temporary container in which you insert your cloned input list. Then find the first input in that temp container:
$(document).ready(function() {
$("#add").click(function () {
var container = $('<div />').addClass('justadded').appendTo('.main');
$(container).append($('.append_list').html());
var input = $(container).find('input:first');
$('<button />').text("Remove").addClass('rmv_btn').attr('onclick', '$(this.parentNode).remove()').insertAfter(input);
$(container).removeClass('justadded');
});
});

See this : http://jsfiddle.net/MpEUZ/5/
$(document).ready(function() {
$("#add").click(function() {
$('.main > :first-child').clone().appendTo('.main').find('input[type=text]').val('');
$('.main .append_list:last').find('input[type=text]:first').after("<button class='rmv_btn' style='clear:both'> Remove </button>");
});
$('.main').on("click", ".rmv_btn", function() {
$(this).parent().remove();
});
});​

This one should works :
$(document).ready(function() {
$("#add").click(function () {
var html = $($('.append_list').html());
html.find('input').first().after('<button class="rmv_btn" onclick="$(this.parentNode).remove()">Remove</button></div>');
$('.main').append("<div><br />" + html);
});
});
I guess $('.append_list') is containing the good html for the inputs.

Related

javascript code for html button: disable dropdown and make div appear based on that dropdown selection

I have a javascript code that dynamically shows a div based upon the answer of a dropdown question in an html form:
//<![CDATA[
$(window).load(function () {
$(document).on('change', '.div-toggle2', function () {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function () {
$('.div-toggle2').trigger('change');
});
});//]]>
I additionally have a javascript code that disables this dropdown based upon a button click:
function disable() {
document.getElementById("project_program").disabled = true;
Is there a way to combine the two codes...as in the button would disable the dropdown and show the div dynamically based upon the dropdown answer, all triggered by the button click?
I would think about using .prop(). so: $(""project_program").prop('disabled', true);
in the context of what you're doing it would look something like this:
//<![CDATA[
$(window).load(function () {
$(document).on('change', '.div-toggle2', function () {
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
// disable element on
$(""project_program").prop('disabled', true);
});
$(document).ready(function () {
$('.div-toggle2').trigger('change');
});
});
//]]>

Problems with removing item from list

Can anyone tell me why this is not working corectly?
I want a function that will remove list item when I click on it - instead it is removing the whole list.
$(document).ready(function(){
$( "#add-tag" ).on("click", function(x) {
var tag = $("#new-tag").val();
$("#galleries div:first-child").clone().appendTo("#galleries");
$("#galleries-list").append('<li>' + tag + ' gallery: remove</li>');
$("#new-tag").removeAttr("value");
x.preventDefault();
});
$("#galleries-list li a").on("click", function(x) {
var elem = $(this);
$(elem).remove();
});
});
make it
$("#galleries-list li a").on("click", function(x) {
var elem = $(this);
elem.parent().remove(); //since you want to remove the li on click of a
});
it was already a jquery object, you didn't have to make it again.
Working Example: https://jsfiddle.net/Twisty/88t09ma8/2/
JQuery
$(document).ready(function() {
$("#add-tag").on("click", function(x) {
x.preventDefault(); // Keep form from submitting
var tag = $("#new-tag").val();
$("#galleries div:first-child").clone().appendTo("#galleries");
$("#galleries-list").append('<li>' + tag + ' gallery: remove</li>');
});
$(document).on("click", "ul#galleries-list li a", function(x) {
$("#new-tag").val("");
$(this).parent("li").remove();
return false;
});
});
The .on() was not hooking to the dynamically created link, so I had to select it more specifically. Also tag was not defined.

Finding the nth anchor tag in a div element

I have the following peice of code which binds click events to multiple anchor tags present in a div.
I want to determine which link was clicked (1st link or 2nd link or nth link) so that I can pass it to myFunction.
function bindClickEvent(){
$.each($("#links > li > a"), function(index, element){
$(element).click(function(event){
myFunction(linkID);
});
});
}
The reason I use the above type of function is because the anchor tags created in links div are dynamically created. i.e building html using other function
try something like this: http://jsfiddle.net/wo3o55yL/1/
<div>
One
Two
Three
Four
</div>
<script type="text/javascript">
$('a').on('click', function(e){
e.preventDefault();
myFunction($('a').index(this));
});
function myFunction(id) {
alert('my function - ' + id);
}
</script>
First point will be indexed with zero so thats why one is 0 and two is 1 and so on...
You should use event delegation to achieve this goal, like this:
Given HTML:
<div id="links" >
</div>
JavaScript:
$(function() {
// Just a simulation for dynamic links
setTimeout(function() {
var as = [];
for(var i = 0 ; i < 5 ; ++i) {
as.push('Element-' + (i+1) + '');
}
$('#links').html(as.join('<br />'));
}, 2000);
// Event delegation
$('#links').on('click', 'a', function(e){
e.preventDefault();
myFunction($('a').index(this));
});
function myFunction(id) {
alert('my function - ' + id);
}
});
You can do this way also, see working demo http://jsfiddle.net/g8k1csz9/
<ul id="links">
<li>Something1</li>
<li>Something2</li>
<li>Something3</li>
<li>Something4</li>
</ul>
$( "#links li a" ).click(function() {
var index = $('#links li a').index(this);
myfunction(index);
});
function myfunction(index){
alert(index);
}

Table columns collapsed when button or image clicked using Javascript

I have this function which is responsible of making the table tr and th collapse. I want to collapse the table columns when button is clicked. I think because I am using $('tr th'),click(function() so when I clicking wherever in th it is collapsing. I want to collapse when we click the button or image like this (function myFunction(){}).
Here is my code:
$(window).load(function(){
$(function() {
$('table tbody tr:odd').addClass('alt');
$('table tbody tr').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
});
$('tr th:not(:eq(0),:eq(1),:eq(2),:eq(3),:eq(4),:eq(5))').click(function() {
var index = (this.cellIndex + 1);
var cells = $('table tr > :nth-child(' + index + ')');
cells.toggleClass('collapsed');
if ($(this).hasClass('collapsed')) {
$(this).find('span').html('<b>+</b>');
}
else {
$(this).find('span').html('<b>-</b>');
}
if ($('table tr > th:not(.collapsed)').length)
$('table').removeClass('collapsed');
else
$('table').addClass('collapsed');
});
});
why dont you add a onclick event on button instead of adding a click listener using jquery.
you can do something like
<button type="button" onclick="toggleExpand('anyReqParam1', 'anyReqParam2')" class="toggle"></button>
and in script define the function
<script>
function toggleExpand(anyReqParam1, anyReqParam2) {
// toggle code goes here
}
</script>
or alternatively you can also do
$(".toggle").click(function() {
});
using JQuery. Here toggle is the class name that i gave to the button

Writing JQuery If Statement

I am trying to write a JQuery If Statement.. What I am trying to achieve is basically to highlight the appropriate link (a) when the certain div (infotab) is clicked. They are all hidden as you can see, but when clicked, become visible in a nice fade. I want to highlight the item that was clicked. (Change the background color to whatever I want, such as red in the code below.)
The code I have below works, but incorrectly. It highlights all of the a's in that div. I just want the one highlighted that was clicked. Thanks for your help you guys are great.
$(document).ready(function () {
$('#infotab_two_s, #infotab_three_s, #infotab_four_s, #infotab_five_s').hide();
});
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$("subnav_holster li a").css({
"color": "red"
});
});
});
Grab the li that was clicked and access that element's a:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s';
var clicked = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
clicked.find('a').css({
"color": "red"
});
});
});
You should cache this and then highlight it:
$('.subnav_holster li').click(function () {
var Vinfotab = this.id + '_s',
$this = $(this);
$('.infotab:visible').fadeOut('fast', function () {
$('#' + Vinfotab).fadeIn('fast');
var Vinfotab_selected = 'Vinfotab:visible';
$('.subnav_holster li a').css({
"background-color": "white" // reset all to default color
});
$this.find('a').css({
"background-color": "red" // set highlight to this element only
});
});
});

Categories

Resources