Develop Reference

How can I add "tags" to a search field using Jquery

I have some tags (tagbutton) in a table, each tag has its own id, what I want to achieve is when the user clicks on the tag, a hidden input is created in the form with the value of the div (or tag) that has been clicked on. I also want the clicked div to be copied in the tagselected div.
I have no idea how to do that on jquery. Thank you very much in advance for your help.
<table> <tr>
<td> <div class="tagbutton" id="jazz"> Jazz </div> </td>
<td> <div class="tagbutton" id="classical"> Classical </div> </td>
<td> <div class="tagbutton" id="R&B"> R&B </div> </td>
</tr> </table>
<div id="tagselected"> </div>
<form> <input type="text"> <button ="submit"> Submit </button> </form>
Here is the javascript function that I have to copy the div, however when I clicked on it the entire table is copied
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});

This code is wrong:
$('#jazz').click(function () {
$('.tagbutton').clone().insertAfter("#tagselected");
});
The problem with this code is that you are retrieving all the items with class tagbutton on the whole page. If your click function is on the item you want then you should be able to just use this to access the clicked item.
so something like :
$(this).clone().insertAfter("#tagselected");
This code is not tested and is just the simple change of the initial jQuery selector.
I assume the problem you have with the hidden fields is the same - that you were selcting all tags instead of just the one you clicked so hopefully this will solve that problem too.

Change with jQuery a cell of a table created with JSF

From within a xhtml page created with JSF, I need to use JavaScript / jQuery for changing the content of a cell of a table. I know how to assign a unique id to the div containing the table, and to the tbody. I can also assign unique class names to the div itself and to the target column. The target row is identified by the data-rk attribute.
<div id="tabForm:centerTabView:personsTable" class="ui-datatable ui-widget personsTable">
<table role="grid">
<tbody id="tabForm:centerTabView:personsTable_data" >
<tr data-rk="2" >
<td ... />
<td class="lastNameCol" role="gridcell">
<div> To Be Edited </div>
</td>
<td ... />
</tr>
<tr ... />
</tbody>
</table>
</div>
I have tried with many combinations of different jQuery selectors, but I am really lost. I need to search my target row and my target column inside that particular div or inside that particular table, because the xhtml page may contain other tables with different unique ids (and accidentally with the same row and column ids).

Something like this?
$("#tabForm\\:centerTabView\\:personsTable tr[data-rk=2] td.lastNameCol div").text("edited");
Or if personsTable is unique enough in the current view
$("[id$=personsTable] tr[data-rk=2] td.lastNameCol div").text("edited");

Please check this fiddle for your new html code
Fiddle without colon
Fiddle with Colon

Accessing a text box inside table row using javascript

I am using the following code
<tr id="row">
<td><input type="text" name ="first" id="first" onclick="goto("row")"/>
</td>
<td><input type="text" name ="second" id="second"/>
</td>
</tr>
<script>
function goto(row)
{
var row=document.getElementById("row");
}
</script>
here in the goto() function i am getting the table row by using id.I need to get the second text box inside this row when i clicking the first text box.How can i get the second text box using the table row id. Any idea ?.

First off, you're missing some equals (=) signs in your HTML. You might want to change that to name="first" and name="second". Secondly, I'm not sure why you have two elements with the same id of "second" when you could have changed one of them to "first" so they don't collide, and then you could easily select the second one with getElementById("second"). Simple mistake, right?

Change the ids, make them unique and you could directly access the input textbox like:
var txtbox = document.getElementById("YourTextboxId");

javascript hide() and show() not hiding all content as it's supposed to

I have the following code which is supposed to first change the text if a checkbox is checked (which works fine) and second, SHOW a div with dropdown boxes. If the checkbox is unchecked then it should HIDE the div again.
The problem is that the div contains a javascript generated dropdown box which allows one to add/remove fields based on their need.
If you test it, you'll notice that when you check the checkbox and then click on "Add country", then uncheck the checkbox again, the "Add country" disappears but the dropdowns generated don't disappear.
Is there any way to also hide the dropdowns again if the checkbox is unchecked again?
Here is the code:
http://jsfiddle.net/shannont/GpNdS/1/

Your html is invalid. You have
<table>
<div>
...
</table>
A <table> cell can directly contain tr/tbody/thead tags only. A bare div inside a table will "leak" out of the table.
You also have two </table> closing tags below, but have only one <table> tag open.
Fix your html first. Clean it up so it's more legible - don't stuff script blocks into the middle of markup. It's confusing and hard to read.

Your browser is auto-correcting your syntactically invalid html. You can't put divs and images inside a table. You need to put in rows and cells first. The page then breaks because the javascript isn't targeting what you think it is targeting.
<table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
<div id="detailedID" style="display: none;">
<img src="http://placehold.it/30x30" title="Add Row" border="0" onclick="addRowToCountryPrice('',''); return false;">
Add a Country
<input type="hidden" name="TotalLinesCountry" id="TotalLinesCountry">
Example Fix:
<table cellpadding="0" cellspacing="0" id="tblCountryCurrency">
<tr>
<td><div id="detailedID" style="display: none;"></td>
</tr>
</table>
You probably don't want to use a table here at all though. So I would recommend pulling that out and replacing it with a div. Then your code will probably work.

Well even if it's a mess, just put your
<div id="detailedID" style="display: none;">
Before the table.

remove or hide text using jquery?

I need to hide some text (Add £0.20) which is within a td. I have a parent DIV class at the top. Here is the cut down HTML:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, Add £0.20<br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
the css path looks like this:
html body div#container div#body-container div#content-area div#content-text div#kitProduct div#KitFormOptions form table tbody tr.LightCell td

You can dynamically wrap price with span using replace with regular expression:
$("#KitFormOptions td").each(function(){
$(this).html(
$(this).html().replace(/(Add £\d*\.\d{2})/,"<span class='price'>$1</span>")
)
})
And hide them
$('span.price').hide()
This replace any decimal format consisting zero of more decimal numbers before dot and exactly two numbers after dot.
Therefore it will be replaced any price which will be on site.

You can do the following but its not a good idea. Better is to create a span around £0.20 and hide this. But you say you cant do this.
$("#KitFormOptions").html($("#KitFormOptions").html().replace("£0.20",""))

Why hide it? Can't you just delete it? Otherwise you'll need to add a <span> around it or something similar so you can reference it.
Where is the HTML coming from and why is the price even there then?

The best solution can looks like: push your ", add 20" to span and set class="hide" for the span tag.

A div element should not contain a lonely td but try this snippet, it replaces the text in all tdelements within your div #KitFormOptions:
$('#KitFormOptions td').text('Text Personalisation');

Wrap it in some element like <span> give it a class, and hide that element.
Example:
<div id="KitFormOptions">
<td valign="top" align="left">Text Personalisation, <span class="price">Add £0.20</span><br><br><textarea value="" name="KitGroupID_98_TextOption_796" rows="5" style="width:100%"></textarea></td>
</div>
jQuery:
$('span.price').hide()