I want to create a live change field input system with jQuery. This is my code:
$(function() {
$('td').on('dblclick', function() {
var tdValue = $(this).text();
var tdTag = $(this).html();
tdTag = '<input id="newClass" type="text" value="' + tdValue + '">';
$(this).html(tdTag);
$('input#newClass').on('change', function() {
var inputVal = $(this).val();
alert('inputVal = ' + inputVal);
var inputTag = $(this).html();
alert('inputTag = ' + inputTag);
var var3 = '<span> var3 ' + inputTag + '</span>';
alert(var3);
})
})
})
Why is inputTag and var3 empty? This is my (very simple) html code
Note that the td tags are repeated using a PHP while loop. Thank you in advance.
Now I don't have enough reputation to comment and I'm still confused. Try following codes and see if anything suits you.
var inputTag = $(this)[0].outerHTML;
or
var inputTag = $(this).parent()[0].outerHTML;
or
var var3 = '<span>' + inputVal + '</span>';
$(this).after(var3);
$(this).remove();
or if you just want to make the input field read only, try with
$(this).prop("readonly", true);
Related
I have a code to clear and paste text after clicking a button. This text is pasted into two different textareas and therefore my code has to clean up the intercepted content a bit differently. The problem is that it doesn't work to pass the content to another variable...
$(document).on('ready', function() {
$('.quoteMsg').click(function() {
var txt = $(this).closest('.replyBox').find('.replyMsg').html().trim();
var txtau = $(this).closest('.replyBox').find('.replyMsgau').text().trim();
txt = txt.replace(/(?:\r\n|\r|\n)/g, ' ');
txt = txt.replace(/<p class="c0">/gi, '');
txt = txt.replace(/<\/p>/gi, '');
txt = txt.replace(/</g, "<");
txt = txt.replace(/>/g, ">");
txt = txt.replace(/&/g, "&");
txt = txt.replace(/"/g, '"');
txt = txt.replace(/'/g, "'");
var txtq = txt; //it doesn't work to pass the whole value to the txtq variable
//txtq = txt; //also not working
txtq = txt;
txtq = txt.replace(/<blockquote>/gi, '');
txtq = txt.replace(/<\/blockquote>/gi, '[hr][i]' + txtau + '[/i]: ');
var txte = txt; //it doesn't work to pass the whole value to the txte variable
//txte = txt; //also not working
txte = txt.replace(/<blockquote>/gi, '[quote]');
txte = txt.replace(/<\/blockquote>/gi, '[/quote]\n');
txte = txt.replace(/<blockquote>/gi, '');
$("textarea[name='tresckomentapisz']").val('[quote]' + txtq + '[/quote]\n' + txtau + ', ');
$("textarea[name='editkomtxt']").val(txte);
});
});
I want txtq and txte to format the value differently for <blockquote>, but data transfer from txt doesn't work - why?
I need this efect for <quote>:
console.log(txtq + '|' + txte + '|' + txt);//[hr][i]etc[/i] | [quote]\n
but is working like that:
console.log(txtq + '|' + txte + '|' + txt);//<blockquote>|<blockquote>|
For txtq and txte, you are modifiying txt var.
Insted of:
txtq = txt.replace(/<blockquote>/gi, '');
try:
txtq = txtq.replace(/<blockquote>/gi, '');
I parse the result of XMLHttprequest() into a JSON object, then for each node of that object I create a div to store the informations.
Finally I add each div as innerHTML of a parent div.
Here the relevant part
xhr.onreadystatechange = function() {//Call a function when the state changes.
if(xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var html="";
var linksDiv = document.getElementById('links');
if (response.error != true){
for (var i=0; i< response.links.length; i++){
var l = response.links[i];
var curId = l.id;
var curLink = l.link;
var curCreated = l.created_at;
var curOrigin = l.origin;
html = "<div id=\"link"+curId+"\" >"+
"<label><b>Id </b></label><label>"+curId+"</label> </br>"+
"<label><b>Link </b></label><label>"+curLink+"</label> </br>"+
"<label><b>Created </b></label><label>"+curCreated+"</label> </br>"+
"<label><b>Origin </b></label><label>"+curOrigin+"</label> </br></br>"+
"</div>";
linksDiv.innerHTML += html;
var curDiv = document.getElementById('link'+curId);
console.log("curDiv is"+'link'+curId);
curDiv.addEventListener('click', function(){
curDiv.style.background="gray";
getLink(curId);
});
}
}
}
}
unfortunately
curDiv.addEventListener('click', function(){
curDiv.style.background="gray";
getLink(curId);
});
doesn't work.
I already tried to make sure that the div exist (the console.log("curDiv is"+'link'+curId); works just fine)
and even used different ways like curdDiv.onmouseover = function(){curDiv.style.background="gray";}
If i put curDiv.style.background="gray"; outside the addEventListener() every div's background gets correctly changed.
If i put onmouseover="this.style.background='gray';" as inline property of the div tag when i generate it, it works as well, but i don't want javascript in the html since I will transform this page in a Chrome Extension and javascript must be separated
Please don't get confused from the mouseover tries, I need onclick behavior, but was just testing different thing to see if they worked.
I looked for a long time on SO for an answer, as you can see from my tries, but couldn't find something that worked for me. Probably there is something that I don't get.
Ps.
Let me know if you need a sample JSON data to test the function.
I think you should use
html = document.createElement('div');
html.id = 'link' + curId;
html.innerHTML = "<label><b>Id </b></label><label>" + curId
+ "</label> </br><label><b>Link </b></label><label>" + curLink
+ "</label> </br><label><b>Created </b></label><label>" + curCreated
+ "</label> </br><label><b>Origin </b></label><label>" + curOrigin
+ "</label> </br></br>";
html.addEventListener('click', function(){
this.style.background="gray";
getLink(this.id);
});
linksDiv.appendChild(html);
instead of
html = "<div id=\"link"+curId+"\" >"+
"<label><b>Id </b></label><label>"+curId+"</label> </br>"+
"<label><b>Link </b></label><label>"+curLink+"</label> </br>"+
"<label><b>Created </b></label><label>"+curCreated+"</label> </br>"+
"<label><b>Origin </b></label><label>"+curOrigin+"</label> </br></br>"+
"</div>";
linksDiv.innerHTML += html;
var curDiv = document.getElementById('link'+curId);
console.log("curDiv is"+'link'+curId);
curDiv.addEventListener('click', function(){
curDiv.style.background="gray";
getLink(curId);
});
Check this working code. make delay so that event will attached to element.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function populateLink() {
var html = "";
var linksDiv = document.getElementById('links');
for (var i = 0; i < 10; i++) {
var l = 'l-' + i;
var curId = i;
var curLink = 'l.link-' + i;
var curCreated = 'l.created_at_' + 1;
var curOrigin = 'l.origin_' + i;
html = "<div id=\"link" + curId + "\" >" +
"<label><b>Id </b></label><label>" + curId + "</label> </br>" +
"<label><b>Link </b></label><label>" + curLink + "</label> </br>" +
"<label><b>Created </b></label><label>" + curCreated + "</label> </br>" +
"<label><b>Origin </b></label><label>" + curOrigin + "</label> </br></br>" +
"</div>";
linksDiv.innerHTML += html;
//var curDiv = document.getElementById('link' + curId)
//curDiv.addEventListener('click', function () {
// this.style.background = "gray";
// getLink(this.id);
//});
attachEvent(curId);
}
}
function attachEvent(curId) {
setTimeout(function () {
var curDiv = document.getElementById('link' + curId)
curDiv.addEventListener('click', function () {
this.style.background = "gray";
//getLink(this.id);
});
}, 100);
}
window.onload = populateLink;
</script>
</head>
<body>
<div id="links"></div>
</body>
</html>
I have tried my best to debug thoroughly but i just can't figure out why this code does not work.. I know its my fault but i can't find the bug. Please help me guys
https://codepen.io/blaze4dem/pen/zZmqKa
var docs = document.getElementById('pag_temp').innerHTML;
var template = Handlebars.compile(docs);
Handlebars.registerHelper("makeradio", function(name, options){
var radioList = options.fn();
radioList = radioList.trim().split("\n");
var output = "";
for(var val in radioList){
var item = radioList(val).trim();
output += '<input type="radio" name="'+ name +'" value="'+ item +'"> '+ item + '<br/>';
};
return output;
});
var tempdata = template({});
document.getElementById('dynamic').innaHTML += tempdata;
I see 3 issues in the code.
for in is best to iterate over objects. In this case when you split the output is an array. User for loop instead.
You have a typo, when you are replacing the element. Supposed to be innerHTML
radioList(val) --> () will invoke a method, where as you want to access a property. So it has to be [].
You can try this approach. But I strongly feel that you should be using a different delimiter instead of \n
var docs = document.getElementById('pag_temp').innerHTML;
var template = Handlebars.compile(docs);
Handlebars.registerHelper("makeradio", function(name, options) {
debugger;
var radioList = options.fn();
var hasSpaces = radioList.indexOf(' ') > -1;
var hasNewLines = radioList.indexOf('\n') > -1;
if (hasNewLines) {
radioList = radioList.trim().split("\n");
} else if (hasSpaces) {
radioList = radioList.trim().split(" ");
}
var output = "";
// for in is best to iterate over objects.
// use for loop instead
for (var i = 0; i < radioList.length; i++) {
var item = radioList[i].trim();
output += '<input type="radio" name="' + name + '" value="' + item + '"> ' + item + '<br/>';
};
return output;
});
var tempdata = template({});
document.getElementById('dynamic').innerHTML += tempdata;
Check Fiddle
I am not able to create an edit in place feature with JavaScript/ jQuery. I could not use the plugin editinplace, because I need to put a datepicker on it. My code below does not work for some strange reason:
function editImpfDatumImpfung1Clicked(sender)
{
var sText = $(this).text();
var sId = $(this).attr("id");
$(this).attr("id", "tobechanged");
$(this).after('<input type="text" id="' + sId + '" value="' + sText + '" />');
$(this).remove();
bImpfung1Clicked = true;
$("#" + sId).focus();
$("#" + sId).datepicker(datepickerOptions);
if (bFirstRegisterImpfung1 === true)
{
firstRegisterImpfung1();
bFirstRegisterImpfung1 = false;
}
}
$(document).ready(function()
{
$elem = $("span[id^='impfung_1['");
if ($elem.length > 0)
{
bFirstRegisterImpfung1 = true;
$elem.click(editImpfDatumImpfung1Clicked);
}
});
Edit:
No Errors in console.
console.log($("#" + sId).val()); causes undefined
Edit 2:
Just needed to escape the id like this:
sId = sId.replace(/[[]/g,'\\[');
sId = "#" + sId.replace(/]/g,'\\]');
Thanks for your advice.
I imagine you have a typo in the following line:
$elem = $("span[id^='impfung_1['");
try this instead:
$elem = $("span[id^='impfung_1']");
I use this jQuery code to append a div to another:
$('#sklep').on('click', '.kup', function () {
var cena = $('#cena').text();
var tytul = $('#tytul').text();
var iden = $('#id').text();
var suma = $('#koszykdiv .cyfry').text();
var dodawanie = parseInt(cena) + parseInt(suma);
$('.cyfry').text(dodawanie);
var source = $("#miniatura").attr("src");
$('.koszyk_content_items').append($('<div class="item_koszyk"><div class="miniatura_koszyk"><img width="165" height="110" src="' + source + '"/></div><span id="opis">' + tytul + ' - ' + cena + ' zł - </span><span class="identyfikator" style="display:none;">' + iden + '</span>USUŃ</div>'));
var licznik = $('#koszykdiv .licznik').text();
alert(licznik);
$('#identyfikator').text(licznik);
var licznik_dodawanie = parseInt(licznik) + 1;
$('#koszykdiv .licznik').text(licznik_dodawanie);
$.cookie("obraz" + licznik_dodawanie, id);
var cena = '';
var tytul = '';
var iden = '';
var source = '';
});
but it always appends a div with the same variables values, even if parent of '.kup' href has another text values. Can you help me and tell where the problem is?
You say in your question that you get the same variable values "even if parent of '.kup' href has another text values."
This is because nothing in your code is relative to the '.kup'-element. You get the src-attribute of the element with id=miniatura everytime.