CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
linepisode
linepisode

Reputation: 65

Ajax call function for each tab

I created responsive tabs just using css. But when I try to implement ajax calls, i am bit confused.

I have a few questions:

  1. What is the best way to make ajax request for each tab?
  2. Is there any shortest way to append response to "tab" div?
  3. How can I call ajax on page load for selected tab?
  4. After first click on tab, do not need to make ajax call again. I need to cache response, but "cache:true" does not work.

Also any other improvements, suggestions and corrections would be helpful.

Example: JSFiddle

Upvotes: 0

Views: 2289

Answers (2)

herriekrekel
herriekrekel

Reputation: 571

if you must use ajax i would run a loop through all the data you need to load do it at once an store the data in a variable (or object in this case)

than the change event will get the id from the tabData which is already populated and you won't need to call the ajax pages again.

now this will solve your cache problem since you won't need it for this scenario

if you want to instant populate the first selected tab when you open the page created an if statement in the ajax success

end result would look something along these lines:

$(document).ready(function() {
    //data for the tabs 
    var tabs = {
        1:"tabone",
        2:"tabtwo",
        3:"tabthree"
    }

    //empty object for now will be filled with ajax data
    var tabData = {};

    var activeTabVal=1;
    var activeTabID = $('input[name=tabs]:checked', ".tabs").attr('id');


    for(key in tabs) {
       ajaxCall(key);
    }



    $('.tabs input').on('change', function() {
        var activeTab=$('input[type="radio"]:checked', '.tabs').val();
        var tabElement =  $('input[name=tabs]:checked', ".tabs").attr('id');
        //since we have the data already no need to call ajax here we just get it out of our already loaded data
        var data = tabData[activeTab];
        replaceData(tabElement, data);
    });

    function ajaxCall(key){
        $.ajax({
            type: "POST",
            dataType: 'jsonp',
            url: 'https://jsonplaceholder.typicode.com/posts/'+key,
            async: false,
            cache: true,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                tabData[key] = msg.body;
                 //use this to imediatly populate the selected div fo your second point
                if(key == activeTabVal) {
                    replaceData(tabs[key], tabData[key]);
                }
            }
        });
    }

    function replaceData(tabElement, tabData) {
        $('#'+tabElement).next().next().closest('div').append(tabData);
    }
});

Upvotes: 1

Chris
Chris

Reputation: 997

  1. I would instead of calling it on change I would call it on tab button clicked
  2. Give your tab a data-id and the corresponding container div the same data-id, then when you append you can do something like $('.tab-container[data-id='+$(this).attr('data-id')+']').append('The content');
  3. If you bind it to click you can simply run $('.tab-button .active').trigger('click');
  4. If I were you I would store the data into the data portion of the container div and retrieve it again when they click on it again. So you just check if it was set, if not then do ajax call, if it was just pluck it out and display it. https://api.jquery.com/jquery.data/

Upvotes: 1

Related Questions