Question

How can I load div content from external file, but also use a case statement in the process? Might there be something with my Jquery code? Actually.. I’m confused??

JQuery Code:

$('.click-test').click(function() {
switch (this.id) {
case "test":
$('#test').load('external-file.html #test');
  break;

  case "test2":
  etc..
  });

html page:

<div class="click-test" id="test">click test</div>
<div id="test">place words from external file here</div>

external file .html

<div id="test">some words</div>

Answer 1

The jquery code is basically correct. The “this” does refer to the HTML element as you suspected and is set. So, your switch is working.

<div class="click-test" id="test">click test</div>

However, you’ve got 2 div’s in your base HTML page that both have the ID of “test”. Every ID should be unique on an HTML page (including the content you’re loading). So, you’ll need to do a bit of refactoring.

You could for example change the HTML to:

<div class="click-test" data-loadid="test">click test</div>

And the JavaScript to:

$('.click-test').click(function() {
    switch($(this).attr("data-loadid")) {

This would read from an attribute named ‘data-loadid’ using the jQuery attribute function. Then you can proceed to load the external div content using load as you had done. (Although, you may want to remove the bookmark as it’s unnecessary?)