using a value retrieved by jQuery in calling a php function

Question

Through use of jQuery I arrive at a number (id of a specific widget on my page). The variable that holds this number is active_widget_id.

What I need to do is:

• make use of this number as in the following:

<?php $toggleImage = $text_widgets[active_widget_id]['toggle']; ?>

• get the resulting $toggleImage value (it is the name of a file, like 'big-widget-header.gif')

• And display the image in a div (say #toggleHolder) on the page.

The trouble is with a) the jQuery needing to run at document.ready to get the number, b) and once I am able to construct "$text_widgets[active_widget_id]['toggle'];", not being able to run the php code (wrapping it with php echo tags doesn't work, it just lists the above, not its result.)

I am more of a designer and I am trying to go with appends, prepends, html() and such but I suspect I should look at an ajax type of solution.

Any pointers appreciated...

Answer 1

You can't really mix client side and server side like you're trying to do here. What you need to be doing if you want to get data from the server while on the client side is run some $.post/$.ajax/$.get calls and then perform your DOM modifications in the callback functions.

(very crude) Example:

$.post('example.com/yourService', data, yourCallbackFunction, 'json');

function yourCallbackFunction(data) {
    $('.yourClass img').attr('src', data.imageSrc);
}

Answer 2

Basically you need to have the page execute again via an ajax call (which you can do through jQuery).

The sequence would be something like:

1. execute PHP code
2. page loads
3. run current jQuery code
4. use jQuery to make an ajax request passing parameter from (3) as GET or POST data
5. (request asks PHP to compute some data, PHP returns a value)
6. parse response from jQuery ajax request in (5)
7. use jQuery to update the div and display the result from (6)