Search jQuery

jQuery Forum

xml output in lists with progressbar

in Using jQuery • 9 years ago

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:

<?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>
      <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:

<!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:

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.

Replies(6)

jakecigar

Re: xml output in lists with progressbar

9 years ago

$(this).find('div').progressbar("value",prob) sets a value on an existing progressbar. I think you want to create a new progress bar there. Right?

Unfortunately a progress bar can not be easily represented in a string.

html += '<div data-prob="' + prob + '"></div' // will add the div with a data property that can later be changed into a progress bar.

After the HTML is added to the DOM,

$("[data-prob]").each(function(){
$(this).progressbar({ value: $(this).data("prob") })
$(this).removeAttr("data-prob")
})

JΛ̊KE

mjmacarty

Re: xml output in lists with progressbar

9 years ago

Yes that's right I am creating a new progress bar for each "state" LI. It looks I need to call progress bar differently and implement outside of the string variable. So I add the special data attribute, write to everything to DOM, go back and read the data attribute into an array which I then process into my progress bars. Very cool. Let me work on that and let you know. Thanks very much.

mjmacarty

Re: xml output in lists with progressbar

9 years ago

OK, I got the progress bar into all sorted and the code looks just beautiful. The only problem is the actual progress bar doesn't display... I tried making an explicit height and width, but nothing. This is what the DOM inspector shows so it's there, but yet not there.

<!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 - 0.15

                            <div class="ui-progressbar ui-widget ui-widget-content ui-corner-all"                                                 style="height:8px; width:40px;"
role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="15"></div>
</li>