0

I have the form with text area.In the text area user can enter keywords per line.

enter image description here

I want to do like this. After click the button send ajax request to the server and get result of the first keyword.Then display/append it.After that finished send second ajax request for 2nd keyword.Like this for per each keyword.

I want to do this because of server response is little slow per keyword.If display all keyword output at once that is getting too many time to see the result. So in above method I think user no need to wait for see the all results.User can see one by one keyword output.

My code is like this and I'm using this in the wordpress plugin.Get result as json.

jQuery(document).ready(function () {

 jQuery('#get_seo_rank').click(function() {  

    var keywordLines = jQuery('#keywords').val().split(/\n/); 
    var current = 0;
    var total = keywordLines.length;


    for (var i=0; i < total; i++) {
            jQuery.ajax({
              type : "post",
              dataType : "json",
              url : process.php,
              data : {
                        action: "get_rank", 
                        keywords: keywordLines[i]
                    },

                  beforeSend:function(){

                  },
                  success:function(response){

                        if(response.type == "success") {
                           jQuery("#resultWrap").append(response.result);
                        }
                        else if(response.type == "error") {
                           jQuery("#resultWrap").html(response.result);

                        } else {
                             jQuery("#resultWrap").html(response.result);
                        }

                  },
                  error:function(response){

                  }


           }); 

    }  // end loop


}); // end click event

});

If anyone can help regarding this that would really appreciate.

Thank you very much !

Sumith Harshan
  • 6,325
  • 2
  • 36
  • 35
  • 1
    Try using nested ajax calls this will be helpful:- [link](http://stackoverflow.com/a/22233745/3190165). You are simultaneously calling 3 ajax call you have to wait for success of one ajax then call the other ajax call. – Gaurav Kalyan Nov 29 '14 at 07:11
  • Thank you for the reply.If number of keywords are dynamic then how do we execute function per keyword without hard coding functions. Thank you again ! – Sumith Harshan Nov 29 '14 at 11:33

1 Answers1

1

Create a nested ajax call function for dynamic keyword:-

  1. Store all the keywords in array, let suppose keyword_list and store var key_length = keyword_list.length

  2. Then use an iterative function to call the list:-

    function nestedAjaxCalls(array1 , length1){ //terminating codition if (length1 == 0){ return;} else{ $.ajax({ .... data:{action: "get_rank",keywords: keywordLines[array1.length - length1]}, success:function(response){ ... nestedAjaxCalls(array1,length1 -1); } }); } }

  3. When the event is triggered call this function nestedAjaxCalls(keyword_list, key_length)

Gaurav Kalyan
  • 1,897
  • 2
  • 14
  • 21
  • Thank you so much! you saved my time.It's worked perfectly. It is always sending 1 request more.That's bcz of empty array keyword value.I have checked it by if( typeof (array1[array1.length - length1]) !== 'undefined' ) { } then worked fine.Thanks again for your great answer.Accepted the answer and voted ! – Sumith Harshan Nov 29 '14 at 12:48
  • 1
    Your welcome, It is always feel great to help someone. Stackoverflow community has helped me so much in my projects, I am just returning the favor. – Gaurav Kalyan Nov 29 '14 at 13:02