Clever Geek Handbook

Ajax Double Code, how to make it shorter

I hope you can help me, then I have a problem. I have two similar jQuery.Ajax functions, I just want to do it in one function. I really don't know how to do this and I hope you can help me.

Here are my two ajax functions Both functions work fine. This was my first function

//When the page loads it shows the three first ideas

var total = 3;
    var start = 0;
    var filterName = jQuery(".select-name-filter-selector-filterPersones").val();
    var filterStatus = jQuery(".select-status-filter-selector-filterStatus").val();
    var lines = jQuery("#ajouter").val();
    jQuery.ajax({
        type: "POST",
        url : "../scripts/ajaxSuggestions.php",
        data:{limit:total, name:filterName, status:filterStatus,
            start:start,lines:lines},
        success:function(data){
            jQuery("#content").append(data);
        }
    });

And here is my second function. I always click on the button to show more, it adds three ideas.

//click ajax function that add 3 ideas to page
jQuery("#ajouter").click(function (){
        total += 3;
        start += 3;
        jQuery.ajax({
            type: "POST",
            url : "../scripts/ajaxSuggestions.php",
            data:{limit:total, name:filterName, status:filterStatus,
                start:start},
            success:function(data){
                jQuery("#content").append(data);
                if(total >= lines){
                    jQuery("#ajouter").hide();
                }
            }

        });
    });

Hope you can help me and sit down to my bad english. :)

+3


source to share


2 answers


// When the page loads the call

var total = 3;
var start = 0;
getSuggestion(total, start);

// when the button is pressed

jQuery("#ajouter").click(function (){
        total += 3;
        start += 3;
        getSuggestion(total, start);
});


// Function failure

function getSuggestion(total, start)
{
    var filterName = jQuery(".select-name-filter-selector-filterPersones").val();
    var filterStatus = jQuery(".select-status-filter-selector-filterStatus").val();
    var lines = jQuery("#ajouter").val();

      jQuery.ajax({
            type: "POST",
            url : "../scripts/ajaxSuggestions.php",
            data:{limit:total, name:filterName, status:filterStatus,
                start:start},
            success:function(data){
                jQuery("#content").append(data);
                if(total >= lines){
                    jQuery("#ajouter").hide();
                }
            }

        });
}

if below value is not different every time then you can also define it on page load and pass it as a parameter when calling the function

var filterName = jQuery(".select-name-filter-selector-filterPersones").val();
var filterStatus = jQuery(".select-status-filter-selector-filterStatus").val();
var lines = jQuery("#ajouter").val();
+1


source


Create a simple function

function ajaxCall(limit, filterName ,filterStatus ,type)
{
   jQuery.ajax({
            type: "POST",
            url : "../scripts/ajaxSuggestions.php",
            data:{limit:total, name:filterName, status:filterStatus,
                start:start},
            success:function(data){
                jQuery("#content").append(data);
                if(type == 1)
                {   

                   if(total >= lines){
                       jQuery("#ajouter").hide();
                  }
                }else {  jQuery("#content").append(data);
                }
            }

        });
}

Now your call is based on

ajaxCall (limit, filterName, filterStatus, 0)



for the second call

 jQuery("#ajouter").click(function (){
         total += 3;
         start += 3;
        ajaxCall (limit,filterName,filterStatus,1)
     });

for the former or you can write your own logic

+1


source






More articles:


All Articles