Auto reload a `DIV` after checkbox form change

Question

I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.

I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.

Below is what I have written so far

$(document).ready(function() {
$("input:checkbox").change( function() {

$.ajax({
       type: "POST",
       url: "index.php?action=resortFilter",
       data: $("#locationFilter").serialize(),
       success: function(data) {
           $('.resorts').html(data);
       }
     });
})

});

What do I need to do to get the div to reload after the request has been made?

I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.

score 1 · Accepted Answer · answered Oct 10 '13 at 15:59

What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:

$(document).ready(function() {
    $("input:checkbox").change( function() {

    var url = "path/to/your/script.php"; // the script where you handle the form input.

    $.ajax({
           type: "POST",
           url: url,
           data: $("#locationFilter").serialize(), // serializes the form's elements.
           success: function(data)
           {
               $('.resorts').html(data);
           }
         });
    })
});

Source: jQuery AJAX submit form

edited May 23 '17 at 12:10

Community

1
1

answered Oct 09 '13 at 11:38

Kousha

973
8
17

The script in in the `` element of the page. I handle all the processing with `class` methods, which only return the data array. If I use the method above, while it does work, it loads the whole page inside the `
`
– user1711576 Oct 09 '13 at 11:51
I can not understand what is your problem. I've answered your question you asked, I can not predict your problems when you have not mentioned them. – Kousha Oct 09 '13 at 11:54
You need to change your server-side codes and it's not jQuery problem at all. You need to read more about Ajax requests and Ajax server-side properties. – Kousha Oct 09 '13 at 11:57
I appreciate your help however question was aimed at how to refresh a `div` rather than submit a form. I was just trying to give context to what I am trying to achieve – user1711576 Oct 09 '13 at 12:12

score 0 · Answer 3 · answered Oct 09 '13 at 11:41

0

this sample loading code maybe help you

<div id="loadhere"></div>

$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});

answered Oct 09 '13 at 11:41

Pooya Estakhri

850
9
23

Auto reload a `DIV` after checkbox form change

3 Answers3