Include html based on li tag's id in JQuery

Question

I've got a script that I want to include a html file based on the list item's id.

I've got two list items

<ul class="fruits">
         <li id="0">Apples</li>
         <li id="1">Pears</li>
</ul>

Now here's my script so far. Basically I want to check the id of the selected list item and insert a html file with a description of that fruit.

Script is

$(document).ready(function() {
$(".fruits li").click(function() {
                if(this.id == "0") {
                    $(".fruit_copy").load("blocktext/apple.html");
                }
        });
});

And I want this <div class="fruit_copy"> </div> to be populated with the HTML content. But of course it's not working.

`class=".fruit_copy"` is not valid, I think you meant to put `class="fruit_copy"` (simple revision) — , Jun 26 '14 at 14:48
sorry that's a typo based on this question! The div is `class="fruit_copy"` in reality. Will edit this now. — Daniel, Jun 26 '14 at 14:49
did you check console...? Does .load() fetch relevant content..? — Sudhir Bastakoti, Jun 26 '14 at 14:51
"Not working" isn't a sufficient description of the problem. — cookie monster, Jun 26 '14 at 14:51
@cookiemonster it doesn't display in the allotted space for the `fruit_copy` division. — Daniel, Jun 26 '14 at 14:52
You're using a relative URL, is that what you intend? What debugging have you done? — cookie monster, Jun 26 '14 at 14:53
yes the directory `blocktext` and my `PHP` file are in the same directory. — Daniel, Jun 26 '14 at 14:55
I think you can't use numbers as ID. In CSS it doesn't work, so try other IDs ? — enguerranws, Jun 26 '14 at 14:57
script is working for me. there must be something wrong with your selector `.fruit_copy` or the document (path) you are trying to load. — low_rents, Jun 26 '14 at 15:03
@enguerranws HTML5 doesn't care about an ID starting with a number but HTML4 does. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — MiniRagnarok, Jun 26 '14 at 15:11
@enguerranws Do you have a source on that? I tried this in the latest IE , Chrome, and Firefox without any problems. I even tried it in IE8 and it worked! http://mathiasbynens.be/demo/html5-id (click the top link on that page to switch from classes to ids and vice versa) — MiniRagnarok, Jun 26 '14 at 17:14
I said "In CSS it doesn't work" : http://jsfiddle.net/M4YUu/ . Sure JS doesn't matter, but why would you name an element you can't handle with CSS if you need ? — enguerranws, Jun 27 '14 at 08:42

enguerranws · Accepted Answer · 2014-06-26T15:32:11.693

You could do something cleaner, like that :

HTML part :

<ul class="fruits">
         <li data-dest="blocktext/apple.html">Apples</li>
         <li data-dest="blocktext/pears.html" >Pears</li>
</ul>

JS part :

$(document).ready(function() {
  $(".fruits li").click(function() {
     // you don't need IDs or if/else statement.
     var dest = $(this).attr('data-dest');
     $(".fruit_copy").load(dest);
   });
});

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

Try this:

$(document).ready(function () {
$(".fruits li").click(function () {
    if ($(this).attr("id") == "0") {
        //alert("aa");
        $(".fruit_copy").load("blocktext/apple.html");
    }
    });
});

Assuming your relative path is correct.

Also, in HTML 5 you can use ID's as numbers but HTML 4 is strict on it.

EDIT - Thanks to MiniRagnarok for the link in comments

Credits: https://stackoverflow.com/a/79022/3739658

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

edited May 23 '17 at 12:05

Community

1
1

answered Jun 26 '14 at 14:53

imbondbaby

6,351
3
21
54

I like the idea of your code. Just to check should this JS be at the top of my html document (i.e. in the `head` tags or at the bottom before closing the `body`). – Daniel Jun 26 '14 at 15:03
bottom or you could embed it using an external .js file :) Needs to be at the bottom so the HTML attributes are declared – imbondbaby Jun 26 '14 at 15:05
@user3739658 Feel free to add my source about IDs as numbers to your answer. – MiniRagnarok Jun 26 '14 at 15:15
Done with yours and orignal authors comments ofcourse – imbondbaby Jun 26 '14 at 15:18
1

Well, you can put it wherever you want, after jQuery "$" is declared. $(document).ready() means that it will wait for the whole document to be ready, so... whatever. – enguerranws Jun 26 '14 at 15:34

MackieeE · Answer 3 · 2014-06-26T15:15:38.813

0

The options values are "falsey", they're strings whilst you're checking integers, help it by adding .toString():

We also append the === so we're not type checking - string to string.

if ( this.id.toString() === "0" ) {
   //Code
}

Lastly, check your console & use the network tab to see if your script is successfully collecting the .html file with a 200 HTTP code.

edited Jun 26 '14 at 15:15

answered Jun 26 '14 at 15:04

MackieeE

11,751
4
39
56

$('.fruits li') are not newly loaded elements. But well, this answer is somewhat complete, so it does not deserve a downvote... – enguerranws Jun 26 '14 at 15:07
@enguerranws Ah aye, overlooked that aspect, I'll edit that part out - thanks for noting :) But it's hardly a full answer as I would like it to be now ;) – MackieeE Jun 26 '14 at 15:15

Include html based on li tag's id in JQuery

3 Answers3