Вопрос: Вкладки Jquery перезагружают контент при нажатии кнопки


Я использую вкладки jquery ( http://docs.jquery.com/UI/API/1.7.2/Tabs ). JQuery версии 1.3.2 и JQuery версии 1.7.2 и Ive были протестированы в firefox 3.5.6.

При выборе вкладки я просто добавляю текущую дату в область содержимого html. У меня также есть ссылка с названием класса «Button». Когда эта ссылка нажата, я хочу перезагрузить содержимое текущей выбранной вкладки. Но с решением, которое я пробовал, я не могу заставить его работать. Я вижу, что событие «нажатие кнопки» загружается, но следующий код не перезагружает мои данные:

$(".Tabs").tabs('load', $(".Tabs").tabs('option', 'selected'));

Я также тестировал:

var selected = $(".Tabs").tabs('option', 'selected');
$(".Tabs").tabs('select', null);
$(".Tabs").tabs('select', selected);

Но это тоже не работает, мой метод выбора никогда не вызывается при нажатии кнопки

Это мой код jquery:

    $(function() {
    var $tabs = $(".Tabs").tabs({
        selected: null,
        select: function() {
            alert("this doesn't run on button click");
            //Sets Content's html to current date
            $("#Content").html(new Date);
        }
    });

    $('.Button').click(function() {
        alert("this runs on button click");
        //Here I want to reload the current selected tab
        $(".Tabs").tabs('load', $(".Tabs").tabs('option', 'selected'));
        return false;
    });
    $('.Tabs').tabs('select', 0); // Select first tab
});

Это html:

<div class="Tabs">
    <ul>
        <li><a href="#Content">Tab1</a></li>
        <li><a href="#Content">Tab2</a></li>
    </ul>
    <div id="Content">

    </div>
</div>
<a class='Button' href='#'>Load Content Again</a>

3


источник


Ответы:


если твой .Button класс находится внутри загружаемого содержимого, вам нужно будет использовать жить  функциональность jQuery.

$('.Button').live('click', function() {
 //Here I want to reload the current selected tab
 $tabs.tabs('load', $tabs.tabs('option', 'selected'));
 return false;
});

Кроме того, поскольку .Button это ссылка, вам нужно добавить return false; внутри эта функция.


Просмотрев ваш код, я не уверен, почему он настроен, чтобы не загружать вкладку, пока вы не нажмете на нее. Также нажатие любой вкладки всегда загружает один и тот же контент (URL-адрес не изменяется). И, наконец, вам не нужно использовать eval() сценарий (может быть, это проблема?).

Помимо этих проблем, похоже, что ваш код должен работать.

Я также не знаю, как отформатирован ваш json, поэтому я переписал это, предполагая следующий формат json:

({
 "items": [
  { "title": "example 1" },
  { "title": "example 2" },
  { "title": "example 3" },
  { "title": "example 4" },
  { "title": "example 5" },
  { "title": "example 6" },
  { "title": "example 7" },
  { "title": "example 8" },
  { "title": "example 9" },
  { "title": "example 10" }
 ]
})

скрипт

$(function() {
 var $tabs = $(".Tabs").tabs({
  selected: null,
  select: function(event, ui) {
   loadTab( ui.index ); // ui.index = index of the clicked tab
  }
 });
 $('.Button').live('click', function() {
  //Here I want to reload the current selected tab
  loadTab( $(".Tabs").tabs('option', 'selected') );
  return false;
 });
 $('.Tabs').tabs('select',0);
});

function loadTab(indx){
 $.ajax({
  type: "GET",
  url: "http://domain.com/Service.svc/get",
  dataType: "json",
  success: function(data) {
   var content = "";
   $.each(data.items, function(items){
    content += "<a class='Button' href='#'>" + this.title + "</a><br>";
   });
   $("#Content").html(content + "<br />Tab Index #" + indx + " on " + (new Date()).toUTCString());
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
   if (!$('#error').length) $("#Content").prepend('<div id="error"></div>');
   $('#error').html(textStatus + '<br /><br />');
  }
 })
}

7



Две вещи:

  1. Firefox + Firebug плагин - ваши друзья. Используй их.
  2. Найдите подпрограмму onClick, которая не  делать return false; Говоря return 'false вы указываете браузеру не  на самом деле перейти к URL-адресу в атрибуте href.

0