Anyone Any Good with Javascript ?

[mickle026 400]

I have a problem, Im trying to make a dynamic form where i can add elements.

 

I can do thar but I cannot get my remove element working in the c# plugin

 

Here is my page in html

<div id="CPSConfig" data-role="page" class="page type-interior pluginConfigurationPage withTabs"
     data-require="emby-button,emby-select,emby-checkbox,emby-linkbutton,emby-input"
     data-controller="__plugin/CPSConfig.js">
    <div data-role="content">
        <div class="content-primary">
            <h2>Custom Image Server Configuartion</h2>

            <div id="content">

                <h2>Server URL(s)</h2>
                <input id="addServerFunction" type="button" value="AddServer" onclick="addServerFunction();" />
                <form action="#" id="mainform" method="get" name="mainform">
                    <span id="myForm"></span>
                    <p></p><input type="submit" value="Submit" width="200">
                </form>
            </div>
        </div>
    </div>
</div>

and here is part of the javascript file, so what i am doing is building a form element and adding that element to the page with an "id_" + id number

        return function (page, params) {

            var i = 0; /* Set Global Variable i */

            function increment() {
                i += 1; /* Function for automatic increment of field's "Name" attribute. */
            }

            $('#removeElement', page).on('click', function (parentDiv, childDiv) {
                console.log("CPSConfig: removeElement Clicked!");

                if (childDiv == parentDiv) {
                    alert("The parent div cannot be removed.");
                }
                else if (document.getElementById(childDiv)) {
                    var child = document.getElementById(childDiv);
                    var parent = document.getElementById(parentDiv);
                    parent.removeChild(child);
                }
                else {
                    alert("Child div has already been removed or does not exist.");
                    return false;
                }
            });


            // Function to draw the server addition form
            $('#addServerFunction', page).on('click', function (e) {

                console.log("CPSConfig: addServerFunction Clicked!");

                var r = document.createElement('span');
                var y = document.createElement("INPUT");  // Create an input textbox
                var g = document.createElement("INPUT"); // Create a button of input type  (we will set the type to button later in the code)
                var t = document.createTextNode("Remove"); // Create a remove button text value
                var linebreak1 = document.createElement('br'); // Create a <br /> element
                var linebreak2 = document.createElement('br'); // Create a <br /> element
                var linebreak3 = document.createElement('br'); // Create a <br /> element
                var linebreak4 = document.createElement('br'); // Create a <br /> element
                var Server_id = document.createTextNode("Server: " + (i + 1) + "  "); // Create a text node
                var radio1 = document.createElement("INPUT");
                var radio1text = document.createTextNode("Direct");
                var radio2 = document.createElement("INPUT");
                var radio2text = document.createTextNode("List");
                var radio3 = document.createElement("INPUT");
                var radio3text = document.createTextNode("Query"); // Create a remove button text value

                y.setAttribute("type", "text", "size");
                y.setAttribute("placeholder", "Name");

                increment(); // increment the element number

                r.appendChild(Server_id);  // Add Server id text
                r.appendChild(linebreak1); // line break

                y.setAttribute("Name", "textelement_" + i);
                y.setAttribute("size", "150");
                r.appendChild(y); //add textbox

                //g.setAttribute("src", "delete.png");
                g.setAttribute("id", "removeElement")
                g.setAttribute("type", "button")
                //g.setAttribute("onclick", "value");
                g.setAttribute("value", "Remove");
                g.setAttribute("style", "color:green;font-size:14px");
                g.appendChild(t);
                g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");

                r.appendChild(g); // add remove button
                r.appendChild(linebreak2); // line break

                radio1.setAttribute("type", "radio");
                radio1.appendChild(radio1text);
                r.appendChild(radio1); // add radio button
                r.appendChild(radio1text); // add radio button

                radio2.setAttribute("type", "radio");
                radio2.appendChild(radio2text);
                r.appendChild(radio2); // add radio button
                r.appendChild(radio2text); // add radio button

                radio3.setAttribute("type", "radio");
                radio3.appendChild(radio3text);
                r.appendChild(radio3); // add radio button
                r.appendChild(radio3text); // add radio button

                r.appendChild(linebreak3); // line break

                r.appendChild(linebreak4); // line break
                r.setAttribute("id", "id_" + i);

                // append the form that we created in memory
                document.getElementById("myForm").appendChild(r);

            });

My element adds fine the "AddServer" Button runs the function below, even though the console reports that its isnt a function - it works

$('#addServerFunction', page).on('click', function (e) {

I have created my remove element button in code and added it so that it has the same attributes as the AddServer button, and should therefore run the

$('#removeElement', page).on('click', function (parentDiv, childDiv) {

 

 

But it doesn't do anything ... i am perplexed by this, does anyone know why?

 

I am new to javascript and I think im learning it quite quickly but this has got me beat for now

 

 

I think it has something to do with function(e) .....

Edited April 24, 2020 by mickle026

[rechigo 293]

there are a couple things going on here but im too lazy to explain everythingright now in detail so hopefully this will help

 

ok, so what you are doing here is not defining a function:

$('#removeElement', page).on('click', function (parentDiv, childDiv) {
                console.log("CPSConfig: removeElement Clicked!");

                if (childDiv == parentDiv) {
                    alert("The parent div cannot be removed.");
                }
                else if (document.getElementById(childDiv)) {
                    var child = document.getElementById(childDiv);
                    var parent = document.getElementById(parentDiv);
                    parent.removeChild(child);
                }
                else {
                    alert("Child div has already been removed or does not exist.");
                    return false;
                }
            });

This is creating an event listener that listens for when an element with the id of removeElement is clicked ^

 

you should change that listener to a function:

function removeElement(parentDiv, childDiv) {
                console.log("CPSConfig: removeElement Clicked!");

                if (childDiv == parentDiv) {
                    alert("The parent div cannot be removed.");
                }
                else if (document.getElementById(childDiv)) {
                    var child = document.getElementById(childDiv);
                    var parent = document.getElementById(parentDiv);
                    parent.removeChild(child);
                }
                else {
                    alert("Child div has already been removed or does not exist.");
                    return false;
                }
};

with this, you can simple keep the onclick="removeElement(lazy1, someStupidChildElement)"

you also should remove the "removeElement" ids from the element as they're not needed anymore (and you shouldn't give two elements the same id, wont get into that though)

 

^ all of the above applies for the addServerFunction as well

 

it'll look something like this basic example:

https://codepen.io/oonqt/pen/pojeVNJ

 

let me know if you need more info

[mickle026 400]

OK, so as i understand it, if I change my button to an emby button like this (rather than input)

<button is="emby-button" type="button" name="addServerFunction" id="addServerFunction"><span>Add Server</span></button>

then I can use the jQuery event listener.  I tried this and no errors in the console, so that is good.

 

and .... If I keep it as a html element then I use the onclick and the javascript function

 

 

So far I have tried both ways and I can get the addServer button to work both methods but the Remove button doesn't in either method.  I had this working and can get this to work in firefox, just not in an emby plugin 

In the element inspector it shows up the html element corectly but with no events *confused*.

 

 

 

 

 

 

Im starting to think I have to reload the page somehow after adding the button so that emby picks up the button as needing to listen for it, as it wasn't there when the page loaded initially

 

Any ideas?

 

Oh and thanks for your reply, as it happens you have made me understand a bit more

 

 

[rechigo 293]

You're using firefox it looks like? ewwwwwwwww from chromium user

 

Your files might be getting cached... go to the network tab and check this -> 

 

then reload the page to wipe the cache (make sure the dev tools panel is open otherwise it will pull from cache)

[mickle026 400]

Thanks for the suggestion, but it a nope, its not that ,

 

Ive been reading up on this in the meantime and apparently to use live elements you have to reload the DOM.  Or use .live() on the eventhandler so that future elements are listened to.   Problem is the page doesnt render proberly in emby with the .live() and then nothing else works because of that.

 

I'll do some more reading

Edited April 24, 2020 by mickle026

[rechigo 293]

do you have a github repo with all of the code or some way to share it?

[rechigo 293]

Thanks for the suggestion, but it a nope, its not that ,

 

Ive been reading up on this in the meantime and apparently to use live elements you have to reload the DOM. Or use .live() on the eventhandler so that future elements are listened to. Problem is the page doesnt render proberly in emby with the .live() and then nothing else works because of that.

 

I'll do some more reading

If you just use onclick you probably wont have to deal with all that

 

Sent from my Galaxy S10

[mickle026 400]

Ive sent you a pm.

 

Im trying very hard to understand this, c# is new to me, javascript is new to me,  why cant it be in php? LOL, I know more of that ....

 

Once I get this, I have some really good ideas

[mickle026 400]

By Golly, I think im on to it

 

Re-arranging the event handler, so clicking on form , seems to be making the dom re-evaluate the form loaded including the new elements

$('form', page).on('click', '#removeElement', function (parentDiv, childDiv) {

different error now LOL

 

alert("Child div has already been removed or does not exist.");

Edited April 24, 2020 by mickle026

[rechigo 293]

Click event won't pass parentDiv or childDiv, I'm not sure about jQuery, but in vanilla JS the click event gives you one parameter containing a MouseEvent

 

Try console.logging parentDiv and see what you get, if I'm right it'll probably be a generic event...

 

Sent from my Galaxy S10

[mickle026 400]

you are right no matter what i use is passes the jQuery

currentTarget: <button id="removeElement" class="emby-button" is="emby-button" type="button" name="removeElement" value="Remove">
​
data: undefined
​
delegateTarget: <form id="mainform" action="#" method="get" name="mainform">​
handleObj: Object { type: "click", origType: "click", guid: 1, … }
​
isDefaultPrevented: function Ee()​
isPropagationStopped: function Ee()
​
jQuery3410832548891435388: true
​
originalEvent: click { target: button#removeElement.emby-button
, clientX: 368, clientY: 306, … }
​
relatedTarget: null
​
result: false
​
target: <button id="removeElement" class="emby-button" is="emby-button" type="button" name="removeElement" value="Remove">
​
timeStamp: 14216
​
type: "click"
​
<prototype>: {…

I have an idea though, i'll report back if it works or not

[mickle026 400]

Done it

 

Changed the name of the button so that its the same as the element id

 

Queried (e) to get that name, so the button id gives me the element id, then I can remove it .

 $('#addServerFunction', page).on('click', function (e) {

                console.log("CPSConfig: addServerFunction Clicked!");

                var r = document.createElement('span');
                var y = document.createElement("INPUT");  // Create an input textbox
                var g = document.createElement("button"); // Create a button of input type  (we will set the type to button later in the code)
                var t = document.createTextNode("Remove"); // Create a remove button text value
                var linebreak1 = document.createElement('br'); // Create a <br /> element
                var linebreak2 = document.createElement('br'); // Create a <br /> element
                var linebreak3 = document.createElement('br'); // Create a <br /> element
                var linebreak4 = document.createElement('br'); // Create a <br /> element
                //var linebreak5 = document.createElement('br'); // Create a <br /> element
                var Server_id = document.createTextNode("Server: " + (i + 1) + "  "); // Create a text node
                var Span = document.createElement("span"); // Create element
                var Spantext = document.createTextNode("Remove");
                var radio1 = document.createElement("INPUT");
                var radio1text = document.createTextNode("Direct");
                var radio2 = document.createElement("INPUT");
                var radio2text = document.createTextNode("List");
                var radio3 = document.createElement("INPUT");
                var radio3text = document.createTextNode("Query"); // Create a remove button text value

                y.setAttribute("type", "text", "size");
                y.setAttribute("placeholder", "Name");

                increment(); // increment the element number

                r.appendChild(Server_id);  // Add Server id text
                r.appendChild(linebreak1); // line break

                y.setAttribute("Name", "textelement_" + i);
                y.setAttribute("size", "150");
                r.appendChild(y); //add textbox

                //<button type="button" name="addServerFunction" id="addServerFunction" value="AddServer" />
                //g.setAttribute("src", "delete.png");
               //<button is="emby-button" type="button" name="addServerFunction" id="addServerFunction"><span>Add Server</span></button>
               g.setAttribute("is", "emby-button");
               g.setAttribute("Class", "emby-button");
               g.setAttribute("type", "button");
               g.setAttribute("Name", "id_" + i);
               g.setAttribute("id", "removeElement");
                //g.setAttribute("onclick", "value");
               g.setAttribute("value", "Remove");
               
               //Span.appendChild(Spantext);
               //r.appendchild(Span);
                g.appendChild(t);
                //g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");

                r.appendChild(g); // add remove button
                r.appendChild(linebreak2); // line break

                radio1.setAttribute("type", "radio");
                radio1.appendChild(radio1text);
                r.appendChild(radio1); // add radio button
                r.appendChild(radio1text); // add radio button

                radio2.setAttribute("type", "radio");
                radio2.appendChild(radio2text);
                r.appendChild(radio2); // add radio button
                r.appendChild(radio2text); // add radio button

                radio3.setAttribute("type", "radio");
                radio3.appendChild(radio3text);
                r.appendChild(radio3); // add radio button
                r.appendChild(radio3text); // add radio button

                r.appendChild(linebreak3); // line break

                r.appendChild(linebreak4); // line break
                r.setAttribute("id", "id_" + i);

                // append the form that we created in memory
                document.getElementById("myForm").appendChild(r);

            });

            $('form', page).on('click', '#removeElement', function (e) {

                console.log("CPSConfig: removeElement Clicked!");

                e = e || window.event;
                e = e.target || e.srcElement;
                if (e.nodeName === 'BUTTON') {
                    console.log(e.name);
                }
                childDiv = e.name;
                parentDiv = "myForm";
                var child = document.getElementById(childDiv);
                var parent = document.getElementById(parentDiv);

                parent.removeChild(child);
            });

So now it works .... until i change tabs  and it reloads the page from scratch.  Now I need it to be persistant.... my work is never done......
 

Edited April 25, 2020 by mickle026