CODEWITHSUNDEEP
javascriptjquery
BrianFruit
BrianFruit

Reputation: 53

jQuery Knob not loaded after it's inserted into the HTML

I defined a featureGenerator function to generate a jQuery knob on the fly in the HTML. However, after inserting this knob, all the properties of the knob were gone even though the Browser Inspector did confirm the code inserted. So I tested running the function outside of the Jquery and it works normally. Can anyone pleaseee tell me what I did wrong? Thank you!

The Knob I used is here...

JSFiddle here...

function featureGenerator(htmlID, feature, initStatus1, initStatus2, idName) {

        if (feature === "knob") {htmlID.innerHTML="<div idName='"+id+"'>"+
                "<div id='myOuterKnob' style='position:absolute;left:4px'>"+
                "<input class='knob' id='outerKnob' data-width='180' data-height='180' "+
                "data-thickness='.4' data-angleOffset=-125 data-displayInput=false "+
                "data-angleArc=250 data-step='5' data-fgColor='#1e8bf2' data-bgColor='#d4eeec' "+
                "data-linecap=round value='"+initStatus1+"'></div>"+

                "<div id='myInnerKnob' style='position:absolute;left:44px;top:40px;display:block;'>"+
                "<input class='knob' id='innerKnob' data-width='100' data-height='100' "+
                "data-thickness='.5' data-angleOffset=-125 data-displayInput=false "+
                "data-angleArc=250 data-step='5' data-fgColor='#1e8bf2' data-bgColor='#d4eeec' "+
                "data-linecap=round value='"+initStatus2+"'></div></div>";
        }
      }

    $(document).ready(function(){
        $(".knob").knob({
                        'min':0
                        ,'max':250
                        });

        $(".classname1").click(function(){
          $(this).find(".togglerRound").toggle("fold", 250);

          featureGenerator(($(this)).get(0).childNodes[0].childNodes[0], "knob", 0, 0, "146A");

        });
    })

Upvotes: 0

Views: 1687

Answers (2)

BrianFruit
BrianFruit

Reputation: 53

Found the solution! Probably due to the knob being generated by jquery, I actually had to do appendChild instead of inserting a chunk of html text. Below is what I ended up using, creating DOM childrens and setting attributes one by one.

function insertDOM(tag, att){
  var fragment = document.createElement(tag);
  for (var a in att){
    if (att.hasOwnProperty(a)){
      fragment.setAttribute(a, att[a]);
    }
  }
  for (var i = 2 ; i < arguments.length ; i++){
    if (arguments[i].nodeType == 1 || arguments[i].nodeType == 3) {
      fragment.appendChild(arguments[i])}
  }
  return fragment;
}

  var fragmom = insertDOM("div", {'id': ipIdentifier})
  var frag1 = insertDOM("div", {'class':"sameOuterKnob",'style': "position:absolute;left:4px;"})
      frag1.appendChild(insertDOM("input", {'class':"knob",'data-width':"180",'data-height':"180",'data-thickness':"0.4",'data-angleOffset':-125,'data-displayInput':false,'data-angleArc':250,'data-step':"5",'data-fgColor':"#1e8bf2",'data-bgColor':"#f4f4f4",'data-linecap':'round','value':initStatus1}))
  var frag2 = insertDOM("div", {'style': "position:absolute;left:44px;top:40px;display:block"})
      frag2.appendChild(insertDOM("input", {'class':"knob",'data-width':"100",'data-height':"100",'data-thickness':"0.4",'data-angleOffset':-125,'data-displayInput':false,'data-angleArc':250,'data-step':"5",'data-fgColor':"#1e8bf2",'data-bgColor':"#f4f4f4",'data-linecap':'round','value':initStatus2}))
  fragmom.appendChild(frag1);
  fragmom.appendChild(frag2);
  htmlID.appendChild(fragmom);

Upvotes: 0

tomca32
tomca32

Reputation: 1140

So you are dynamically inserting the code for knobs after trying to initialize them. Of course there is nothing to initialize since knobs aren't there yet. That's why it doesnt work.

You have to initialize a knob after (not before) you generate a knew one. So you should move this: 

$(".knob").knob({'min':0,'max':250});

At the end of your featureGenerator function.

And even better change it so you target an individual knob ID instead of the whole class:

$("#newKnobIDHere").knob({'min':0,'max':250});

I updated your fiddle: http://jsfiddle.net/jn4rW/3/ style is completely off, but the knob works.

You didn't include the knob library and you were calling knob constructor before having knob HTML.

Upvotes: 2

Related Questions