Develop Reference

Is there a way to allow a two way functions with text area?

I made this custom language replacer. But it works both ways. But the problem happens when you first do a translation from first text area. It outputs it inside the textarea beside it. But when I then go and delete the text inside the output. it will not let me use that textarea to get a reverse back to the custom language. it will only allow this if I refresh the page. Which I would like to evoid having to do.
function TranslatetoUnseen() {
var Translation = document.getElementById("Unseen").value;
Translation = Translation.replace(/ㅏ/g, "A"); // if ㅏ then A
Translation = Translation.replace(/\s\s+/g, ' '); // when to many spaces
Translation = Translation.toLowerCase();
document.getElementById("English").innerHTML = Translation[0].toUpperCase() + Translation.slice(1);
}
function TranslatetoEnglish() {
var TranslationEng = document.getElementById("English").value;
TranslationEng = TranslationEng.replace(/A/g, "ㅏ"); // if A then ㅏ
TranslationEng = TranslationEng.replace(/a/g, "ㅏ"); // if a then ㅏ
TranslationEng = TranslationEng.replace(/\s\s+/g, ' '); // Adds 1 more space
document.getElementById("Unseen").innerHTML = TranslationEng;
}
<table align="center" class="center" width="50%">
<tr style="font-size: 150%;">
<th width="386">Unseen</th>
<th width="386">English</th>
</tr>
<tr>
<td><textarea id="Unseen" oninput=TranslatetoUnseen() size="4" wrap="hard" draggable="false"></textarea></td>
<td><textarea id="English" oninput=TranslatetoEnglish() size="4" wrap="hard" draggable="false"></textarea></span>
</td>
</tr>
</table>
When I input something inside a box and then want to do it the reverse, it doesn't allow it. When it should allow it to go both ways

If there is no character at 0 (empty string) you get an error in this statement: Translation[0].toUpperCase()
use .value instead of innerHTML
function TranslatetoUnseen() {
var Translation = document.getElementById("Unseen").value;
Translation = Translation.replace(/ㅏ/g, "A"); // if ㅏ then A
Translation = Translation.replace(/\s\s+/g, ' '); // when to many spaces
Translation = Translation.toLowerCase();
document.getElementById("English").value = Translation.length === 0? "" : Translation[0].toUpperCase() + Translation.slice(1);
}
function TranslatetoEnglish() {
var TranslationEng = document.getElementById("English").value;
TranslationEng = TranslationEng.replace(/A/g, "ㅏ"); // if A then ㅏ
TranslationEng = TranslationEng.replace(/a/g, "ㅏ"); // if a then ㅏ
TranslationEng = TranslationEng.replace(/\s\s+/g, ' '); // Adds 1 more space
document.getElementById("Unseen").value = TranslationEng;
}
<table align="center" class="center" width="50%">
<tr style="font-size: 150%;">
<th width="386">Unseen</th>
<th width="386">English</th>
</tr>
<tr>
<td><textarea id="Unseen" oninput=TranslatetoUnseen() size="4" wrap="hard" draggable="false"></textarea></td>
<td><textarea id="English" oninput=TranslatetoEnglish() size="4" wrap="hard" draggable="false"></textarea></td>
</tr>
</table>

JQuery - disable false and reset value from an input using css class and .each loop

Im trying to make a function but the alerts that i put in my each loop are not displayed. This function has to disabled:false and .val("") every input with a specific class. The function is working but the problem is that the function is not going in the each loop and i dont know why. The first alert() is executed but not the second.
The function :
function resetNivPrep(){
alert("test");
// Déclaré
//LDQL
$(".5001").each(function(){
alert("test1");
$(this).attr('disabled',false);
$(this).val("");
});
};
The HTML :
<div id="tableNiveau" class="declare">
<table id="tableNivPrep" class="tabData" border="0" style="display:block">
<thead>
<tr class="entete">
<th colspan="2" rowspan="2" class="entete">Préparation</th>
<th colspan="2" class="entete">Déclaré</th>
<th colspan="2" rowspan="2" class="entete">Option</th>
<th colspan="2" rowspan="2" class="entete" style="width:20%">Offre grand compte</th>
</tr>
<tr class="entete">
<th class="entete">Exemplaires</th>
<th class="entete">Paquets</th>
</tr>
</thead>
<tbody>
Edition LDQLChoix de l'option
function traitementPublissimo(){
//PECTMA - 563 - Nico ( grâce a chithakone )
var nivServ = $('#niv_service_const').val();
var idContrat = $('#num_contrat_const').val();
idContrat = idContrat.replace(/\s+/g, '');
var numCppap = $('#num_cppap').val();
var strNumCppap = numCppap.substr(0,3);
// Ajax
$.ajax({
type : "POST",
url : "/gestion/gestDepot/ajaxgetnumcontrat",
data: {idContrat: idContrat},
async : false,
success : function(result){
var reponse = $.parseJSON(result);
var str = JSON.stringify(reponse);
console.log(str);
if(strNumCppap == "AIP"){
resetNivPrep();
// Déclaré
$("#exemplaire_50001_0").attr('disabled',true);
$("#exemplaire_50002_0").attr('disabled',true);
$("#exemplaire_50003_1").attr('disabled',true);
$("#paquet_50003_1").attr('disabled',true);
$("#exemplaire_50004_0").attr('disabled',true);
$("#exemplaire_50005_0").attr('disabled',false);
// Constaté
$("#exemplaire_const_50001_0").attr('disabled',true);
$("#exemplaire_const_50002_0").attr('disabled',true);
$("#exemplaire_const_50003_1").attr('disabled',true);
$("#paquet_const_50003_1").attr('disabled',true);
$("#exemplaire_const_50004_0").attr('disabled',true);
$("#exemplaire_const_50005_0").attr('disabled',false);
}
How i trigger the action :
$( "#num_cppap" ).focusout(function() {
traitementPublissimo();
});
$( "#niv_service_const" ).focusout(function() {
traitementPublissimo();
});
$( "#num_contrat_const" ).focusout(function() {
traitementPublissimo();
});

instead of $("#exemplaire_50005_0").attr('disabled',false);
use $("#exemplaire_50005_0").removeAttr('disabled');
Everywhere

After a successful AJAX call cant update td data

Thanks For viewing this post.i am facing a jquery issue .After a successful AJAX call, I want to update an element on page. However, it is not being updated.
what am i doing i am opening a text box on click of span then add text and and on focus out event i am making Ajax call but cant update new text to same span when that i clicked before please help me
here is my js code
$(document).on('click', '.td-edit', (function (e0) {
var thisObj = $(this);
var olddata = thisObj.html();
var newDom = '<input type="text" value="' + olddata + '" class="new-value" style="border:#bbb 1px solid;padding-left:5px;width:75%;"/ >';
thisObj.parent('td').html(newDom);
}));
$(document).on('focusout', '.new-value', (function (e1) {
var thisObj = $(this);
var type = thisObj.parent('td').attr('class');
var newData = thisObj.val();
var santanceId = thisObj.parent('td').parent('tr').attr('id');
santanceId = parseInt(santanceId.replace('tr', ''));
thisObj.parent('td').html('\'<img src="uploads/loading.gif">\'');
if (type === 'sentnc') {
$.ajax({
type: "POST",
url: "operations.php",
data: {
santanceId: santanceId,
sentnc: newData
},
success: function () {
var newDom = '<span class="td-edit">' + newData + '</span>';
thisObj.parent('td').html(newDom);
}
});
}
}));
HTML:
<div class="chat-space nano nscroller">
<div id="table-row">
<table id="rep-data">
<tbody>
<tr>
<th align="left">Sentences</th>
<th align="left" colspan="3">Reps</th>
</tr>
<tr id="tr1" rowspan="2">
<td class="sentnc"><span class="td-edit">Rana is working</span></td>
<td colspan="3" class="senrep"><span class="td-edit">p1.ref = I, p1.name = julie</span><br>
<br>
<span style="color:#000;">Guess Rep1: </span><span id="1gr1">p1.ref = I, p1.has = name1, p1.name.made_from = rana</span><br>
<span style="color:#000;">Guess Rep2: </span><span id="2gr1">p1.ref = I, p1.name = rana</span><br>
<span><a style="color:#3399FF !important;" alt="1" rel="1 " class="updateGuess" id="upd1" href="javascript:void(0);">Update Guess Rep</a></span><br>
<br></td>
</tr>
</tbody>
</table>
</div>

Your success handler should be:
success: function (data) {
var newDom = '<span class="td-edit">' + data + '</span>';
thisObj.parent('td').html(newDom);
}
Here, the data is the data returned by your server, after the ajax Call

How to get the value of the first td of the table using JQuery?

I have a table where in I have binded the values which are coming from the Form.In that form I have a primary key Field as TicketId which I have kept as hidden in the form and while inserting it into the table I am showing it.For Binding the data I have used Knockout.So I want to delete the row that I will select.So while selecting it I should get the id of that row so that I can passed it to the Delete action using ajax.But My problem is that I am not getting that id.So how to do this?
My code:
<table id="table2" style="border: double">
<thead>
<tr>
<td>Ticket ID</td>
<td>Ticket Type</td>
<td>No of Tickets</td>
<td>Ticket Price</td>
<td>Start Date</td>
<td>End Date</td>
<td>Action</td>
</tr>
</thead>
<!--Iterate through an observableArray using foreach-->
<tbody id="ticketid" data-bind="foreach:TicketDatas">
<tr style="border: solid" data-bind="click: $root.getselectedTicket" id="updtr">
<td id="rowid" data-bind="text:TicketId">#*<span data-bind="text:No_Of_Ticket"></span>*#</td>
<td data-bind="text:SelectedTicketType">#*<span data-bind="text:No_Of_Ticket"></span>*#</td>
<td data-bind="text:No_Of_Ticket">#*<span data-bind="text:No_Of_Ticket"></span>*#</td>
<td data-bind="text:Ticket_Price">#*<span data-bind="text:Ticket_Price"></span>*#</td>
<td data-bind="text:Start_Date">#*<span data-bind="text:Start_Date"></span>*#</td>
<td data-bind="text:End_Date">#*<span data-bind="text:End_Date"></span>*#</td>
<td>
<button data-bind="click: $root.deleterec">Delete</button></td>
</tr>
</tbody>
</table>
<script type="text/javasript">
self.deleterec = function () {
if (confirm('Are you sure to Delete this ticket ??')) {
var tickid = $("#table2 tr:eq(0)").attr("id");
$.ajax({
type: "POST",
data: { id: tickid },
url: "Ticket/DeleteTicket",
//data: "{id:" + ko.toJSON(id) + "}",
success: function (data) {
self.TicketDatas.remove(data);
alert("Record Deleted Successfully");
//GetTickets();//Refresh the Table
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}
};
</script>
so just want the solution for this statement if I ask in short
var tickid = $("#table2 tr:eq(0)").attr("id");

I'm not sure how the rest of your code goes, but here's the jQuery parts when you have a reference to the DOM node for the delete link.
I assigned most parts to variable names to be more descriptive here, but you can make this more concise for your use.
$('#table2 .delete-link').click(function() {
var deleteLink = $(this);
var tableRow = deleteLink.closest('tr');
var firstCell = tableRow.find('td:first-child');
var ticketId = firstCell.attr('id');
// ... Do what you need to do with the ticket ID.
return false;
});
Additional References:
CSS pseudo-class :first-child
jQuery click()
jQuery closest()
jQuery find()

var tickid = $("#table2 tr:eq(0)").html();
OR
var tickid = $("#table2 tr:eq(0)").val();

How to get <td> value in textbox

I've done some code in html and in JavaScript ... My query is when I click on <td>, whatever the value associated with it, has to be displayed in the corresponding text box ...
In front of <td> I've taken the textbox ... for an example I've taken 3 <td> and 3 textboxes
<script type="text/javascript">
function click3(x) {
x = document.getElementById("name").innerHTML
var a = document.getElementById("txt");
a.value = x;
}
function click1(y) {
y = document.getElementById("addr").innerHTML
var b = document.getElementById("txt1");
b.value = y;
}
function click2(z) {
z = document.getElementById("email").innerHTML
var c = document.getElementById("txt2");
c.value = z;
}
</script>
this is my JavaScript code , I know this is not an adequate way to deal such problem, since its giving static way to deal with this problem
does anyone have a better solution for this problem ??
In JavaScript/jQuery

If click1, click2 and click3 are supposed to be three event then you have to keep all three function you can shorted the script code for assigning values to text field.
<script type="text/javascript">
function click3(x) {
document.getElementById("txt").value = document.getElementById("name").innerHTML;
}
function click1(y) {
document.getElementById("txt1").value = document.getElementById("addr").innerHTML;
}
function click2(z) {
document.getElementById("txt2").value = document.getElementById("email").innerHTML;
}
</script>
You can make a single function if you have single click event and shorten the code for assignment like this,
function SomeClick(x) {
document.getElementById("txt").value = document.getElementById("name").innerHTML;
document.getElementById("txt1").value = document.getElementById("addr").innerHTML;
document.getElementById("txt2").value = document.getElementById("email").innerHTML;
}

As far as I understood your question, you could try the following, assuming that's how your HTML is structured:
HTML Markup:
<table id="mytable">
<tr>
<th>Name</th>
<th>Address</th>
<th>Email</th>
</tr>
<tr>
<td class="name">Tom</td>
<td class="addr">789</td>
<td class="email">tom#dot.com</td>
</tr>
<tr>
<td class="name">Dick</td>
<td class="addr">456</td>
<td class="email">dick#dot.com</td>
</tr>
<tr>
<td class="name">Harry</td>
<td class="addr">123</td>
<td class="email">harry#dot.com</td>
</tr>
</table>
<input id="txt1" type="text" />
<input id="txt2" type="text" />
<input id="txt3" type="text" />​
jQuery:
$(".name").click(function(){
$("#txt1").val($(this).text());
$("#txt2").val($(this).nextAll().eq(0).text());
$("#txt3").val($(this).nextAll().eq(1).text());
});​
$(".addr").click(function(){
$("#txt2").val($(this).text());
$("#txt1").val($(this).prevAll().eq(0).text());
$("#txt3").val($(this).nextAll().eq(0).text());
});
$(".email").click(function(){
$("#txt3").val($(this).text());
$("#txt2").val($(this).prevAll().eq(0).text());
$("#txt1").val($(this).prevAll().eq(1).text());
});
DEMO: http://jsfiddle.net/Z9weS/

You can combine columns and rows. Per cell consisting id you give it th column title and
number of series it could be the index of the row combination of row and column gives the
address as per table cell by a specific event you can read the value of the id
Then you know to pull the cell value.
$('tr')
.click(function() {
ROW = $(this)
.attr('id');
$('#display_Colume_Raw')
.html(COLUME + ROW);
$('#input' + COLUME + ROW)
.show();
STATUS = $("#input" + COLUME + ROW)
.val();
});