Multiple AJAX requests functions combined into one?

I have pretty much the same Ajax Request call but I need to expand it to be more generic

See example Code: http://jsfiddle.net/2b8gR/6/

I have it working for P开发者_运维技巧age A and want to use it for Page B, C, D, etc... but don't want to rewrite the function for every new Ajax request.

Most of the code will remain the same except:

• input next/prev (page_a_next becomes page_b_next)
• display page div (display_page_a_page becomes display_page_b_page)
• display page number div (display_page_a_number becomes display_page_b_number)
• ajax request url page name (url: 'page_a.php?page='+currentPageA, becomes url: 'page_b.php?page='+currentPageB,)

and so forth.

How do I make the Ajax call and elements more generic so I don't have to write this request multiple times?

NOTE: I need to be able to keep track of each page (A, B, C, etc...) it's currently displaying. And yes all of these are on the same page

HTML:

<!-- Page A -->
<div>
    <span>Page A</span>
    <input id="page_a_next" name="page_a_next" type="button" value="Next" data-inline="true" />
    <input id="page_a_prev" name="page_a_prev" type="button" value="Previous" data-inline="true" /> 
</div>   
<div id="display_page_a_page" name="display_page_a_page">
</div>
<div id="display_page_a_number" name="display_page_a_number">
</div>

<!-- Page B -->
<div>
    <span>Page B</span>
    <input id="page_b_next" name="page_b_next" type="button" value="Next" data-inline="true" />
    <input id="page_b_prev" name="page_b_prev" type="button" value="Previous" data-inline="true" /> 
</div>   
<div id="display_page_b_page" name="display_page_b_page">
</div>
<div id="display_page_b_number" name="display_page_b_number">
</div>

JS:

var currentPageA=1;
var totalPageA=113;
loadPageA();

$("#page_a_next, #page_a_prev").click(function(){
    currentPageA = ($(this).attr('id')=='page_a_next') ? currentPageA + 1 : currentPageA - 1;

    if(currentPageA<=0) {
        currentPageA=1;                
        $('#page_a_prev').attr('disabled','disabled');
    } else if(currentPageA==114) {
        currentPageA=113;
        $('#page_a_next').attr('disabled','disabled');
    } else {
        loadPageA();
    }                
});

function loadPageA(){
    $('#page_a_next').attr('disabled','disabled');
    $('#page_a_prev').attr('disabled','disabled');

    $.ajax({
        url: 'page_a.php?page='+currentPageA,
        type: 'POST',
        error : function (){ alert('Error'); }, 
        success: function (data) {
            $('#display_page_a_number').html(currentPageA + ' of ' + totalPageA);
            $('#display_page_a_page').html(data);
            $('#page_a_next').attr('disabled','');
            $('#page_a_prev').attr('disabled','');
        }
    });
}

The key here is not just to generalize your JS, but to also generalize your HTML. You must also change your currentPageA and totalPageA variables to array so they can hold more than one value.

See my Demo: http://jsfiddle.net/Jaybles/b2uRd/

HTML

<!-- Page A -->
<div>
    <span>Page A</span>
    <input class='pageButton' id="page_a_next" name="page_a_next" type="button" value="Next" data-inline="true"/>
    <input class='pageButton' id="page_a_prev" name="page_a_prev" type="button" value="Previous" data-inline="true" /> 
</div>   
<div id="display_page_a_page" name="display_page_a_page">
</div>
<div id="display_page_a_number" name="display_page_a_number">
</div>

<!-- Page B -->
<div>
    <span>Page B</span>
    <input class='pageButton' id="page_b_next" name="page_b_next" type="button" value="Next" data-inline="true" />
    <input class='pageButton' id="page_b_prev" name="page_b_prev" type="button" value="Previous" data-inline="true" /> 
</div>   
<div id="display_page_b_page" name="display_page_b_page">
</div>
<div id="display_page_b_number" name="display_page_b_number">
</div>

JS

var currentPage = {'a':1, 'b':1}; //Should go from A to Z
var totalPage = {'a':113, 'b':115}; //Should go from A to Z

$(".pageButton").click(function(){
    var a = $(this).attr('name').split("_");
    var page = a[1];
    var dir = a[2];
    currentPage[page]  = (dir=='next') ? currentPage[page] + 1 : currentPage[page] - 1;

    if(currentPage[page]<=0) {
        currentPage[page]=1;                
        $('#page_' + page + '_prev').attr('disabled','disabled');
    } else if(currentPage[page] > totalPage[page]) {
        currentPage[page]=totalPage[page];
        $('#page_' + page + '_next').attr('disabled','disabled');
    } else {
        loadPage(page);
    }                
});

loadPage('a');

function loadPage(page){
    $('#page_' + page + '_next').attr('disabled','disabled');
    $('#page_' + page + '_prev').attr('disabled','disabled');

    $.ajax({
        url: 'page_' + page + '.php?page='+currentPage[page],
        type: 'POST',
        error : function (){ document.title='error'; }, 
        success: function (data) {
            $('#display_page_' + page + '_number').html(currentPage[page]+ ' of ' + totalPage[page]);
            $('#display_page_' + page + '_page').html(data);
            $('#page_' + page + '_next').attr('disabled','');
            $('#page_' + page + '_prev').attr('disabled','');
        }
    });
}

Maybe you could write your code as a jquery plugin and just pass in the currentPageA and totalPageA variables into the plugin. You can find information on making a jquery plugin here.

I would add classes to your html elements prev, next, page, number. And then create a jQuery plugin.

HTML

<div data-page="a" data-total="113">
    <span>Page A</span>
    <input id="page_a_next" name="page_a_next" type="button" value="Next" data-inline="true" class="next" />
    <input id="page_a_prev" name="page_a_prev" type="button" value="Previous" data-inline="true" class="prev" /> 
</div>
<div id="display_page_a_page" name="display_page_a_page" class="page"></div>
<div id="display_page_a_number" name="display_page_a_number" class="number"></div>

jQuery Plugin

(function($) {
    $.fn.customAjaxPager = function() {
        var state = {
            page = "",
            current = 1,
            total = 0
        };

        return this.each(function() {
            $this = $(this);

            state.page = $this.attr("data-page");
            state.total = $this.attr("data-total");

            $(".next", this).click(next);
            $(".prev", this).click(prev);
        });

        function next() {
            state.current++;
            if (state.current >= state.total) {
                state.current = state.total;
                $(".next", this).attr("disabled", "disabled");
                return;
            }
            load();
        };

        function prev() {
            state.current--;
            if (state.current <= 0) {
                state.current = 0;
                $(".prev", this).attr("disabled", "disabled");
                return;
            }
            load();
        };

        function load() {
            $('.next,.prev').attr('disabled','disabled');
            $.ajax({
                url: 'page_"+ state.page +".php?page='+ state.current,
                type: 'POST',
                error : function (){ alert('Error'); }, 
                success: function (data) {
                    $('.number', this).html(state.current + ' of ' + state.total);
                    $('.page', this).html(data);
                    $('.next,.prev', this).removeAttr('disabled','');
                }
            });
        };
    };

})(jQuery);

Usage

$("div[data-page='a']").customAjaxPager();