0

I (am pretty sure I) have to use jQuery for a portion of a page I'm trying to create and this is basically my first day doing jQuery.

For the following if/else, I'm first trying to check if a <div> with an id equaling the variable url exists. If it exists, it will write text into the div. If the element does not exist, the else will create a new div with an id attribute, and text containing the same response, and append it to an <a href> tag associated with it.

Function() {
    ...
    ...
    ...
    if (xhr.readyState == 4 && xhr.status == 200) {
        if ($("div#"+url+"").length) {
            document.getElementById(url).innerHTML = xhr.responseText;
        }
        else {
            $("a[href='" + link + "']").append(
                $("<div></div>", {
                    "id": url,
                    "text": xhr.responseText
                    }
                )
            );
        }
    }
    ...
    ...
}

If I made that sound confusing, here's a visual representation of what I want to have happen in the HTML DOM.

Before

<a href="http://foo.com" onclick="Function('url')">Foo</a>

After link is clicked.

<a href="http://foo.com" onclick="Function('url')">Foo</a><div id="http://foo.com">xhr.responseText</div>

The error I get in the console is Error: Syntax error, unrecognized expression: div#http%3A%2F%2Fwww.foo.com Because it says it is a syntax error, I know I must be using .length wrong, but the selector for id is # so I don't understand where the error is. I've done a bunch of scouting across SO and http://api.jquery.com/length/ for jquery syntax for checking if a child exists and I've tried using some logical operators but it's always the same error at the if statement. I also tried using encodeURIComponent(url) in case it didn't like some characters in the URL but that didn't fix it either.

JoeL
  • 710
  • 4
  • 18
  • 2
    You can't use a URL as an HTML id because it contains invalid characters – Dave Nov 05 '15 at 19:46
  • and I guess encoding the URL doesn't matter? – JoeL Nov 05 '15 at 19:47
  • You can go about it the opposite way. The `$().closest()` method will try to match a selector against a node's ancestors. So you can check that the id of the child exists, and that one of its ancestors matches the parent you want. – Guybrush Threepwood Nov 05 '15 at 19:48
  • 1
    No encoding doesn't solve the problem because the percent sign is still invalid. Also you probably don't want periods in your ids because they could confuse jQuery. – Dave Nov 05 '15 at 19:48
  • 1
    What you should do is use `data-`-attributes. using a `data-url="..."` attribute would let you use `$("div[data-url]")` to find them. This is the cleanest way if you insist on having the URL as an attribute. – Ingwie Phoenix Nov 05 '15 at 19:50
  • @dave Ok thanks Dave. I guess I was on the right path thinking the URL was issue when I tried using encodeURIComponent since it works for my xhr.open("get","url"). Thanks for confirming :) – JoeL Nov 05 '15 at 19:52
  • @IngwiePhoenix wow that's great to know! I wish you would've put that as an answer so I could give a check mark :o I could alter the question title as well to indicate my id is a URL as to make your answer especially valid. Also, the way I'm doing this, the url seems like it has to be. Since I'm still pretty new, there are probably other ways around this, but to get this working right now, using the url is the way I am going if it can work (and as you have pointed out, it can). – JoeL Nov 05 '15 at 19:54

1 Answers1

2

you're question confuses me, but if you're looking to see if an id exists on the page try this

if($('#youId').length){//the object exists}

stackoverfloweth
  • 6,669
  • 5
  • 38
  • 69