Home/ Questions/Q 8465147
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T14:57:32+00:00

I am using the jQuery tabbed interface to switch between views of my Facebook

  • 0

I am using the jQuery tabbed interface to switch between views of my Facebook application using ajax. I have two tabs – tab1 and tab2 which both have buttons on them of the form .

The problem is that when I go to tab1 and click the buttons they do not work. If I then go to tab2 the buttons on that page work. If I then go back to tab1 the buttons work there. The same also happens in reverse: if I go to tab2 first and click the buttons they do not work, but if I go to tab1 they do work. Returning back to tab2, the buttons are now working.

Does anyone know why this might be happening?

EDIT: Below is a cut down version of the code for the page. The event handlers are currently in the header. I have already tried putting them at the bottom of the body as well though.

    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>Profile Page</title>
            <link href="../css/profilepage_s.css" rel="stylesheet" type="text/css"/>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
            <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

            <!-- Importing javascript configuration file and library of functions to call Facebook features -->
            <?php include('../../config_js.php'); ?>
            <script type="text/javascript" src="../js/facebookFeatures.js"></script>

             <!-- This is all jQuery code -->
            <script type="text/javascript">
                $(document).ready(function (e) {
                    <!-- Converts Link into button -->
                    //$("#thisIsAButton").button();


                    <!-- Updates the user's shortlist with id of this person -->
                    $("#updtShortlistBtn").click(function () {
                        alert("I'm in");

                        //$(this).hide();

                        $.get('../Scripts/updateShortlist.php', 'uid=<?php echo $uid?>&targ_id=<?php echo $targ_id?>');
                    }); 
                });
            </script>​​​

        </head>
        <body>

        <div id="container">

            <a id="thisIsAButton" href="../View/edit_profile.php">go to page 4</a>

            <?php //echo $targ_id ?>

            <!-- Displays the Profile Picture -->
            <div id="profile_pic">
                <img src="<?php echo $picture ?>"/>
            </div>

            <!-- Displays list of comparisons-->
            <div id="comparison"></div>
            <div id="bio"><?php //echo $bio ?></div>

            <!-- Show different views if user is viewing their own profile or another user's profile -->
            <!-- These features should only be available if the user is viewing their own profile -->
            <?php 

                if ($activeUsersProfile){ ?>
                    <!-- Edit Profile Button -->
                    <div id="editProfileBtn">
                        <button data-pagelink="../View/edit_profile.php">Edit Profile</button>
                    </div>

                    <!-- Button to publish a summary of user's app profile to their Facebook profile -->
                    <div id="publishBtn">
                        <input type="button" value="Publish Profile" onclick="publishToWall(<?php echo $targ_id ?>)"/>
                    </div>

            <?php } else { ?>

                            <!-- Displays Send Message Button and Update shortlist button -->
                    <div id="sndBtn">
                            <button type="button" id="updtShortlistBtn">Say 'Hey'!</button>
                    </div>  
<?php } ?>
            </div>
        </body>
    </html>

EDIT: 

$(document).ready(function (e) {

                $(document).on('click', '#updtShortlistBtn', function () {

                alert("I'm in");
                 $.get('../Scripts/updateShortlist.php', 'uid=<?php echo $uid?>&targ_id=<?php echo $targ_id?>');
            });

            });

EDIT2: Sorry, while trying to shorten my example code I took out some buttons which did not have jQuery such as the one below. I realise now that this might be important to finding the solution!

// Calls a method in the facebookFeatures.js file linked at top
<button type="button" id="sndMessageBtn" onclick="sendMessage(<?php echo $targ_id ?>)">Send Message</button>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The events are being bound on document ready, so i’m assuming that maybe the buttons don’t exist then? You say the tab’s are loaded via ajax, so they do not (likely) exist at the time document ready fires.

    There is an event in the jQuery tab for load where you should put your click-binding

    http://jqueryui.com/demos/tabs/

    $('#tabs').tabs({
    load: function() {
        $("#updtShortlistBtn").click(function () { /* do Stuff */ });
    }
});

    Alternatively, you could bind to the document with a delegated handler:

    $(document).on('click', '#updtShortlistBtn', function () {
    //do Stuff
});

    This way it doesn’t matter when the button’s exist…the handler is bound to the document and event bubbling takes care of the issue

    • 0