xml output in lists with progressbar

xml output in lists with progressbar

OK, I almost have everything I need for this silly little xml read and output.  The last thing I am trying to do is associate a progress bar with a probability.  I ended up modifying the xml so i could read each probability so it looks like this:

  1. <?xml version="1.0" encoding="UTF-8"?>

        <bn>
            <node>
                <name>Stability</name>
                <state prob="0.15">Low - </state>
                <state prob="0.25">Moderate - </state>          
                <state prob="0.60">High - </state>
            </node>       
            









  2.         <node>
                <name>Free/Fair Elections</name>
                <state prob="0.60">Yes - </state>
                <state prob="0.40">No - </state>
            </node>
             
            <node>
                <name>Regulatory Compliance</name>
                <state prob="0.8">Yes - </state>          
                <state prob="0.2">No - </state>
           </node>
        </bn>
               

           














So what I am looking for is a progress bar to appear after the state and prob. What happens though is I create a DIV inside each LI, and I get [object Object] displayed outside of the div like this:

  1. <!DOCTYPE html>

    <html>

        <head></head>
        <body>
            <div id="nodes">
                <h3></h3>
                <ul class="outer">
                    <li class="minus">

                        Stability

                        <ul class="detail" style="display: block;">
                            <li>

                                Low -

                                <div></div>

                                [object Object]

                            </li>























Here is the code I am using for the progress bar functionality:

  1.  var node = $(this);
                   html += '<li>' + node.find('name').text() + '<ul class="detail">'; // Embedded list
                   node.find('state').each(function() { // Each node state
                   html += '<li>' + $(this).text()
                  
                   var prob = $(this).attr('prob');
                  
                   prob = parseFloat(prob);
                   html +=  '<div></div>';
                   html += $(this).find('div').progressbar("value",prob) +'</li>';









Any thoughts on where I am going wrong? Thanks in advance.