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

  • 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);
    
        }

    Thursday, May 16, 2013 10:14 AM

Answers

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


     

     


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 23, 2013 10:22 PM
  • 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 26, 2013 9:07 AM
  • 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.


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 28, 2013 9:56 AM

All replies

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

    Monday, May 20, 2013 3:41 AM
  • User-1066344940 posted
     //get or set some property
               element["LocatiodID"]
    ;
    element['PhoneNumber']        })

    That is what I understand??

    Monday, May 20, 2013 7:49 AM
  • 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 =//??




    Monday, May 20, 2013 9:27 AM
  • 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





    Monday, May 20, 2013 10:44 AM
  • 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">(215) 685-0602</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.






    Monday, May 20, 2013 1:18 PM
  • 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">(215) 685-0602</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!

    Wednesday, May 22, 2013 6:39 AM
  • 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 .

    Wednesday, May 22, 2013 9:26 AM
  • 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??

    Wednesday, May 22, 2013 1:52 PM
  • 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!

    Wednesday, May 22, 2013 10:10 PM
  • 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. 

    Thursday, May 23, 2013 9:31 AM
  • User-1066344940 posted

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

    Thursday, May 23, 2013 9:51 AM
  • 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.

    Thursday, May 23, 2013 10:19 AM
  • 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!


     

     


     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 23, 2013 10:22 PM
  • 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">(215) 685-0602</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">(215) 685-0602</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">(215) 685-0602</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

    Thursday, May 23, 2013 11:21 PM
  • 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.


    Friday, May 24, 2013 1:39 PM
  • 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.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, May 26, 2013 9:07 AM
  • 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.


    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 28, 2013 9:56 AM