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();
});
Related
So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?
https://jsfiddle.net/yjL7L6g7/3/
$(document).ready(function() {
$('button').click(function() {
if ($(this).html() == 'Favorite') {
var $favorited = $(this).parent().parent().parent().clone();
$(this).html('Favorited');
$favorited.find('button').html('Unfavorite');
$($favorited).click(function() {
$(this).remove();
});
$('#favorites').append($favorited);
}
});
});
And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice?
The questions might be stupid but I am still on my first steps in learning jquery
I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.
$(document).ready(function () {
$('button').click(function () {
if ($(this).html() == 'Favorite') {
var that = this;
$(this).html('Favorited');
var id = $(this).attr('id');
$('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>');
$('#' + id + 'Remove').click(function () {
$(this).remove();
$(that).html('Favorite');
});
}
});
});
As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:
<button style="display: inline;">Button1</button>
<button style="display: inline;">Button2</button>
Let me know if you have any questions.
I have looked all over and found many similar threads, but none of them really answered my question with this specific situation:
I want to, when I create a dynamic Checkbox, and want to remove the specific checkbox and the text by clicking on the trash image. It seems to not work when I want to remove.
Live Demo
HTML:
<input type="text" id="checkBoxName" />
<input type="button" value="ok" id="btnSaveCheckBox" />
Jquery:
$(document).ready(function() {
$('#btnSaveCheckBox').click(function() {
addCheckbox($('#checkBoxName').val());
$('#checkBoxName').val("");
});
});
function addCheckbox(name) {
var container = $('#cblist');
var inputs = container.find('input');
var id = inputs.length+1;
$('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
$('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);
$('<img />', { "src": "/Pages/Images/trashDialog.png", "class": "removeCheckBoxDialog"}).appendTo(container);
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb :checkbox").remove();
});
$('<br/>').appendTo(container);
}
CSS:
.removeCheckBoxDialog {
margin-left:10%;
cursor:pointer;
}
Try below jQuery:
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove().prev().addBack().remove();
$(this).remove();
});
Fiddle
The above wasnt clearing the label so i edited it a bit :
$('#cblist').on('click','.removeCheckBoxDialog', function (e) {
$('#'+$(this).prev().attr('for')).remove();
$(this).next('br').remove();
$(this).prev().remove();
$(this).remove();
});
Fiddle
Add this
$("#cb"+id).remove();
$('label[for=cb'+id+']').hide();
$(this).nextAll('br').remove();
$(this).remove();
to your click function
$('.removeCheckBoxDialog').on('click', function (e) {
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();
$(this).nextAll('br').remove();
$(this).remove();
});
DEMO
Try this
$("#cb"+id).remove();
$('label[for=cb'+id+']').remove();
Try this. I have done the following:
Appended a div to contain each of the 3 components
I used var container2 = $("div:last-of-type", container); to select this div.
Finally I simply used $(this).parent().remove(); To get the parent and remove it.
And also I removed the <br> as the div does the job of new line by default.
I'm trying to create an "inline editor" for my profile-page, where I'm using ajax to update the users informations, but I have some problems I can't seem to fight.
I want to replace some spans with inputs with the same text inside, so that the user can edit his informations directly on the profile site.
I've found some scripts which works okay, but only when there is one span to replace. I need to replace multiple spans with inputs.
This is what I've tried this:
HTML:
<span id="name" class="editable">My name</span><br>
<span id="email" class="editable">My email</span>
<span class="edit">Edit</span>
jQuery:
$(document).on('click', '.edit', function() {
$(this).text("Change").attr('class', 'change');
$('span.editable').replaceWith($('<input type=text>').attr({ id: 'name', value: $('span.editable').text() }));
});
$(document).on('click', '.change', function() {
$(this).text("Edit").attr('class', 'edit');
// Do Ajax Call
});
It works, somehow, but the text in the inputs are all the same, which is not intended. I need the correct text from each spans to be put, in each input.
I also need someway to identify the inputs, so the new values will be stored correctly using an AJAX call, but i don't know how to identify them. Should I use ID or NAME?
I hope you can understand my question and that someone can/will help me with this. I would really appreciate that.
Thanks Martin
Fiddle Demo
Edit fiddle - JSFiddle
jsfiddle.net
You can use the version of replaceWith that accepts a function:
http://jsfiddle.net/Wb74k/
$('span.editable').replaceWith(function () {
return $('<input type=text>').attr({
id: 'name',
value: $(this).text()
})
});
replace this line:
$('span.editable').replaceWith($('<input type=text>').attr({ id: 'name', value: $('span.editable').text() }));
with:
$('span.editable').each(function(index, obj){
$(obj).replaceWith($('<input type=text>').attr({ id: 'name', value: $(obj).text() }));
})
$(document).on('click', '.edit', function() {
$(this).text("Change").attr('class', 'change');
$('span.editable').each( function() {
$(this).replaceWith($('<input type="text">').attr({ id: $(this).attr("id"), value: $(this).text() }));
});
});
Fiddle
I want to know how I can change the content of a specific div that has data attribute.
I am using a click event and .html
I have many div elements as follows:
<div class"name-of-class" data-user-id="ID">Content that changes</div>
I already have the ID variable to identify what div I need to change
$('.name-of-class').click( function() {
$('.name-of-class').html('new content');
}
So, I want to use the data attribute data-user-id inside the click function to specify exactly what div I need to change.
I hope I am making myself clear, if not, I will try to explain myself better.
You can use Attribute Equals Selector [name="value"].
$('.name-of-class').click( function() {
$('[data-user-id="id"]').html('new content');
}
Edit, based on comments, to pass variable
$('.name-of-class').click( function() {
$('[data-user-id="'+ idVariable +'"]').html('new content');
}
Use this:
HTML:
<div class="name-of-class" data-user-id="ID">Content that changes</div>
jQuery:
$('.name-of-class').click( function() {
$(this).html('new content');
});
You can use Attribute Equals Selector [name="value"]
$('.name-of-class').click( function() {
$('.name-of-class[data-user-id="id"]').html('new content');
}
EDIT
As per comment
$('.name-of-class').click( function() {
$('.name-of-class[data-user-id="' + useridvariable +'"]').html('new content');
}
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");
});
}