I have a simple layout with a textblock and one <a>, like:
text1 edit
When I click on the <a>, I want this textblock to become text input. How is that possible with jQuery?
Use jQuery replaceWith():
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
$(this).parent().replaceWith("<input />");
});
});
http://jsfiddle.net/Dqkyg/1/
Furthermore, you can fill the textbox with the text outside the link like so:
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var txt = $(".text").html();
$(".text").replaceWith("<input value='" + txt + "' />");
});
});
http://jsfiddle.net/Dqkyg/5/
The following will replace the edit with Save & Cancel options:
<div>
<span class="text">testing</span> <a href='#'>test</a>
</div>
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var txt = $(".text").html();
$(".text").replaceWith("<input value='" + txt + "' />");
$(this).replaceWith("<a href='#'>Save</a> | <a href='#'>Cancel</a>");
});
});
http://jsfiddle.net/Dqkyg/6/
There are plenty of plugins that you can use... No need to reinvent the wheel
http://www.appelsiini.net/projects/jeditable
Hmm ... ur a bit unclear... but
http://jsfiddle.net/mMYrf/4/
<div class="dataGrid">
<span>test</span>
edit
</div>
And
$('.dataGrid a').click( function(e) {
e.preventDefault();
var EditGrid = $(this).parent().children('span');
var DataTxt = EditGrid.text();
var InputHtml = '<input type=text" value="'+DataTxt +'" />';
$(this).text('Save?');
EditGrid.html(InputHtml);
});
<div class="editable">This is the content.</div>
<script type="text/javascript">
$(function() {
$('.editable').each(function() {
var a = $('edit');
(function(link, parent) {
link.click(function() {
link.remove();
var textField = $('<textarea/>').val(parent.html());
parent.replaceWith(textField);
delete parent, link;
});
})(a, $(this));
$(this).append(" ").append(a);
});
});
</script>
Working example: http://jsfiddle.net/BnH29/
Related
I have an input-text. If you type something, the text appears below (see code snippet).
Now, I need to do the same with a previous step: clicking a button (preferably a checkbox) to append/remove all. Here is my failed idea: DEMO (it appends the input text, but when you type, text won't apear below like it does on my code snippet).
I feel like the function to add text below does not work because there is a problem with selecting the appended element. How do I do this?
Any more simple idea to do this would be great
var name1 = document.getElementById('name');
name1.addEventListener('input', function() {
var result = document.querySelector('.X');
console.log(this.value );
result.innerHTML = this.value;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>What is your name? </label><input type="text" id="name">
<p>Your name is: <span class="X"></span></p>
Put your first part of the snippet into appending logic while clicking the add button. As in your codes, the input box is appended to the document after its listener being attached.
if (!added) {
$content = $(NewContent).appendTo('.firstappend');
// attach listener after input box actually exists!
var name1 = document.getElementById('A');
name1.addEventListener('input', function() {
var result = document.querySelector('span.Y');
console.log(this.value );
result.innerHTML = this.value;
});
}
$(function() {
let NewContent = '<div class="added">' +
'<p>' +
'<label>What is your name? </label>' +
'<input type="text" id="A">' +
'</p>' +
'<p>Your name is: <span class="Y"></span></p>' +
'</div>';
$(".addremove").on('click', function() {
if ($(".added").length) {
$(".added").remove();
} else {
$(".firstappend").append(NewContent);
}
});
$(document).on('change keyup', '#A', function(event) {
$("span.Y").html($(event.currentTarget).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toadd">
<button type="button" class="addremove">Do you have a name?</button>
</div>
<div class="firstappend"></div>
as from the DEMO you included,
appended elements to document cannot be invoked explicitly, since you're using jQuery, you can do this
$(document).on('change keyup', '#A', function(event) {
$("span.Y").html($(event.currentTarget).val());
});
HTML:-
'<td>' + item.Message + ' <input type="button" class="btn btn-info" id="' + item.LogID + '" onclick="Clicked(this);" value="View More" /> <p> ' + item.FormattedMessage + ' </p></td></tr>'
this is button in table
Jquery:-
function Clicked(e)
{
var SelectedID = e.id;
$("p").toggle();
};
In this When i click on button i want to show selected id column only and hide rest columns.
But when i click on button it shows all column or hides all column
In addition to balachandar answer. if you want to hide p tag initially then use display:none for p tag
function Clicked(e)
{
var SelectedID = e.id;
$("#"+SelectedID).next("p").toggle(function(){
var btn_text = $("#"+SelectedID).val();
if(btn_text == "View More"){
$("#"+SelectedID).val("Hide");
}else{
$("#"+SelectedID).val("View More")
}
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" class="btn btn-info" id="myID" onclick="Clicked(this)" value="View More" /> <p style="display:none"> Some Text you want to in future </p>
Try this below code
function Clicked(e)
{
var SelectedID = e.id;
$("#"+SelectedID).next("p").toggle();
};
Hope this will help you.
You can select the element by its id and find the p element inside:
function Clicked(e)
{
var SelectedID = e.id;
$("#" + SelectedID).find("p").toggle();
};
Or just use this:
function Clicked(e)
{
$(this).find("p").toggle();
};
function Clicked(e)
{
var SelectedID = e.id;
$("#" + SelectedID).toggle();
};
You can use:
function Clicked(d)
{
var SelectedID = d.id;
$("#" + SelectedID).toggle();
};
This function picks all p inside td of your table and hides all of them, then it shows only the one with the same ID as the button.
function Clicked(e) {
var SelectedID = e.id;
$("td p").hide();
$("#" + SelectedID).show();
};
I basically have a field element with name="one".As soon as I fill the field,the value should be appended to an href <a name="number" href="example.php" </a> .
It should append it in the format href="example.php?number=one" after i fill the field.Is this possible?Im new to jquery.
I have this for getting the values in the jquery
var num = $("[name='number']").val();
but the rest,appending things,im not sure how to do that.Any help?
Try
var $a = $('a[name="number"]');
//store the original value so that we can handler multiple changes
$a.data('href', $a.attr('href'))
$("#one").change(function () {
$a.attr('href', $a.data('href') + '?number=' + this.value)
});
Demo: Fiddle
Note: This solution does not support handling values from multiple input elements
With this:
var $a = $("a[name=number]"),
href = $a.attr("href");
$a.attr("href", href.split('?')[0] + "?number=" + num);
Cheers
DEMO : http://jsfiddle.net/ETsA8/5/
Html :
<a name="number" href="example.php">ss </a>
<input id="one" type="text" >
Js:
$( document ).ready(function() {
var link = $("[name='number']").attr("href");
$("#one").change(function(){
var a_href = $("#one").val();
$("[name='number']").attr("href", link+'?number='+a_href);
});
});
$('a[name="number"]').attr(href(function(i, oldhref) {
return oldhref + '?number=' + value;
});
I have the code below
<script>
$(document).ready(function(){
//function showChar(){
shortcut.add("Ctrl+F1", function()
document.activeElement.id.value +="text";
});
var counter=0;
setInterval(function() {
for(int i=0;i<4;i++){
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<div><label style="float:left;"></label></div><pre><textarea name="textbox' + counter + '" id="textbox" ><%=rsta2.getString("data")%></textarea></pre>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
}
CKEDITOR.replace( 'textbox'+i+'',
{
toolbar :
[
['Source'],
['Bold','Italic','Underline','Strike'],
],
height: 300,
width: 700
});
},1000);
});
</script>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv0">
</div>
</div>
The above code(minus the ckeditor part of the code) adds 4 textareas,depending on which textarea is active when I press ctrl+f1 text is added to that particular textarea.But when I replace textarea with ckeditor the shortcut keys dont work.What should I do?
Replace your shortcut function with this:
shortcut.add("Ctrl+F1", function() {
var $active_textarea = $('textarea:focus');
var current_value = $active_textarea.val();
$active_textarea.val(current_value + "text");
});
You want to get the textarea that has focus, you can use
$('textarea:focus').val(paste_text);
that should do it.
I have one question. Is possible delete <span> element added with javascript append?
When i try remove added span then nothing happens.
Like this:
<script type="text/javascript">
$(document).ready(function(){
$('#SelectBoxData span').click(function(){
var StatusID = this.id;
var StatusIDSplit = StatusID.split("_");
var StatusText = $('#SelectBoxData #' + StatusID).text();
$("#SelectBox").append('<span id=' + StatusID + '>' + StatusText + '</span>');
$("#SelectBoxData #" + StatusID).remove();
InputValue = $("#StatusID").val();
if(InputValue == ""){
$("#StatusID").val(StatusIDSplit[1]);
}
else{
$("#StatusID").val($("#StatusID").val() + ',' + StatusIDSplit[1]);
}
});
$('#SelectBox span').click(function(){
var StatusID = this.id;
$("#SelectBox #" + StatusID).remove();
});
});
</script>
<div id="SelectBoxBG">
<div id="SelectBox"><div class="SelectBoxBtn"></div></div>
<div id="SelectBoxData">
<span id="StatusData_1">Admin</span>
<span id="StatusData_2">Editor</span>
<span id="StatusData_4">Test 1</span>
<span id="StatusData_6">Test 2</span>
</div>
<input type="hidden" id="StatusID" />
</div>
Please help me.
Thanks.
Yes, you can delete them. However, you can't add click event handlers to them before they exist. This code:
$('#SelectBox span').click(function(){
var StatusID = this.id;
$("#SelectBox #" + StatusID).remove();
});
will only add a click event handler to <span> elements inside of #SelectBox at the time the code is run (so, based on your provided HTML, zero elements). If you want the event handler to react to dynamically added elements then you need to use a technique called event delegation, using the .on() function:
$('#SelectBox').on('click', 'span', function() {
$(this).remove(); // equivalent to the code you had before
});