How to load file based on data attribute?

Question

How to load a file based on data attribute?

For some reason $(this) does not seems to work.

if ($('.html').data('load-file')) {
  $(this).load($(this).data("load-file") + ' ' +   $(this).data("load-content"));
}

body {
    margin: 0;
    padding: 0;
}

.html {
    width: calc(100% - 10px);
    height: 80px;
    margin: 10px;
    background: #f6f6f6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div 
  class="html" 
  data-load-file="../index.html" 
  data-load-content=".icon_environment"></div>

<div class="html"></div>

`this` where that code is is referring to the global object (window, in this case). Did you intend it to refer to something else? — T.J. Crowder, Jul 22 '17 at 13:27
Unrelated typo: `cal(100% - 10px)` should be `calc(100% - 10px)`. — T.J. Crowder, Jul 22 '17 at 13:43
Another typo? `.icon_enviroment` => `.icon_environment` (note the `n`)? — T.J. Crowder, Jul 22 '17 at 13:46

T.J. Crowder · Accepted Answer · 2017-07-22T13:50:54.830

2

this in that code is the window (the global object). I think you probably meant for it to refer to the element that has the data-* attributes on it.

You probably want to handle those elements individually, so your best bet is to find them and loop through them with each, which will let you target them individually and will call your callback with this referring to each one:

$('.html[data-load-file][data-load-content]').each(function() {
  var $this = $(this);
  $this.load($this.attr("data-load-file") + ' ' + $this.attr("data-load-content"));
});

or:

$('.html[data-load-file][data-load-content]').each(function() {
  $(this).load(this.getAttribute("data-load-file") + ' ' + this.getAttribute("data-load-content"));
});

That finds all elements with the class html and also the two data-* attributes we require, loops through them individually, and uses their attributes to call load.

Live on plunkr: http://plnkr.co/edit/lzHBYxVSETvHzTt6l2KR?p=preview

Side note: I switched the above to using attr rather than data, because there wasn't any indication you're using the features data provides. Remember that data is not an accessor for data-* attributes. It's both more and less than that. Details.

edited Jul 22 '17 at 13:50

answered Jul 22 '17 at 13:30

T.J. Crowder

1,031,962
187
1,923
1,875

I didn't do a Stack Snippet because they're for **live** examples, and we can't make this example live since it requires external resources (the pages to load). – T.J. Crowder Jul 22 '17 at 13:35
I tried the code… but it does not work for some reason – Monwell Partee Jul 22 '17 at 13:41
@MonwellPartee: You'll hae to debug it. Fundamnetally, that *will* call `load` with the attributes in question. – T.J. Crowder Jul 22 '17 at 13:42
@MonwellPartee: Just tried it locally. Worked perfectly. – T.J. Crowder Jul 22 '17 at 13:47
@MonwellPartee: Works on plunkr, too: http://plnkr.co/edit/lzHBYxVSETvHzTt6l2KR?p=preview – T.J. Crowder Jul 22 '17 at 13:51
1

I copied word for word… and you get the badge of honor my good fellow – Monwell Partee Jul 22 '17 at 14:03

Pierre Granger · Answer 2 · 2017-07-22T13:46:50.933

Your jQuery(this) does not refer to your div.html, it refer to the whole document.

You need to replace jQuery(this) by jQuery('.html'), or to get each div.html and make an enclosure to be sure jQuery(this) refer to your div.html.

Also add a document ready to be sure it's not executed before page load when you don't have div.

jQuery(document).ready(function(){

  jQuery('.html[data-load-file]').each(function(){
    
    var loadFile = jQuery(this).data('load-file') ;
    console.log(loadFile) ;
    var loadContent = jQuery(this).data('load-content') ;
    console.log(loadContent) ;
  
    var load_url = loadFile + ' ' + loadContent ;
    console.log(load_url) ;
  
    jQuery(this).load(load_url);
    
  }) ;
    
}) ;

body {
margin: 0;
padding: 0;
}

.html {
width: calc(100% - 10px);
height: 80px;
margin: 10px;
background: #f6f6f6;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div 
  class="html" 
  data-load-file="../index.html" 
  data-load-content=".icon_environment"></div>

<div class="html"></div>

I've edited so you can see what appens. You try to do : `jQuery('.html').load('../index.html .icon_enviroment')` : i don't know what you want to do in the end but i guess you want to take the content of .icon_enviroment from your index. 1) are your sure your index is in a parent dir ? 2) are your sure it's enviroment and not environment ? — Pierre Granger, Jul 22 '17 at 13:47
It retrieves the div with the class icon_environment from the html — Monwell Partee, Jul 22 '17 at 13:51

How to load file based on data attribute?

2 Answers2