Функции jquery не работают на вкладке jquery, загруженной с помощью ajax

У меня проблемы с получением функций jquery (datepicker и dialog) для работы на вкладке jquery, загруженной ajax.

Когда я нажимаю на соответствующую вкладку, я получаю сообщение «datepicker is not a function» или «dialog is not a function». Я много искал в Интернете эту проблему, и есть похожие проблемы, но я не смог найти решение, которое подойдет мне.

Я понимаю, что с такой ошибкой проблема, скорее всего, связана с тем, что система не распознает сценарий. Итак, на более высоком уровне я не совсем понимаю, как вкладка, загруженная с помощью ajax, работает со сценариями по отношению к основному сценарию.

Надеюсь, мой код поможет проиллюстрировать мою ошибку.

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 не включен)

<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();
});

Спасибо за любую помощь.

РЕДАКТИРОВАТЬ: Я должен отметить, что страница view_sch.php отлично работает, когда вы просматриваете ее в собственном окне браузера. Проблема возникает при просмотре страницы через вкладку jquery, загруженную с помощью ajax.


ajax jquery-ui-datepicker jquery-ui-dialog jquery-tabs
person bena45    schedule 09.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я заметил, что вам не хватает объекта jQuery перед обработчиком готового документа. Без этого ваш код вообще не загружался бы.

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

Или еще лучше

$(function(){...})

Работает так же хорошо

person Omar Niazi    schedule 09.06.2012

arrow_upward
1
arrow_downward

Я думаю, что разобрался (тоже с помощью моего друга). Сначала я удалил избыточные вызовы внешних скриптов на странице view_sch, поскольку header.html уже позаботился об этом. Затем я использовал функции на вкладке jquery, в частности событие «load», чтобы создать ситуацию обратного вызова. По иронии судьбы, это все еще не работало, если вы выбираете вкладку более одного раза, пока я не добавил условное if к блоку загрузки. Надеюсь, приведенный ниже код поможет другим.

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" ); 
            }); 
        }
    }
});
person bena45    schedule 10.06.2012