Ajax loaded page requires .js files to be attached again in order to work

Hi everyone, I have a single page application that uses the following code to call pages via ajax:

$(document).ready(function() {
   function loader(url, placeholder)
   {

      $(placeholder).html('<div id="content-header"><div class="container text-center" style="padding-top:200px;"></div></div>');
      $(placeholder).spin('large');

      $.ajax({
         url: url,
         cache: false,
         dataType: 'html',
         success: function(response) {
            $(placeholder).html(response);
         }
      });
   }


   $("#tickets").click(function() {
      loader("tickets/tickets_view", "#content");
   });
   $("#view_errors").click(function() {
      loader("tickets/errors_view", "#content");
   });
   $("#add_ticket").click(function() {
      loader("tickets/add_ticket_view", "#content");
   });
});

Open in new window



I attach a lot of js files to the main application like:

      <script src="<?php echo base_url('assets/js/jquery.min.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/jquery-ui.custom.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/bootstrap.min.js') ?>"></script>

      <script src="<?php echo base_url('assets/js/select2.min.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/jquery.dataTables.min.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/jquery.jpanelmenu.min.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/unicorn.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/unicorn.tables.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/jquery.icheck.min.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/spin.min.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/jquery.spin.js') ?>"></script>
      <script src="<?php echo base_url('assets/js/loader.js') ?>"></script>

Open in new window


When I load any page via ajax, the content on the loaded page doesn't get attached to javascript at all. For example, one of the pages that I load uses the datatables script. The table loaded via ajax doesn't work as expected at all. I found a work around that was to add all of those js files again to the code of the file that is loaded via ajax. It fixed most of the problems with javascript on the page loaded via ajax but it started messing up everything else on the static part of the website, since the additonal js files were added again and again every time I decided to click on any link that loads an ajax page. What would be the proper way to handle this situation? Is there any way to not double attach the same files? We are currently using CodeIgniter Twitter Bootstrap with some additional js plugins like datatables, icheck, spin etc.
joein610Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
When you load html dynamically then any js functions that are working on this html need to be either rebound or you change your jquery functions to use the .on syntax
.on is used to bind dynamic elements based on an existing element e.g. body.
I think this is your problem but hard to tell from what you have given.
http://api.jquery.com/on/
0
joein610Author Commented:
Yea, the .on syntax would work for everything that I write myself. However what about plugins like datatables? Will I have to rewrite their script in order to make it work correctly?
0
GaryCommented:
You could place these plugins into a function func_name (){} and then call the function in your ajax success to rebind all their functions.
0
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

joein610Author Commented:
If I just call them again it will cause some if the JS on the static page to run as many times as I have JS attached. Would it be logical to deattach and reattach those files on ajax success? Can you point me to any examples?

Thanks for help.
0
GaryCommented:
Firstly remove all the js from your ajaxed pages.
There's no need to detach anything.
What do you need an example of? Just place your relevant plugins that are interacting with the dynamic content in a normal js function and call the function in your ajax.
0
joein610Author Commented:
I think that we are not quote on the same page. Take a look at the following link: http://gawrychowski.com/TEST/test.php

I created it really quick for testing purposes. When you click on the first button, ajax will load this file:

<div id="content-header">
   <h1>Tables</h1>
   <div class="btn-group">
      <a class="btn btn-large" title="Manage Files"><i class="icon-plus"></i></a>
   </div>
</div>
<div id="breadcrumb">
   <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
   <a href="#" class="current">Tables</a>
</div>





<div class="widget-box">
   <div class="widget-title">
      <span class="icon">
         <i class="icon-th"></i>
      </span>
      <h5>Static table with checkboxes in box with padding</h5>
      <span class="label label-info">Featured</span>
   </div>
   <div class="widget-content">
      <table class="table table-bordered table-striped table-hover with-check">
         <thead>
            <tr>
               <th><input type="checkbox" id="title-table-checkbox" name="title-table-checkbox" /></th>
               <th>Column name</th>
               <th>Column name</th>
               <th>Column name</th>
               <th>Column name</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
         </tbody>
      </table>							
   </div>
</div>

Open in new window


When you click on the second one you get this:
      <script src="assets/js/jquery.min.js"></script>
      <script src="assets/js/jquery-ui.custom.js"></script>
      <script src="assets/js/bootstrap.min.js"></script>
      <script src="assets/js/select2.min.js"></script>
      <script src="assets/js/jquery.dataTables.min.js"></script>
      <script src="assets/js/jquery.jpanelmenu.min.js"></script>
      <script src="assets/js/unicorn.js"></script>
      <script src="assets/js/unicorn.tables.js"></script>
      <script src="assets/js/jquery.icheck.min.js"></script>
      <script src="assets/js/spin.min.js"></script>
      <script src="assets/js/jquery.spin.js"></script>


<div id="content-header">
   <h1>Tables</h1>
   <div class="btn-group">
      <a class="btn btn-large" title="Manage Files"><i class="icon-plus"></i></a>
   </div>
</div>
<div id="breadcrumb">
   <a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> Home</a>
   <a href="#" class="current">Tables</a>
</div>





<div class="widget-box">
   <div class="widget-title">
      <span class="icon">
         <i class="icon-th"></i>
      </span>
      <h5>Static table with checkboxes in box with padding</h5>
      <span class="label label-info">Featured</span>
   </div>
   <div class="widget-content">
      <table class="table table-bordered table-striped table-hover with-check">
         <thead>
            <tr>
               <th><input type="checkbox" id="title-table-checkbox" name="title-table-checkbox" /></th>
               <th>Column name</th>
               <th>Column name</th>
               <th>Column name</th>
               <th>Column name</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
            <tr>
               <td><input type="checkbox" /></td>
               <td>Row 1</td>
               <td>Row 2</td>
               <td>Row 3</td>
               <td>Row 4</td>
            </tr>
         </tbody>
      </table>							
   </div>
</div>

Open in new window


As you see, the first one without js attached doesn't work correctly. The goal is to be able to use js on those files without double adding js. What do you think?
0
GaryCommented:
The two pages look exactly the same.
Do you realise that all those js files you have at the beginning of your code are doing nothing because the actual html content is after them and you are not firing any jquery events to do any binding?
What are you saying doesn't work correctly?
0
joein610Author Commented:
Thanks for the comment, I will move them to the end of the file. Take a look at the first file and see if it has a sorting option within the columns. Also, when you click on one of the checkboxes, it looks different than for the second file (icheck.js) script.
0
GaryCommented:
Ok, see it - very slow to initialise
The tables are being styled by
$('.data-table').dataTable({
	"bJQueryUI": true,
	"sPaginationType": "full_numbers",
	"sDom": '<""l>t<"F"fp>'
});

Open in new window

You could just put this code in your success function to restyle the table.
0
joein610Author Commented:
Yea, but what if I want to use something else? Like another js file? Do I have to do something similar for each function that I want to use?
0
GaryCommented:
Each plugin will have its own call just like the dataTable above - these will be in a document.ready function that only executes when the page has loaded.
That's why I said you could take all these little function initialisations and place them in one single function that you can call on page load and in your ajax success.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
joein610Author Commented:
Gotcha, thanks a lot.
0
joein610Author Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for joein610's comment #a39497188

for the following reason:

Great explanation
0
GaryCommented:
Are you sure you meant to accept your own answer?
0
joein610Author Commented:
Great response!
0
joein610Author Commented:
Did it work this time? Thanks for help again.
0
GaryCommented:
That's it.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.