Load ajax item when click on jquery mobile tabs

Question

I want to load some contents via ajax when click on a tabbar item in jquery mobile. How can i do this?

<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> 

When click on discover tab i want to load some data through ajax to that tab. How to do this?

please help me.

Answer 1

bind it to a javascript function which executes the ajax call like this:

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

javascript function:

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

Answer 2

Hope helps you!

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

 <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> 

Answer 3

Try this. If you already using jQuery then ignore the first line.

<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>