Question

我想在点击jquery mobile中的tabbar项目时通过ajax加载一些内容。我怎么能这样做？

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one" data-ajax="false" data-icon="search" data-iconpos="right">Discover</a></li>
      <li><a href="#two" data-ajax="false" data-icon="home">My-chats</a></li>
    </ul>
  </div>
  <div id="one" class="ui-body-d ui-content">
    <div data-role="fieldcontain">
  <!--load data via ajax-->
</div>
  </div>
  <div id="two">
  <!--load data via ajax--> 
  </div>
</div>

单击discover选项卡时，我想通过ajax将一些数据加载到该选项卡。这该怎么做？

请帮帮我。

Answer 1

将它绑定到执行ajax调用的javascript函数，如下所示：

  <a href="javascript:ajaxcallfunction();">Discover</a>

javascript函数：

   function ajaxcallfunction(){
   window.location.href = window.location.href + "#one";
   //Enter your ajax call here
   }

Answer 2

希望帮助你！

＆＃13;

(function(window, $) {


function TabCtrl() {
  var self = this;

  self.loadData = function(url) {

    return $
      .get(url)
    ;
  };

  $('[data-ajax]').click(function(event) {
    event.preventDefault();

    var tab = $(this).attr('href').replace('#', '');
    
    self
      .loadData(tab)
      .then(
        function(success) {},
        function(error) {}
      );
  });
}


$(document).ready(TabCtrl);
})(window, window.jQuery);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#my-custom-tab" data-ajax>Load Me</a>

＆＃13;

Answer 3

试试这个。如果你已经使用了jQuery，那么忽略第一行。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
// Make sure all DOM is loaded
$(document).ready(function(){
    // Fired when you click the link
    $('#discover-tab').click(function(e){
        // Prevent the link from continuing it's normal action
        e.preventDefault();
        // Fetch the result of a URL
        $.get( "ajax/test.html", function( data ) {
            // Fill the DIV with ID of 'one' with that result
            $( "#one" ).html( data );
        });
    });
});
</script>

单击jquery移动选项卡时加载ajax项

3 个答案: