JQuery to PHP function and back Ajaxed

Question

Hi all, i have a set of php function that i want to call on different events mostly onclick with jquery async (ajax). The first function is called on load

      $(document).ready(function()
        {
            $("#div2").hide('slow');
            $("#div1").empty().html('<img src="ajax-loader.gif" />');
            $.ajax(
            {
                type: "POST",
                url: "WebFunctions.php",
                data: {'func':'1'},
                success: function(html)
                {
                    $("#div1").show('slow').html(html)
                }
            });

The Data: {'func':'1'} --> is a switch statement on the php side

switch($_POST['func'])
{
  case '1':
    getParents();
    break;
  case '2':
    getChilds(params);
    break;
  case '3':
    getChildObjects(params);
    break;
  default:
}

"This functions are calls to a soap server" <-- irrelevant.

So when that function finishes i get an array which contains IDs and Names. I echo the names but i want the ID for reference so when i click on the echoed name i can call an other php function with parameter the ID of the name...

How do i get rid of the switch statement?? How do i call properly php functions and pass params to it??? How can i save this IDs so when i click on an item with that id an other php function is called??

Plz feel free to ask any question, any answer is welcome :)

``````````````````````````````EDIT``````````````````````````````````````````

$(document).ready(function()
    {
        $("#div2").hide('slow');
        $("#div1").empty().html('<img src="ajax-loader.gif" />');
        $.ajax(
        {
            type: 'post',
            async: true,
            url: "Parents.php",
            data: {'id' : 12200},
            dataType: "json",
            cache: false,
            success: function(json_data)
            {
                $("#div1").empty();
                $.each(json_data, function(key, value)
                {
                    $("#div1").append('<p class="node"><b>['+key+']</b> => '+value+'</p>');
                    $(this).data('id', key);
                });
            }
        });
        $("p.node").click(function()
        {
            var id = $(this).data('id');
            alert('The ID is: ' + id);
        });
    });

I got json communication working but my problem is the data stuff, when i click on a node the id is undefined... it gets printed but when i click on it oupsss.. so the problem is how can i properly attach the ID to each corresponding

..

.

Answer 1

You can avoid the switch statement by using an MVC framework that routes your request to the proper function. For example, using CodeIgniter REST Server, you might have the following URL's to your functions:

• http://myserver/my_api/parents
• http://myserver/my_api/children
• http://myserver/my_api/childObjects

You can then POST the parameters along with each AJAX request.

You would probably also want to return the ID you pass as part of the response, so it will be available when you make a request for the next function.

Answer 2

One solution for managing your ID's would be to encode your data as JSON. This will allow you to pass the whole PHP array to Javascript, and have it natively understand and read the ID's and Names.

To encode your PHP array as JSON, try this:

echo json_encode($my_array);

(You'll need PHP 5.2+ for this to work)

This will print out JSON data when the page is requested. Next, in your JavaScript add a "dataType" argument to your Ajax function call. Something like this:

// Get JSON Data and Save
$.ajax({
    type: "POST",
    url: "WebFunctions.php",
    data: {'func':'1'},
    dataType: "json",
    success: function(json_data)    {
        $("#div1").data(json_data);
    }
});

// Display the ID when clicked
$("#div1").click(function(){    
    var id = $(this).data('id');
    alert('The ID is: ' + id);
});

This tells the Ajax function to expect JSON back.

When the success function is called you can access the "json_data" variable and find all the ID's and Names just as you had them in PHP. You'd then need to write some code to appropriately save those ID's and Names. They can then be used later on (ie. when you click on the button etc).

EDIT: I've updated the code above. The JSON data is now associated with the HTML element "#div1", so you can refer back to it in the future. I've also added a simple click event. Whenever the element is clicked, it's ID will be displayed.