Call automatically JS function with parameters inside <div> element

Question

I've tried to find answers on internet to this.. but I didn't find :(
I'm trying to call automatically a javascript function passing parameters inside a < div > element when the page is loaded.
I know that "onload" doesn't work on < div > elements. I don't have idea how to do that.

Note..: My parameters are dynamics because it's inside a foreach loop. Each loop I have 2 different parameters to send to the function.

@foreach(var i in Something)  
{  
  <div onload="myFunction(i.param1, i.param2);">  
  </div>
}

Can you clarify why you want to do this? Specifying that will probably get you an answer explaining how to achieve this in a different and better way. — Patrick Roberts
– Patrick Roberts, Commented Jul 23, 2015 at 13:23

cyberbit · Accepted Answer · 2015-07-24 14:03:26Z

2

You can simply use a script block at the end of your <div>:

<div>
    ...
    <script type="text/javascript">
        myFunction(dynam_param1, dynam_param2);
    </script>
</div>

edited Jul 24, 2015 at 14:03

answered Jul 23, 2015 at 13:31

cyberbit

1,36516 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Over a year ago

Well, it worked good. I created a new <script> tag on the top of the page to make my function be global, so i can call it like you said. I dont know if its a great code.. but worked good.

cyberbit Over a year ago

Glad it worked for you. There are better ways using handlers for AJAX events, but this is way easier.

cbender · Accepted Answer · 2015-07-23 13:25:52Z

0

If you want to call the function when the page is loaded then you can put the onload in the <body> tag

<body onload="myFunction(dynam_param1, dynam_param2);">

answered Jul 23, 2015 at 13:25

cbender

2,2611 gold badge16 silver badges21 bronze badges

Comments

ndd · Accepted Answer · 2015-07-23 13:41:09Z

Update: I have updated my jsFiddle to show how to do using single script tag.

Assume below code is generated thru for loop.

<div class="dynamic-div" data-dynamic1='1' data-dynamic2='a'> 
    1
</div>
<div class="dynamic-div" data-dynamic1='2' data-dynamic2='b'> 
    2
</div>

So in your ready method you can get all the divs with class dyanmic-div and then do your process

$(document).on("ready", function(){
    $(".dynamic-div").each(function(index, element){
          var $this = $(element);
          myFunction($this.attr("data-dynamic1") , $this.attr("data-dynamic2"));            
    });
});

function myFunction(arg1, arg2){
    alert(arg1 + " - " +  arg2);            
}

http://jsfiddle.net/q8qzfavv

Here you can replace alert with your function call or any other operation that you plan to perform.

Collectives™ on Stack Overflow

Call automatically JS function with parameters inside <div> element

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related