We Keep Coding

add to list with contents from form

I have a form that the user can enter in a title and a date. When the user clicks the 'Add New' button, the contents of the form should be displayed above. That parts works, but whenever they enter in new info, the previous content is just replaced...where it should add to the list.
Any ideas on how to get it to work?
Thanks
Here is the jsFiddle: http://jsfiddle.net/beqqC/1/
Here is the code:
$("#add").on('click', function () {
$(".title").html($("[name=title]").val());
$(".date").html($("[name=date]").val());
$("#view").show();
});

Change
$(".title").html($("[name=title]").val());
$(".date").html($("[name=date]").val());
To
$(".title").append($("[name=title]").val());
$(".date").append($("[name=date]").val());

You can use a combination of jQuery's append and element creation methods to make things slightly cleaner:
$("#add").on('click', function () {
$(".title").append(
$('<div>', {
text: $("[name=title]").val(),
className: 'title'
}));
$(".date").append($('<div>', {
text: $("[name=date]").val(),
className: "date"
}));
$("#view").show();
});
jsfiddle
This will create a div with the specified class within your .title and .date divs.

Use append, and perhaps add a <br /> code to the end:
jsFiddle here
$("#add").on('click', function () {
$(".title").append($("[name=title]").val()+'<br />');
$(".date").append($("[name=date]").val()+'<br />');
$("#view").show();
});

You should use append() method. Just put a line break before if you want vertical list
$("#add").on('click', function () {
$(".title").append("<br />" + $("[name=title]").val());
$(".date").append("<br />" + $("[name=date]").val());
$("#view").show();
});

Add HTML based on Toggle Jquery

I have a toggle that was just made for a class I am getting to work. I need to add in hidden HTML based upon the toggle state.. Basically it needs to submit with the form with the state of the button.. Would this be the best way to grab it? I am posting the form also.
Here is what I have.. When I click the button, it adds the example text, but I need it to go away when I click again..
$(document).ready(function () {
$(".visibilitybutton").click(function(){
$(this)
.toggleClass("hide")
.find("span").toggleClass("icon84 icon85")
$('.buttons_secondary').append("<input type='hidden'>");
});
});

$(document).ready(function () {
$('.visibilitybutton').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('span').removeClass('icon84').addClass('icon85');
$('.buttons_secondary').append('<input id="visibility_setting" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('span').removeClass('icon85').addClass('icon84');
// OR Remove by id
$('.buttons_secondary').find('#visibility_setting').remove();
});
});

You can remove the html you append by id or class like so:
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
Based off of your previous question, I think you should try this:
$(document).ready(function () {
$('.button').toggle(function() {
var $button = $(this);
$button.prop("title","Invisible");
$button.find('.icon85').toggleClass('icon85 icon84');
$('.buttons_secondary').append('<input id="hdf_Test" class="hidden" type="hidden" />');
}, function() {
var $button = $(this);
$button.prop("title","Visible");
$button.find('.icon85').toggleClass('icon84 icon85');
// Remove by class
$('.buttons_secondary').find('.hidden').remove();
// OR Remove by id
$('.buttons_secondary').find('#hdf_Test').remove();
});
});

jQuery change checkbox button text when clicked

I have some jQuery checkbox buttons, and they work fine. However, I would like to change their text upon a click. for example: the button's text is "click me". when the user clicks it, i needs to change to "thanks for clicking", for example.
This is what I am trying using:
<script>
$(function() {
$("#button").button();
$("#button").click(function(){
if($("#label").is(':checked')) {
$("#label span").text("Hide");
}
else {
$("#label span").text("Show");
}
});
});
</script>
<input id='button' type='checkbox' />
<label id='label' for="button">Show/Hide</label>

This is your first problem:
if($("#label").is(':checked')) {
<label> elements don't get "checked" only their checkboxes do. Change it to:
if (this.checked) {
In the code above, this refers to the checkbox element that has been clicked, and we're looking to see if the checked property contains the value true. It's much more efficient that .is(':checked').
Also, the <label> element has no <span> child, it just has text, so
$("#label span").text("Hide");
should be
$("#label").text("Hide");
But you could shorten the whole thing using the ternary conditional operator:
$("#button").click(function(){
$("#label").text(this.checked ? "Hide" : "Show");
}
Working demo: http://jsfiddle.net/AndyE/qnrVp/

$("#button").click(function() {
if($(this).is(':checked')) {
$("#label").text("Hide");
} else {
$("#label").text("Show");
}
});
And here's a live demo.

Try this:
$("#button").click(function(){
var th = $(this);
if(th.is(':checked')) {
$("label[for=" + th.attr('id') + "]").text("Hide");
} else {
$("label[for=" + th.attr('id') + "]").text("Show");
}
});

remove first class with jQuery while cloning

I write a simple function to clone a field:
Online Demo: http://jsfiddle.net/5yVPg/
HTML:
<div id="main">
<a id="add-input" href="#">+ add</a>
<p class="child">
<input type="text" name="user[]" />
delete
</p>
</div>
JS:
$(document).ready(function () {
$('#add-input').click(function () {
var newField = $('.child').clone()
newField.toggle().attr('class', '')
registerRemoveHandlers(newField, '.icon-delete')
$(this).parent().append(newField)
return false
})
function registerRemoveHandlers(el, class) {
$(el).find(class).click(function () {
$(this).parents('p:first').remove()
return false
})
}
})
I want to remove the delete icon from the first input, I tried :
$('p.child .icon-delete:first').css('display','none')
But the delete icon being not displayed for all input.
PS: If I could optimize the codes above I'll be happy :)

Have a look at this instead:
// Keep a single clone of the original
var clonedField = $('.child').clone(),
main = $('#main');
// Add in the delete <a> to the cloned field
$('<a>', {
text: 'delete',
class: 'icon-delete',
href: '#',
click: function(){
$(this).parent().remove();
return false;
}
}).appendTo(clonedField);
// Clone the cloned original and append it back to the list
$('#add-input').click(function() {
main.append(clonedField.clone());
return false;
});
The code is simpler and easier to understand then what you have there, and should work as you expect it.
See it on jsfiddle: http://jsfiddle.net/5ZFh6/

DEMO: http://aseptik.net/demo/remove-first-class-with-jquery-while-cloning
$(function() {
$('#add-input').click(function() {
$('<p><input type="text" name="user[]" /> ' +
'delete</p>').appendTo('#main');
});
// just for sake...
$('.icon-delete').live('click',
function() {
$(this).parent().fadeOut(500,
function() {
$(this).remove();
});
});
});
gotchas:
why you are cloning?
why you are placing the delete button in the first place?

i think this will do the trick.......$('p.child .icon-delete:first').css('display','none') is hiding all .icon-delete which is child of p.child. and in your case all p.child is a child of .icon-delete
$('p.child:first .icon-delete').css('display','none')

$('#add-input').bind('click',function ()
{
var newField = $('.child').clone();
newField.toggle().attr('class', '');
registerRemoveHandlers(newField, '.icon-delete');
$('p.child:last').after(newField); //append after not cloned child
newField.parent().children('p').find('a').show(); //show all 'delete' label
newField.prev().find('a').hide(); //hide label from the first child which is right the one before our clone
return false;
});
http://jsfiddle.net/K7F5K/

jquery Treeview highlighting selected item

i read docs
http://docs.jquery.com/Plugins/Treeview/treeview#options
also googled, but nothing found easy and good solution, how to highlighting the selected item. i use span so not redirect but nothing selected

This code will work for highlighting the file in a treeview:
$(document).ready(function(){
$("#index").treeview();
$('#index span.file').bind('click', function() {
//clear all clicked items if any
$('.selected').removeClass('selected');
//set this clicked
$(this).addClass('selected');
});
});
In jquery.treeview.css:
.treeview span.file.selected { background-color: #F0FFF0; }

You can select li items in the tree and add event listeners to them, like this:
$('#browser li.file').bind('click', function() {
//clear all clicked items if any
$('.clicked').removeClass('clicked');
//set this clicked
$(this).addClass('clicked');
})
Inside handler function 'this' word points to the clicked item.
Or if by 'selecting' you mean something else, you can also listen desired event type like in example.
$('#browser li.file').bind('mouseover', function() {
... your code ...
})

In the tree view, add an id tag to the added branches.
"<li><span id="myNode1" class='file'>Item2</span></li>"
Then you can use jQuery highlight to highlight the selected node.
$("#myNode1").click(function () {
$(this).effect("highlight", {}, 3000);
});
Or permanently change the style
$('#myNode1').css('styleFloat');

It may be out of date but I got past it by adding the following under jqueryFileTree.js's FileTree function (version 2.14)
function FileTree(el, args, callback) {
...
$el.delegate("li a", this.options.folderEvent, _this.onEvent);
$el.delegate("li a", "click", function(event){
$("#" + $el[0].id + " li a.selected").removeClass("selected");
$(this).addClass("selected");
});
}