Target the element JS was called within (without IDs)

Question

Consider this line:

<div onload='getContent();'></div>

I have the following JS function:

function getContent() {
  $.ajax({
    url: '/ContentController.php',
    success: function(data) {
    //change the html of the element this was called on, "TARGET"
      $(TARGET).html(data);
    }
  });
}

I want to select the element that the function was called on without using IDs so for example, if the data returned as "Hello World" the above html would look like this:

<div onload='getContent();'>Hello World</div>

Is there a way to do this?

Use class then. $(".className").eq(0) – Vaibhav Apr 30 '17 at 06:37 — Vaibhav, Apr 30 '17 at 06:37
why don't you wan to use ids? – CSharper Apr 30 '17 at 06:38 — CSharper, Apr 30 '17 at 06:38

score 2 · Answer 1 · answered Apr 30 '17 at 06:39

2

Give getContent an argument and pass this as its value.

HTML:

<div onload='getContent(this);'></div>

JS:

function getContent(element) {
  $.ajax({
    url: '/ContentController.php',
    success: function(data) {
    //change the html of the element this was called on, "TARGET"
      $(element).html(data);
    }
  });
}

answered Apr 30 '17 at 06:39

Hydrothermal

4,851
7
26
45

`onLoad` won't be handled for `div` elements. – Aria Apr 30 '17 at 06:53
Doesn't appear to work for me, I also made a function that just does $(element).html("test"); and it still didn't work, any idea why that would be the case? I did the html like this:
– Ivatrix Apr 30 '17 at 06:55
@Ivatrix As other users have said, `div` elements do not support the onload event. See [this SO question](http://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element) for more information. – Hydrothermal Apr 30 '17 at 06:56
@Aria is there an alternative to onLoad then for this scenario? For example, is there a way I can plug it in directly as a – Ivatrix Apr 30 '17 at 06:58
@Ivatrix, Yes if I understand you , you can trigger `onLoad` on div elements – Aria Apr 30 '17 at 07:00
1

@Ivatrix You'll have to explain what your use case and restrictions are. Why can't you use a class or an id? Can you put the script inside the element? Can you add any attributes other than onload? – JJJ Apr 30 '17 at 07:00

score 2 · Answer 2 · answered Apr 30 '17 at 06:49

You cannot add onload event handler to a div.It is supported by few tags like <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>.

The way around is add inline script

<div onload='getContent(event);'>Hello world
<script>

  $.ajax({
    url: '/ContentController.php',
    success: function(data) {
    //change the html of the element this was called on, "TARGET"
      $('div[onload]').text();
    }
  });
</script>

</div>

Yes this can be right solution, `onLoad` just handled for some specific elements. — Aria, Apr 30 '17 at 06:54

score 1 · Accepted Answer · answered Apr 30 '17 at 07:06

1

There is a way to trigger all div's onLoad as:

   function getContent(element) {
  $.ajax({
    url: '/ContentController.php',
    success: function(data) {
    //change the html of the element this was called on, "TARGET"
      $(element).html(data);
    }
  });
}

then you can trigger your div onLoad like you can call it in window.load

 $('div[onload]').trigger('onload');

and div elem:

<div onload='getContent(this);'>

answered Apr 30 '17 at 07:06

Aria

3,724
1
20
51

While a lot of good solutions were presented, I'm marking this as the answer because it provides (in my opinion) the cleanest solution to the problem & works like a charm. Thanks @Aria ! – Ivatrix Apr 30 '17 at 07:13
@Ivatrix, You're welcome, yes think so inline script is not clean solution. – Aria Apr 30 '17 at 07:24

Target the element JS was called within (without IDs)

3 Answers3