jQuery Forum

Can you post the actual markup that gets rendered from the asp?

You are trying to access the properties of the jQuery elements as arrays and that isn't going to work. Instead of

1. var tagName = element["id"]

you need to have

1. var tagName = $(element).attr("id");

To access the html all you need is:

1. $(element).html();

Once you post the markup we can look at that as well.

Dave

I thought I provided the html above, sorry if it is unreadable, here is my markup again:

1.  <!-- ListView holds locations returned from DB -->
       <asp:ListView ID="healthCenters" runat="server" DataKeyNames="CenterName,LocationID,Lat,Long">
    <LayoutTemplate >
       <ul id="myList">
       <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
       </ul>
       </LayoutTemplate>
       <ItemTemplate >
       <li ><asp:HyperLink CssClass="details" 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="details" ID="lblTypeofCenter" runat="server" Text='<%# Eval("TypeofCenter") %>' /></li>
       <li style="list-style:none"><asp:Label CssClass="details" ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' /></li>
       <li style="list-style:none"><asp:Label CssClass="details" ID="lblCity" runat="server" Text='<%# Eval("City") %>' /> , <asp:Label ID="lblState" runat="server" Text='<%# Eval("State") %>' /></li>
       <li style="list-style:none"><asp:Label CssClass="details" ID="lblZipCode" runat="server" Text='<%# Eval("ZipCode") %>' /></li>
       <li style="list-style:none">Phone:<asp:Label CssClass="details" ID="lblPhoneNumber" runat="server" Text='<%# String.Format("{0:(###) ###-####}",Convert.ToInt64(Eval("PhoneNumber"))) %>' /></li>
       <li style="list-style:none"><asp:HyperLink CssClass="details" ID="webSite" runat="server" NavigateUrl='<%# Eval("Website") %>' Text='<%# Eval("Website") %>'>HyperLink</asp:HyperLink></li>
       <li style="list-style:none">Patient Services: <asp:Label CssClass="details" ID="lblPatientServices" runat="server" Text='<%# Eval("PatientServices") %>' /></li>
       <li style="list-style:none">Distance: <asp:Label CssClass="details" ID="lblRadius" runat="server" Visible="True" Text='<%# String.Format("{0:0.##}", Eval("DistanceMiles")) + " " + "miles." %>' /></li>
       <li style="list-style:none"><asp:Label CssClass="details" ID="lblLocationID" runat="server" Visible="false" Text='<%# Eval("LocationID") %>' /></li>
       <li style="list-style:none"><asp:Label CssClass="details" ID="lblLat" runat="server" Visible="False" Text='<%# Eval("Lat") %>' /><asp:Label ID="lblLng" runat="server" Visible="False" Text='<%# Eval("Long") %>' /></li>
       <br />
     </ItemTemplate>
     </asp:ListView>
   

It isn't that the code you provided is unreadable it is that it is the server side asp code, what we need to see is the actual markup that is created and sent to the browser. When you view the page in a browser, view the source and post that, that's what we need to see.

Dave

Okay,
I did the following, But I am only getting the healthCenterName. The next element(typeofCenter)is undefined:

1. function AddData() {
       //get ul tag list elements
       var myList = $("li");
       var locationAry = [];
       for (var i = 0; i < myList.length; i++) {
           //get current ul include li elements in list
           var liListContent = {};
           var locationDB = myList.children();
           locationDB.each(function (item, element) {
   
               var tagName = $(element).attr("id");
               if (tagName.match("hlCenterName") == "hlCenterName") {
                   liListContent.healthCenterName = $(element).html();
               }
               if (tagName.match("lblTypeofCenter") == "lblTypeofCenter") {
                   liListContent.typeofCenter = $(element).html();
               }
               if (tagName.match("Address") == "Address") {
                   liListContent.address = element["innerHTML"];
   

The markup looks ok, at least you should be getting a match from it. You might have some scope issues with some of the variables though. You say you get undefined from that one, where do get that result, you don't show all of the revised code. Where do you try to access the information? Can you post the entire AddData function and the code where you access the information in the array that is giving you undefined?

Is this online somewhere so we don't have to keep going back and forth?

Dave

I just saw your most recent post as I was getting ready to post this, I'll take a look over the weekend if I have time, but in the meantime check this out. I think you need to structure your markup a bit better to make a clear distinction between centers. doing that lets you take much better advantage of how jQuery can traverse the dom and find things. Here is an example of one way to change your mark up. Each center is its own ul, then with that, each bit of information is given a class "phone", "typeOfCenter", etc. It looks like this:

1. <ul id="theID" class="hcListing">
2. <li ><a id="healthCenters_hlCenterName_0" class="hcName details" href="searchResponse.aspx?LocationID=253">Philadelphia District health Center #10</a></li>
3. <li style="list-style:none">Type of Center: <span id="healthCenters_lblTypeofCenter_0" class="typeOfCenter details">FQHC</span></li>
4. <li style="list-style:none"><span id="healthCenters_lblAddress_0" class="address details">2230 Cottman Ave.</span></li>
5. <li style="list-style:none"><span id="healthCenters_lblCity_0" class="city details">Philadelphia</span> , <span id="healthCenters_lblState_0" class="state">PA</span></li>
6. <li style="list-style:none"><span id="healthCenters_lblZipCode_0" class="postalCode details">19149</span></li>
7. <li style="list-style:none">Phone:<span id="healthCenters_lblPhoneNumber_0" class="phone details">(215) 685-0602</span></li>
8. <li style="list-style:none"><a id="healthCenters_webSite_0" class="website details" href="http://www.phila.gov/health/ambulatoryhealth/hc10.html">http://www.phila.gov/health/ambulatoryhealth/hc10.html</a></li>
9. <li style="list-style:none">Patient Services: <span id="healthCenters_lblPatientServices_0" class="details services">Primary Care, Dental Care, Pediatrics, Women's Health, Behavioral Health</span></li>
10. <li style="list-style:none">Distance: <span id="healthCenters_lblRadius_0" class="details radius">4.66 miles.</span></li>
11. <li style="list-style:none"></li>
12. <li style="list-style:none"></li>
13. </ul>
14. <ul id="theID1" class="hcListing">
15. <li ><a id="healthCenters_hlCenterName_1" class="hcName details" href="searchResponse.aspx?LocationID=252">Frankford Avenue Health and Dental Centers</a></li>
16. <li style="list-style:none">Type of Center: <span id="healthCenters_lblTypeofCenter_1" class="typeOfCenter details">FQHC</span></li>
17. <li style="list-style:none"><span id="healthCenters_lblAddress_1" class="address details">4510 Frankford Ave.</span></li>
18. <li style="list-style:none"><span id="healthCenters_lblCity_1" class="city details">Philadelphia</span> , <span id="healthCenters_lblState_1" class="state">PA</span></li>
19. <li style="list-style:none"><span id="healthCenters_lblZipCode_1" class="postalCode details">19124</span></li>
20. <li style="list-style:none">Phone:<span id="healthCenters_lblPhoneNumber_1" class="phone details">(215) 744-1302</span></li>
21. <li style="list-style:none"><a id="healthCenters_webSite_1" class="website details" href="http://www.gphainc.org/">http://www.gphainc.org/</a></li>
22. <li style="list-style:none">Patient Services: <span id="healthCenters_lblPatientServices_1" class="services details">Primary Care, Dental Care, Pediatrics, Women's Health</span></li>
23. <li style="list-style:none">Distance: <span id="healthCenters_lblRadius_1" class="details radius">4.7 miles.</span></li>
24. <li style="list-style:none"></li>
25. <li style="list-style:none"></li>
26. </ul>

Dave

I read the last post you had on the link above and I'm glad you're getting close. I don't see any elements with the three classes you're not getting (lat, lng, and locationID). If you add those elements so they get rendered you should have it.

Dave

It must be a .NET thing that is preventing them from even being rendered to the browser. Try leaving them as visible so they get sent to the browser, then use jQuery to hide them like this:

1. $("label.lat, label.lng, label.locationId").hide();

This will leave them in the dom but make them not show up to the user. You would put that line right up at the top of your ready handler.

Dave

Yep, that's fine. The code that starts with "$(document).ready(function () {" is the ready handler, you dont have to have one when working with jQuery, it is only needed when you want something to happen when the dom is ready to be manipulated (fully loaded). The css you used does the same thing, so whichever works better for you is the one to go with .

Regarding setting the values in your post above, when you assign them with var, like you do with the var location and var description, you're creating local variables that may not be visible outside the loop they are being set in, so if you're using them outside the loop you'll want to create them outside the loop, then assign the value inside.

Also, I see you're doing things like this: locationAry[i][prop].lat. Keep in mind that locationAry[i] is the object that got added to the array, and prop is the property of that object. In the code I posted I did it that way so you could see how to loop over them all. If you're only looking at specific ones you can do this:

1. for (var i = 0; i < locationAry.length; i++) {
2.       //alert("prop: " + prop + " value: " + locationAry[i][prop])
3.       var location = new Microsoft.Maps.Location(locationAry[i].lat, locationAry[i].lng);
4.       var description = locationAry[i].address + '<br/>' + locationAry[i].city + '<br/>' + locationAry[i].state + '<br/>' + locationAry[i].phone + '<br/>' + locationAry[i].url + '<br/>' + locationAry[i].distance
5.       //locationAry.push(location);
6. }

Dave

Sorry I misspoke, I should have said function, not loop. I couldn't tell where you using the variables 'location' and 'distance' so I was just pointing out that using var set them as existing only within the function they are declared in, if your using them there then don't worry about it.

Dave

It looks like you're not accessing them correctly. You set them like this:

1. ...
2. liListContent.centerId = $(this).find(".locationId").html();
3. liListContent.centerLatitude = $(this).find(".lat").html();
4. liListContent.centerLongitude = $(this).find(".lng").html();
5. locationAry[i] = liListContent;
6. latitude = locationAry[i].lat;
7. longitude = locationAry[i].lng;

So, you're creating a centerLatitude property, a centerLongitude property and a centerId property. Lines 6 and 7 above don't do anything so you dont need them), then you try to access them with

1. ...
2. latitude = locationAry[i].lat;
3. longitude = locationAry[i].lng;

You have to use the same property names you named them with, so it should be:

1. latitude = locationAry[i].centerLatitude;
2. longitude = locationAry[i].centerLongitude;

Dave

Your adding to the array within this loop here:

1. $("ul.hcListing").each(function (i, elem) {
2.       ...
3.       locationAry[i] = liListContent;
4. }

i will increment each time it goes to the next ul element with that class. You're going to run into trouble because you also have this block for (var i = 0; i < locationAry.length; i++) { ... } inside the each loop. That means that for every ul it finds it will loop through all of them each time. I wondered about that as I was helping but figured I was missing something.

You probably want to move that for loop so it is after the each loop. Another thing I just realized is that you have $(function () { inside of the addData function, this isn't needed, if you need to make sure the dom is ready then place the call to AddData inside the ready handler, where do you call AddData by the way?

If all of this is just called when the page loads then you could probably simplify it a bit. You may not need to actually even use the locationAry, unless you're using it in some other code I dont see in the posts.

Dave

Dave, I see what youre saying, so do I need this for (var i = 0; i < locationAry.length; i++) {

                latitude = locationAry[i].centerLatitude;
                longitude = locationAry[i].centerLongitude;
                location = new Microsoft.Maps.Location({ 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);

//if my each loop is already putting all of my objects into an array? Cant I just dio this:
 locationAry[i] = liListContent;

                latitude = locationAry[i].centerLatitude;
                longitude = locationAry[i].centerLongitude;
                location = new Microsoft.Maps.Location({ 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);
//                }
                //Let microsoft figure out the viewing boundary to contain all the found locations
                viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(location);
                map.setView({ bounds: viewBoundaries });

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

    });
    
}
//I am calling the AddData function from the GetResultsMap function, I am calling this function after the DOM is loaded. and only for this particular map. I have a default map loading on my page when the app loads, then after some user input and a button click, this loads, and calls the AddData(0:

1. function GetResultsMap() {
   
       // Initialize the map
       map = new Microsoft.Maps.Map(document.getElementById("myMap"),
                            { credentials: credentials });
   
       dataLayer = new Microsoft.Maps.EntityCollection();
       map.entities.push(dataLayer);
   
       var infoboxLayer = new Microsoft.Maps.EntityCollection();
       map.entities.push(infoboxLayer);
   
       infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false, offset: new Microsoft.Maps.Point(0, 20) });
       infoboxLayer.push(infobox);
   
       AddData();
   }
2. 
   

No, I dont think you need that loop at all, now that I've seen the calling function it looks like you aren't using the locationAry or the object anywhere else in your code so you could even reduce it to this:

1. function AddData() {
2.       //Use the jQuery .each() function to get each <li>
3.       $("ul.hcListing").each(function (i, elem) {
4.             //get li tag list elements by class name
5.             centerName = $(this).find(".hcName").html();
6.             centerType = $(this).find(".typeOfCenter").html();
7.             centeraddress = $(this).find(".address").html();
8.             centerCity = $(this).find(".city").html();
9.             centerState = $(this).find(".state").html();
10.             centerZip = $(this).find(".zip").html();
11.             centerPhone = $(this).find(".phone").html();
12.             centerUrl = $(this).find(".url").html();
13.             centerServices = $(this).find(".services").html();
14.             centerDistance = $(this).find(".distance").html();
15.             centerId = $(this).find(".locationId").html();
16.             centerLatitude = $(this).find(".lat").html();
17.             centerLongitude = $(this).find(".lng").html();
18.             var location = new Microsoft.Maps.Location(centerLatitude, centerLongitude);
19.             var description = centeraddress + '<br/>' + centerCity + '<br/>' + centerState + '<br/>' + centerPhone + '<br/>' + centerDistance;
20.             //Let microsoft figure out the viewing boundary to contain all the found locations
21.             viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(location);
22.             map.setView({ bounds: viewBoundaries });
23.             var pin1 = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(location));
24.             pin1.Title = centerName;
25.             pin1.Description = description;
26.             Microsoft.Maps.Events.addHandler(pin1, 'click', displayInfobox);
27.             dataLayer.push(pin1);   
28.       });
29. }

Dave

I tried this too:

1. $(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;
           var address;
           var city;
           var state;
           var zip;
           var phone;
           var distance;
   
           //get li tag list elements by class name
           liListContent.centerName = $(this).find(".hcName").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.centerDistance = $(this).find(".distance").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;
           address = locationAry[i].centeraddress;
           city = locationAry[i].centerCity;
           state = locationAry[i].centerState;
           zip = locationAry[i].centerZip;
           phone = locationAry[i].centerPhone;
           distance = locationAry[i].centerDistance;
           centerLocation = new Microsoft.Maps.Location(parseFloat(latitude), parseFloat(longitude));
   
           description = locationAry[i].centeraddress + '<br/>' + locationAry[i].centerCity + '<br/>' +
              locationAry[i].centerState + '<br/>' + locationAry[i].centerPhone + '<br/>' + locationAry[i].centerDistance;
           locationAry.push(centerLocation);
           //                for (var prop in locationAry[i]) {
   
           //                    alert("value: " + location);
           //                }
           //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(centerLocation));
           pin1.Title = locationAry[i].centerName;
           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 });
           }
       }
   

I'm getting confused with all the code now ...  

Do you have this up on a working page somewhere that I can see the entire thing? I try not to make assumptions about how/why things are being done but when I do it leads us down a path that ends up complicating things. So it would be better if I could see everything at once on a working (or sort of working) page.

Dave

The best way would be an actual web page, even a test page that can be accessed from the internet. And don't worry about all the code, it is just all the various iterations are all starting to run together. Let's do this, go back to the post above that started with
"Wait,
I do have one more question. I noticed when I look at this in the debugger"

You had working code at that point right, the only problem was that it didn't seem to have all of the elements in it that it should. Can you post that code, all of it, and the associated markup that gets rendered to the browser.

Dave

You only have one element in the array because there is only one ul with the class of hcListing.

Dave

The selector you're using $("ul.hcListing") is specifically looking for ul elements with a class of hcListing, if you dont use that then I don't know how you can separate the different centers as you progress through them. I'm not a .net person but I would think there has to be a way to separate them without lumping them all together in one big ul.

I guess you could traverse through them all and each time you get to one with a class of hcName you would start a new one, but you'll need to rewrite your loop to do it that way.

Your other option would be to, on the server side, create a json string and just drop it into the javascript, then you wouldn't need to walk the dom at all. If you could create json string that looked like this

1. var healthCenters = '{"healthCenter":[{"name":"Philadelphia District health Center #10","address":"2230 Cottman Ave.","city":"Philadelphia ","state":"PA","zip":"19149","phone":"(215) 685-0602","distance":"4.66 miles","latitude":"40.0484396517277","longitude":"-75.0865249633789"},{"name":"The second center","address":"2230 Cottman Ave.","city":"Philadelphia ","state":"PA","zip":"19149","phone":"(215) 685-0602","distance":"4.66 miles","latitude":"40.0484396517277","longitude":"-75.0865249633789"},{"name":"center number 3","address":"2230 Cottman Ave.","city":"Philadelphia ","state":"PA","zip":"19149","phone":"(215) 685-0602","distance":"4.66 miles","latitude":"40.0484396517277","longitude":"-75.0865249633789"}]}';]}'

You could then parse it and use it like this:

1. var locationAry = JSON.parse(healthCenters);
2. for (var i = 0; i < locationAry.length; i++) { ... }
   

Dave

You'll need to post the generated markup as well, it looks like you changed it to use tables now so we need to see the new markup.

Dave

Your problem is probably the cells you have that the hr in them, they will also match the selector but the fields you're looking for wont be in them so you'll get null/undefined for them.

Part of the problem is that you're letting the language dictate your layout and html structure. I'm not enough of a .net person to know how to work around it but as a first step you might try to assign the tables that contain the actual center info a common class name, then you could access just those tables instead of the top most level one.

If you can't get rid of the hr then just test the results before you actually add them to the array, if they're undefined don't create the object and don't add it to the array.

Dave

Hi Dave!
It's been a long road, but I have the solution I changed the markup  to use a table, like you suggested, and I just traversed the DOM using the <td> class name to find all of the values for each label, which I had given a class name. I was able to put all of my locations in to an array, which shows push pins on a map. Thanks allot for all of your suggestions, I wouldnt have gotten this without your suggestions.

1. //here is the code
2. function AddData() {
   
       var locationAry = [];
       //Use the jQuery .each() function to get each item
       $("td.locationDetails").each(function (i, elem) {
           var liListContent = {};
           liListContent.centerName = $(this).find(".hcName").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.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++) {
   
   //        for (var prop in locationAry[i]) {
               //alert("prop: " + prop + " value: " + locationAry[i][prop]);
   
           var title = locationAry[i].centerName;
           var address = locationAry[i].centeraddress;
           var city = locationAry[i].centerCity;
           var state = locationAry[i].centerState;
           var zip = locationAry[i].centerZip;
           var phone = locationAry[i].centerPhone;
           var distance = locationAry[i].centerDistance;
           var latitude = parseFloat(locationAry[i].centerLatitude);
           var longitude = parseFloat(locationAry[i].centerLongitude);
           var pinLocations = new Microsoft.Maps.Location(parseFloat(locationAry[i].centerLatitude), parseFloat(locationAry[i].centerLongitude));
           var description = locationAry[i].centeraddress + '<br/>' + locationAry[i].centerCity + '<br/>' +
                locationAry[i].centerState + '<br/>' + locationAry[i].centerPhone + '<br/>' + locationAry[i].centerDistance;
   
         
           for (p = 0; p < locationAry.length; p++) {
           p = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(parseFloat(locationAry[i].centerLatitude), parseFloat(locationAry[i].centerLongitude)));
           p.Title = title;
           p.Description = description;
           Microsoft.Maps.Events.addHandler(p, 'click', displayInfobox);
           dataLayer.push(p);
                       }
   
           }
      
       function displayInfobox(e) {
           if (e.targetType == 'pushpin') {
               infobox.setLocation(e.target.getLocation());
               infobox.setOptions({ visible: true, showPointer: true, title: e.target.Title, description: e.target.Description });
           }
       }
   }