Edit on site with Javascript - javascript

I have a school assignment that I would love to have a on site edit admin panel.
I coded this but I just cant get it to work properly, as every time I double click in one and then out it replaces the value with the previous value.
<script type="text/javascript">
$(function() {
var bound = $("p").bind("dblclick", function(event) {
event.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
edit(currentEle, value);
});
});
function edit(currentEle, value) {
$(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
$(".tedit").focus();
$(".tedit").keyup(function(event) {
if (event.keyCode == 13) {
currentEle.parent('p').html($(this).val().trim());
}
});
$(document).click(function() {
var value1234 = $(".tedit").val().trim();
$("p").removeClass();
currentEle.html(value1234);
});
}
</script>
Here is the jsfiddle http://jsfiddle.net/x6e16d3n/3/

The issue is because every time you edit you create a new click handler attached to the document that has a reference to the current element at the time of creation.
This handler is still active when you are editing another object and still has a reference to the old element (look up closures to understand why) but is taking the value to add to the p from what ever .tedit is on the screen so in the end they all get updated with the same text.
One quick soloution would be to take this click handler out of the dit function and declare it once, check if edit is on the screen and if it is then make the edits parent html equal the value of the input box
$(function () {
var bound = $("p").bind("dblclick", function (event) {
event.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
edit(currentEle, value);
});
});
function edit(currentEle, value) {
$(currentEle).html('<input class="tedit" type="text" value="' + value + '" />');
$(".tedit").focus();
$(".tedit").keyup(function (event) {
if (event.keyCode == 13) {
currentEle.parent('p').html($(this).val().trim());
}
});
}
$(document).click(function () {
if ($(".tedit").length) {
var value1234 = $(".tedit").val().trim();
$("p").removeClass();
$(".tedit").parent().html(value1234);
}
});
example fiddle http://jsfiddle.net/x6e16d3n/11/

Related

Triggering change events from within a change event

EDIT: here is a much simpler JSFiddle version of the code that illustrates the problem more succinctly:
https://jsfiddle.net/Lfo463d9/2/
I have a bunch of form elements that when updated change the options of the element next in the list. I have that working fine. However, now I am trying to get it so that if the root element is changed then it checks the next element to see if it is part of the new list and if not then makes it blank and then triggers the change event of the next one (so that it will in turn make the next element blank and so on). The change event doesn't seem to be firing.
I am not getting any errors in the console.
Is this because I am trying to fire a change event from within a change event? Is there some sort of blocking going?
(or am I just doing something stupid - I only started javascript a week or so ago)
I've tried calling the change() function on the element in javascript too.
function addChainOptions(anelementID, nextelementID, listToChangeID, firstToSecond, secondFromFirst)
{ var anelement = document.getElementById(anelementID);
anelement.addEventListener("change", function() {
var nextelement = document.getElementById(nextelementID);
var listToChange = document.getElementById(listToChangeID);
console.log(this.id + "has changed");
if(this.value.length == 0)
{
nextelement.value = "";
$("#" + nextelementID).change();
}
nextelement.disabled = true;
google.script.run.withSuccessHandler(function(value) {
htmlOptions = value.map(function(r){return '<option value = "' + r[0] + '">';}).join(" ")
listToChange.innerHTML = htmlOptions;
if(value.length == 1) {
nextelement.value = value[0];
nextelement.change();
}
if(value.includes(nextelement.value) == false && nextelement.value.length > 0)
{
nextelement.value = "";
console.log(nextelement.id + "set to blank - triggering change")
$("#" + nextelementID).change();
}
nextelement.removeAttribute("disabled");
}).subListLookUp(firstToSecond, secondFromFirst, this.value);
});
};
addChainOptions("productTypesInput01", "productsInput01", "productsList01", "ProductTypeMulti", "Products");
addChainOptions("brandsInput01", "productTypesInput01", "productTypesList01", "BrandToProductType", "ProductTypeFromBrand");
addChainOptions("category", "brandsInput01", "brandsList01", "CategoryToBrand", "BrandFromCategory");
At the moment it is setting the next one to blank and trying to trigger the change but nothing happens.
You should try listening to "input" event instead of "change".
const firstinput = document.getElementById("input1");
const secondinput = document.getElementById("input2");
const thirdinput = document.getElementById("input3");
function dispatchEvent(target, eventType) {
var event = new Event( eventType, {
bubbles: true,
cancelable: true,
});
target.dispatchEvent(event);
}
firstinput.addEventListener("input", function() {
secondinput.value = 2;
dispatchEvent(secondinput,"input");
});
secondinput.addEventListener("input", function() {
thirdinput.value = 3;
//dispatchEvent(thirdinput,"input");
});
<input id="input1">
<input id="input2">
<input id="input3">

Trying to invoke onchange method set by jQuery

In my code, I am setting a change listener on my checkboxes here
$(".section").change(function() {
if($(this).is(":checked")) {
$("." + this.id).show();
...
Now I am trying to do a "code-driven" click on the checkbox, and I have
$(".secTitle").click(function(e) {
var elem = this;
while(elem) {
if (elem.className && elem.className.indexOf ('DOC_SECTION') != -1) {
var clzes = elem.className.split(" ");
var clzIdx = 1;
if (elem.getAttribute('closeSecClassIdx')) {
clzIdx = parseInt(elem.getAttribute('closeSecClassIdx'));
}
var chk = document.getElementById(clzes[clzIdx]);
chk.checked = false;
alert(chk.onchange);
//chk.changed();
break;
}
else {
elem = elem.parentNode;
}
}
});
I know that I have the right element, as chk.checked = false; is working correctly. After that I'm trying to invoke the change method set earlier but my alert is showing 'undefined'.
You can trigger the change event by calling $(chk).change(). Below I've created a little prototype that shows binding to the change event and invoking it.
jQuery(function($) {
// bind to the change event
$("input").change(function() {
console.log('change triggered!');
});
// now trigger it
$("input").change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />

How to get value inside .html() in JQuery

I am trying to implement an inline edit of Todo lists. I have this code and I want to be able to get the value inside it.
$(function clickedit() {
$(".a").dblclick(function (e) {
e.stopPropagation();
var currentEle = $(this);
var value = $(this).html();
var id_val = $(this).attr('value');
//alert(id_val);
updateVal(currentEle, value, id_val);/**/
});
});
function updateVal(currentEle, value, id_val) {
$(currentEle).html('<input class="thVal" id="aaa" type="text" value="' + value + '" />'); // i want to get the value inside the input
var aaa = $('#aaa').val();
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
alert(aaa);
$.post('includes/edit-task3.php', { task_name: aaa, task_id: id_val}, function() {
$(currentEle).html($(".thVal").val().trim());
alert('in');
//current_element.parent().fadeOut("fast", function() { $(this).remove(); });
});
}
});
$(document).click(function () {
$(currentEle).html($(".thVal").val().trim());
});
}
How can I get the current value in the input inside .html()?
I tried, var aaa = $('#aaa').val(); but it does not work.. How can I do this?
Thank you so much for your help.
Don't put your events in a function that is triggered by something else
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
var aaa = $(this).val();
alert(aaa);
$.post('includes/edit-task3.php', { task_name: aaa, task_id: id_val}, function() {
$(currentEle).html($(".thVal").val().trim());
alert('in');
//current_element.parent().fadeOut("fast", function() { $(this).remove(); });
});
}
});
Use .find(SELECTOR)
$(currentEle).find('#aaa').val();
Edit: As updateVal function could be invoked many times, you will have multiple ID having same value in the DOM. Make sure the ID must be unique

Removing items from a list that contains items selected from an auto-complete Textbox

I've created an auto-complete Textbox, and a div under it.
When the client select an item from the Textbox, it automaticly appears in the div, after styling with CSS.
What I want to do now is to create an event, that when the client clicks on the styled selected items, they will disappear.
here is the JS code, and jsfiddle under it, for your comfort.
`$(function() {
/* Textbox ID */ $("#destinations").autocomplete({
select: function (event, ui) {
/* div ID */ $("#DestinationsChosen").html(function(i, origText)
{
var SelectedCountry = ui.item.value.toString();
var CurrentText = origText.toString();
if ((CurrentText.indexOf(SelectedCountry) >= 0))
{
alert("Already Exists");
return CurrentText;
}
return CurrentText + " <span class='toButton'>" + SelectedCountry + "</span>";
})
}
http://jsfiddle.net/dgu1ncsj/
thanks :)
Idan
Simplest solution for this existing code is to add the line:
$('.toButton').click(function(){$(this).remove(); });
Just after the $("#DestinationsChosen").html(...) block.
I don't recommend putting script in the tag itself because it's not a good habit, since it doesn't separate concerns. But my short answer has problems too, since it is getting all .toButtons each time and setting the listener again.
The better way to do this, is to create the toButton as a DOM node, and append it to the parent div. This way, you can put the listener on the node itself.
$(function() {
$("#destinations").autocomplete({
select: function (event, ui) {
$("#DestinationsChosen").append(function(i, origText){
var SelectedCountry = ui.item.value.toString();
var CurrentText = origText.toString();
if ((CurrentText.indexOf(SelectedCountry) >= 0))
{
alert("Already Exists");
}
var destination = document.createElement('span');
destination.classList.add('toButton');
destination.appendChild( document.createTextNode(SelectedCountry));
destination.addEventListener('click', function(){ this.remove(); });
return destination;
})
}
});
})
You could simply add an onclick event to each selected item. I have modified your code a bit. See the working code segment below:
$(function() {
$("#destinations").autocomplete({
select: function (event, ui) {
$("#DestinationsChosen").html(function(i, origText)
{
var SelectedCountry = ui.item.value.toString();
var CurrentText = origText.toString();
if ((CurrentText.indexOf(SelectedCountry) >= 0))
{
alert("Already Exists");
return CurrentText;
}
return CurrentText + " <span class='toButton' onclick='$(this).remove();'>" + SelectedCountry + "</span>";
})
}
});
})

When click a button add value to textarea

<script type="text/javascript">
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
$("#txt-area").text(cntrl+",");
//alert (cntrl);
});
});
</script>
When I click to my character on my html page character's value sets to textarea, but when I click to another character previous char disappears. I know about something about arrays in JS but how can I handle this.
How can I add values to textarea properly without disappearing?
Try
$(document).ready(function () {
$(".buttons").click(function () {
var cntrl = $(this).html();
$("#txt-area").val(function (_, val) {
return val + cntrl + ","
});
//alert (cntrl);
});
});
Demo: Fiddle
or
$("#txt-area").text($("#txt-area").val() + cntrl+",");
$("#txt-area").append(cntrl + ",");
Demo: Fiddle - I prefer using val() because I consider it as a input element
Arun's answer above works, but it will add a comma to the end. If you want to avoid that, place the comma before the new value, and then have the code check to see if this is the first time something is being added, and not place a comma that time.
$(document).ready(function () {
var oldvalue;
var newvalue;
$(".buttons").click(function () {
oldvalue = $("#txt-area").val(); //GET THE VALUE OF TEXTBOX WHEN USER CLICKS
if (oldvalue) {newvalue = ', '+$(this).html();} // IF THE TEXTBOX ISN'T BLANK, PLACE A COMMA BEFORE THE NEW VALUE
else {newvalue = $(this).html();} //IF THE TEXTBOX IS BLANK, DON'T ADD A COMMA
$("#txt-area").val(oldvalue + newvalue); //PLACE THE ORIGINAL AND NEW VALUES INTO THE TEXTBOX.
});
});
Try,
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
var xTxtArea = $("#txt-area");
xTxtArea.text(xTxtArea.text() + cntrl + ",");
});
});

Categories

Resources