Using AJAX and Jquery without a form

Question

I have used JQuery with Ajax successfully before, but only for form elements (using GET and POST). I am trying to figure out how to do use Jquery and AJAX for non-form elements. I have a list like this:

item1
item2

When the user clicks on an item, I need it to hit the server and write the item number in the database without it refreshing the page.

Can someone pleasehelp me?

Edit: Using PHP

Here is the code I am working with but don't know how to use properly:

$(document).ready(function(){
$("#rating_toggle").click(function() {
    $.ajax({
        type: "POST",
        url: "rating/test",
        data: "????????",
        success: function(data){
            alert(data);
        }
    });
    return false;
});

});

You have to use the $.ajax() method, but really it's hard to help you without knowing what server language you are using. — Hoffmann
– Hoffmann, Commented Nov 21, 2012 at 16:12
the data you send depends on how the server side language expects it. jquery will serialize an object for you when you use ajax, so just create an object for data, get the values you want from your markup, and proceed as usual. — thescientist
– thescientist, Commented Nov 21, 2012 at 16:16
it's all going to be in POST, just like a form would be. It's all just key/value pairs sent via a query string URL. — thescientist
– thescientist, Commented Nov 21, 2012 at 16:17

Sushanth -- · Accepted Answer · 2012-11-21 16:13:04Z

3

You can still send in a ajax request clicking elements which are non form elements..

Remove the return false from your Request .. That is not required..

$('li').on('click', function(){

    $.ajax({
            url : 'rating/test',
            type : 'POST',
            dataType : 'json',
            data : { your data},
            success :  function(result){
                alert('Inserted into database')
             },
             error : function(xhr,text ,error){
                alert('Error occured !!')
             }
           });

});

answered Nov 21, 2012 at 16:13

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

7 Comments

steeped Over a year ago

What does beside "data"? And how do I call the data within the PHp file?

Sushanth -- Over a year ago

You can use $_POST["variable"] to get the data of that particular variable

steeped Over a year ago

Sorry - what goes beside data? Do I throw the ID of the list item?

Sushanth -- Over a year ago

It depends on what you want to send.. If you just want to send in the id of the item you can do that or extra parameters .. data : { 'id' : this.id , 'param2' : 'param2'}

steeped Over a year ago

So for data, this is what I am passing: data : { 'item' : selectListItem} and in the php, I am doing echo $_POST['item']; but the data isnt being passed back into the javascript alert

|

Billy Moon · Accepted Answer · 2012-11-21 16:14:57Z

0

This is how I would do it...

use $(selector).on('click', function(){ ... }) to bind an event to be triggered by clicking your list items
use $(this).index() to get the index of the item in relation to it's siblings (from within the bound click function)
use $.post(url,data,success_callback) to send the data to the server, where url is a simple url string, data is a javascript object built from the data you want to send, and success_callback is a function run after the server side sends confirmation of receipt/processing.

On the server, php will receive a request, with a bunch of $_POST data, which matches up to the keys of the data object sent in the ajax request.

answered Nov 21, 2012 at 16:14

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

Comments

Robert E. McIntosh · Accepted Answer · 2012-11-21 16:17:15Z

0

I wrote this quick little snippet

$(function() {
    $('ul li').click(function() {
        var selectListItem = $(this).text();
        $.ajax({
            type: "POST",
            url: "yourserverpage.php",
            data: { selectedItem: selectListItem },
            success: function(returnData) { alert('Saved '+selectListItem+' and returned '+ returnData); }
        });
    });
});

answered Nov 21, 2012 at 16:17

Robert E. McIntosh

6,2355 gold badges31 silver badges40 bronze badges

Collectives™ on Stack Overflow

Using AJAX and Jquery without a form

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