CODEWITHSUNDEEP
jqueryajaxload
user1529811
user1529811

Reputation: 11

Jquery inside Ajax loaded page does not work

I have a site that loads different pages using AJAX. The loading works fine but once its loaded any Jquery inside the pages does not work. When the user clicks on a navigation button, it should load the page inside a div. I initially had create the page with the HTML tags and only loading a particular tag inside the page but I deleted the html and body tags from the loaded page and still does not work.

Here's the HTML

        <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Santex Group</title>
    <link href="_css/main_15.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="http://use.typekit.com/dcn6whd.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
    <script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
    <script src="js/init.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="js/jquery.easing.js"></script>
    <script type="text/javascript" src="js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="js/jquery.infinite_carousel.js"></script>
    <script type="text/javascript">// <![CDATA[

        $(document).ready(function()
            {
                $('li#toServices').click(function()
                {
                $('#services').load('services.html #services-container');

                });
                $('ul#siteNav li#toServices').localScroll({
                   target:'body',
                   axis:'x',
                   offset: {left: -140},
                   queue:true //one axis at a time
                });
            }); 

            $(document).ready(function()
            {
                $('li#toHow').click(function()

                {
                $('#how').load('how.html #how-container');

                });
                $('ul#siteNav li#toHow').localScroll({
                   target:'body',
                   axis:'x',
                   offset: {left: -140},
                   queue:true //one axis at a time
                });
            }); 
            $(document).ready(function()
            {
                $('li#toWhy').click(function()

                {
                $('#why').load('why.html #why-container');

                });
                // Scroll the whole document
                $('ul#siteNav li#toWhy').localScroll({
                   target:'body',
                   axis:'x',
                   offset: {left: -140},
                   queue:true //one axis at a time
                });
            }); 
            $(document).ready(function()
            {

            $('li#toClients').live('click', function()

                {
                $('#clients').load('clients.html');
            });
                $('ul#siteNav li#toClients').localScroll({
                   target:'body',
                   axis:'x',
                   offset: {left: -140},
                   queue:true //one axis at a time
                });
            }); 
            $(document).ready(function()
            {
                // Scroll the whole document
                $('ul#siteNav li#toContact').localScroll({
                   target:'body',
                   axis:'x',
                   offset: {left: 0},
                   queue:true //one axis at a time
                });
            }); 
            $(document).ready(function()
            {
                // Scroll the whole document
                $('ul#siteNav li#toCareers').localScroll({
                   target:'body',
                   axis:'x',
                   offset: {left: -150},
                   queue:true //one axis at a time
                });
            }); 
                    $(document).ready(function()
            {
                // Scroll the whole document
                $('ul#siteNav li#toExtra').localScroll({
                   target:'body',
                   axis:'x',
                   offset: {left: -150},
                   queue:true //one axis at a time
                });
            }); 
    // ]]></script>  
    </head>
    <body>
    <header id="mainHeader">
       <div id="mainNav">
        <div id="logo">
        <a title="Home" href="#mainHeader"></a>
        </div>
        <div id="navWrapper">

        <ul id="phone-login">
          <li><a href="#">Call Us Toll Free (888) 622-7098</a></li>
          <li><a href="#">CLIENT LOGIN</a></li>

        </ul>

        <ul id="siteNav">
              <li id="toServices"><a class="star" href="#services">Services</a></li>
              <li id="toHow"><a href="#how">How</a></li>
              <li id="toWhy"><a href="#why">Why</a></li>
              <li id="toClients"><a href="#clients">Clients</a></li>      
              <li id="toContact"><a href="#contact">Contact</a></li> 
              <li id="toCareers"><a href="#careers">Careers</a></li> 

            </ul>
        </div>

      </div>
    <div class="header-writeup">
          <hgroup>
          <h1>Innovate. Create. Experience</h1>
            <h2>We embrace technology to empower people.</h2>
            <h3>We are driven by technology, focused on making better products and interfaces.  We are a full-service Global digital company that emphasized the importance of emerging technoloy solution sfor all types of clients.</h3>
          </hgroup>
       </div>
    </header>

    <div id="wrapper">
      <section id="services" class="scrolling-content">

      </section>
      <section id="how" class="scrolling-content"> </section>
      <section id="why" class="scrolling-content"> </section>
      <section id="clients" class="scrolling-content"> </section>
    <section id="contact" class="scrolling-content">

    </section>
    <section id="careers" class="scrolling-content">
        </section>
    </div>
    <footer id="pageFooter">
    </footer>


    </body>
    </html>

Here is one of the pages I'm trying to load which has a jquery scroller that does not work when loaded

    <div id="clients-container">
        <h1 class="section-heading">Clients</h1>
        <div class="section_container">

                <div class="infiniteCarousel">
                  <div class="wrapper">
                     <ul>
                      <li><img src="_images/clientlogos1.gif" height="146" width="950" alt="Clients and Relationships" /></li>
                       <li><img src="_images/clientlogos2.gif" height="146" width="950" alt="Clients and Relationships" /></li>
                     </ul> 
                  </div>
               </div>

               <div class="view-our-work-link">
                        <a class="button float-left" href="../content/our-work">View Our Work</a>    
               </div>
        </div>
    </div>

Here's the site live:

http://ernestosillas.com/santexgroupAJAX/index16.html

Upvotes: 1

Views: 1641

Answers (4)

Susheel Singh
Susheel Singh

Reputation: 3854

use delegate way to solve this problem.

It's because you are binding the event on document ready. You have to use a delegate in order for this to work. Like on. It's because the content which u are loading through ajax isn't on the page on the page when it's loaded. So no event is attached.

Your code should look some along the lines of this:

$('body').on('click','#clients-container',function(){
 alert("hello");
});

It doesn't have to be body, but an element which isn't loaded after document ready, which is a parent of #clients-container

you have 

<div id="clients-container">
</div>

use the parent of the container in the main page to use delegate way.

Upvotes: 1

don
don

Reputation: 11

I was having a similar problem, this worked for me:

  1. make sure the script is running on a server or .load() function won't work

  2. try $(document).ready( function() , sometimes this is the problem

  3. try $.getScript function if you want to use jQuery on an external page loaded via the .load function

  4. finally use the return(false) function at the end of the jQuery script or the script may not work in opera, chrome and safari

  5. remove any HTML, body, head tags etc. from the external page you're trying to load

Hope this helps anyone with similar issues, this should save you a lot of research.

Upvotes: 1

Mohamed Farrag
Mohamed Farrag

Reputation: 1692

try to use on instead of using click as I can see you are using a newer version of Jquery

$('li#toServices').on('body','click',function(){

// your code

});

Upvotes: 0

Seimen
Seimen

Reputation: 7250

If you are not restricted there, load jQuery 1.7.xx (just write 1.7 instead of 1.3.2 in http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js) and use jQuery.on() for your bindings, live() is extreeemly slow and deprecated.

Upvotes: 0

Related Questions