2

I'm trying to leave checkboxes checked when ajax returns the content from server but I don't know what is unchecking them or replacing the dom content (reseting them)...

}).done(function(data) {
    if ($( '#search' ).is(':visible'))
        $( '#search' ).hide();

    if ($(this).is(':checkbox')) {
        var new_content = $(data).find( '#scroll-to-list' );
        $( '#scroll-to-list' ).replaceWith( new_content );
    }
    else {
        var new_content = $(data).find( '#search-filters, #scroll-to-list' );
        $( '#results' ).html( new_content );
    }

    $( 'html, body' ).animate({
        scrollTop: $( '#scroll-to-list' ).offset().top
    }, 1000);
});

A search button triggers the on click event and prints the new divs in the dom, hiding the #search div (and the radio buttons, but one of them is still checked). Now appears the #search-filters div and checkboxes, when I check one of them the ajax is called and what prints to the dom is only the second div (containing the search data), but the checkboxes (from #search-filters) are unchecked and I can't figure out what is causing that...

This is the code that handles the checkboxes (before the ajax):

$('body').on('click', '.click, :checkbox, .pag_link', function() {
if ($(this).is(':checkbox')) {
    if ($(this).attr('class') == 'filter1' || $('.filter1').is(':checked')) {
        if ($('.filter1').is(':checked'))
            var type = $(this).val(); // maybe should be an array
        else var type = null;
    } else var type = null;
    if ($(this).attr('class') == 'filter2' || $('.filter2').is(':checked')) {
        if ($('.filter2').is(':checked'))
            var status = $(this).val(); // maybe should be an array
        else var status = null;
    } else var status = null;
    if ($(this).attr('class') == 'filter3' || $('.filter3').is(':checked')) {
        if ($('.filter3').is(':checked'))
            var bhk = $(this).val(); // maybe should be an array
        else var bhk = null;
    } else var bhk = null;
}
else {
    var type = status = bhk = null;
}
Chazy Chaz
  • 1,781
  • 3
  • 29
  • 48
  • Could you post a small snippet that has this problem, please? – Toothbrush Nov 16 '15 at 13:07
  • 1
    You are replacing the DOM of `#scroll-to-list` with the result of the AJAX call, so perhaps the checkboxes are being replaced with new HTML? – Toothbrush Nov 16 '15 at 13:09
  • Bingo, i was about to say the same....:) – Rohit416 Nov 16 '15 at 13:10
  • 1
    and are you sure about `$(this)` in the `done` callback? – Jai Nov 16 '15 at 13:11
  • I don't think so, I said that the checkboxes are inside `#search-filters` and that div is still in the dom untouched (or it should be...). The checkboxes are the filters. – Chazy Chaz Nov 16 '15 at 13:11
  • @ChazyChaz You have as code `else { var new_content = $(data).find( '#search-filters, #scroll-to-list' ); $( '#results' ).html( new_content ); }`. What does `#results` contain? – Toothbrush Nov 16 '15 at 13:13
  • @Toothbrush Yes but that is only if the element that triggered the click and ajax is not a checkbox. The problem here is that when I click/check a checkbox is unchecked and it shouldn't. `#results` it's empty, so that jquery can insert the two divs. – Chazy Chaz Nov 16 '15 at 13:14
  • @ChazyChaz `this` in a callback always refers to the global object (`window` in web browsers), unless the caller changes that. Debug the code and check the value of `this` in the callback. – Toothbrush Nov 16 '15 at 13:18
  • So is that why when I click/check a checkbox it goes to the `else`? The solution is to declare it outside and use if ($(var).is(':checkbox')), right? – Chazy Chaz Nov 16 '15 at 13:20
  • 1
    @ChazyChaz Yes. Read https://stackoverflow.com/a/20279485/3210837 for an excellent explanation. – Toothbrush Nov 16 '15 at 13:21
  • That's really helpful, thanks! – Chazy Chaz Nov 16 '15 at 13:24

0 Answers0