CODEWITHSUNDEEP
jquery
Bounce
Bounce

Reputation: 2105

Executing dynamically loaded jQuery code

I'm developing web site that loads pages dynamically using the .load function. For example: index.php contains link, that loads other page after being clicked. That other page contains html and some jQuery code(plugins initialization and etc). The problem is jQuery code does not work after dynamical loading. Index.php code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>

<script type="text/javascript">
    $(document).ready(function(){
        $(".load-page").click(function(){
            $('.loaded-page-container').load('some_page_url', function(data, status, xhr) {
                alert('page is loaded');
            });
        });     
    });
</script>

</head>

<body>

<a href="#" class="load-page">Load page</a>

<div class="loaded-page-container"></div>

</body>
</html>

And code of the loaded page:

<script type="text/javascript" src="autoNumeric-1.7.4.js"></script>

<script type="text/javascript" src="selectmenu/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="selectmenu/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="selectmenu/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="selectmenu/ui/jquery.ui.selectmenu.js"></script>

<script type="text/javascript">
    $('#number').autoNumeric({mDec:0,vMax:'9999999'});  //these statements doesn't work 
    $('#select').selectmenu({
        width: 289
    });     
</script>

<div class="some-content">
    HTML code that appears after current page loading. 
    <input type="text" value="" name="number" id="number" />
    <select id="select">
        <option value="some-val">Some value</option>
    </select>
</div>

So the page loads up, but jQuery plugins unfortunately doesn't work. Any ideas?
Your help would be appreciated.

Upvotes: 1

Views: 1182

Answers (2)

Avisek Chakraborty
Avisek Chakraborty

Reputation: 8309

You need to keep all the JS codes at first page, not in the second page.

And after the AJAX call is complete & populating is done, you can trigger the javascript.

<!--ALL scripts linked in this page-->
$.ajax({
    url: "some_page_url",
    success: function( data ) {
        <!--LOADING ONLY THE HTMLs-->
        $('.loaded-page-container').html(data);
        alert('page is loaded');
    },
    complete: function( data ) {
        $('#number').autoNumeric({mDec:0,vMax:'9999999'});  
        $('#select').selectmenu({
            width: 289
        }); 
    }
});

Also, you need to check if the plug-ins can work or not over dynamically generated html.

Upvotes: 1

Behnam Esmaili
Behnam Esmaili

Reputation: 5967

You can use jQuery.getScript() as described here :

jQuery.getScript reference @ api.jquery.com

Upvotes: 1

Related Questions