Return value from PHP through JSON/Ajax

Im working on a PHP CMS at the moment and am caught between a rock and hard place, those being CSS and AJAX. The issue that I'm trying to figure out is how to get AJAX/JSON and PHP to return values which can be populated into a form.

On one of my pages I have a form with a select list. When the user selects an option from the list the AJAX script requests a response from a PHP file which outputs results back to the browser. This is working fine.

However Jquery/CSS wont style specific elements such as checkboxes in the returned results.

What I would like to do instead is to present the user with a form with a select menu at the top and empty input fields beneath. When they select an option from the menu the form fields beneath are populated with the return data. The form itself is comprised of text fields, text-areas and select lists, and I would like to have each of them update their values to match the corresponding return data.

Firstly...is this possible?

Secondly...if its, c开发者_开发百科ould you point me in the right direction as to the pro-grammatical flow, or an example script that I can study.

Thanks in advance.

Yep, possible and not horribly difficult to implement. Let's say your HTML looks something like this (this is obviously ugly ;)):

<select id="update">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>    
</select>
<form action="#" method="POST">
    <label for="txt">Text:</label><input type="text" id="txt"/><br/>
    <label for="sel">Select:</label><select id="sel"></select><br/>
    <label for="txta">TextArea:</label><textarea id="txta"></textarea><br/>
</form>

You could write up a quick jQuery ajax request that populates form data on success response, something like this:

$(document).ready(function(){
    $('#update').change(function(){
        $.ajax({
            url: '/echo/json/',
            dataType: 'json',
            type: 'POST',
            data: {
                'json': $('#update').val()
                  },
            success: function(data){
                $('#txt').val(data);
                $('#sel option').remove();
                $('#sel').append($('<option></option>').attr('value', data).text(data));
                $('#txta').val(data);
            }
        });
    });
});

Fiddle here

Note that your script will be dependent on the element that you're pushing data into (like the differences between input text, textarea and select in the sample).

Solutions is simple:

1. store all the onload/domready functionality in a new function (pimpHTML or something).
2. run it onload/ondomready > checkboxes etc styled
3. run it after every dom change (semi-automatically)

.3. is not so hard. Just create a function setHtml(obj, html) (or something) that inserts the response HTML into a node and then redoes pimpHTML

prep:

function pimpHTML() {
  // checkboxes
  // radiobuttons
  // ajax links
  // etc
}
$(pimpHTML); // or $(documemt).ready(pimpHTML);
function setHtml(obj, html) {
  obj.html(html);
  pimpHTML();
}

semi-inline:

var obj = ...; // form or messagebox or something
$.post('/', function(rsp) {
  setHtml(obj, rsp);
});

Obviously it's not done like this and you'll have to improve and specify it yourself.