Reputation: 3301

jQuery not creating links in IE/Chrome, works in Firefox

I'm trying to use jQuery 1.4.1 to parse an XML document and construct a list of links based on the content of this XML. So far I have this all working quite well in Firefox. However, when I view the same page in IE and Chrome, I see the <div> and <li> elements created, but the <a> elements do not appear. I'm sure I'm missing something simple but after looking at this for a while now, I'm not seeing it.

HTML/JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#result").ajaxError(function () {
            $(this).text("An error occurred while retrieving the site map");
        });

        // Get the site map XML
        $.get("SiteMap.xml", function (data) {
            // The div element that will contain our menu
            var menu = $("#menu");

            // Iterate over each <Group> element
            $(data).find('Group').each(function () {
                // Create a new div to contain the current group
                var group = $("<div>").text($(this).attr("name"));

                // Create a new list for the current group
                var list = $("<ul>");

                // Now iterate over the <Page> elements contained in the current <Group> element
                $(this).find("Page").each(function () {
                    // Note that since we're doing a nested each(), the context of $(this)     changes
                    // Create a list item and a link for the current page, append to the list
                    var item = $("<li>");
                    var link = $("<a>").attr({ href: $(this).attr("url"), text: $(this).attr    ("title") });

                    item.append(link);
                    list.append(item);
                });

                // Append the list to the group's div and then append the group to the menu
                group.append(list);
                menu.append(group);
            });

            $("#result").text("jQueryDemo Site Map");
        });
    });       
</script>
    <body>
        <div id="result"></div>
        <div id="menu"></div>
    </body>
    </html>

The XML that is being parsed is the following:

<SiteMap>
    <Group name="Selectors">
      <Page url="SelectById.htm" title="Select By Id" />
      <Page url="SelectByCss.htm" title="Select By CSS Class" />
      <Page url="SelectByElement.htm" title="Select By DOM Element" />
    </Group>
    <Group name="Events">
      <Page url="Bind.htm" title="Bind" />
      <Page url="Change.htm" title="Change" />
      <Page url="Click.htm" title="Click" />
      <Page url="Hover.htm" title="Hover" />
    </Group>
    <Group name="AJAX">
      <Page url="Ajax.htm" title="Ajax" />
      <Page url="AjaxError.htm" title="Ajax Error" />
      <Page url="Get.htm" title="Get" />
    </Group>
    <Group name="Animation">
      <Page url="Fade.htm" title="Fade" />
      <Page url="Slide.htm" title="Slide" />
    </Group>
    <Group name="DOM Manipulation">
      <Page url="Append.htm" title="Append" />
      <Page url="AppendTo.htm" title="AppendTo" />
      <Page url="Clone.htm" title="Clone" />
      <Page url="Each.htm" title="Each" />      
    </Group>
</SiteMap>

Thanks in advance for any help!

Upvotes: 0

Answers (3)

pete

Reputation: 25091

'text' is not an attribute of an anchor tag, its a child TextNode element. @scald's solution should work as link.append($(this).attr("title")) creates the text in the correct spot.

You could also change:

var link = $("<a>").attr({ href: $(this).attr("url"), text: $(this).attr    ("title") });

to:

var link = $("<a>").attr({ href: $(this).attr("url") }).text($(this).attr    ("title"));

Upvotes: 1

Sivan Wolberg

Reputation: 458

try this



      $(document).ready(function () {
                $("#result").ajaxError(function () {
                    $(this).text("An error occurred while retrieving the site map");
                });

                // Get the site map XML
                $.get("SiteMap.xml", function (data) {
                    // The div element that will contain our menu
                    var menu = $("#menu");
        var xmlData = $(data).find('SiteMap').first();
                    // Iterate over each  element
                    $(xmlData).find('Group').each(function () {
                        // Create a new div to contain the current group
                        var group = $("").text($(this).attr("name"));

                        // Create a new list for the current group
                        var list = $("");

                        // Now iterate over the  elements contained in the current  element
                        $(this).find("Page").each(function () {
                            // Note that since we're doing a nested each(), the context of $(this)     changes
                            // Create a list item and a link for the current page, append to the list
                            var item = $("");
                            var link = $("").attr({ href: $(this).attr("url"), text: $(this).attr    ("title") });

                            item.append(link);
                            list.append(item);
                        });

                        // Append the list to the group's div and then append the group to the menu
                        group.append(list);
                        menu.append(group);
                    });

                    $("#result").text("jQueryDemo Site Map");
                });
            });

Upvotes: 0

scald

Reputation: 729

Are you running this on a local file system or through a web server?

Chrome's developer tools reports:

XMLHttpRequest cannot load file://localhost/Users/scald/Desktop/SiteMap.xml. Origin null is not allowed by Access-Control-Allow-Origin.

when I try to run it on the local file system, but when I move it to a web server it loads the elements correctly. Firefox worked on the local file system, though.

I also had to modify the link generator a bit to get the actual link text to display in Chrome:

// Now iterate over the <Page> elements contained in the current <Group> element
                $(this).find("Page").each(function () {
                    // Note that since we're doing a nested each(), the context of $(this)     changes
                    // Create a list item and a link for the current page, append to the list
                    var item = $("<li>");
                    var link = $("<a>").attr({ href: $(this).attr("url")});
// Append title to link separately 
                    link.append($(this).attr("title"));

                    item.append(link);
                    list.append(item);

                });

Upvotes: 1

jQuery not creating links in IE/Chrome, works in Firefox

Answers (3)

Related Questions