views:

61

answers:

2

Hi There,

I ahave some ajax that is fired when a checkbox is clicked, it essentially sends a query string to a PHP script and then returns the relevant HTML, however, if I select a select it works fine if I then slect another checkbox as well as the previous I get no activity what so ever, not even any errors in firebug, it is very curious, does anyone have any ideas?

//Location AJAX
//var dataObject = new Object();
var selected = new Array();
//alert(selected);
$('#areas input.radio').change(function(){ // will trigger when the checked status changes
    var checked = $(this).attr("checked"); // will return "checked" or false I think.
    // Do whatever request you like with the checked status
    if(checked == true) {
        //selected.join('&');
        selected = $('input:checked').map(function() {
            return $(this).attr('name')+"="+$(this).val();
        }).get();

            getQuery = selected.join('&')+"&location_submit=Next";
            alert(getQuery);
            $.ajax({
                type:"POST",
                url:"/search/location",
                data: getQuery,
                success:function(data){
                    //alert(getQuery);
                    //console.log(data);
                    $('body.secEmp').html(data);
                }
            });
    } else {
        //do something to remove the content here
        alert($(this).attr('name'));
    }
});
+3  A: 

I see you are using the variable checked = $(this).attr("checked"); I think this might be a problem because checked is a standard JS attribute native to JS. You can compare checked normally on an element and see if it is true or false. I would start by changing the name of your variable and move on from there.

The other thing that could be happening is you might be losing your listener which might be caused by your variable selected. You do not need to declare selected outside your listener. Just declare it inside when you set it.

And if THAT doesn't help, providing some markup would help debug this issue because it seems like there is a lot going on here.

Good luck.

Calvin
A: 

I turned out that because my ajax loads in a new page on success the actions were not being put on the elements as they were only being loaded once on DOM ready, I moved the all the script into a function and call that on DOM Ready now and it works great.

sea_1987