jquery - Why doesn't My External Javascripts Run after an Ajax Call? -
i have code in index page pretty same other pages except contents in #content:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content=""> <!--[if ie]><meta http-equiv='x-ua-compatible' content='ie=edge,chrome=1'><![endif]--> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <!-- title --> <title>home | ajax project</title> <!-- favicons --> <!-- styles --> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <div class="nav-bar"> <div class="nav-container"> <div class="nav-toggle"> <a href=""> <span class="bar-1"></span> <span class="bar-2"></span> <span class="bar-3"></span> </a> </div> <ul class="nav-menu"> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> </div> <div id="content"> <section class="page-sect" data-bg="assets/images/slides/slide1.jpg"> <div class="home-section"> <div class="container-fluid"> <div class="row"> <div class="col-md-5 col-md-offset-1"> <h1 class="main-heading">lorem ipsum dolor sit amet, consectetur adipisicing elit. architecto in vero a. </h1> </div> </div> </div> </div> </section> <section class="fullwidth"> <div class="container"> <div class="row"> <div class="col-md-6"> <h5>this first page</h5> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. rem nihil perspiciatis saepe harum eos quas aut. quod blanditiis voluptatibus culpa beatae accusantium, consectetur nihil sequi ipsum, deserunt sapiente ratione repellat, amet enim? </p> </div> <div class="col-md-6"> <h5>this first page</h5> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. rem nihil perspiciatis saepe harum eos quas aut. quod blanditiis voluptatibus culpa beatae accusantium, consectetur nihil sequi ipsum, deserunt sapiente ratione repellat, amet enim? </p> </div> </div> </div> </section> </div> <script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="assets/js/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <script id="runscript" type="text/javascript" src="assets/js/custom.js"></script> <script id="runscript" type="text/javascript" src="assets/js/test.js"></script> <script type="text/javascript" src="assets/js/ajax.js"></script> </body> </html> and in ajax.js, have code calls other pages via ajax:
$(document).ready(function() { $('.nav-menu li a').each(function() { $(this).on('click', function() { var thisattr = $(this).attr('href'); function doajax() { $.ajax({ url: thisattr, success: function(responsehtml) { $('#content').html($(responsehtml).filter('#content').html()); var newtitle = $(responsehtml).filter('title').text(); document.title = newtitle; }, error: function() { alert('error!!'); } }); } $('#content').addclass('out'); settimeout(doajax, 1000); settimeout(function() { $('#content').removeclass('out'); }, 1000); return false; }) }) }); everything works fine. ajax request goes planned codes in these scripts <script type="text/javascript" src="assets/js/custom.js"></script> <script type="text/javascript" src="assets/js/test.js"></script> don't work @ all. confusion is: why won't work since they're still on source page? i've tried including eval(), no success!! there i'm not doing right?
your basic problem $(document).ready(xyz); call xyz once - when main page loads. won't called anymore when change page within ajax stuff. therefore need call functions being called $(document).ready again each time after ajax stuff performed changes.
here's 1 (very quick-and-dirty) way it... (note: untested!)
first, add line between 2 script blocks so:
<script type="text/javascript" src="assets/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="assets/js/jquery-ui.min.js"></script> <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> <script type="text/javascript">var updatecallbackcollector=[];</script> <script type="text/javascript" src="assets/js/custom.js"></script> <script type="text/javascript" src="assets/js/test.js"></script> <script type="text/javascript" src="assets/js/ajax.js"></script> then, replace instances of $(document).ready(xyz); updatecallbackcollector.push(xyz); in custom scripts exception of ajax.js file.
then, change ajax.js so:
$(document).ready(function() { /////////// new stuff starts here /////////// for(var callback in updatecallbackcollector) { updatecallbackcollector[index](); } /////////// new stuff ends here /////////// $('.nav-menu li a').each(function() { $(this).on('click', function() { var thisattr = $(this).attr('href'); function doajax() { $.ajax({ url: thisattr, success: function(responsehtml) { $('#content').html($(responsehtml).filter('#content').html()); var newtitle = $(responsehtml).filter('title').text(); document.title = newtitle; /////////// new stuff starts here /////////// for(var index in updatecallbackcollector) { updatecallbackcollector[index](); } /////////// new stuff ends here /////////// }, error: function() { alert('error!!'); } }); } $('#content').addclass('out'); settimeout(doajax, 1000); settimeout(function() { $('#content').removeclass('out'); }, 1000); return false; }) }) });
Comments
Post a Comment