Jquery Load Content From One Source To One or Multiple Elements

Why Jquery Load?

1. To make page load faster. Heavy data will be loaded by jquery. Web page will look more responsible.
2. When we need to load data from other website.

How to jquery load (from our own website or from other website)

You can use load() or get() function for this purpose.
You can use one of these samples.
 Example (Loading data to a page element with id “satuduatiga”) :
 1. $(document).ready(function() { $(“#satuduatiga”).load(“http://the-complete-url.com/”); });
 2. $(document).ready(function() { $.get(“http://the-complete-url.com/”, function(nameofdata){ $(“#satuduatiga”).html(nameofdata); });

 How to grab data from a source then distribute it to multiple elements?
 In here I grab data from a webpage, split it ( same as explode() in PHP) to 3 values then insert it to element with ids : tab1,tab2 and tab 3.
The webpage that providing data separate it with “###”.

 $(document).ready(function() {
    $.get(‘http://mysite.com/ticket/getdashboarddata’; ‘, function(data) {
          var $response = data.split(‘ ### ‘);
           var $satu = $response[0];
           var $dua = $response[1];
           var $tiga = $response[2];
      $(“#tab1″).html($satu);
     $(“#tab2″).html($dua);
     $(“#tab3″).html($tiga); },’text’); });

val() or html() ?

The thing that make me lost some times is difference between val() and html().

–> val() is used to give (and get) data to an input value (input text, textarea etc).
–> html() is used to give (and get) data to any html element that is not input value (div, span, table and etc).

Preloader

What should you put on the web page as default value (jquery has not loaded)? Probably you can download one of loading image from webpagebynumber.com and put it on your webpage : http://webpagebynumbers.com/116-free-loading-gif-animations



Please leave comment when you meet difficulties.