Home/ Questions/Q 8060887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T10:08:49+00:00

I’m having trouble getting jquery functions (datepicker and dialog) to work within an jquery

  • 0

I’m having trouble getting jquery functions (datepicker and dialog) to work within an jquery ajax loaded tab.

I keep getting a “datepicker is not a function” or “dialog is not a function” when I click the respective tab. I’ve done a lot of searching online for this problem and there are similar problems, but I couldn’t find a solution that works for me.

I do understand that with such an error, the problem is likely due the system not recognizing the script. So, on a higher level I’m not really understanding how the ajax loaded tab deals with scrips in relation to the master script.

Hopefully my code can help illustrate my error.

header.html

<head>
...
<!-- External javascript call -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/main.js"></script>    
</head>

Main.php

<?php include '../includes/header.html'; ?>
...
<div id="tabmenu" class="ui-tabs">
<ul>
<li><a href="view_sch.php"><span>Schedule</span></a></li>
</ul>
<div id="view_sch.php" class="ui-tabs-hide">Schedule</div>
</div><br />

view_sch.php (header.html isn’t included)

<head>
<!-- External javascript call -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../js/schedule.js"></script>
</head>

<body>
<div id="AddGameForm" title="Add New Game">         
<form method="post">
<label for="date">Select Game Date:</label>
<input type="text" name="date" id="date" tabindex="-1" size="10" maxlength="10"    class="text ui-widget-content ui-corner-all" 
value="<?php if (isset($_POST['date'])) echo $_POST['date']; ?>" />
</form>
<table id="schedule"></table>
</body>

schedule.js

var GAME = {

loadDialog: function() {
    $( "#date" ).datepicker();
    $( "#AddGameForm" ).dialog({
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true,
        buttons: {
            "Add New Game": function() {
                // Add game to database
                GAME.add();                     
                $( this ).dialog( "close" );
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        }
    });

    $( "#add-game" )
        .button()
        .click(function() {
            $( "#AddGameForm" ).dialog( "open" );
    });     
},

add: function() { 
    var form_data = $('form').serialize();
    $.ajax({
        type: "POST",
        url: "../manager/add_game.php",
        data: form_data, // Data that I'm sending
        error: function() {
            $('#status').text('Update failed. Try again.').slideDown('slow');
        },
        success: function() {
            $('#status').text('Update successful!').slideDown('slow');
        },
        complete: function() {
            setTimeout(function() {
                $('#status').slideUp('slow');
                }, 2000);
        },
        cache: false
    });
  }
}

$(document).ready(function() {
// Load game dialog
GAME.loadDialog();
});

Thanks for any help.

EDIT: I should note that the view_sch.php page works just fine when you view it in it’s own browser window. The issue arises when viewing the page through the ajax loaded jquery tab.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think I figured it out (with help of my friend too). I first removed the redundant external script calls in the view_sch page since header.html already took care of this. Next, I utilized the functions within the jquery tab, in particular the “load” event to create a callback situation. Ironically, it still wasn’t working if you select the tab more than once until I added an if conditional to the load block. Hopefully the code below helps others out there.

    schedule.js

    var GAME = {
 loadDialog: function() {
    $("#date").datepicker();
    $( "#AddGameForm" ).dialog({
        autoOpen: false,
        height: 400,
        width: 400,
        modal: true
        }
    });     
  }
} 
$(document).ready(function()
{
  // jQuery UI Tabs
  $('#tabmenu').tabs({
    ajaxOptions: {
        error: function( xhr, status, index, anchor ) {
            $(anchor.hash).html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. "
            );              
        }
    },
    load: function ( event, ui ) {
        if (ui.index == 2) {
            // Load game dialog
            GAME.loadDialog();

            $( "#add-game" ).on("click", function() {
                $( "#AddGameForm" ).dialog( "open" ); 
            }); 
        }
    }
});
    • 0