Normal AJAX to jquery conversion

Question

function func1(a,b) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}

xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   document.getElementById("test").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","includes/funkcije.php?min="+a+"&max="+b,true);
xmlhttp.send();

I have tried to make something but it doesn't work. It just puts me at the top of the page

$('#page-01').ajax({
type: "GET",
url: "includes/funkcije.php",
data: "min=0&max=10",
success: function(data) {
    $('#test').text(data);
}
})
$('#page-02').ajax({
url: "includes/funkcije.php",
data: "min=10&max=20",
success: function(data) {
    $('#test').text(data);
}
})

these are the links that I press to execute func1

<li><a id="page-01" href="javascript:func1(0,10)">1</a></li>
<li><a id="page-02" href="javascript:func1(10,20)">2</a></li>

This is made to list pages of posts on my site Tristann.tk. Can someone please help me with this or tell me a better way to make those pages?

I fixed it with this code:

$(document).ready(function(){
$('#page-01').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=0&max=10",
        success: function(data) {
            $('#test').html(data);
        }
    });
});

$('#page-02').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=10&max=20",
        success: function(data) {
            $('#test').html(data);
        }
    });
});
});

and the links are like this:

<a id="page-01" href="javascript:void(0)">1</a>
<a id="page-02" href="javascript:void(0)">2</a>

$.ajax is a function directly on the jquery object, you can't really use with an element, what you need is a click function and then run the ajax inside that click function. Read the manual. — adeneo
– adeneo, Commented Oct 28, 2012 at 20:28
look at the API docs and examples... there is no element selector for $.ajax api.jquery.com/jQuery.ajax — charlietfl
– charlietfl, Commented Oct 28, 2012 at 20:28

jacktheripper · Accepted Answer · 2012-10-28 23:25:37Z

1

Try

$('#page-01').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=0&max=10",
        success: function(data) {
            $('#test').text(data);
        }
    });
});

$('#page-02').on('click', function () {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=10&max=20",
        success: function(data) {
            $('#test').text(data);
        }
    });
});

You cannot call the ajax function on a jQuery object - you can only target objects in the success function. Look at the jQuery documentation.

EDIT

HTML:

<li><a id="page-01" href="javascript:func1(0,10)">1</a></li>
<li><a id="page-02" href="javascript:func1(10,20)">2</a></li>

Javascript:

var func1 = function(min, max) {
    $.ajax({
        type: "GET",
        url: "includes/funkcije.php",
        data: "min=" + min + "&max=" + max,
        success: function(data) {
            $('#test').text(data);
        }
    });        
}

edited Oct 28, 2012 at 23:25

answered Oct 28, 2012 at 20:28

jacktheripper

14.3k12 gold badges62 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Tristan Šneider Over a year ago

but I need it to execute when I click on #page-## and write to #test.

Tristan Šneider Over a year ago

hmm.. It doesn't seem to pass the parameters, because when I click on 1 or 2 the data with default parameters are displayed.

Tristan Šneider Over a year ago

I think there is something wrong with my anchors cause the href is empty. Is maybe that it?

Tristan Šneider Over a year ago

okey I fixed this made the href="javascript:void(0)" but it doesn't update the content

jacktheripper Over a year ago

I need to see your HTML, but sounds like you want to use e.preventDefault

|

case1352 · Accepted Answer · 2012-10-28 20:28:24Z

1

look into jquery load and get

$('#test').load("includes/funkcije.php?min=0&max=10");

answered Oct 28, 2012 at 20:28

case1352

1,1261 gold badge13 silver badges22 bronze badges

Comments

Emil A. · Accepted Answer · 2012-10-28 20:48:34Z

You might want to do something like this, you can use $.ajax instead of the getData function.

function getData(dest, param) {

  var XMLHttpRequestObject = false;

  if(window.XMLHttpRequest) {
    XMLHttpRequestObject = new XMLHttpRequest();
  } else if(window.ActiveXObject) {
    XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
  }

  if(XMLHttpRequestObject) {

    var div = document.getElementById(dest);

    XMLHttpRequestObject.open("GET", "includes/funkcije.php?" + param);

    XMLHttpRequestObject.onreadystatechange = function() {

      if(XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {

        div.innerHTML = XMLHttpRequestObject.responseText;
        XMLHttpRequestObject.delete;
        XMLHttpRequestObject = false;

      }
    }
    XMLHttpRequestObject.send(null);
  }
}

$("#page-01").click(getData("#test", "min=0&max=10"));
$("#page-02").click(getData("#test", "min=0&max=20"));

Collectives™ on Stack Overflow

Normal AJAX to jquery conversion

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related