Answered by:
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); }
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