Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Button not working when loading content from page

    So, using jquery ajax call, I upload content from a php page into a div named #mainDiv. This all works fine.

    However, when I include a button into the div, it appears but doesnt do anything, like its not active. I assume its not in the DOM? Not sure. Can someone help to make it active?

    The js I'm using looks like this:

    Code:
    <script>
        $(document).ready(function(){
          $("[href='#about']").click(function(){
            $("#mainDiv").load("../about.php");
          });
          $("[href='#contact']").click(function(){
            $("#mainDiv").load("../contact.php");
          });
        });
    </script>
    So basically, in the about.php I've got a "contact" button. This button has a href of #contact so when that is pressed I'd like the contents on contact.php to load. So I have this in about.php

    PHP Code:
    <p>some about text here</p>
    <
    p><button href="#contact" class="btn btn-small btn-primary pull-left">Contact</button></p
    Many thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    href is not an attribute for a button tag and should not be used this way. Use a class instead.
    Code:
    <p>some about text here</p>
    <p><button class="btn btn-small btn-primary pull-left contact">Contact</button></p>
    and
    Code:
    $(".contact").click(function(){$("#mainDiv").load("../contact.php");});
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    m0atz (07-28-2013)

  • #3
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi sunfighter, thanks for the reply.

    i copied your code exactly, and still no joy to be honest. i assume its something i'm doing...

    the js is loaded just after the opening body tag so before anything else. the button code is obviously loaded when the ajax call is made from clicking the "about" link.

    I dont see whats wrong with the code?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    OK, I think I understand. You need to include the jquery in the <button class="about">Load a page</button> div.

    Main file:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    </head>
    
    <body>
    
    <div id="mainDiv">
    	<button class="about">Load a page</button>
    </div>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(".about").click(function(){
    	$("#mainDiv").load("about.php");
    });
    </script>
    </body>
    </html>
    about.php:
    PHP Code:
    <?php
    echo '
    <p>some about text here</p>
    <p><button class="btnbtn - smallbtn - primarypull - left contact">Contact</button></p>
    <script>
    $(".contact").click(function(){
        $("#mainDiv").load("contact.php");
    });
    </script>
    '
    ;
    ?>
    contact.php:
    PHP Code:
    <?php
    echo 'Made It!' "<br />and you did not";

    ?>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • Users who have thanked sunfighter for this post:

    m0atz (07-28-2013)

  • #5
    New to the CF scene
    Join Date
    May 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    yes yes yes!!

    you got it.

    seems so easy when the answer is presented to me :-)

    thanks for your help with this, much obliged.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •