CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Blaze Tama
Blaze Tama

Reputation: 10948

use the same AJAX function two times

Im beginner in AJAX & JS so please bear with me.

I have an AJAX that will work in 2 events :

  1. When the page loaded
  2. When a button clicked

This AJAX have an url with some variables for pagination :

url: "http://localhost/myurl/" + keyword + "/" + limit + "/" + offset

This AJAX is working fine when the page loaded, but i dont know how to call/use it again when the user click the button.

And i put the .click function in the AJAX it self, so basically i need to recall the parent. This is a code to show you what i want to do :

$.ajax({
        url: "example" + limit + offset
        type: "GET",
        error : function(jq, st, err) {
            alert(st + " : " + err);
        },
        success: function(result){
        $("#btnLoad").click(function(){
                    //recall this AJAX again here
                                            offset = (page - 1) * limit;
                    page++;
                });
        }
        });

I know copy-paste the code might work, but i dont want to do that because the AJAX is pretty long.

Any help is appreciated, Thanks :D

Upvotes: 1

Views: 2400

Answers (7)

HIRA THAKUR
HIRA THAKUR

Reputation: 17757

Note:this will be inside the $(document).ready()

your ajax on click:

$("#my_btn").on("click",my_click_ajax)

        function my_click_ajax(){
                $.ajax({
                 type: 'POST',
                 url: 'your_url',
                 data: {a:some_value},
                 success: function(data) {
                        alert(data)
                 }
             });
            }

your onload ajax:

Note:this will be outside the $(document).ready()

window.onload=my_onload_ajax();
    function my_onload_ajax(){
         $.ajax({
                     type: 'POST',
                     url: 'your_url',
                     data: {a:some_value},
                     success: function(data) {
                            alert(data)
                     }
                 });
    }

Upvotes: 2

Matthias Knoll
Matthias Knoll

Reputation: 99

You can abstract the AJAX call out. Like this:

$(document).ready(function(){
  //this is called when the page is loaded

  //variable that hold your offset and limit in the scope of the this function
  var limit = 10,
      offset = 0,
      page = 1;

  function ajaxCall(){
    $.ajax({
        url: "example" + limit + offset
        type: "GET",
        error : function(jq, st, err) {
            alert(st + " : " + err);
        },
        success: function(result){
          offset = (page - 1) * limit;
          page++;
        });
  };

  //register event for click on button
  $("#btnLoad").on('click', ajaxCall);


  //do the initial ajax call
  ajaxCall();

});

This is not a perfect solution but should get you closer to where you want to be. Things to consider here are:

  • what happens when a user clicks the button a second time before the success callback has updated the offset and page?

Upvotes: 3

Roo
Roo

Reputation: 427

As I understand, you want to the ajax to fire when the user clicks a button. It would be better if you create a function outside of the ajax call. Then call that function when it is successful.

div id="callAjaxRequestButton">Ajax Request</div>

$( "#callAjaxRequestButton" ).click(function() {  
                $.ajax({
                 type: 'POST',
                 url: "http://localhost/myurl/" + keyword + "/" + limit + "/" + offset,
                 data: {a:some_value},
              success: function(data) {
                    console.log(data)
              }
             });
);
});

Upvotes: 1

Matthijs
Matthijs

Reputation: 568

Like Shivan said: create a function and call it when the page loads and when something is clicked. Like this:

$(function(){
    MyAJAXFunction();
    $(".button").click(function(){
        MyAJAXFunction();
    });
});

function MyAJAXFunction() {
    // AJAX call here
}

Upvotes: 1

YD1m
YD1m

Reputation: 5905

You can extract your ajax call in method:

// here you should to define 'limit' and 'offset' variables with init values
$("#btnLoad").on('click', method); 

var method = function() {
    $.ajax({
        url: "example" + limit + offset
        type: "GET",
        ....
    });
}

method(); // call method on page load

Upvotes: 2

wusuopubupt
wusuopubupt

Reputation: 64

put your .ajax file into $(document).ready() like this:

$(document).ready(function(){
   $('#yourid').click(function(){
   //some code here...
});
});

Upvotes: 1

adeneo
adeneo

Reputation: 318362

Add it in the event handler, and trigger the event on pageload:

$("#btnLoad").on('click', function() {
    $.ajax({
        url: "example" + limit + offset
        type: "GET",
        ....
    });
}).trigger('click');

Upvotes: 7

Related Questions