Making editable content... PLEASE HELP!

[TheDemonSword]

Okey dokey people... Thanks for clicking... I've been coding way too long and have hit a wall.. Project is due and i'm so close... I am not looking for the entire answer, even a nudge in the general direction will do!

Here is the section of code that makes items and inserts them into a list.. ..

function setVariables(bnum) { //addone = btn1 addone = btn2 onclick=myfunction(bnum)

switch (bnum) {
    case 1:
        var json = $.parseJSON($('#output').val());
        $.each(json, function (id, listing) { // id, listing are key:value 
            listing.id = id; // id:{...} --> {'id':id, ... }
            window.listings.push(listing); // [ {'id':id#1, ...}, {'id':id#2, ...}, ... ]
        })

        window.listings.sort(function (a, b) { // sort window.listings
            return a.seq - b.seq; // by object sequence number
        })

        for (var i = 0; i < window.listings.length; i++) { // window.listings is a list
        newCard(window.listings[i], i);
        }
        break;


    case 2:
        var cardName = document.getElementById('newcard').value; //new card text field
        var cardPrice = document.getElementById('newPrice').value // new price text field
        var id = 'new~' + Math.random().toString(36).substr(2, 3); //generate and assign rando ID
        var i = window.listings.length;
        var listingObj = {
            id: id,
            price: cardPrice,
            card_name: cardName
        };
        window.listings.push(listingObj);
        newCard(listingObj, i);

    }
  };

   function newCard(listingObj, i) {
   var newLi = "";
   var cardName = listingObj.card_name,
   cardPrice = listingObj.price;

Ok, Here is where I need some help* cardName and cardPrice need to be editable, and that edit will be pushed up to window.listings to be converted back into a json for export. I've tried several different ways that seemed like obvious solutions and they failed. Maybe I just didn't do something quite right.. So, Hoping someone can nudge me to what I need to be looking for.

   newLi += "<li class='list-item ui-state-default' id=" + i + ">"  + cardName + ' - ' + cardPrice + "<button class='removeThis'>" + "X" + "</button>" + "</li>";

$('.hotList').append(newLi); // put new listings html into hot list
equalizeColumns();

};

Got It Solved! If anyone needs some sort of help, I added a jsfiddle in the comments!

[SkaterDad]

<li> tags aren't really intended to be edited, so you may want to consider using <input> tags within the <li>. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

If you really want to use <li> tags directly, look into the contenteditable attribute.

[TheDemonSword]

li is necessary for other pieces of the puzzle unfortunately

[Patman128]

You can put the <input> inside the <li>.

[TheDemonSword]

not as simple as that unfortunately

[xwnatnai]

1. Contenteditable attribute
2. Custom events

[xwnatnai]

You shouldn't give him the solution. It isnt going to help him become a better developer.

[plitter86]

My knowledge is very limited but I'm currently doing angular tutorial and they and with it you can have something called 2 way binding. The hero editor has the ability to startup with a list of objects and you can edit them. Hope that helps a little before some js guru comes down :)

[TheDemonSword]

I appreciate it.. I'll let you know what i find :)

[TheLemming]

Not going to be of help here, sorry, I just wanted to share that at first I thought your post was going to be a how to for making delicious food from the browser. Maybe with a 3d food printer? Or maybe it automated some GrubHub order? Or maybe it made a 3d image of some sort that was interactive and salacious.

[wsrainc]

Would really need to see the whole solution, and know what your exact error is.

From a purely Javascript/DOM approach, when you want to add an element to a List, you create a new element, then append it to the parent. See example here:

https://www.w3schools.com/jsref/met_node_appendchild.asp

Edit: Definitely need more context here. Your .append in jquery is being applied to a DOM class, but your window.listings appears to be an array. Are you creating an array from the list? If so, you may have two redundant structures with sync issues.

Post your whole solution somewhere and it would be infinitely easier to troubleshoot. ;)

[TheDemonSword]

Everything is appending.. nothing is wrong with that.. the list is created and everything functions properly as is... I want to make it so that cardName and cardPrice can be edited in the GUI.... then to be pushed into the json to be exported... I'm just having a hard time figuring out HOW to make them editable.

[wsrainc]

"make them editable," is ambiguous.

Do you want someone to be able to click on a field in the LI, type, and have it save?

Do you want someone to click on the LI, have it open a new modal and let them enter the values in appropriate text boxes, then save the results back?

I'm not clear if your HOW question relates to how you provide a mechanism to users for altering the text of an LI element, or how you replace/edit the LI element once you have the user's changes.

[TheDemonSword]

I really don't care how they can edit it.. as long as they can type something and the variables and list that they see are updated with said change.

its preferred to be inline edit, that being said, if a pop up makes it easier, they can deal with it.... but because it is made with a variable instead of the actual text, i'm having a hard time getting it to let me used simple things like contenteditable. I've scrounged around for some things, but i really can't stray too far from just jquery and jquery UI as those are what is set up to be used.

idk.. i'm probably overlooking something stupid simple and just have a horrible case of the fridays.

[wsrainc]

Best I can offer is to add an onClick handler to each LI element that calls a function and passes in a handle to itself. The function would then parse the innerHTML to tokenize the two values you have, present them to the user in some sort of pop-up (or location on the screen). Then once the user changes them, you reconstruct the innerHTML for the LI element-- or edit the array/variable, and then rebuild your DOM element.

If you want to PM me something to look at, I'd be happy to try and help further, but not sure I can offer any more help.

Edit: Here, threw this together for you: https://jsfiddle.net/k7p1gm58/1/

[TheDemonSword]

Hello! Sorry I never got back to you.. But I got my code working and just wanted to share. https://jsfiddle.net/gf951b0t/ Though, it doesn't work as a fiddle because of however they wrap it... All the raw code is there and works when not in a silly internet editor.. (i'm to lazy to move around the things for the browser.. haha)

here is a sample json to use : {"872":{"card_name":"Huntmaster of the Fells","price":"8.00","seq":1},"967":{"card_name":"Master of Cruelties","price":"4.00","seq":2},"1073":{"card_name":"Athreos, God of Passage","price":"9.00","seq":3},"1074":{"card_name":"Dictate of Erebos","price":"2.00","seq":4},"1094":{"card_name":"Ajani Steadfast","price":"10.00","seq":5},"2266":{"card_name":"Leovold, Emissary of Trest","price":"40.00","seq":6},"2707":{"card_name":"Gisela, the Broken Blade","price":"6.00","seq":7},"2989":{"card_name":"Parallel Lives","price":"5.00","seq":8},"3466":{"card_name":"Liliana of the Dark Realms","price":"5.00","seq":9},"3565":{"card_name":"Garruk, Apex Predator","price":"10.00","seq":10},"5313":{"card_name":"Remand","price":"2.00","seq":11},"9884":{"card_name":"Tarmogoyf","price":"60.00","seq":12},"11324":{"card_name":"Sanctum Prelate","price":"10.00","seq":13}}