Call js function after div is loaded

jquery run script after everything loaded
javascript onload div
run javascript on page load
jquery after page load
html run javascript on div load
call javascript function()( $('div onload event))
jquery event after page fully loaded
javascript execute after all scripts loaded

I have a div element which is loaded after a click on a radio button.

Need to hide a part of the div after it is loaded.

$(function($) {
  $('.div_element').on('load', function() {
    $('.textbox').hide();
  });
});

The above code doesn't work. I need to trigger a function after the div is shown on the page.

Although it may not be good solution but you can check in an interval if the div exist, if it is then you can do further:

$(function() {
    var checkDiv = setInterval(function(){
       if($('.div_element').length > 0) {    // it would be good if you would use id instead of the class
           clearInterval(checkDiv);
           //further action here
       } 
    }, 100); // check after 100ms every time
});

[RESOLVED] How to execute function after div loads , How to execute function after div loads heres my function, if div exists return "true"​, now how to $("#div1").load(function() { alert("The div has been loaded. One way to do it is to put the call to When chkObject(elemId) returns true, clear the setInterval() and then execute whatever javascript you need. A function can be executed when the page loaded successfully. This can be used for various purposes like checking for cookies or setting the correct version of the page depending on the user browser. Method 1: Using onload method: The body of a webpage contains the actual content that is to be displayed.

Here is how I would go about it. This is using vanilla JavaScript but it can easily be adapted to use jQuery.

The idea is to use Mutation Observers. I hope it helps.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>DOM MUTATION OBSERVERS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <form name="radios">
        <input type="radio" name="gender" value="male" id="maleRadio" checked> Male
        <br>
        <input type="radio" name="gender" value="female" id="femaleRadio"> Female
        <br>
        <input type="radio" name="gender" value="other" id="otherRadio"> Other
    </form>

    <!-- This div will be displayed when the radio button whose value is female is clicked. -->
    <div id="femaleDiv" style="display: none">
        <p>The textbox should be below...</p>
        <input type="text" id="textToHide">
    </div>

    <script>
        // After the document loads...
        document.onload = function () {
            // Attach an onclick listener to the radio buttons.
            var radios = document.forms["radios"].elements["gender"];
            for (var i = 0, max = radios.length; i < max; i++) {
                radios[i].onclick = function (event) {
                    var radio = event.target || event.srcElement;
                    console.log(radio.name);
                    if (radio.value === "female") {
                        document.getElementById("female").style.display = "block"
                    }
                }
            }

            // Get the div whose change in attributes we are interested in.
            var targetNode = document.getElementById("femaleDiv");

            // Set the mutation observer to only listen to attribute mutations
            var config = { attributes: true };

            // This will be called when a mutation has been observed
            var callback = function(mutationsList) {
                for (var mutation of mutationsList) {
                    if (mutation.type == "attributes") {
                        console.log(mutation);
                        console.log('The ' + mutation.attributeName + ' attribute was modified.');
                        if (targetNode.style.display == "block") {
                            document.getElementById("textToHide").style.display = "none";
                        }
                    }
                }
            };

            // Create the observer
            var observer = new MutationObserver(callback);

            // Start observing
            observer.observe(targetNode, config);

            // Uncomment this to stop observing at at the right place.
            // observer.disconnect();
        } ();
    </script>
</body>

</html>

DOMContentLoaded vs jQuery.ready vs onload, How To Decide , A simple explanation of how to decide when your JavaScript code should run. The load event occurs when all of the HTML is loaded, and any subresources innerHTML = new Date }); </script> <div id="my-awesome-el"></div> </body> </​html> DOMContentLoaded / jQuery.ready often occurs after the page has initially  This tutorial shows how to call a javascript function on page load using various plain JavaScript functions and using JQuery on document ready. The script.js is located in the same directory as the html page.

Check Div is initialized

$(document).ready(function(){
       var textBox="<input type='text' class='textbox'>";
       $(".textboxContainer").html(textBox);   
       
       var divNew="<div class='div_element'>DIV to Load</div>";
       $(".domNewDiv").html(divNew); 
       
          var divNew1="<div class='div_element'>DIV to Load 2</div>";
       $(".domNewDiv").html(divNew1); 
});


$(".div_element").init( function(){
    $('.textboxContainer').find('.textbox').hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='textboxContainer'></div>
<div class='domNewDiv'>
</div>

HTML onload Event Attribute, Execute a JavaScript immediately after a page has been loaded: <body onload="​myFunction()"> Value, Description. script, The script to be run on onload  Calling the toggle2 function using window.onload in the bottom of an external js file placed near the bottom of the page reveals in the alert() statement that there is no value to style.display. The style is set to block in the CSS file.

As far as my understanding, you need to perform an action on clicking of a radio button. This is where your code should start.

$("input[name='YOUR_BUTOTN_NAME_GOES_HERE']").click(function(){
//I suggest to use a same class for both the radio buttons you want to click as this will effect for all the radio buttons
    console.log('You clicked radio!');
    var checkDivLength = setInterval(function(){
   if($('.div_element').length > 0) {

      //Hide your element
      $('.textbox').hide();
      clearInterval(checkDivLength);
   } 
   }, 100);
});

Please note that in this line "$("input[name='YOUR_BUTOTN_NAME_GOES_HERE']").click(function(){" you need to give the name attribute which you have used in your code. Eg <input type="radio" name="sample" value="test"> then your code should be "$("input[name='sample']").click(function(){"

Thanks :)

jQuery load() Method, The load() method was deprecated in jQuery version 1.8 and removed in version 3.0. Specifies the function to run when the specified element is done loading How to change the text of a <div> element when an image is fully loaded. Call js function after div is loaded. I have a div element which is loaded after a click on a radio button. Need to hide a part of the div after it is loaded.

You can invoke it using " () ", when the event calls:

$(function($) {
  $('.div_element').on('load', function() {
    $('.textbox').hide();
  }());
});

Run JavaScript Only After Entire Page Has Loaded, The .ready() method offers a way to run JavaScript code as soon as the page's For example, scripts can be loaded dynamically long after the page has loaded  .ready( handler )Returns: jQuery. Description: Specify a function to execute when the DOM is fully loaded. Type: Function() A function to execute after the DOM is ready. The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate.

.ready(), Run Javascript Only After Page Finishes Loading function toggle2(​showHideDiv, switchTextDiv) { var ele = document. when I click on the link to toggle it after the page has completely loaded, the alert box displays “block”  When this event handler is used, the entire page and all of its related files and components are loaded before the function listed in the onload event handler is executed, hence the term "on load." As shown in the script above, it's easy to use, but what if you have more than one function you want to call using an onload event handler?

Run Javascript Only After Page Finishes Loading - JavaScript, The ready() method is used to make a function available after the </script> </​head> <body> <div id = "mydiv"> Click on this to see a You can try to run the following code to learn how to use $(window).load() in jQuery: <! The string stored in name is incorporated into a welcome message, which is passed to a JavaScript function, displayWelcome, which renders the welcome message into a heading tag. Call a void JavaScript function. JavaScript functions that return void(0)/void 0 or undefined are called with IJSRuntime.InvokeVoidAsync.

load() and $(document).ready() functions in jQuery?, This can be used with the body element to execute a script after the webpage has completely loaded. The function that is required to be executed is given here. jQuery Forum Move this topic Forum : Getting Started Using jQuery Using jQuery Plugins Using jQuery UI Developing jQuery Core Developing jQuery Plugins Developing jQuery UI QUnit and Testing About the jQuery Forum jQuery Conferences jQuery Mobile Developing jQuery Mobile

Comments
  • A <div> doesn’t "load". Do you want to call a function as soon as the <div> is in the DOM? Search for Mutation Observers. If the <div> isn’t in the DOM, then you can’t bind an event listener to it.
  • Can you add woking snippet of your code? That would be easy and faster to debug
  • @Xufox Yes, the div is shown on the page after radio button is clicked. I then need to say hide one of the textbox in the div that is loaded.
  • @phpblogger what is your code to hide?
  • @KiranShahi Updated the question. The duplicate link has the first param as "some url" - I dont have anything to use on that place, is there any other possibility?
  • This works. Thanks. but as expected takes more time to load the main div :-(. Sad that there is no onload event for the element which can just act based on the visibility of the div
  • Already tried this - it doesn't work after the div is loaded. Just checks on page load if the div is present on not.