在jquery ui tabs中加载不同的页面很慢，有时会崩溃

Question

My boss wanted different process (which were originally individual pages) to show up on tabs

anyway I'm using the jquery ui tabs

http://jqueryui.com/tabs/

my code

jquery

    <script type="text/javascript">
$(document).ready(function()
{ 
$("#tabs-1").load("transaction.php");
$("#tabs-2").load("book.php");
$("#tabs-3").load("schedule.php");
});
</script>

html

<ul>
<li><a href="#tabs-1">Transaction</a></li>
<li><a href="#tabs-2">Book</a></li>
<li><a href="#tabs-3">Schedule</a></li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">

each page pulls up data in mysql database the problem is, book.php has lots of data so loading it is slow and sometimes the browser crashes

is this implementation possible or should I explain this that using tabs is not recommended, this should be showed using individual pages?

Answer 1

what you could do is get the book.php to only load when tab 2 is clicked.

$("#tabs-2").click(function(){
    $("#tabs-2").load("book.php");
});

this should help to stop it crashing straight away. if it doesn't help you will need to optimise you query.

you could also try using ajax.

put this in you document load and hopefully it should load the contents of book.php into the tab.

  $.get( "book.php", function(book) {
    $("#tabs-2").html(book);
  });

Jquery Sample

$.ajax({
   type: "POST",
   url: "page_url",
   data: $("#advserc").serialize() + "&pagenum=" + page, // i sent the page through with it
  beforeSend:function(){  // this unhides a div with gif loading image in it.
        //show gif here, eg:
        $("#loading").show();

    },
    complete:function(){
        //hide gif here, eg:
        $("#loading").hide(); // this hides the div
    },
   success: function(data){
      $("#content-container").html(data); // here i fill the div with the dat from the php page
   }
});