I have a td containing a list of values (anchor tags) that are separated with a comma.
Is there any way I can create a button to delete specific values out of this string, e.g. the 1st or 2nd or 3rd value ?
I first tried to resolve this with a tagsmanager plugin but all the tagsmanagers I know only work with text but not with links / anchor tags so the above is meant as a work-around here.
The background is that I have a page that shows a list of uploaded files as links (created with PHP) and I would like to allow the users to be able to delete one or more of these links if no longer needed. The value of all links is the word File and a number, e.g. File 1, File 2, File 3 etc.
Example td:
<td>
File 1,File 2,File 3,File 4,File 5
</td>
Thanks for any help with this, Tim.
You can set the td to have an ID like <td id="myID"> and then you can very easily select the nth-child of that td with jQuery:
var index = 4; // or whatever you want it to be
$("#myID a:nth-child(" + index + ")").remove();
If you don't want to set the ID of the td, you can of course select it another way, for example using
$("td:nth-child(" + tdNum + ")" ); // for the td
$("td:nth-child(" + tdNum + ") a:nth-child(" + linkNum + ")" ); // for the links
You can achieve this effect in a number of ways. This one might be useful if you want to have a separate button to delete each link.
Just place a button after each link and assign the click event to something like:
$('button').click(function(){
$(this).prev('a').remove();
$(this).remove();
});
DEMO
Your easiest solution would be to wrap the items (and commas) in <span> tags:
<span class="file1">File 1,</span>
<span class="file2">File 2,</span>
<span class="file3">File 3,</span>
<span class="file4">File 4,</span>
<span class="file5">File 5</span>
Then you can simply use jQuery to remove the whole span:
$('.file1').remove();
I would make the links look like clickable tags, which when clicked will remove themselves.
<td>
File 1
File 2
File 3
File 4
File 5
</td>
Then use JavaScript to make the links "delete" on click
$('a').on('click', function(e){
this.remove(); // remove the clicked "<a>" tag
e.preventDefault(); // prevents the link from going anywhere
})
Here is a working example
And here is an example that allows you get more info about each clicked link so you could make a server-side request to remove the item
Related
I want apply my JS on all my Textarea
$_PAGE->addJSOnLoad("
$('#textarea').keyup(function() {
var nombreCaractere = $(this).val().length;
var msg = nombreCaractere + ' caractére(s)';
$('#compteur').text(msg);
'<span id=compteur>' 0 caractére(s)'</span>';
});
");
This code is in constructor of my class textarea I wnat call him 1 times for all textarea
You should change the jquery selector from $('#textarea') to $('textarea') so as to target all textarea in the document.
Also you may want to use $('.compteur') in place of $('#compteur') so that your can have multiple counters, one for each textarea. Do not forget to update your html correspondingly
Edit: Please use $(this).find('.compteur') in place of $('.compteur') so that only the counter within the current textarea is affected
$('#textarea')
selects a HTML element with the ID "textarea". So this will be at max one textarea-element. The selector for all textareas would be just
$('textarea')
javscript event handlers can take a parameter (Event), so
$('textarea').keyup(function() {
var nombreCaractere = $(this).val().length;
var msg = nombreCaractere + ' caractére(s)';
// code for display, todo!
}
would put the event handler on every textarea (<textarea>) on your page. However, the display for the character count is a bit more difficult, unless it's one fixed element that scrolls along.
but let's say, your textareas all have an attribute data-charcount="[id]" that has the id of a div or something, that will display the character count.
Then you could replace
// code for display, todo!
with
$("#"+this.dataset.charcount).text(msg); // <- assuming this works
and your example textarea should look like this:
<textarea data-charcount="compteur"></textarea>
<span id="compteur"></span>
please note: every id should only appear once!
edit replace event.target with this, and fixed small error with string concat
What I'm trying to do is, when one of six divs is clicked, a separate div will have 3 specific divs appear in it. Each of the original six divs have three similar but different divs related to it.
http://jsfiddle.net/petiteco24601/hgo8eqdq/
$(document).ready(function () {
$(".talkbubble").mouseout(function(){
$(".sidebar").show();
});$
$(".talkbubble").click(function(){
$
How do I make it so that when you click a "talkbubble" div, a different "sidebar" div appears with all its contained elements, and when you mouseout, the first talkbubble div automatically activates?
Here is a demo of how to do this: http://jsfiddle.net/n1xb48z8/2/
The main part of this example is some javascript that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarIndex = $(this).data('sidebar-index');
showSideBar(sidebarIndex);
});
$('#Container').mouseleave(function(){
showSideBar(1);
});
});
function showSideBar(index){
$('.sidebarContent').hide();
$('.sidebarContent[data-index="' + index + '"]').show();
}
.data('some-name') will get you the attribute data-some-name="" on the specific element, this is a html 5 attribute and if you do not want to use it you can instead give each of the elements their own class names such as:
<div class="sidebarContent subBarContent_1">
<!-- content -->
</div>
and use the '.subBarContent_1' as your jquery selector instead. You would then also have to have some sort of data attached to your clickable divs to identify which one you wanna show, you could use a hidden field to do that like:
<input type="hidden" class="subContentSelector" value="subBarContent_1" />
The javascript for that looks like this:
$(document).ready(function(){
showSideBar(1);
$('.expander').click(function(){
var sidebarSelector = $(this).find('.subContentSelector').val();
showSideBar(sidebarSelector );
});
$('#Container').mouseleave(function(){
showSideBar('subBarContent_1');
});
});
function showSideBar(selector){
$('.sidebarContent').hide();
$('.sidebarContent.' + selector).show();
}
Ps. the overflow:hidden css is because chrome was messing up the placement of the sidebar content otherwise... oh chrome, you silly goose
I have an input box for zip code entry's, when a user inputs a zip code I want to show a specific DIV.
It starts with everything hidden except for the input box and go button, then the user enters a zip code and the matching DIV shows (the DIV ID will be the zip code) There maybe hundreds of DIVs and possible inputs.
Here is what I have so far, note it starts showing everything (not what I want) but it kinda works
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == 60538) {
$("#60538").show("fast"); //Slide Down Effect
$("#60504").hide("fast");
}
else {
$("#60538").hide("fast"); //Slide Up Effect
$("#60504").show("500");
}
});
$("#full_day").change(function() {
$("#60504").hide("500");
$("#60538").show("500");
});
});
LINK to working File http://jsfiddle.net/3XGGn/137/
jsFiddle Demo
Using pure numbers as id's is what was causing the issue. I would suggest you change them to
<div id="zip60538">
Welcome to Montgomery
</div>
<div id="zip60504">
<h1>Welcome to Aurora</h1>
</div>
In the html (as well as in the css and the js as can be seen in the linked fiddle)
This will allow them to be properly referenced in the DOM
edit
jsFiddle Demo
If you had a lot of these to handle, I would probably wrap the html area in a div to localize it and then use an array to store the accepted zip codes, and make use of both of those approaches in the click event
$(document).ready(function(){
var zipCodes = [60538,60504];
$("#buttontest").click(function(){
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
$("#zip"+zipCodes[zipIndex]).show("fast");
});
});
Start off with all the div's style of display: none;. On your button click simply check that a div exists with that ID, if so, hide all others (use a common class for this) and show the right one:
$("#buttontest").click(function() {
var zip = $("#full_day").val();
if ( $("#" + zip).length ) {
$(".commonClassDiv").hide();
$("#" + zip).show();
}
});
I'm writing an application based on Django and Bootstrap that displays media files as thumbnails, along with a description and tags. I'd like these tags to be styled as regular Bootstrap labels and to be clickable.
I'm using X-editable to individually edit the description and tags (via Select2) inline and send them back to the server. That works well except for the tags. I cannot manage to:
Populate the container with tags with markup
Get the clean tags (without markup) to be fetched the x-editable widget
After doing the changes on the x-editable widget, return the clean tags and send them to the server
Add markup to the returned tags from the widget and re-populate the container with tags with markup.
Step 3 (sending clean data to the server) is something I can probably figure out or could be the subject of another question.
This fiddle should illustrate what I'm trying to do and the results: notice that when the edit button is clicked the widget loads the data with the unwanted markup.
HTML: X-editable tags setup and tag styling
<div class="controls controls-row">
<span class="tags" id="tags-editable-1" data-toggle="manual" data-type="select2" data-pk="1" data-original-title="Enter tags">
<span class="label">apples</span>
<span class="label">oranges</span>
<span class="label">pie</span>
</span>
<i class="icon-pencil"></i>
</div>
Javascript: set up X-editable and Select2
$('.tags').editable({
placement: 'right',
select2: {
tags: ['cake', 'cookies'],
tokenSeparators: [",", " "]
},
});
$('[id^="tags-edit-"]').click(function(e) {
e.stopPropagation();
e.preventDefault();
$('#' + $(this).data('editable') ).editable('toggle');
});
So the actual question is for steps 2 and 4: how can I strip the markup sent to the x-editable widget and re-add it to the results it returns?
I've found out after some experimentation, although the solution is not 100% perfect.
To preload data, I can use the data-value attribute in the HTML, as in data-value="apples, oranges, pie"
To display data in the format I want, I specify a function for the display option in X-editable. Here's the relevant bit.
.
display: function(value) {
$.each(value,function(i){
// value[i] needs to have its HTML stripped, as every time it's read, it contains
// the HTML markup. If we don't strip it first, markup will recursively be added
// every time we open the edit widget and submit new values.
value[i] = "<span class='label'>" + $('<p>' + value[i] + '</p>').text() + "</span>";
});
$(this).html(value.join(" "));
To load clean data in the editing widget, I'm using the shown callback.
.
$('.tags').on('shown', function() {
var editable = $(this).data('editable');
value = editable.value
$.each(value,function(i){
value[i] = $('<p>' + value[i] + '</p>').text()
});
});
This fiddle shows the code and a working example.
I got a generated list of links where every link has an unique id(number) and a class called "load".
I would like to change a picture on the other side of the page with the same number in the id as the link I clicked. Since id on elements are unique, i added folderid[number] infront of all the images
This is what i have so far (not working). I'm not sure if this is even close to correct but it feels like it :)
$(function(){
$(".load").click(function(){
var element = $(this);
var link_id = element.attr("id");
alert(link_id);
$("#folderid", link_id).attr("src", "img/folder_open.gif")
});
});
My pictures and links looks like this in the code:
<img src="img/folder.gif" id="folderid5" class="img_folder" alt="Folder"/>
<a href="#" id="5" class="load img_id5">
Thanks
It looks like you mean to select
$('#folderid' + link_id).attr(...)
If you mean your images have their IDs as:
folderid[1],folderid[2], etc
the '[' character is probably posing a problem with jQuery. You can try escaping it and using:
$("img#folderid\\["+link_id+"\\]").attr("src", "img/folder_open.gif");
I haven't had the need to escape characters in jQuery before, because I could simply change my naming convention, but I believe the above should work.
Another way to go would be to remove the brackets from the ID and use:
$("img#folderid"+link_id).attr("src", "img/folder_open.gif");
You are close. You need to concatenate the id onto the selector of the image instead of using a comma. Try this code:
$(function(){
$(".load").click(function(){
var element = $(this);
var link_id = element.attr("id");
alert(link_id);
$("#folderid" + link_id).attr("src", "img/folder_open.gif")
});
});
I think you need a + not a , on this line:
$("#folderid", link_id).attr("src", "img/folder_open.gif")
to
$("#folderid" + link_id).attr("src", "img/folder_open.gif")
http://docs.jquery.com/Events/live should do the trick for generated stuff.
Also: add a semicolon ( ; ) after attr(..., ...)
$("#folderid", link_id).attr("src", "img/folder_open.gif");