Getting ListView, <ul> <li> <asp:label> values into a javascript array.

Question

User-1066344940 posted

I have been working on this for two days. I have managed to get my array working, it is filling with my database objects, but, I cannot extract the values of my <li> elements, which are made up of a few hyperlimks, and labels(with ids). My array is being filled with elements, but the values arent getting pulled out. I have a watch set on my listview(healthCenters), which has an <ul>(myList) in it. The innerHTML has this as the value when I look at it in my Watch window:

<a id="healthCenters_hlCenterName_0" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a>

The name is a hyperlink in a <li> element of my <ul>.
How do I get to this value? Or do I have my values buried too deep in the HTML for my array to extract? I have labels in the <li> elements of my <ul> that make up my listView. Here is the value of one of the labels from the watch window:

Type of Center: <span id="healthCenters_lblTypeofCenter_0">FQHC</span>

The value I need is "FQHC". The value of the outterText is:

Type of Center: FQHC.

For the outterHTML on the CenterName, I got this:

<li><a id="healthCenters_hlCenterName_0" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a></li>

Here is my original code:

function AddData() {
    var locationDB = document.getElementById('myList').getElementsByTagName('li');
    var locationAry = [];

    // fetch locations returned by database
    var items = locationDB;
    if (items.length == 0) {
        clearMap();
        return;
    }
    // loop through found locations in the database
    for (var i = 0; i < items.length; i++) {
        var locationid = items[i].getAttribute('lblLocationID');
        var healthCenterName = items[i].getAttribute('CenterName');
        var typeofCenter = items[i].getAttribute('TypeofCenter');
        var address = items[i].getAttribute('Address');
        var city = items[i].getAttribute('City');
        var state = items[i].getAttribute('State');
        var zipCode = items[i].getAttribute('ZipCode');
        var phone = items[i].getAttribute('PhoneNumber');
        var url = items[i].getAttribute('Website');
        var services = items[i].getAttribute('PatientServices');
        var distance = parseFloat(items[i].getAttribute('DistanceMiles'));
        var location = new Microsoft.Maps.Location(parseFloat(items[i].getAttribute('Lat')), parseFloat(items[i].getAttribute('Long')));
        var description = address + '<br/>' + city + '<br/>' + state + '<br/>' + phone + '<br/>' + url + '<br/>' + distance;
        // push location to array for use in map viewing
        locationAry.push(location);
    }
        var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location));
        pin1.Title = healthCenterName;
        pin1.Description = description;
        Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
        dataLayer.push(pin1);

    }

Answer 1

User1814019480 posted

 Hi Mark_F,

Thanks for posting!

You can refer to this code:

var myList = $("#myList");
        locationDB = list.children();
        locationDB.each(function (item, element) {
        //get or set some property
           element["Property"]        
        })

And I think you need to get more detial about Jquery function:

see this link:

http://api.jquery.com/each/#each-functionindex--Element

http://api.jquery.com/children/

Hope this helps!

Answer 2

User-1066344940 posted

 //get or set some property
           element["LocatiodID"]
;

element['PhoneNumber']        })

That is what I understand??

Answer 3

User-1066344940 posted

Hi Will,

So you are saying that my AddData function sholud have this 

var myList = $("#myList");
        locationDB = list.children();
        locationDB.each(function (item, element) {
        //get or set some property
           element["Property"]
        })

My script should be this:

var locationAry = [];
var myList = $("#myList");
        locationDB = list.children();
        locationDB.each(function (item, element) {
        //get or set some property
           element['<%=healthCenters_lblLocationID.ClientID%>'];
           element['<%=healthCenters_hlCenterName.ClientID%>'];
        })
//and so forth for each label value

I still would need to set them here l;ater on so that I can use them to create push pins on my map:

        var locationid = //What would I do here??
        var healthCenterName = //??
        var typeofCenter =//??

Answer 4

User-1066344940 posted

Here is what I got, but my vars(locationid, healthCenterName etc... ) are undefined;

function AddData() {
    var myList = $("#myList li");
    locationDB = myList.children();
    //locationDB.addClass("details");
    locationDB.each(function (item, element) {

        element['<%=healthCenters_hlCenterName.ClientID%>'];
        element['<%=healthCenters_lblTypeofCenter.ClientID%>'];
        element['<%=healthCenters_lblAddress.ClientID%>'];
        element['<%=healthCenters_lblCity.ClientID%>'];
        element['<%=healthCenters_lblState.ClientID%>'];
        element['<%=healthCenters_lblZipCode.ClientID%>'];
        element['<%=healthCenters_lblPhoneNumber.ClientID%>'];
        element['<%=healthCenters_webSite.ClientID%>'];
        element['<%=healthCenters_lblPatientServices.ClientID%>'];
        element['<%=healthCenters_lblRadius.ClientID%>'];
        element['<%=healthCenters_lblLocationID.ClientID%>'];
        element['<%=healthCenters_lblLat.ClientID%>'];
        element['<%=healthCenters_lblLng.ClientID%>'];

    
    var locationAry = [];

    // fetch locations returned by database
    var items = locationDB;
    if (items.length == 0) {
        clearMap();
        return;
    }
    // loop through found locations in the database
    for (var i = 0; i < locationDB.length; i++) {
        var locationid = element['<%=healthCenters_lblLocationID.ClientID%>'];
        var healthCenterName = element['<%=healthCenters_hlCenterName.ClientID%>'];
        var typeofCenter = element['<%=healthCenters_lblTypeofCenter.ClientID%>'];
        var address = element['<%=healthCenters_lblAddress.ClientID%>'];
        var city = element['<%=healthCenters_lblCity.ClientID%>'];
        var state = element['<%=healthCenters_lblState.ClientID%>'];
        var zipCode =  element['<%=healthCenters_lblZipCode.ClientID%>'];
        var phone =  element['<%=healthCenters_lblPhoneNumber.ClientID%>'];
        var url = element['<%=healthCenters_webSite.ClientID%>'];
        var services = element['<%=healthCenters_lblPatientServices.ClientID%>'];
        var distance = parseFloat(element['<%=healthCenters_lblRadius.ClientID%>']);
        var location = new Microsoft.Maps.Location(parseFloat(element['<%=healthCenters_lblLat.ClientID%>']), parseFloat(element['<%=healthCenters_lblLng.ClientID%>']));
        var description = address + '<br/>' + city + '<br/>' + state + '<br/>' + phone + '<br/>' + url + '<br/>' + distance;

        // push location to array for use in map viewing
        locationAry.push(location);
        
    
    var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location));
    pin1.Title = healthCenterName;
    pin1.Description = description;
    Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
    dataLayer.push(pin1);

}

    function displayInfobox(e) {
        if (e.targetType == 'pushpin') {
            infobox.setLocation(e.target.getLocation());
            infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
        }
    }

})
}

Am I getting the list items in the correct manner here. When I run it through the debugger I can see my values, but they are under the innerHTML. If I try to add:

element['<%=healthCenters_hlCenterName.ClientID%>'].innerHTML;
element['<%=healthCenters_lblTypeofCenter.ClientID%>'].innerHTML;

I get an error:

 

Microsoft JScript runtime error: Unable to get value of the property 'innerHTML': object is null or undefined

Answer 5

User-1066344940 posted

When I look at the pure HTML, I see this:

<ul id="myList">
    
    <li ><a id="healthCenters_hlCenterName_0" class="details" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a></li>
    <li style="list-style:none">Type of Center: <span id="healthCenters_lblTypeofCenter_0" class="details">FQHC</span></li>
    <li style="list-style:none"><span id="healthCenters_lblAddress_0" class="details">2230 Cottman Ave.</span></li>
    <li style="list-style:none"><span id="healthCenters_lblCity_0" class="details">Philadelphia</span> , <span id="healthCenters_lblState_0">PA</span></li>
    <li style="list-style:none"><span id="healthCenters_lblZipCode_0" class="details">19149</span></li>
    <li style="list-style:none">Phone:<span id="healthCenters_lblPhoneNumber_0" class="details">[phone]</span></li>
    <li style="list-style:none"><a id="healthCenters_webSite_0" class="details" href="http://www.phila.gov/health/ambulatoryhealth/hc10.html">http://www.phila.gov/health/ambulatoryhealth/hc10.html</a></li>
    <li style="list-style:none">Patient Services: <span id="healthCenters_lblPatientServices_0" class="details">Primary Care, Dental Care, Pediatrics, Women's Health, Behavioral Health</span></li>
    <li style="list-style:none">Distance: <span id="healthCenters_lblRadius_0" class="details">4.66 miles.</span></li>
    <li style="list-style:none"></li>
    <li style="list-style:none"></li>
    <br />

I changed my function to this:

function AddData() {
    var myList = $("li span");
    locationDB = myList.children('details');
    //locationDB.addClass("details");
    locationDB.each(function (item, element) {

        element['<%=healthCenters_hlCenterName.ClientID%>'];
        element['<%=healthCenters_lblTypeofCenter.ClientID%>'];
        element['<%=healthCenters_lblAddress.ClientID%>'];
        element['<%=healthCenters_lblCity.ClientID%>'];
        element['<%=healthCenters_lblState.ClientID%>'];
        element['<%=healthCenters_lblZipCode.ClientID%>'];
        element['<%=healthCenters_lblPhoneNumber.ClientID%>'];
        element['<%=healthCenters_webSite.ClientID%>'];
        element['<%=healthCenters_lblPatientServices.ClientID%>'];
        element['<%=healthCenters_lblRadius.ClientID%>'];
        element['<%=healthCenters_lblLocationID.ClientID%>'];
        element['<%=healthCenters_lblLat.ClientID%>'];
        element['<%=healthCenters_lblLng.ClientID%>'];


        var locationAry = [];

        // fetch locations returned by database
        var items = locationDB;
        if (items.length == 0) {
            clearMap();
            return;
        }
        // loop through found locations in the database
        for (var i = 0; i < locationDB.length; i++) {
            var locationid = element['<%=healthCenters_lblLocationID.ClientID%>'];
            var healthCenterName = element['<%=healthCenters_hlCenterName.ClientID%>'];
            var typeofCenter = element['<%=healthCenters_lblTypeofCenter.ClientID%>'];
            var address = element['<%=healthCenters_lblAddress.ClientID%>'];
            var city = element['<%=healthCenters_lblCity.ClientID%>'];
            var state = element['<%=healthCenters_lblState.ClientID%>'];
            var zipCode = element['<%=healthCenters_lblZipCode.ClientID%>'];
            var phone = element['<%=healthCenters_lblPhoneNumber.ClientID%>'];
            var url = element['<%=healthCenters_webSite.ClientID%>'];
            var services = element['<%=healthCenters_lblPatientServices.ClientID%>'];
            var distance = parseFloat(element['<%=healthCenters_lblRadius.ClientID%>']);
            var location = new Microsoft.Maps.Location(parseFloat(element['<%=healthCenters_lblLat.ClientID%>']), parseFloat(element['<%=healthCenters_lblLng.ClientID%>']));
            var description = address + '<br/>' + city + '<br/>' + state + '<br/>' + phone + '<br/>' + url + '<br/>' + distance;

            // push location to array for use in map viewing
            locationAry.push(location);


            var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location));
            pin1.Title = healthCenterName;
            pin1.Description = description;
            Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
            dataLayer.push(pin1);

        }

        function displayInfobox(e) {
            if (e.targetType == 'pushpin') {
                infobox.setLocation(e.target.getLocation());
                infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
            }
        }

    })
}

But, the CenterName is a hyperLink

 <li ><a id="healthCenters_hlCenterName_33" class="details" href="searchResponse.aspx?LocationID=255">Chinatown Medical Services</a></li>

Which has a <a> tag. My question is, can I put two selectors in here like this:

 var myList = $("li span a");

If not, I thought about just using the className:

ocationDB = myList.children('details');

But, these are the grandghildren of my <ul> arent they? I need some guidance.

Answer 6

User1814019480 posted

Hi,

I test your code like this,but I didnt know whether this is your need:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
<ul id="myList">    
    <li ><a id="healthCenters_hlCenterName_0" class="details" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a></li>
    <li style="list-style:none">Type of Center: <span id="healthCenters_lblTypeofCenter_0" class="details">FQHC</span></li>
    <li style="list-style:none"><span id="healthCenters_lblAddress_0" class="details">2230 Cottman Ave.</span></li>
    <li style="list-style:none"><span id="healthCenters_lblCity_0" class="details">Philadelphia</span> , <span id="healthCenters_lblState_0">PA</span></li>
    <li style="list-style:none"><span id="healthCenters_lblZipCode_0" class="details">19149</span></li>
    <li style="list-style:none">Phone:<span id="healthCenters_lblPhoneNumber_0" class="details">[phone]</span></li>
    <li style="list-style:none"><a id="healthCenters_webSite_0" class="details" href="http://www.phila.gov/health/ambulatoryhealth/hc10.html">http://www.phila.gov/health/ambulatoryhealth/hc10.html</a></li>
    <li style="list-style:none">Patient Services: <span id="healthCenters_lblPatientServices_0" class="details">Primary Care, Dental Care, Pediatrics, Women's Health, Behavioral Health</span></li>
    <li style="list-style:none">Distance: <span id="healthCenters_lblRadius_0" class="details">4.66 miles.</span></li>
    <li style="list-style:none"></li>
    <li style="list-style:none"></li>
    <br />
    </ul>
    <script>
            function test_onclick() {
                var myList = $("li");
                var locationDB = myList.children();         
                locationDB.each(function (item, element) {
                   
                    h.innerHTML += element["id"] +"----------------" +element["innerHTML"] +" <br/> ";
                })
        }
    </script>
    <input type="button" id="test" name="test" value="test" onclick="return test_onclick()" />
    <asp:Label runat="server" ID="t" />
    <div id="h">    
    </div>
    </div>
    </form>
</body>
</html>

Hope this helps!

Answer 7

User-1066344940 posted

Hi Will,

This is a start, I just dont know how to put all of the returned: "element["innerHTML"]" into an array so that I can use them to make infoboxes.

Can I do this:

function AddData() {
var myList = $("li");
locationDB = myList.children();
locationDB.each(function (item, element) {
// loop through found locations in the database
for (var i = 0; i < items.length; i++) {
var locationid = element["innerHTML"];
var healthCenterName = element["innerHTML"];
var typeofCenter = element["innerHTML"];
var address = element["innerHTML"];
var city = element["innerHTML"];
var state = element["innerHTML"];
var zipCode = element["innerHTML"];
var phone = element["innerHTML"];
var url = element["innerHTML"];
var services = element["innerHTML"];
var distance = element["innerHTML"];
var location = new Microsoft.Maps.Location(parseFloat(getElementById('<%=healthCenters_lblLat.ClientID%>')), parseFloat(getElementById('<%=healthCenters_lblLng.ClientID%>')));
var description = address + '<br/>' + city + '<br/>' + state + '<br/>' + phone + '<br/>' + url + '<br/>' + distance;

var locationAry = [];

// push location to array for use in map viewing
locationAry.push(location);

This is where most of my problems occur. I cannot get each "item " into an array .

Answer 8

User-1066344940 posted

I've also tried this:

function AddData() {
    var myList = $("li");
    locationDB = myList.children();
    locationDB.each(function (index, element) {
        if (locationDB.length == 0) {
            clearMap();
            return;
        }
        // loop through found locations returned from the database
        for (var i = 0; i < locationDB.length; i++) {

            var healthCenterName = $('#element[id="healthCenters_hlCenterName"]').attr("innerHTML");
            var typeofCenter = $('#element[id="healthCenters_lblTypeofCenter"]').attr("innerHTML");
            var address = $('#element[value="healthCenters_lblAddress"]').attr("innerHTML");
            var city = $('#element[value="healthCenters_lblCity"]').attr("innerHTML");
            var state = $('#element[value="healthCenters_lblState"]').attr("innerHTML");
            var zipCode = $('#element[value="healthCenters_lblZipCode"]').attr("innerHTML");
            var phone = $('#element[value="healthCenters_lblPhoneNumber"]').attr("innerHTML");
            var url = $('#element[value="healthCenters_webSite"]').attr("innerHTML");
            var services = $('#element[value="healthCenters_lblPatientServices"]').attr("innerHTML");
            var distance = $('#element[value="healthCenters_lblRadius"]').attr("innerHTML");
            var locationid = $('#element[value="healthCenters_lblLocationID"]').attr("innerHTML");
            var location = new Microsoft.Maps.Location(parseFloat($('#element[value="healthCenters_lblLat"]').attr("innerHTML")), parseFloat($('#element[value="healthCenters_lblLng"]').attr("innerHTML")));
            var description = address + '<br/>' + city + '<br/>' + state + '<br/>' + phone + '<br/>' + url + '<br/>' + distance;

            var locationAry = [];

How do I get the innerHTML of each array item assigned to my var??

Answer 9

User1814019480 posted

 <script>
            function test_onclick() {
                var myList = $("li");
                var locationDB = myList.children();
                       var locationAry = [];

                // push location to array for use in map viewing
                //locationAry.push(location);
                       locationDB.each(function (item, element) {
                           var tagName = element["id"];
                           if (tagName.match("TypeofCenter") == "TypeofCenter") {
                               var healthCenterName = element["innerHTML"];

                           }
//create  object
                           var content = {};
//set object element
                           content.id = element["id"];
                           content.context = element["innerHTML"];
                           alert(content.id, content.context);
//push in array
                           locationAry.push(content);
                           
                           //h.innerHTML += element["id"] + "----------------" + element["innerHTML"] + " <br/> ";
                       })
                       //alert(locationAry[1].id);
        }
    </script>

Hi,

you can refer this code.

I think this can resolve your problem.

THX!

Answer 10

User-1066344940 posted

Hi Will,

This is not working. I am returning multiple health centers from my database, I cannot hard code: 

if (tagName.match("TypeofCenter") == "TypeofCenter") {

Because the TypeofCenter can be different for each Center. I did this:

function AddData() {
    var myList = $("li");
    locationDB = myList.children();
    var locationAry = [];
    locationDB.each(function (item, element) {// loop through found locations returned from the database
        var tagName = element["id"];
        if (tagName.match("CenterName") == "CenterName") {//I changed TypeofCenter to CenterName and it still isnt working
            var healthCenterName = element["innerHTML"];
            var typeofCenter = element["innerHTML"];
            var address = element["innerHTML"];
            var city = element["innerHTML"];
            var state = element["innerHTML"];
            var zipCode = element["innerHTML"];
            var phone = element["innerHTML"];
            var url = element["innerHTML"];
            var services = element["innerHTML"];
            var distance = element["innerHTML"];
            var locationid = element["innerHTML"];
            var location = new Microsoft.Maps.Location(parseFloat(element["innerHTML"]), parseFloat($(element["innerHTML"])));
            var description = address + '<br/>' + city + '<br/>' + state + '<br/>' + phone + '<br/>' + url + '<br/>' + distance;
            
        }
            var content = {};
            //set object element
            content.id = element["id"];
            content.context = element["innerHTML"];
            
            // push location to array for use in map viewing
            locationAry.push(content);

            // Let microsoft figure out the viewing boundary to contain all the found locations
            viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(locationAry);
            map.setView({ bounds: viewBoundaries });

            var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location));
            pin1.Title = healthCenterName;
            pin1.Description = description;
            Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
            dataLayer.push(pin1);

    });
    function displayInfobox(e) {
        if (e.targetType == 'pushpin') {
            infobox.setLocation(e.target.getLocation());
            infobox.setOptions({ visible: true, title: e.target.Title, description: e.target.Description });
        }
    }
            

But, couldnt I put a selector here to get each unique health center: I  thought that maybe I colud use the class as a selector, like this:

if (tagName.match("details") == "details") {

I mat have multiple health centers comming back in my list. 

Answer 11

User-1066344940 posted

I need to mention that my <ul> is contained in a <ListView>.

Answer 12

User-1066344940 posted

This is what I'm getting, all of the vars are getting the CenterName, instead of city, state, zipcode, etc...

healthCenterName "Philadelphia District health Center #10"
typeofCenter "Philadelphia District health Center #10"
city "Philadelphia District health Center #10"...
and so on for each one.

Answer 13

User1814019480 posted

Hi,

OK,I may not know your mean clearly before.

 

locationDB.each(function (item, element) {
                           var tagName = element["id"];
                           if (tagName.match("TypeofCenter") == "TypeofCenter") {
                               var healthCenterName = element["innerHTML"];
                           }
                           var content = {};
                           content.id = element["id"];
                           content.context = element["innerHTML"];
                           //alert(content.id, content.context);
                           locationAry.push(content);                           
                           //h.innerHTML += element["id"] + "----------------" + element["innerHTML"] + " <br/> ";
                       })

Above code is an sample,I shoud tell you logic.

//get li tag list elements
                var myList = $("li");
                var locationDB = myList.children();
                       var locationAry = [];
                       locationDB.each(function (item, element) {
                       //get current li element id
                           var tagName = element["id"];
                           //Judge current li id
                           //EG:if the id name include "TypeofCenter",I think this li include the healthCenterName message
                           //So I set healthCenterName value to element["innerHTML"]
                           if (tagName.match("TypeofCenter") == "TypeofCenter") {
                               var healthCenterName = element["innerHTML"];

                           }
                           //other id match
                           //if the id include "Address",I set address = element["innerHTML"] and other li like this 

                           if (tagName.match("Address") == "Address")
                           {
                               var address = element["innerHTML"];
                           }
                           //
                           if (tagName.match("City") == "City")
                           {
                               var city = element["innerHTML"];
                           }
                           …………………………………………………………like above code,need you add…………………………
                           //put current li to an onject element for pushing to array
                           var content = {};
                           content.id = element["id"];
                           content.context = element["innerHTML"];
                           //alert(content.id, content.context);
                           locationAry.push(content);
                           
                           //h.innerHTML += element["id"] + "----------------" + element["innerHTML"] + " <br/> ";
                       })
                       //alert(locationAry[1].id);
        }

And about "TypeofCenter",I found this from your html code:

like this:

<a id="healthCenters_hlCenterName_0" >Philadelphia District health Center #10</a></li>
<span id="healthCenters_lblTypeofCenter_0" class="details">FQHC</span></li>
<span id="healthCenters_lblAddress_0" class="details">2230 Cottman Ave.</span></li>
<span id="healthCenters_lblCity_0" class="details">Philadelphia</span> 
<span id="healthCenters_lblState_0">PA</span></li>
    ………………………………………………

I think you need to know the code logic,And the code include some test code,you can use it and debug.

Hope this helps!

 

 

 

Answer 14

User1814019480 posted

Mark_F

I need to mention that my <ul> is contained in a <ListView>.

And I write this code to you,you can test it and modify it to your need:

<ul id="u1">    
    <li ><a id="healthCenters_hlCenterName_0" class="details" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a></li>
    <li style="list-style:none">Type of Center: <span id="healthCenters_lblTypeofCenter_0" class="details">FQHC</span></li>
    <li style="list-style:none"><span id="healthCenters_lblAddress_0" class="details">2230 Cottman Ave.</span></li>
    <li style="list-style:none"><span id="healthCenters_lblCity_0" class="details">Philadelphia</span> , <span id="healthCenters_lblState_0">PA</span></li>
    <li style="list-style:none"><span id="healthCenters_lblZipCode_0" class="details">19149</span></li>
    <li style="list-style:none">Phone:<span id="healthCenters_lblPhoneNumber_0" class="details">[phone]</span></li>
    <li style="list-style:none"><a id="healthCenters_webSite_0" class="details" href="http://www.phila.gov/health/ambulatoryhealth/hc10.html">http://www.phila.gov/health/ambulatoryhealth/hc10.html</a></li>
    <li style="list-style:none">Patient Services: <span id="healthCenters_lblPatientServices_0" class="details">Primary Care, Dental Care, Pediatrics, Women's Health, Behavioral Health</span></li>
    <li style="list-style:none">Distance: <span id="healthCenters_lblRadius_0" class="details">4.66 miles.</span></li>
    <li style="list-style:none"></li>
    <li style="list-style:none"></li>
    <br />
    </ul>
    <ul id="Ul1">    
    <li ><a id="A1" class="details" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a></li>
    <li style="list-style:none">Type of Center: <span id="Span1" class="details">FQHC</span></li>
    <li style="list-style:none"><span id="Span2" class="details">2230 Cottman Ave.</span></li>
    <li style="list-style:none"><span id="Span3" class="details">Philadelphia</span> , <span id="Span4">PA</span></li>
    <li style="list-style:none"><span id="Span5" class="details">19149</span></li>
    <li style="list-style:none">Phone:<span id="Span6" class="details">[phone]</span></li>
    <li style="list-style:none"><a id="A2" class="details" href="http://www.phila.gov/health/ambulatoryhealth/hc10.html">http://www.phila.gov/health/ambulatoryhealth/hc10.html</a></li>
    <li style="list-style:none">Patient Services: <span id="Span7" class="details">Primary Care, Dental Care, Pediatrics, Women's Health, Behavioral Health</span></li>
    <li style="list-style:none">Distance: <span id="Span8" class="details">4.66 miles.</span></li>
    <li style="list-style:none"></li>
    <li style="list-style:none"></li>
    <br />
    </ul>
    <ul id="Ul2">    
    <li ><a id="A3" class="details" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a></li>
    <li style="list-style:none">Type of Center: <span id="Span9" class="details">FQHC</span></li>
    <li style="list-style:none"><span id="Span10" class="details">2230 Cottman Ave.</span></li>
    <li style="list-style:none"><span id="Span11" class="details">Philadelphia</span> , <span id="Span12">PA</span></li>
    <li style="list-style:none"><span id="Span13" class="details">19149</span></li>
    <li style="list-style:none">Phone:<span id="Span14" class="details">[phone]</span></li>
    <li style="list-style:none"><a id="A4" class="details" href="http://www.phila.gov/health/ambulatoryhealth/hc10.html">http://www.phila.gov/health/ambulatoryhealth/hc10.html</a></li>
    <li style="list-style:none">Patient Services: <span id="Span15" class="details">Primary Care, Dental Care, Pediatrics, Women's Health, Behavioral Health</span></li>
    <li style="list-style:none">Distance: <span id="Span16" class="details">4.66 miles.</span></li>
    <li style="list-style:none"></li>
    <li style="list-style:none"></li>
    <br />
    </ul>
        <script>
            function test_onclick() {
                //get ul tag list elements
                var myList = $("ul");

                var locationAry = [];

                for (var i = 0; i < myList.length; i++) {

                    //get current ul include li element list                   
                    var liListContent = {};

                    var locationDB = $("#" + myList[i].id).children();

                    // every li handle
                    locationDB.each(function (item, element) {

                        var tagName = element["id"];
                        if (tagName.match("TypeofCenter") == "TypeofCenter") {
                            liListContent.healthCenterName = element["innerHTML"];

                        }
                        if (tagName.match("Address") == "Address") {
                            liListContent.address = element["innerHTML"];
                        }
                        if (tagName.match("City") == "City") {
                            liListContent.city = element["innerHTML"];
                        }
                        //other judge code need you to add
                        //put current li to an onject element for pushing to array

                        liListContent.id = element["id"];
                    });
                    locationAry.push(liListContent);
                }                
            }
        </script>

 

I think this may meet your need

Answer 15

User-1066344940 posted

Hey Will,

This:

<a id="healthCenters_hlCenterName_0" >Philadelphia District health Center #10</a></li>
<span id="healthCenters_lblTypeofCenter_0" class="details">FQHC</span></li>
<span id="healthCenters_lblAddress_0" class="details">2230 Cottman Ave.</span></li>
<span id="healthCenters_lblCity_0" class="details">Philadelphia</span> 
<span id="healthCenters_lblState_0">PA</span></li>
    ………………………………………………

is the pure HTML AFTER I run the page in the Browser. The runtime is  pre-appending the ListViews "id" to my controls. My listViews "id" is healthCenters. Your code is still not working. I even tried to put the literal element "id" in the match() method like this:

 var tagName = element["id"];
            if (tagName.match("healthCenters_hlCenterName") == "healthCenters_hlCenterName") {
                liListContent.healthCenterName = element["innerHTML"];
            }

But, it is undefined. I appreciate yuor contributions, but, I do not want to trouble you anymore my friend. I will continue to develop it and I will post my solution when I have it working. Cheers.

Answer 16

User1814019480 posted

hi,

 

asp: label is an server control,when run at client,it id will regenerated.

span id="healthCenters_lblAddress_0" class="details">2230 Cottman Ave.</span></li>

i use Adress is due to the new id which include this string,and other string may be change.

And you can see the client Code from browser,you will find the server id is changed.

So I suggest you use my code,and

 

("healthCenters_hlCenterName") 

  

this may be hardly got by js,So broswer can post error.

I think you can try my code.I test it and run success.

THX.

Answer 17

User-1066344940 posted

Hi Will,

I have it working, your help has been invaluable, thanks. I also had help from the jQuery forums. What I ended up doing was this:

//Give each element a calss name:

<!-- ListView holds locations returned from DB -->
    <asp:ListView ID="healthCenters" runat="server" DataKeyNames="CenterName,LocationID,Lat,Long">
 <LayoutTemplate >
    <ul id="myList" class="hcListing">
    <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
    </ul>
    </LayoutTemplate>
    <ItemTemplate >
    <li ><asp:HyperLink CssClass="hcName" ID="hlCenterName" runat="server" Text='<%# Eval("CenterName") %>' NavigateUrl='<%# Eval("LocationID", "searchResponse.aspx?LocationID={0}") %>' ></asp:HyperLink></li>
    <li style="list-style:none">Type of Center: <asp:Label CssClass="typeOfCenter" ID="lblTypeofCenter" runat="server" Text='<%# Eval("TypeofCenter") %>' /></li>
    <li style="list-style:none"><asp:Label CssClass="address" ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' /></li>
    <li style="list-style:none"><asp:Label CssClass="city" ID="lblCity" runat="server" Text='<%# Eval("City") %>' /> , <asp:Label CssClass="state" ID="lblState" runat="server" Text='<%# Eval("State") %>' /></li>
    <li style="list-style:none"><asp:Label CssClass="zip" ID="lblZipCode" runat="server" Text='<%# Eval("ZipCode") %>' /></li>
    <li style="list-style:none">Phone:<asp:Label CssClass="phone" ID="lblPhoneNumber" runat="server" Text='<%# String.Format("{0:(###) ###-####}",Convert.ToInt64(Eval("PhoneNumber"))) %>' /></li>
    <li style="list-style:none"><asp:HyperLink CssClass="url" ID="webSite" runat="server" NavigateUrl='<%# Eval("Website") %>' Text='<%# Eval("Website") %>'>HyperLink</asp:HyperLink></li>
    <li style="list-style:none">Patient Services: <asp:Label CssClass="services" ID="lblPatientServices" runat="server" Text='<%# Eval("PatientServices") %>' /></li>
    <li style="list-style:none">Distance: <asp:Label CssClass="distance" ID="lblRadius" runat="server" Visible="True" Text='<%# String.Format("{0:0.##}", Eval("DistanceMiles")) + " " + "miles." %>' /></li>
    <li style="list-style:none"><asp:Label CssClass="locationId" ID="lblLocationID" runat="server" Visible="true" Text='<%# Eval("LocationID") %>' /></li>
    <li style="list-style:none"><asp:Label CssClass="lat" ID="lblLat" runat="server" Visible="true" Text='<%# Eval("Lat") %>' /><asp:Label CssClass="lng" ID="lblLng" runat="server" Visible="true" Text='<%# Eval("Long") %>' /></li>
    <br />
  </ItemTemplate>
  </asp:ListView>

 

/*get the UL element by classname and use the .each function to

get li tag list elements by class name

using the .find() function. The find function matches elements by a selector, which in this case is the "CssClass" of my label.*/

function AddData() {
    $(function () {

        var locationAry = [];
        //Use the jQuery .each() function to get each <li>
        $("ul.hcListing").each(function (i, elem) {

            var liListContent = {};
            var latitude;
            var longitude;
            var location;
            var description;

            //get li tag list elements by class name
            liListContent.centerName = $(this).find(".hcName").html();
            liListContent.centerType = $(this).find(".typeOfCenter").html();
            liListContent.centeraddress = $(this).find(".address").html();
            liListContent.centerCity = $(this).find(".city").html();
            liListContent.centerState = $(this).find(".state").html();
            liListContent.centerZip = $(this).find(".zip").html();
            liListContent.centerPhone = $(this).find(".phone").html();
            liListContent.centerUrl = $(this).find(".url").html();
            liListContent.centerServices = $(this).find(".services").html();
            liListContent.centerDistance = $(this).find(".distance").html();
            liListContent.centerId = $(this).find(".locationId").html();
            liListContent.centerLatitude = $(this).find(".lat").html();
            liListContent.centerLongitude = $(this).find(".lng").html();
            locationAry[i] = liListContent;

            for (var i = 0; i < locationAry.length; i++) {

                latitude = locationAry[i].centerLatitude;
                longitude = locationAry[i].centerLongitude;
                location = new Microsoft.Maps.Location(latitude, longitude);

                description = locationAry[i].centeraddress + '<br/>' + locationAry[i].centerCity + '<br/>' +
                locationAry[i].centerState + '<br/>' + locationAry[i].centerPhone + '<br/>' + locationAry[i].centerDistance;
                //locationAry.push(location);
//                for (var prop in locationAry[i]) {

//                    alert("value: " + location);
//                }

I still ahve more work to do, but this is how I got the vaslues. It was a long hard road, but worht the time, and effort. I want to thank dsvick from jQuery.com who helped me out allot too.