Проблема с загрузкой содержимого на вкладке пользовательского интерфейса jQuery

ProgramBox

Проблема с загрузкой содержимого на вкладке пользовательского интерфейса jQuery

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#jquery #html #ajax #jquery-ui #tabs

#jquery #HTML #ajax #jquery-пользовательский интерфейс #вкладки

Вопрос:

Ранее сегодня это работало… :S но теперь, когда я нажимаю на ссылку на вкладке, она открывается на совершенно новой странице, независимо от того, встроено ли содержимое вкладки в текущую страницу или на нее ссылаются с другой.

Вот мой код, и заранее спасибо!

 <link rel="stylesheet" href="style/style.css" media="screen,projection" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<!--  <script src="js/jquery.min.js" type="text/javascript"></script>
  <script src="js/jquery-ui.min.js" type="text/javascript"></script>-->
    <script type="text/javascript">
  $(document).ready(function() {
    $("#tabs").tabs();
  });
  </script>

<!----Javascript edited in below----->
      <script type="text/javascript">
  $('#payday').tabs({
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
}); 
</script>
</head>

<body>
    <div id="wrapper">
        <div id="container">
            <div id="header">
                <div id="headercon">
                </div><!--headercon-->
                <div class="clear"></div>
            </div><!-- header -->

            <div id="tabs">
            <div id="navigation">

                    <ul>
                        <li class="selected"><a href="#nav1"><span>nav1</span></a></li>
                        <li><a href="form2.php"><span>nav2</span></a></li>
                        <li><a href="form3.php"><span>nav3</span></a></li>
                    </ul>

                <div class="clear"></div>
            </div><!-- navigation -->

            <div id="info">
            <div class="top"></div>
            <div id="payday" class="middle">
<h3>Get a quick quote NOW! <a href="form2.php">google</a></h3>
<div class="information">
<form action="ajax.php" id="submit" method="post">
<p class="enter"><span>Email address:</span><br><input id="email" class="email" type="text" name="email" value="Enter your email" input onclick="this.value='';" /></p>
<p class="date"><span>Date of birth:</span><br><input id="dd" class="day" type="text" name="dd" value="DD" input onclick="this.value='';"/><input id="mm" class="month" type="text" name="mm" value="MM" input onclick="this.value='';"/><input id="yyyy" class="year" type="text" name="yyyy" value="YYYY" input onclick="this.value='';"/></p>
<p class="submit"><input class="button" type="submit" value="" /></p>
</form>
<div class="clear"></div>
</div><!--information-->
<div class="success" style="display: none;">added.</div>  
<div class="clear"></div>
</div>
                    <div class="clear"></div>
                </div><!--middle-->
                                <div class="clear"></div>
            </div><!-- navigation -->

1. Пожалуйста, нам нужна дополнительная информация здесь. Как выглядит ваш JavaScript?

2. Можете ли вы проверить историю управления версиями и посмотреть, что вы изменили?

3. Упс, случайно пропустил это. Я отредактировал сообщение и добавил его обратно. Теперь есть идеи? Спасибо! 🙂

4. Мартиньо, как мне это сделать? [имейте в виду, сегодня это МНОГО редактировалось. Я не уверен, насколько это помогло бы 🙁 ]

5. «имейте в виду, сегодня это МНОГО редактировалось. » — вы используете управление исходным кодом, верно?

Ответ №1:

В коде, включенном в вашу ссылку, вы пропускаете # в день выплаты жалованья:

 <script type="text/javascript">
$('#payday').tabs({ // <<< see here
    load: function(event, ui) {
        $('a', ui.panel).click(function() {
            $(ui.panel).load(this.href);
            return false;
        });
    }
});
</script>

Однако я не испытываю никаких проблем с отображением вкладок или переходом страницы по ссылке. Я использую FF4.

Ваш подход ошибочен, используя .tabs() для загрузки подобного содержимого. Просто используйте .load() или .get() .

Пример:

 <html>
<head>
<style type="text/css">

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $('#single a').click(function(e){
        $('#target').load(this.href);
        return false;
    });
});

</script>
</head>
<body>
<div id="single">
    <a href="files/test1.php">Test 1</a>
    <a href="files/test2.php">Test 2</a>
    <a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>

Следующее, что вам нужно будет сделать, это обработать ссылки внутри загруженного содержимого. Например:

 $(document).ready(function(){
    setLink('single');
});

function setLink(id){
    $('#' id ' a').click(function(e){
        $('#target').load(
            this.href,
            function(){
                setLink('target');
            }
        );
        return false;
    });
}

Смотрите http://jfcoder.com/test/load.php.

ПРАВКА 2

Чтобы загрузить первую ссылку в списке onDomReady (вместо onLoad):

 <html>
<head>
<style type="text/css">

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    setLink('single');
    $('#target').load($('#single a:first').attr('href'));
});

function setLink(id){
    $('#' id ' a').click(function(e){
        $('#target').load(
            this.href,
            function(){
                setLink('target');
            }
        );
        return false;
    });
}

</script>
</head>
<body>
<div id="single">
    <a href="files/test1.php">Test 1</a>
    <a href="files/test2.php">Test 2</a>
    <a href="files/test3.php">Test 3</a>
</div>
<div id="target"></div>
</body>
</html>

Смотрите http://jfcoder.com/test/load.php также.

1. Ах, приятно, что это заметили. Я только что изменил его, но он по-прежнему не работает : ( И да, вкладки в целом работают нормально, но мне нужно, чтобы ссылка на вкладке payday открывалась, не покидая страницу, потому что тогда я смогу заставить форму отправки работать. Есть идеи? Спасибо loads за помощь! 🙂

2. Вау, это потрясающе, это убирает сотни строк кода из моего css: D Я добавил это. Я не знаю, сделал ли я это неправильно, хотя, он все еще открывает ссылки на новой вкладке : (Извините, что раздражаю.

3. @eoJ — Смотрите мою правку. Я предполагаю, что вы не настраиваете ссылки в загруженном контенте.

4. Блестяще, это сработало! Я думаю, это было из-за того, что я помещал целевой div в неправильное место. БОЛЬШОЕ спасибо! : D Просто интересно, как бы мне заставить его загружать первую страницу при целевой загрузке? БОЛЬШОЕ спасибо за это решение, это абсолютно потрясающе 🙂

5. @eoJ — Смотрите мою правку. Вы хотите сделать это заранее, потому что вам нужно, чтобы страница загрузилась первой.

Ответ №2:

Вы закрываете #navigation div, но не закрываете #tabs div? Или я ошибаюсь?